デザインスキルなしでもできる！ウェブサイトのレイアウトとデザインの基本ステップ

クライアント向けにフリーランスでウェブサイトを制作したい方、あるいはポートフォリオを充実させたい方なら、こんな悩みにぶつかったことはありませんか？

「ウェブデザインのスキルがないのに、どうやってウェブサイトを作ればいいのか？」

主な選択肢としては、以下のようなものがあります。

• ウェブデザイナーに依頼する――ただし、優秀なデザイナーは決して安くありません。
• FiverrやUpworkなどで格安デザイナーを探す――品質にはリスクが伴います。
• 無料または有料のテーマ・テンプレートを使う――希望通りのカスタマイズができないことも多いです。

もうひとつ選択肢があります。それは、ウェブサイトのレイアウトとデザインの基礎を学び、フロントエンドを自分で構築することです。

もちろん、この記事を読むだけで素晴らしいデザイナーになれるわけではありません。複雑なウェブサイトの場合は、プロのデザイナーと協働することになるでしょう。

しかし、多くの小規模ビジネスに対応できるレベルのシンプルなウェブサイトなら、計画からデザインまで自分で行えるようになると私は考えています。

この手法のポイントは次の2つです。

• ウェブサイトが視覚的にどのように組み立てられているのか、その基礎を学ぶこと
• 既存のウェブデザインをリサーチし、インスピレーションやアイデアを得ること

実は私自身も、この戦略でCoder Coderのサイトを構築しました。デザインはかなりシンプルで、特別に凝ったものではありません。でも、シンプルさこそが必要な場合もあるのです。

ウェブ向けのレイアウトとデザインの基本を身につければ、ポートフォリオ用にもクライアントワーク用にも使えるオリジナルのウェブサイトを作れるようになります。そして当然ながら、作るたびに経験が積み重なり、練習を続けることでより複雑なデザインにも挑戦できるようになっていきます。

このプロセスの主な流れは以下の通りです。

• ウェブサイトの基本方針を決める
• ウェブサイトのレイアウトを計画する
• デザインをまとめ上げる
• 最終成果物を構築する

各ステップはすべてリサーチが土台となります。他のウェブサイトを見て、何をしているのかを観察し、自分のサイトに取り入れたい部分を抜き出していくのです。

重要な注意点：他人のCSSや画像を盗用することを推奨しているわけでは決してありません（そもそもコピペでは何も学べません）。ここでの狙いは、創造的なアイデアやコンセプトを得て、それをもとに自分なりの作品を作ることです。

1. ウェブサイトの基本方針を決める

色やフォントを選び始める前に、まずウェブサイトについての基本的な問いに答えましょう。

1. どんなビジネスのためのウェブサイトか？

ピザ屋、写真スタジオ、書店など、どんな業種でもウェブサイトの恩恵を受けられますので、自由に選んで構いません。

今回は例として、「Central Coffee」という架空のコーヒーショップを選びます。コーヒーは誰にでも人気ですよね。

2. どんなページが必要か？

一般的には、ホームページ、会社概要（About）ページ、お問い合わせページ、そしてその業種特有のページなどが挙げられます。

必要なページやサイト全体の構成を把握する最良の方法は、オンラインで手早くリサーチを行うことです。

2. 既存のウェブサイトをリサーチする

同じ種類のビジネスの既存ウェブサイトをチェックしましょう。3〜4サイトほど見て、どんなページ構成になっているかを確認します。

デザインの特徴にも注目して、以下のような点をメモしておきましょう。

• どんなページがあるか
• 全体的なスタイルはどうか
• ナビゲーションが使いやすく、目的の情報が見つけやすいか
• その他、興味を引いたポイント

サンプルサイトを探すのに便利なのがThemeForestです。無料・有料のウェブテンプレートやWordPressテーマが大量に揃っており、人気の高いテーマを選べば、おおむね優れたデザインの見本だと言えます。

以下は、見つけたテーマによるコーヒーショップのサンプルです。

The7

ページ構成：
1ページ完結型サイト。セクションはHome、About、Location、Offers、Menu、News、Press、Blog Posts

スタイル：
モダンで清潔感があり、質の良い写真を使用

ナビゲーション：
非常に使いやすい

続いて、「シカゴのコーヒーショップ」で検索して見つけた実際のサイトをご紹介します。

The Wormhole Coffee

ページ構成：
ホームページ、ブログ、所在地／お問い合わせ、求人情報

スタイル：
ややモダン。店舗の写真はノスタルジックな雰囲気

