Facebook カフェHP
Logo

カフェHP

クレジット
Avatar
WEBデザイナー
カフェHP-1
シェア
制作ノート
カフェ「ZERO CAFE」公式サイト(トップページ)

デザインスクールの課題でカフェのHPのデザインを作成しました。

  • 使用ツール: Photoshop(デザイン)、(※もしコーディングもした場合はここに追記)
  • 担当範囲: サイト全体の情報設計、ワイヤーフレーム作成、ビジュアルデザイン

【コンセプト】

「こだわり抜いたコーヒーと手作りサンドウィッチで、日常に小さな休息を」 ひとりでふらっと立ち寄りたくなるような、アットホームで温かみのある世界観をWeb上で表現しました。

【デザインの意図】

  • ビジュアル設計と素材の活用 メインビジュアルには、ウッド調の背景と真上から撮影したシズル感のある料理写真を大胆に配置。チョークアート風のあしらいを加えることで、カフェの店頭ボードを眺めているような親しみやすさを演出しました。
  • 回遊性を高めるレイアウト Webサイトとして重要な「ナビゲーション」の分かりやすさを重視。サイドバーにはブログ記事やSNSへのリンク、店舗情報を固定し、ユーザーが知りたい情報へスムーズにアクセスできる構成にしました。
  • 情報のグルーピング(Point 01〜03) 「お店について」「コーヒー」「サンドウィッチ」という3つの核となる情報をカード型に整理。手書き風の囲み線や星のモチーフを散りばめつつも、文章の読みやすさを損なわないようフォントサイズや行間に配慮しました。
シェア
sawa yoshiokaの他の作品
画像
作品を見る
カフェデザイン
画像
作品を見る
新春初売りバナー
foriio

あなたのforiioを無料で作成

fori.io/
カフェHP-1
sawa yoshiokaの他の作品
画像
作品を見る
カフェデザイン
画像
作品を見る
新春初売りバナー
foriio

あなたのforiioを無料で作成

fori.io/