ウェブサイトの計画

ウェブサイトをデザイン・制作するなら、プランニングに時間をかけた方がずっと簡単です。プランニングの段階では、開発者とクライアントが、ニーズに合ったフォーマットやレイアウトを見つけるまで一緒に作業することができます。プランニングのプロセスは、サイトのスタイルの選択に影響を与え、特に企業にとっては、ウェブデザインの最も重要な側面であると言っても過言ではありません。

パート1

基本構造の作成

1. サイトの機能を決定します。自分自身のためにサイトを作るのであれば、おそらくこの答えはすでに分かっているでしょう。他の人、会社、組織のためにサイトを作るのであれば、彼らがサイトに何を期待し、その機能を求めているのかを知る必要があります。 ここで決めることはすべて、最終的なウェブサイトに影響を与えます。

   • ストアフロントは必要か？ユーザーのコメントは必要か？ユーザーはアカウントを作成する必要があるのか？記事重視か？画像重視？このような疑問やその他の疑問はすべて、サイトのデザインや構造を決定するのに役立ちます。
   • これは、特にプロジェクトに多くの人が関わる大企業の場合、長引くプロセスになる可能性があります。
2. サイトマップ図を作成する。サイトマップ図はフローチャートのようなもので、ユーザーがあるページから次のページにどのように移動するかを示します。この時点ではページは必要なく、コンセプトの大まかな流れだけでよい。コンピュータプログラムを使って図を作成することもできますし、自分で紙にスケッチすることもできます。サイトマップの図を使って、ウェブページの階層とつながりをイメージしてください。
3. カードの並べ替えを試してみましょう。グループでよく使われる方法は、カードの束を使って全員の理想的なアプローチを把握することです。メモ用紙を一束用意し、それぞれのメモ用紙に1ページの基本的な内容を書きます。チームに、最も有用と思われる方法でカードを整理してもらう。これは、他の人と協力してサイトを作る場合に最適です。
4. 紙と掲示板、またはホワイトボードを使う。低予算でできるプランニングの元祖ともいえる方法で、コンテンツをすぐに消したり移動したり、ルートを変更したりすることができる。紙片にデザインを描いてひもでつないだり、ホワイトボードにアウトラインを描く。ブレインストーミングに最適。
5. コンテンツの棚卸しをする。これは、新規サイトよりもリデザインに向けたものです。各コンテンツや既存のページをスプレッドシートに入力する。それぞれの目的をメモし、このリストを使って何を残し、何を削除するかを決定する。こうすることで、無駄を省き、リデザインのプロセスを簡素化することができます。

パート2

HTMLワイヤーフレームの作成

1. 階層を固めるためにワイヤーフレームを作りましょう。HTMLワイヤーフレームは、コンテンツを表す最も基本的なタグとブロックのみを使用した、将来のサイトのスケルトンです。これは、"画面のどこに何を表示するのか？"という質問に答えるものです。ワイヤーフレームでは、書式やスタイルは完全に無視されます。

   • ワイヤーフレームでは、スタイルの選択にコミットする前に、コンテンツの構造と流れを確認できます。
   • HTMLワイヤーフレームは、PDFや画像のように静的ではなく、コンテンツブロックを素早く移動させて新しい構造を作ることができます。
   • ワイヤーフレームはインタラクティブなので、開発者とクライアントの双方にとって有益です。ワイヤーフレームはシンプルなHTMLで記述されているため、ワイヤーフレームをナビゲートし、ページ間の移動がどのように機能するかを体感することができます。これは、PDFの概念では表現できないものです。
2. グレーボックスの方法を試してみましょう。ページのコンテンツをグレーのボックスで囲み、最も重要なコンテンツを一番上に配置します。ブロックは1列に並べ、ページで最も重要なコンテンツを一番上に配置します。例えば、そのページが会社概要のページであれば、会社の詳細が一番上にあり、次にスタッフリスト、連絡先情報などが続くでしょう。

   • これにはヘッダーとフッターは含まれません。グレーのボックスは、ページに掲載されるコンテンツを視覚的に表現したものです。
3. ワイヤーフレーム・プログラムを試してみましょう。ワイヤーフレーム作成に役立つプログラムがいくつかあります。必要なコーディングの知識はプログラムによって異なります。人気のあるプログラムには以下のようなものがあります：

   • Pattern Lab.このサイトは「アトミックデザイン」に特化しており、各コンテンツをより大きなページを構成する「分子」として考える。
   • ジャンプチャート。ウェブサイトのプランニングとワイヤーフレーム作成サービス。有料のサブスクリプションが必要だが、コーディングをあまり気にせずにワイヤーフレームを素早く構築できる。
   • Wirefy.Wirefyも「アトミック・デザイン」システムだ。ツールは開発者から無料で入手できる。
