初心者が架空のWebサイトを作る！事前準備編

Webデザインを独学で学ぶ方法のひとつに、架空のWebサイトを作ってみるという練習があります。

本や動画で学ぶだけでは、どうしても「見たら分かるけど、自分では作れない」という状態になりがちです。そこで今回は、実際に架空のWebサイトを作る前に、初心者の自分が何を準備したのかを整理してみました。

今回作るのは、架空のハンバーガーショップのWebサイトです。

この記事で作るもの

今回の目標は、いきなり大規模なサイトを作ることではありません。

まずは、次の3ページを作ることを目標にします。

トップページ、メニューページ、店舗情報ページの計3ページを作成する

最初からページ数を増やしすぎると、デザイン・文章・画像・コーディングのすべてで迷いやすくなります。初心者の練習なら、まずは3ページくらいがちょうどいいと思います。

まず、なぜ作るのかを決める

何かを作るときは、最初に目的を決めておくと迷いにくくなります。

今回の目的は、次の4つです。

Webデザインの流れを体験する
デザインツールの使い方に慣れる
HTML / CSSのコーディング練習をする
ポートフォリオに載せられる制作物を作る

ここで大事なのは、「おしゃれなサイトを作る」だけを目的にしないことです。

おしゃれさだけを目標にすると、参考サイトを見たときに「すごい」「真似できない」で止まりやすくなります。初心者のうちは、完成度よりも、サイト制作の流れを一通り経験することを優先した方が学びになります。

作る前に決めておくこと

Webサイトを作る前に、最低限決めておきたい項目があります。

何のお店・サービスのサイトなのか
誰に向けたサイトなのか
サイトを見た人に何をしてほしいのか
必要なページは何か
各ページに載せる情報は何か
どんな雰囲気のデザインにしたいのか
画像や文章などの素材をどう用意するのか

これを決めずに作り始めると、途中でかなり迷います。

たとえば、ハンバーガーショップのサイトでも、目的によってデザインは変わります。

若者向けのポップな店
家族連れ向けの親しみやすい店
高価格帯のグルメバーガー店
テイクアウト専門の小さな店
地元密着型のカフェ風バーガー店

同じハンバーガーでも、誰に届けたいかで色・写真・文字・レイアウトが変わります。

今回の架空サイトの設定

今回は、次のような設定にします。

項目	内容
サイトの種類	架空のハンバーガーショップ
店名	BURGER HOUSE SUN
ターゲット	20〜30代、休日に少し良いランチを楽しみたい人
雰囲気	明るい、親しみやすい、少しおしゃれ
目的	メニューを見てもらい、来店したくなってもらう
必要ページ	トップ、メニュー、店舗情報

架空サイトでも、このように簡単な設定を作っておくと、デザインの方向性が決めやすくなります。

ページ構成を考える

次に、必要なページと中身を整理します。

トップページ

トップページでは、お店の第一印象を伝えます。

入れる内容は、次のようなものです。

メインビジュアル
お店のキャッチコピー
おすすめメニュー
お店のこだわり
店舗情報への導線
メニューページへの導線

トップページは、すべての情報を詰め込む場所ではありません。見た人が「どんなお店か」をすぐ理解できて、次に見たいページへ進めることが大切です。

メニューページ

メニューページでは、商品を分かりやすく見せます。

入れる内容は、次のようなものです。

商品写真
商品名
価格
短い説明文
人気メニューの表示

飲食店サイトでは、写真の印象がかなり重要です。画像素材を使う場合でも、写真の明るさや雰囲気をそろえるだけで、サイト全体の完成度が上がります。

店舗情報ページ

店舗情報ページでは、来店に必要な情報をまとめます。

住所
営業時間
定休日
アクセス
地図
電話番号
SNSリンク

初心者の練習サイトでも、実際の店舗サイトに必要な情報を意識しておくと、より実務に近い練習になります。

参考サイトを探す

ここから参考サイトを探します。

ただし、参考サイトを探すときに気をつけたいのは、デザインをそのまま真似しないことです。

見るべきポイントは、見た目そのものよりも次の部分です。

どんな順番で情報を見せているか
ファーストビューで何を伝えているか
写真をどう使っているか
余白をどう取っているか
メニューやボタンをどこに置いているか
スマホ表示でどう見せているか

つまり、参考にするのは「完成した見た目」ではなく、設計の考え方です。

構成の参考サイト

ハンバーガーショップのような飲食店サイトなら、実在する飲食店サイトを見るのが一番分かりやすいです。

たとえば、大手チェーンのサイトを見ると、メニュー、キャンペーン、店舗検索、ニュースなど、飲食店サイトに必要な情報がどのように整理されているかを確認できます。

ただし、大手サイトは機能も情報量も多いため、初心者がそのまま再現しようとすると難しくなります。今回は、構成だけを参考にして、自分が作れる範囲に絞ります。

デザインの参考サイト

デザインの参考には、Webデザインギャラリーを使うと便利です。

SANKOU!には「カフェ・飲食店・テイクアウト」カテゴリがあり、飲食店系のWebサイトやLPを探せます。お店の雰囲気や写真の使い方を比較したいときに参考になります。

MUUUUU.ORGでも、飲食店・カフェ・レストラン・テイクアウトのWebデザインを業種や配色などから探せます。メニュー、店舗の雰囲気、写真、予約や問い合わせ導線を比較しやすいです。

参考サイトを見るときは、ただ眺めるだけではなく、次のようにメモすると学びやすくなります。

