ウェブサイトをデザインする方法

PDF形式でダウンロード

共著者 : Jear Keokham

PDF形式でダウンロード

この記事では、プロらしく見えて性能の高いウェブサイトをデザインする方法を紹介します。サイトデザインの大部分は、最終的には自分しだいで自由にできます。けれども、サイトを作成する際に欠かせないこと、そして避けるべきことがいくつかあります。

パート 1

パート 1 の 2:
自分のウェブサイトをデザインする

1
ウェブサイト作成ツールを使用するかどうか決める　ウェブサイトをゼロから作るには、HTMLのコーディングについてかなり詳しく理解しなければなりませんが、Weebly、Wix、WordPress、Google Sitesといった無料のホスティングサービスを利用すれば、サイト作成が手軽になります。初めてウェブサイトをデザインする場合、HTMLのコーディングをするよりも、ウェブサイト作成サービスを利用するほうがはるかに簡単にすむケースが多いでしょう。
- ウェブサイトのコーディングをするには、HTMLとCSSの両方について学ぶ必要があります。
- サイト作成に時間と労力をかけるのが嫌ならば、ウェブデザイナーを雇って作ってもらうという選択肢もあります。フリーランスのウェブデザイナーを雇うのにかかる費用は、安くて1時間あたり30ドル、高ければ1時間あたり100ドルをはるかに上回ります。
2
サイトの構成を考える　サイト作成ツールを立ち上げる前に、サイトのおおよそのページ数や、各ページの内容、そしてホームページ（トップページ）やAboutページ（自己紹介のページ）といった重要なページのおおまかなレイアウトを考えましょう。
- サイト内の各ページに入れるコンテンツをただ頭で考えるより、そのページをざっと絵に描いてみたほうが視覚的にイメージしやすいかもしれません。
3
直感的でわかりやすいデザインを使う　斬新な発想は大切です。しかし、サイトの基本的なデザインについては、次のような従来の指針に従うのがよいでしょう。
- ナビゲーションメニュー（例：各ページにリンクするタブ）はページの一番上に置く。
- メニューアイコン（☰）を設置するならば、ページの左上の隅に置く。
- 検索バーを設置するならば、ページの右上の端あたりに置く。
- 重要なページへのリンク集（例：「About」や「お問い合わせ」のページへのリンク）は各ページの一番下に置く。
4
一貫性を持たせる　どんなテキストフォントやカラーパレット、イメージテーマやデザインを選ぶにせよ、必ずサイト全体を通じて同じ選択をするようにしましょう。Aboutページとホームページのフォントや配色がまったく異なるというのは、非常に目障りなものです。^{[1]
X
出典文献}
- たとえば、ホームページを落ち着いた色調でそろえるならば、次に表示されるページでも鮮やかで強烈な色は避けます。
- 強烈な色や、反対色の組み合わせを使用すると（とくに、動くコンテンツなど動的な表示の場合）、サイト閲覧者に光過敏性発作を引き起こす恐れがある点に留意しましょう。自分のサイトにそうした色づかいがあるならば、該当する各ページの冒頭に光過敏性発作に関する警告を必ず入れます。
5
ナビゲーションメニューを追加する　ウェブサイトの主なページへのダイレクトリンクをホームページの一番上に置いておけば、ウェブサイトを初めて訪問した人を重要なコンテンツへ誘導するのに役立ちます。こうしたリンクを標準的な機能として設置さするサイト作成ツールがほとんどです。
- ウェブサイト内のページはすべて、ウェブサイト内のいずれかのリンクをクリックすればアクセスできるようにしましょう。アドレスを入力しなければアクセスできないページは作るべきではありません。
6
互いに引き立て合う色を使う　どんなデザインにも共通することですが、ウェブサイトのデザインの肝となるのは、見た目に心地よい色の組み合わせです。そこで、組み合わせて使うテーマカラーの選択が重要になります。
- 選択に迷うならば、黒、白、灰色の組み合わせを基本にしましょう。
7
ミニマル（必要最低限）なデザインを意識する　落ち着いた色調にシンプルな図表を使う、文章は白地に黒字で書く、装飾は極力少なくする、などといった点を意識すると必要最低限なデザインに近づきます。ミニマルデザインならば凝った要素はほとんどいらないので、わずかな労力でプロらしい見た目の魅力的なウェブサイトを作成できます。
- たいがいのウェブサイト作成ツールでは、サイトのセットアップをする際に選ぶテーマの中に「ミニマル」「必要最低限」といったものがあるはずです。
- 必要最低限（ミニマリズム）に代わるのが、「ブルータリズム」です。粗い線や鮮やかな色、太字のテキスト、最低限の画像を使ったデザインで、ミニマリズムと比べると愛用者は少ないですが、サイト内容によってはブルータリズムのほうがデザイン上のニーズに合うこともあります。
8
自分独自の選択をする　直線が使われ、要素が格子状にぴたりと並んだデザインは無難ですが、独自のスタイルを少々加えることで個性が生まれます。いくつものサイトの中で、自分のサイトを際立たせることにもつながります。^{[2]
X
出典文献}
- ウェブサイト上の要素を左右非対称（アシンメトリー）に並べる、要素を重ね合わせてレイヤー状に見せるなど、主流から外れたスタイルも臆せず取り入れましょう。
- 四隅がとがった四角形の要素（「カード型」のデザインとも呼ばれます）は上品ですが、角の丸い優しげなデザインのほうがよく使われています。
広告

パート 2