4. .優れたワイヤーフレームは、後で簡単に実際のサイトに変換することができる。ワイヤーフレームの段階では、スタイルを気にする必要はありません。その代わりに、簡単に理解でき、少しの労力で入れ替えられるマークアップを使いましょう。

   • ワイヤーフレームでは、より少ないことが重要です。ゴールは単純に構造を構築することです。ビジュアルは後からCSSや高度なマークアップで調整できます。
5. サイト内のすべてのページについてワイヤーフレームを作りましょう。ワイヤーフレームを1つだけ作って、"クール、これを全ページに適用すればOK "と言いたくなるかもしれません。現実には、これでは一般的で退屈なサイトになってしまいます。時間をかけて各ページのワイヤーフレームを作成すれば、どのページにも独自の構成が必要であることがすぐにわかるでしょう。

パート3

コンテンツの作成

1. ウェブサイトを作り始める前に、いくつかのコンテンツを用意しておきましょう。プレースホルダーの代わりに実際のコンテンツがあれば、ウェブサイトのスタイルを確認するのがずっと簡単になります。あまり多くのコンテンツは必要ありませんが、コピーやオリジナルの画像があれば、モックアップの見栄えは格段に良くなります。

   • 記事の本文は必ずしも必要ではないが、少なくとも実際の見出しはあったほうがいい。
2. 良いコンテンツとはテキスト以上のものであることを忘れないでください。インターネットは単純なテキストサイト以上のものだ。ニッチな分野で目立つためには、訪問者を惹きつけ、維持するためのさまざまなタイプのコンテンツが必要です。いくつか考えられるコンテンツを挙げてみましょう：

   • 写真
   • オーディオ
   • ビデオ
   • ストリーム（ツイッター）
   • フェイスブックとの統合
   • RSS
   • コンテンツフィード
3. プロのカメラマンに依頼するサイトに写真を掲載するのであれば、プロの写真家に依頼した方が最初の印象はずっと良くなります。一枚の良い写真は20枚の悪い写真より価値がある。

   • 長年プロとして活躍している人よりも、最近アート写真を専攻した新卒者の方が安く撮影してくれます。
4. 質の高い記事を書く。あなたのページに書かれている内容は、あなたのウェブトラフィックの膨大な量を決定します。デザインプロセスのこの時点では、コンテンツ作成についてあまり心配する必要はありませんが、サイトが公開されれば定期的にコンテンツが必要になるので、考え始めて損はありません。

   • 記事コンテンツ以外にも、ウェブサイト構築の過程で最も必要になるであろう文章項目があります。これには、連絡先や会社名など、サイト内の複数の場所で使用されるものが含まれます。

パート4

コンセプトをサイトにする

1. スタイルのグローバル要素。ヘッダー、フッター、ナビゲーションメニューなど、サイト内のすべてのページで見られるものです。非常に基本的なスタイルを作成し、すべてのページがどのように見えるかを確認できるようにします。これは、レイアウト工程に入るときにとても役に立ちます。

   • 細かいことは気にしすぎず、最終的にヘッダーがどのように見えるかにある程度近づけるようにしましょう。
2. 基本レイアウトを作るワイヤーフレームのクロックを1カラムからページ上の一般的な位置に移動させ始めましょう。例えば、ナビゲーション・ブロックをページの左側に、見出しのリストを右側に移動させる。

   • 次に進む前に、何ページかレイアウトを試し続けましょう。他の人にも試してもらい、有機的に感じられるかどうかを確認する。
3. モックアップを作る。Photoshopのようなプログラムを使って、サイトの数ページのモックアップを作成する。決定したレイアウトを参考にしてください。画像編集ソフトを使えば、より素早く作業でき、すべてを思い通りに仕上げることができる。実際にコーディングするときにも、この画像を参考にすることができます。

   • モックアップに実際のコンテンツを含めることで、すべてが見栄えよくまとまるようにします。
4. ブロックをコンテンツに置き換える。コンテンツと要素をページに追加し始めましょう。スタイルについてはまだ気にしないでください。そうすることで、スタイルの変更がうまくいくかどうかを判断しやすくなります。
5. スタイルガイドを作成する。これは、特に大規模なサイトでは、まとまりのあるスタイルを維持するために不可欠です。すでにビジュアルブランディングを行っている企業のサイトであれば、それをサイトデザインに取り入れる必要があります。スタイルガイドで考慮すべきこと

   • ナビゲーション
   • ヘッダー（<h1>、<h2>など）
   • 段落
   • 斜体
   • ボールド
   • リンク（アクティブ、非アクティブ、ホバーリング）
   • 画像の使用
   • アイコン
   • ボタン
   • リスト
6. スタイルを適用するサイトのスタイルとデザインが決まったら、次はそれを実装しましょう。CSSは、ページやサイト全体にスタイルを実装する最も簡単な方法の1つです。CSSの使い方については、こちらをご覧ください。

この記事は、CC BY-NC-SAの下で公開された「 How to Plan a Website 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。