Gallery Cafeのホームページ【自主制作】

器ギャラリーを併設したカフェ「うつわ蒼」のWebサイトを制作しました。手仕事の器を紹介するギャラリーページと、カフェメニューページを1つのサイトに統合し、器とカフェ体験が地続きに感じられる構成を意識しました。PC幅1440px／スマホ幅430pxに対応したレスポンシブデザインです。

■ ビジュアルイメージ

「日常に、ささやかな美しさを。」というコンセプトのもと、木の質感とやわらかな自然光を活かした、静かで落ち着いた雰囲気を表現しました。深い藍色の器をアクセントに配置することで、和の佇まいの中にも洗練された印象を加えています。

■ カラー設計

背景は温かみのあるベージュと、淡いミントグリーンのグラデーションを基調とし、清潔感と柔らかさを両立しました。店名「蒼」にちなんだ深い藍色は器そのものの色としてキーカラーに位置づけ、写真の中で自然に存在感を放つよう配置しています。

■タイポグラフィ

「Gallery Cafe」「Information」「Gallery」「Cafe Menu」「Access」などの見出しには英字のセリフ体を用い、上品で静かな印象を演出しました。作品紹介文やMENUの品名・価格・説明文にはゴシック体を採用し、視認性と読みやすさを優先。一方で本文の解説文には明朝系の書体を選び、器づくりの手仕事感や温かみを表現するなど、要素ごとに書体を使い分けることで情報の伝わりやすさとブランドの雰囲気を両立させました。

■ 情報設計

ヘッダーはHome／Info／Gallery／Menu／AccessのシンプルなグローバルナビとInstagramアイコンで構成。ファーストビュー直後にお知らせ（information）を配置し、最新情報へのアクセスしやすさを確保しました。Galleryセクションは「コンセプト文→制作風景の写真→作品一覧」という流れで器への理解を深めてから商品を見せる構成に。Cafe MenuはFood／Cafeで分類し、写真・名称・価格・説明文を統一フォーマットで並べることで視認性を高めています。最後にAccess（地図・住所・営業時間）を配置し、来店までの導線を完結させました。

■ 工夫したポイント

• ギャラリーの作品カードとカフェメニューのカードで余白・文字サイズ・写真比率を統一し、器とカフェという2つの軸を持つサイトでも一貫したブランド体験になるよう設計しました。
• スマホ表示ではナビゲーションをハンバーガーメニューに切り替え、Galleryの商品一覧は2カラムを維持することで、情報量を保ちながら閲覧性を確保しました。
• セクション背景にベージュ→ミントグリーンのグラデーションを用い、明確な区切り線を使わずに自然な視線誘導を行いました。