『Webデザインとコーディングのきほんのきほん』
マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
Webデザインに興味のある方やこれから学ぶ人におすすめの1冊です。

Web制作のフローと制作のための準備

※書籍のPart2/Chapter1『Web制作のフローと制作のための準備』からの抜粋です。

実際にWebサイトを制作するときには、具体的なデザインワークに入る前にサイト全体の構成やそれぞれのページのおおまかなレイアウトを確認するなどの準備作業が必要です。
制作の流れを詳細に確認しておきましょう。

Webサイト制作の実作業の流れ

実際のWebサイトのデザインがどのような流れで行われるか、そのフローを確認しておきましょう。
（1）掲載内容の確認➡（2）サイトマップの制作➡（3）ワイヤーフレームの制作➡（4）デザインカンプの制作➡（5）コーディング➡公開、といったフローが一般的ですが、案件に合わせて調整しながら作業を進行します（図01）。 各段階でそれぞれの内容をしっかりと確認・構築することで、その後の工程が効率よく進むようになります。

掲載内容の確認

最初に、Webサイトに掲載したい情報を整理し、必要に応じてテキスト原稿やイメージ画像などを用意します。
「デザインする目的」の中で解説した「情報の整理」にあたる作業です。
内容と同時にどのようなユーザー層をターゲットとするか、伝えたい相手に関しても焦点を定めます。
また公開後の更新についてなど、Webサイトの管理運営に関しても確認しておきます。
場合によってはCMS（コンテンツマネジメントシステム）など、更新作業を容易に行うためのシステムの導入を検討する必要があるかもしれません。
公開後のWebサイトがしっかりと成長していくことも考えて、サイト全体の構成を考えておきます（図02）。

サイトマップの制作

Webサイトに掲載したい情報を整理してカテゴリやページ分けを行い、サイト全体の構成図となる「サイトマップ」を制作します。
紙にスケッチとして描いても良いですが、デジタルツールでデータとして準備すれば、後の工程で文字をコピー＆ペーストで利用できるので便利です。
サイト全体のページ数が少ない場合やページ同士のリンク設定が複雑な場合は、PowerPointなどの図形編集ソフトでページごとのつながりをグラフィカルに表現したサイトマップを用意すると、作業時に迷うことがなくなります（図03）。 全体のページ数が多い大規模なサイト制作時には、Excelなどの表計算ソフトで文字を主体にしたサイトマップを制作すると全体像が分かりやすくなるでしょう（図04）。

ワイヤーフレームの制作

各ページに掲載する内容が決まったら、ページ内でナビゲーションをどのようにレイアウトするか、主なテキストや写真画像をどのエリアに配置するかなど、それぞれのページのレイアウトラフを制作します（図05）。 エリアを枠線で表現することから、この作業で制作されるイメージは「ワイヤーフレーム」とも呼ばれます。
制作期間が極端に短い案件などではワイヤーフレーム制作を省略する場合もありますが、しっかりとしたワイヤーフレームを準備することでWebサイト全体に共通する基本的なフォーマットが決まるため、デザイン作業を効率よく進める結果につながります。
ワイヤーフレームの構成に合わせて、実際のページ外観となるデザインカンプの制作を行います（図06）。 Webサイトの目的やターゲットとする層に合わせて表現方法を考え、ページデザインに落とし込みます。
どのような配色にするか、レイアウトする写真の処理や文字のサイズ・フォントや余白の扱いなどディテール表現に関しては、Webサイト制作特有ではなく一般的なデザインワークの基本的な考え方と共通しています。
伝えたい内容を分かりやすくし、ターゲット層に受け入れられやすいデザインに構成することが大切です。

コーディングしてサイトを構築する

制作したデザインカンプをもとに、HTMLとCSSでページを構築する「コーディング」を行います（図07）。 写真画像や見出し、アイコンなど必要なイメージ画像はグラフィックソフトなどを利用してあらかじめパーツとして用意して、HTMLファイルで読み込むように設定します。
コーディングが完了したら、各種ブラウザで表示を確認します。
パソコンやスマートフォン、タブレットなどできるだけ多くの環境で表示にトラブルがないか確認し、表示崩れなどが発生していた場合はデータを再調整します。
さまざまなブラウザでの表示でトラブルがないことを確認したら、サーバにアップロードしてWebサイトを公開します。


マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！