ナビゲーション：
一見してコーヒーショップだと分かりにくく、サイト内の移動もやや難しい

Caffe Streets

ページ構成：
1ページ完結型サイト。セクションはHome、Caffe（About）、Menu、Roasting、Time Machine（ジュース）、お問い合わせフォーム

スタイル：
シンプルでモダン（Squarespace使用）

ナビゲーション：
とても使いやすい。上部の固定メニューバーで各セクションへスクロールできるのが心地よい

Build Coffee

ページ構成：
1ページ完結型サイト。セクションはホーム、About、営業時間、所在地、ショップ、ケータリング、イベント、お問い合わせ

スタイル：
シンプル。全幅の写真と白背景＋テキストのセクションを交互に配置した構成

ナビゲーション：
かなり使いやすい

Sawada Coffee

ページ構成：
ホームページ、About、Food & Drink、プレス、お問い合わせ＆営業時間、Our Restaurants、採用情報

スタイル：
写真主体のデザインで、テキストは後付けのような印象

ナビゲーション：
やや使いにくい。右隅のハンバーガーメニューに気づかないところだった

3. 自分のサイト用のメモを書き出す

複数のコーヒーショップサイトを見終えると、よくある機能や特徴がはっきり見えてきます。また、「これは良い」「これはイマイチ」という判断材料も得られます。

リサーチ結果をもとに、自分のサイト向けのメモを書き出していきましょう。

Central Coffeeについては、シンプルな1ページ完結型のサイトにして、以下のセクションを持たせることにします。

• ヘッダー
• Home
• About
• Menu
• 所在地／お問い合わせ
• フッター

4. ウェブサイトのレイアウトを計画する

サイトの骨格が決まったら、各ページ・各セクションにどんな要素を入れるかを詰めていきます。こうして作成するレイアウト図のことをワイヤーフレームと呼びます。

ワイヤーフレームの段階では、まだ本格的なデザインは行いません。フォントも色も写真も登場しません。どんなコンテンツが必要で、ページ上のどこに大まかに配置するかを決めるだけです。この段階では設計図やダイアグラムに近いイメージです。

ヘッダー

Seven CoffeeのデモページやCaffe Streetsのサイトにあるような、上部ナビゲーションバーが気に入っています。

ただしどちらも中央寄せなので、私は左寄せにして、先頭にロゴ、続けて各セクションへのリンクを並べたいと思います。

これはデスクトップ版の話です。タブレットとモバイルでは、ヘッダーにロゴとハンバーガーメニューだけを表示する形にします。

ハンバーガーメニューをクリックすると、右側からスライドインするオフキャンバスメニューが開き、セクションナビゲーションが表示される仕組みです。

Home

1ページサイトなので、「ホームページ」はサイト読み込み時に最初に画面に表示される部分になります。Seven Coffeeのように、店名の下に短いタグラインを添えるのも素敵です。

ここでは背景に画像を置き（Build Coffee風に）、その上にテキストを重ねる構成にします。デスクトップでもモバイルでも同じ見た目にします。

About

どのサイトにも短いAboutセクションがあり、写真を添えているところもあります。カフェについての説明文を入れ、店内の写真を数枚加えて、来店したくなる雰囲気を演出します。

Menu

メニューの表示方法はサイトごとに異なります。

• Seven Coffeeは価格付きのメニュー項目をグリッド表示
• Caffe Streetsは項目のシンプルなリストのみ
• Build CoffeeとSawada CoffeeはPDFメニューへのリンク

個人的に、スマホでサイトを見ているときにPDFをダウンロードさせられるのは苦痛です。そこで、飲み物と食べ物の項目を絞った簡易メニューを表示し、写真を数枚添えることにします。

所在地／お問い合わせ

所在地、営業時間、連絡先はサイトの下部に配置します。ユーザーはサイトの上から順に下へスクロールしていくと想定できます。

行動喚起（CTA）を一番下に置くことで、「次に何をすればいいのか？」という疑問に答えられます。訪問者が具体的なアクション――カフェへの道案内を確認し、できれば実際に足を運ぶ――につながりやすくなります。

フッター

フッターはごくシンプルに。著作権情報だけを記載した小さなバーにします。

5. ワイヤーフレームを完成させる

こちらが、デスクトップ版とモバイル版のワイヤーフレームの完成形です。無料のオンラインツール「Mockflow」を使って作成しました。無料プランでは1プロジェクトまで作成でき、それ以上必要なら有料プランもあります。