パート 2 の 2:
ウェブサイトの性能を最大化する

1
モバイル表示へ対応を強みにする　ウェブトラフィックの大半を占めるのは、パソコンなどのデスクトップブラウザではなく携帯端末のモバイルブラウザです。つまり、自分のサイトのモバイル版の表示には、最低でもデスクトップ版の表示と同じくらいに気を配るべきなのです。たいがいのウェブサイト作成ツールは自動でモバイル版のサイトを作成してくれますが、モバイル版のサイトについては次のような点に留意するとよいでしょう。^{[3]
X
出典文献}
- ボタン（サイト内リンクなど）が簡単にタップできる大きさになっているか
- モバイル表示非対応の機能（Flash、Javaなど）が使われていないか
- 自分のウェブサイトのモバイルアプリ版を作成することも検討しましょう。
2
1ページ内で写真を多用しすぎない　デスクトップブラウザでもモバイルブラウザでも、写真や動画が大量に使われたページは読みこみに時間がかかります。画像はウェブデザインの重要な要素ですが、1ページにつき2、3枚程度にとどめましょう。それよりも多くなると、ロード時間が余計に長くなり、ページを訪問しようとした人がアクセスをやめてしまいます。
- 一般論ですが、ウェブサイト内のページのロード時間は4秒未満を目指しましょう。
3
「お問い合わせ」ページを用意する　開設ずみの事実上すべてのウェブサイトに、電話番号やメールアドレスといった、連絡先情報が掲載された「お問い合わせ」のページがあります。このページに問い合わせフォームを組みこんでいるサイトもあります。お問い合わせページがあれば、ウェブサイトの訪問者がサイトの管理者に直接連絡する手段ができるため、何か不都合が生じた際に、これが解決手段の1つとなります。
4
独自の404ページを作る　ウェブサイトの準備中のページや存在しないページにアクセスしようとすると、「404エラー」のページが表示されます。大半のブラウザにはデフォルトの404ページがありますが、ウェブサイト作成ツールの設定から、404ページを好みのものに変更できます。その際には、以下のような情報を表示しましょう。
- カジュアルなエラーメッセージ（例：「おめでとうございます――あなたはエラーページを発見しました！」）
- サイトのホームページに戻るリンク
- よく閲覧されているページへのリンク集
- 自分のウェブサイトの画像やロゴ
5
可能ならば検索バーを用意する　利用中のサイト作成ツールが対応しているならば、検索バーを設置したほうがよいでしょう。検索バーがあれば、サイト訪問者はナビゲーションメニューをクリックせずに、特定のページやアイテムへすばやくたどりつけます。
- 検索バーがあると、訪問者が一般用語を検索しようとした際、検索ワードを変形するなどの試行錯誤をする必要もなくなります。
6
最も時間をかけるべきはホームページ　ウェブサイトのホームページは、そこを見ればサイトが扱うテーマの趣旨がさっとわかるようなものにすべきです。また、ナビゲーションメニューや画像を含め、ホームページに掲載する要素はすべて短時間でロードできるようにしましょう。ホームページに掲載するべき要素としては、次のようなものがあります。^{[4]
X
出典文献}
- クリックできるボタンや入力フォームなどの行動喚起（コールトゥアクション）
- ナビゲーションツールバーまたはメニュー
- 興味を引く図表・画像（例：目を引く1枚の写真や動画、あるいは数枚並べた写真と、それに添えられた文章）
- ウェブサイトのサービスやトピック、主な目的に関するキーワード
7
複数のプラットフォーム上の複数のブラウザで、ウェブサイトをテストする　これは非常に重要なステップです。ブラウザによっては、ウェブサイトの要素が思わぬ動作をする場合があるからです。サイトの宣伝を始める前に、Windows、Mac、iPhone、Androidから以下のブラウザで自分のウェブサイトを訪問し、動作確認をしましょう。
- Google Chrome
- Firefox
- Safari（iPhoneとMacのみ）
- Microsoft EdgeとInternet Explorer（Windowsのみ）
- Android数機種（Samsung Galaxy、Google Nexusなど）の標準ブラウザ
8
ウェブサイトが古くならないよう更新を続ける　デザインの流行、リンク、写真、コンセプト、キーワードといったものはどれも、時を経るにつれて変わっていきます。ウェブサイトが時代遅れにならないようにするには、更新を続けなければなりません。このためには、少なくとも3か月に1度（できればもっと頻繁に）、自分のウェブサイトの機能・性能を類似のサイトと比較して確認しましょう。

広告

ポイント

ウェブサイトのアクセシビリティも、サイト開発において重要な事柄の1つです。聴覚障がい者のためのキャプション（字幕）や、視覚障がい者のための音声ガイドがその例です。光過敏性発作を引き起こしうる効果を使用するサイトでは、発作に関する警告を掲載することもアクセシビリティの改善につながります。
ウェブサイト作成ツールでは多くの場合、複数のテンプレートが用意されています。こうしたテンプレートを使ってレイアウトやデザインを固めてから、自由に要素を追加していきましょう。

注意事項

ウェブサイト作成ツールは無料のものがほとんどです。ただし、独自のドメインを使う場合（例："www.yourname.wordpress.com"ではなく、"www.yourname.com"のようなURLにする)、月額や年額でドメイン代がかかります。
著作権に関する法律をよく確認し、剽窃・盗用は絶対にやめましょう。ウェブ上で適当に見つけた画像はもちろん、サイトの構造に関する一要素であっても、許可を得ずに使用してはいけません。