見るポイント	メモすること
配色	メインカラー、背景色、アクセントカラー
文字	見出しの大きさ、本文の読みやすさ
写真	明るさ、トリミング、余白
レイアウト	1カラムか、2カラムか、カード型か
動き	ホバー、フェードイン、スクロール演出
導線	メニュー、予約、店舗情報への行きやすさ

初心者のうちは、参考サイトを「なんとなくおしゃれ」で終わらせないことが大事です。どこがおしゃれに見えるのかを分解すると、自分のデザインにも取り入れやすくなります。

素材を集める

架空サイトでは、写真やアイコンなどの素材も自分で用意する必要があります。

今回はハンバーガーショップなので、必要になりそうな素材は次の通りです。

ハンバーガーの写真
ポテトやドリンクの写真
店内風の写真
背景に使えそうな写真
SNSアイコン
地図や店舗情報に使うアイコン

素材サイトを使う場合は、ライセンスの確認が必要です。

たとえばPixabayでは、FAQで「Pixabay License」により帰属表示なしで商用利用もできると説明されています。ただし、Pixabayのライセンス概要では、認識可能な商標・ロゴ・ブランドが含まれる素材は、商品やサービスに関連する商用利用ができないなどの制限も説明されています。

練習用の架空サイトでも、ポートフォリオに載せる可能性があるなら、素材のライセンスは必ず確認しておく方が安全です。

ワイヤーフレームを作る

いきなりデザインを作る前に、ワイヤーフレームを作ります。

ワイヤーフレームとは、色や細かい装飾を入れる前の、ページの設計図のようなものです。

たとえばトップページなら、次のようにざっくり決めます。

ヘッダー
メインビジュアル
おすすめメニュー
お店のこだわり
店舗情報への導線
フッター

最初からきれいなデザインを作ろうとすると、文字の大きさや色に気を取られて、情報の順番が曖昧になりがちです。

先にワイヤーフレームを作ると、「何をどこに置くか」が整理されるので、デザイン作業が進めやすくなります。

スマホ表示も最初から考える

今のWebサイト制作では、スマホ表示を無視できません。

レスポンシブWebデザインは、画面サイズや解像度に応じてページを見やすく表示するための考え方です。MDNでも、レスポンシブWebデザインは複数のデバイスに対応するためのWebデザイン手法として説明されています。

CSSのメディアクエリーを使うと、画面幅に応じてレイアウトを変えられます。MDNでは、メディアクエリーはビューポートのサイズに応じた異なるレイアウトを作るための重要な仕組みだと説明されています。

初心者が最初に意識するなら、次の3つで十分です。

スマホで文字が小さすぎないか
ボタンが押しやすい大きさか
画像やカードが横にはみ出していないか

最初から完璧なレスポンシブ対応を目指す必要はありません。まずはスマホで普通に読める状態を目指します。

アクセシビリティも少しだけ意識する

アクセシビリティというと難しく感じますが、初心者でも最低限できることがあります。

W3CのWCAG 2.2は、Webコンテンツをよりアクセシブルにするためのガイドラインです。Quick Referenceでは、達成基準や実装テクニックを確認できます。

最初は、次のような基本だけでも意識すると良いです。

画像に適切なalt属性を入れる
文字色と背景色のコントラストを確保する
見出しを順番通りに使う
ボタンやリンクの意味が分かる文言にする
キーボードでも操作しやすくする

見た目がきれいでも、読みにくい・使いにくいサイトは良いサイトとは言えません。練習段階から少しずつ意識しておくと、後で大きな差になります。

表示速度も確認する

ポートフォリオ用の架空サイトでも、表示が重すぎると印象が悪くなります。

GoogleのCore Web Vitalsは、読み込み速度、操作への反応、表示の安定性など、実際のユーザー体験に関わる指標です。Google検索セントラルでも、Core Web Vitalsは読み込み性能・インタラクティブ性・視覚的安定性を測る指標だと説明されています。

初心者が最初に気をつけるなら、次の3つです。

画像を大きすぎるサイズで使わない
不要なアニメーションを入れすぎない
レイアウトがガタッとズレないようにする

特に飲食店サイトは写真が多くなりやすいので、画像サイズには注意したいです。

制作前チェックリスト

最後に、作り始める前のチェックリストをまとめます。

企画

サイトのテーマは決まっているか
ターゲットは決まっているか
サイトを見た人にしてほしい行動は決まっているか
必要なページは決まっているか

情報設計

各ページに載せる情報は決まっているか
トップページの構成は決まっているか
メニューや店舗情報の内容は整理できているか
参考サイトから学ぶポイントをメモしたか

素材

必要な写真を集めたか
素材のライセンスを確認したか
写真の雰囲気はそろっているか
ロゴやアイコンの方向性は決まっているか

デザイン

配色は決まっているか
フォントの方向性は決まっているか
ワイヤーフレームを作ったか
スマホ表示も考えたか

実装

HTML構造を考えたか
CSSで再現できそうなデザインにしているか
画像サイズを大きくしすぎていないか
公開前にスマホでも確認する予定があるか

まとめ

架空サイト制作は、初心者にとってかなり良い練習になります。

ただし、いきなり作り始めると、途中で「何を載せればいいのか分からない」「素材が足りない」「デザインの方向性が決まらない」と迷いやすいです。

だからこそ、最初に次のことを決めておくのが大切です。

何のサイトを作るのか
誰に向けたサイトなのか
どんなページが必要なのか
どんな情報を載せるのか
どんなデザインを参考にするのか
どんな素材を使うのか

準備は少し面倒ですが、ここを整理しておくと制作がかなり楽になります。

今回は、架空のハンバーガーショップサイトを作る前の準備をまとめました。次は、実際にページ構成やワイヤーフレームを作りながら、デザインを形にしていきます。