操作はとても簡単で、手描き風のスタイルが選べるのも楽しいところです。

（サムネイルをクリックすると、新しいタブで拡大画像が開きます）

6. 基本的なデザイン仕様を決める

繰り返しになりますが、極めて細部まで凝った装飾を目指すわけではありません。とはいえ、押さえておくべき基本事項はあります。

カラースキーム

カラースキームとは、サイトで使用する色の組み合わせのことです。家の塗装やインテリアにたとえると分かりやすいでしょう。通常は、グレーや白といったニュートラルな色調を大部分に使い、リンクやボタンなど目立たせたい重要な要素に、明るいアクセントカラーを1〜2色加えます。

配色のインスピレーションが必要なら、Canvaのサンプルカラーパレットを試してみるとよいでしょう。

Central Coffeeのサイトでは、Canvaの「Fall Collection（秋のコレクション）」を採用します。ブラウンを基調とした温かみのあるパレットです。

コーヒーショップらしい、ノスタルジックで居心地の良い雰囲気を演出したいのです。

フォント

リサーチしたサイトを見返すと、ほぼすべてがサンセリフ体（タイライター文字のような「セリフ」＝文字端の飾り線のない書体）を使っています。本文の大部分にはシンプルなフォントを選び、タイトルや見出しには少し太めのウェイトのフォントを使うとメリハリが出ます。

Google Fontsは、ウェブサイトに無料で読み込めるフォントを探すのに最適な場所です。ただし、数を増やしすぎないように注意しましょう。フォントファミリー、ウェイト、スタイルを追加するたびに、サイトの読み込み負荷が増していきます。

画像・写真

サイトの業種に合った、全体的なスタイルやムードを選びましょう。コーヒーショップなら、柔らかい光のあたる温かみのある写真、居心地の良さやノスタルジーを感じさせる店内のショット、店内でおしゃべりやくつろぎを楽しむ人々、飲食物の画像などが適しています。

イラストやロゴについては、ウェブサイトで使える画像を備えた無料のオンライングラフィックツールがいくつかあります。例えば以下のようなものです。

• Canva
• Vectr
• Snappa

7. ウェブサイトを構築しよう！

これで、全体のレイアウトを示すワイヤーフレームと、フロントエンドのスタイルを導いてくれるデザインの参考資料が揃いました。

詳細なPSDファイルを作ってくれるデザイナーはいないので、描いたばかりのワイヤーフレームをもとに、そのままサイト構築に取り掛かります。

私が普段ウェブサイトのフロントエンドを構築するときの手順は以下の通りです。

1. ウェブサイトのファイル群をセットアップする
2. フォルダとファイルを作成・整理する
3. タスクランナーを動かせるようにする（このプロジェクトではGulpを使用）
4. テンプレートごとに個別のHTMLファイルを作成する

その後、各HTMLテンプレートに対して以下のステップを実行します。

1. 基本的なHTML要素で骨格となる構造を作る
2. ページ要素をひとつずつ組み立てていく
3. 各要素にCSSスタイルを追加し、まず各セクションが正しくレイアウトされていることを確認する
4. 作業中こまめにブラウザで表示を確認し、修正を重ねていく

レスポンシブ対応を必ず確認する

サイトを構築している間は、デスクトップ、タブレット、モバイルのいずれでもスタイルが崩れずに表示されるかを確認するのが賢明です。

デスクトップ表示は自分のPCで複数のブラウザを使えば簡単に確認できます。モバイルについては、Chromeの開発者ツールを使えば、さまざまなモバイルデバイスでの表示をエミュレートできます。

ただし、どんなエミュレーションツールでも、実機のスマホやタブレットでの表示と100%一致するわけではない点に留意してください。スタイルのテストとしては、最終的にサイトを公開した状態で実機でも確認することが大切です。

ウェブサイトの表示テストに使えるデバイスエミュレーターは以下の通りです。

• Responsinator.com（無料）
• Screenfly by Quirktools（無料）
• Browserstack（有料）――実機上の仮想マシンでテストできます。

完成品のご紹介！

こちらが完成したCentral Coffeeウェブサイトのスクリーンショットです。

実際のサイトは、私のGithub.ioページでご覧いただけます。

以上が、デザイナーを雇わずにウェブサイトをデザインし、構築するまでの一連の流れでした。

この記事がお役に立てば幸いです。ご感想があれば、ぜひ下のコメント欄でお聞かせください。

記事の更新を見逃したくない方は、まだの方はこちらから購読してください。ブログの新着投稿をお知らせします。