【自主制作】はちみつカフェホームページ


製作期間3日間(トップページのみ)
使用したツールPhotoshop(ロゴ作成・写真加工)/WordPress
依頼内容自主制作
要件定義
  • 制作目的
    • カフェのリニューアルホームページ ※数年前に実際に営業していたカフェのホームページを、「もし今リニューアルするとしたら?」の視点で制作してみたものになります。
  • ターゲット
    • 20代~40代女性
    • 普段カフェの利用をよくしている
    • 友人とのお茶会のほか、一人でも過ごせる落ち着いた場所を探している
  • トンマナ
    • 明るい店内でゆっくり過ごしていただけるようなイメージ
    • カフェの雰囲気がわかる
    • はちみつカラーを使う

情報を簡潔にまとめたシングルページ

ターゲットであるカフェ利用者に、お店の全体像を短時間で知ってもらうため、情報を簡潔にまとめたシングルページ構成を採用しました。「ABOUT」や「MENU」など、訪問者が必要とする情報をシンプルに配置することで、スクロールするだけで直感的にお店の雰囲気が掴めるよう設計しています。情報負担をかけず、スムーズに魅力を伝えることを意識しました。

アクセシビリティへの配慮

訪問者がストレスなく情報を得られるよう、読みやすさを考慮してフォントサイズを調整しました。また、色のコントラストを適切に確保することで視認性を高めています。ボタンやリンクも、どこをクリックすれば良いかがすぐに分かるようにデザインし、訪問者が迷わず操作できる、アクセシビリティに配慮した設計を心がけました。

メニューの視覚的な強調

サイトの中で最も訪問者の関心が高い「MENU」セクションは、六角形のハニカムデザインを採用し、視覚的なフック(引っかかり)を作りました。料理の美味しさが伝わるよう、写真の配置や見せ方を工夫しています。このセクションがサイト全体で最も印象に残り、訪問者に「このカフェに行ってみたい」と感じてもらえるようなデザインを目指しました。


ブランドと結びつくナチュラルな色合い

「はちみつカフェ」のテーマと調和するよう、全体的に柔らかいイエローとホワイトを基調に配色しました。この色合いが自然で落ち着いた印象を与え、ターゲットが求める「カフェでのリラックスした雰囲気」を視覚的に伝えています。木材や緑のインテリア写真とも組み合わせ、ブランドとしての温かみや親しみやすさを表現しました。

視覚的にリズムを持たせたレイアウト

サイト全体に視覚的なリズム感を持たせるため、六角形やハニカム構造をデザインのアクセントとして効果的に使用しました。セクションごとにレイアウトに変化をつけることで、訪問者がスクロールする楽しさを演出しています。「SEAT」や「MENU」など、セクションごとに異なるデザインを採用し、単調にならず飽きさせない設計を工夫しました。

テーマ性を高めるビジュアルの工夫

はちみつのテーマに沿って、全体を柔らかく温かみのあるデザインで統一しました。特にファーストビューのメイン画像には、ブランドを強く印象付けるはちみつのビジュアルを選定し、訪問者の興味を引きつけます。また、蜂のキャラクターやイラストを適宜配置することで、サイト全体の楽しさと親しみやすさを加え、ブランドイメージを補強しています。

この記事が気に入ったら
フォローしてね!

よかったらシェアしていただけると嬉しいです!
  • URLをコピーしました!
目次