帽子の製造販売会社「Le Monde（架空）」コーポレートサイト

デザインポイント

• 情報設計

  「商品を紹介すること」が目的のため、最初のほうに、帽子に対するこだわりや実際の商品の写真を配置し、下部にお知らせやお問い合わせなどの事務的な項目を配置しました。
  また、以前からInstagramで情報発信をしていたため、サイト内でもInstagram欄を設置して、実際の投稿内容が確認できるようにしました。

• デザイン

  上品でこだわりのあるイメージを表現するため、全体的に四角いデザインにし、明朝体を使用しました。一方で、より多くの人に商品を知ってもらいたいため、かたい印象になりすぎないように、ボタンやファーストビューの写真は丸みを持たせました。
  また、セクションごとに背景色を切り替えることで、自分が今どの項目を見ているのかをわかりやすくました。
  配色は、会社名の「Le Monde(ル・モンド)」が意味する「宇宙」や「世界」を象徴するネイビーと、老若男女を問わない客層から「どんな人にも染まりやすい」という意味を込めてホワイトカラーの2色を選びました。

• フォント

  • EB Garamond
  • Noto Serif JP

• 配色

  

• ポイント①

  見る人の興味を引くファーストビュー

  ファーストビューでは、商品の雰囲気を一目で伝えられるよう、 左側に品質にこだわっている旨のテキスト、中央に帽子のイメージ写真のスライドショーを組み込みました。
  最初に目に入る部分のため、要素を不規則に配置したり、中央の写真をふわふわと回転したりすることで、見た人の興味を引くデザインを意識しました。

  

• ポイント②

  Instagramの投稿をモーダル表示

  以前からInstagramで情報発信をしていたとのことだったので、サイトからも投稿した内容を見ることができるようにしました。
  実際のInstagramに似せて写真をグリッドで配置し、写真をクリックするとその投稿がモーダルで表示されるようにしました。

  • Instagram欄（最初の表示）
  • Instagramの投稿をモーダル表示