サンプルサイトの構成の考え方、架空のカフェサイトを作ろう
#Good Business Design

created: 2025/04/15, modified: 2025/04/24

サンプルサイトのテーマを「カフェ・レストラン」に決めたとしましょう、次はサイトの“構成”を考える段階です。何を載せるのか、どんなページが必要かを整理することで、デザインもしやすくなり、完成までスムーズに進められます。

最近のWebサイトでは、「トップページだけで完結する」1ページ構成のミニマルサイトも増えています。スクロールするだけでお店の魅力や情報が一通り伝わるので、ユーザーにとってもわかりやすく、スマホでも見やすいのが特徴です。

今回は、そんな1ページ完結型のカフェサイトを作る場合に必要な「各セクション」の構成を紹介し、最後に実際に手書き風のワイヤーフレームを描いてみるところまで一緒にやってみましょう。

セクションごとの構成を考える

おしゃれな店内や看板メニューの写真と、店名＋キャッチコピー。
ファーストビューで「どんなカフェか」を伝える大事なパートです。

お店の雰囲気や想いを伝える文章
「ゆったり過ごせる北欧風カフェ」など、世界観を一言で伝える紹介文。
オーナーのこだわりや店づくりの想いを書いてもOK。

おすすめの料理・ドリンクを写真つきで数点ピックアップ。
すべて載せずに、「人気メニューを一部紹介」でも十分です。

地図（Google Map）、住所、営業時間、電話番号など。
徒歩○分・駐車場の有無など、来店をイメージしやすい情報を。

フォームまたは「お電話でご予約ください」の案内。
インスタやLINEなどSNSへのリンクをここに集約しても◎

構成が決まったら、実際に画面上でどのように表示されるかをワイヤーフレームとして簡単に描いてみましょう。
ワイヤーフレームとは、いわばWebページの「設計図」。ここでは色や細かいデザインは置いておいて、どこに何を配置するかに集中します。

下記は、今回紹介した5つのセクションをもとにした、1ページ完結型のワイヤーフレームの例です。

サンプルサイトのワイヤーフレーム

1ページ完結型のカフェサイトは、シンプルでありながら魅力を凝縮して伝える力が求められます。見た目の心地よさと情報のわかりやすさのバランスを意識しながら、構成を考えてみてください。

デザインに入る前に、構成とワイヤーフレームをしっかり考えることが、完成度の高いサイトを作る第一歩です。

今回紹介した方法は、どんなジャンルのサイトにも応用できるので、ぜひ自分のテーマでも試してみてください！