Summary
Project Type:
コーポレートサイト
Launch Date:
化学品専門商社のコーポレートサイト。Astro+TailwindCSSで構築し、高速表示を実現。深みのあるネイビーを基調に、ティールのアクセントカラーを効かせたB2B向けの洗練されたデザインに仕上げた。
※実際のクライアント案件のコンテンツを改変したデモサイトとして制作しました。
Tasks Tasks
技術コンサルタント, ブランディング, レスポンシブ, サイトマップ設計, SEO, コピーライティング
Technologies Technologies
TypeScript, Astro, Tailwind CSS v4
Colors Colors
#2b2f6c
#6a6d98
#b0b4d4
#0a7b6e
Top Page Top Page
フルスクリーンの写真ヒーローにキャッチフレーズを重ねたファーストビューが特徴。スクロールに従い、会社概要と6つの統計データ・取扱品目カード・SDGsセクション・新着情報・お問い合わせCTAへと続く縦長の構成。各セクションはアニメーションするマーキーテキストをアクセントに配置してページに動きを加えた。お問い合わせCTAは「電話」と「フォームを開く」の2択カード型とし、フォームボタンにはティールカラーを採用してCTAとしての視認性を高めた。
About Page About Page
企業理念・会社概要・沿革・グループ会社・SDGsへの取り組みの5セクション構成。ブランドの統一感を保ちながら各セクションへの導線を明確化した。SDGsセクションでは関連する6つの国連SDGsオフィシャルロゴを掲載した。
Services Page Services Page
6カテゴリの取扱品目をヒーローカード形式でジャンプナビとして並べ、各カテゴリセクションへワンクリックでアクセスできる設計。各カテゴリは連番・英語サブタイトル・日本語見出し・説明文・品目リストで構成し、スペック感のある情報量を確保しつつ整理整頓されたレイアウトを実現。ヒーロー内テキストをカードの左端に揃えることで、テキストとカードの視覚的なつながりも意識した。
