032,ウェブサイト構築の工程（３）制作の工程

「そうは言っても、何の知識も技術も無い素人がつくるのって無理でしょ？」

1アウトプット・書き出し

後に、ここで書き出したフレーズを組み立ててウェブサイト（ホームページ）に掲載する文章に仕上げていくその最初の段階で、掲載する文章の元になるフレーズを書き出していくことが、このアウトプット・書き出しになります。

どんなに優れた文章でも、最初の一文字からスラスラと書けるということは余りないので、紙でも、テキストエディタでも何でもいいので、最初は、頭の中にあるイメージを“フレーズ”、“単語”で書き出していくだけなので簡単です。

2タイトル付け

アウトプット・書き出した“フレーズ”、“単語”をカテゴリーに分けて、そこにタイトルを付けていくことが2番目のステップになります。

例えば、アウトプット・書き出した“フレーズ”、“単語”が商品・サービスそのものに関わる内容であり、その使用・利用方法について述べている場合には、自然とタイトルは『商品・サービスの使用・利用法』といったものになります。

ここでは、凝ったタイトルをつける必要はなく、集めた“フレーズ”、“単語”が何に関連しているのかがわかるようにしておくだけで十分です。

3本文執筆

“本文”とは、先に付けた“タイトル”に対応する内容のことです。

付けたタイトルが『商品・サービスの使用・利用法』であれば、その“本文”はそのまま『商品・サービスの使用・利用法』の説明となります。

この工程では、先に書き出した“フレーズ”、“単語”をつなげて文章にしていく、いわば執筆作業となります。

ここでも、まずは書き続けていくことが大切です。

4素材の準備（イメージ、映像など）

ウェブサイト（ホームページ）構築の分野で“素材”と言えば、掲載する画像や映像のことで、それは編集加工前の状態を指します。

ウェブサイト（ホームページ）には、文章の他に画像、映像などのコンテンツを掲載するのが一般的なので、まずは、掲載したい画像や映像を揃えておきます。

具体的には、これまでスマートフォンで撮りためている画像や動画、フリー素材の検索などがここでの作業工程になります。

5レイアウトデザイン（ワイヤーフレームを軸にレイアウトを決めていく）

“レイアウトデザイン”というのは、言わば“場所決め”のことで、文章や画像のコンテンツの置き場を決めていくことになります。

既に設計の工程で“ワイヤーフレーム”を作成しているはずなので、ここではその“ワイヤーフレーム”を軸に、ヘッダーの位置、ナビゲーションメニューの位置を調整していきます。

このタイミングで、準備した画像や動画を仮配置しながら、全体の印象を決めていきます。

ここで使うツールとしておすすめなのが、Googleスライドです。無料で使えますし、配置も簡単にできます。

もちろん、MicrosoftのPowerPointやAdobeのPhotoshopやIllustratorといったツールを使っても問題ありません。

6素材の加工（レイアウトに合わせた素材のサイズ調整や画像加工）

使用する素材が決まったら、それらの素材を加工するのがこの工程になります。

例えば、ヘッダーに使用する画像であれば、その画像の魅せたい部分だけをヘッダーのサイズに合わせて切り取るような編集を行います。これをトリミングといいます。

料理でも“素材”を料理することで完成させるように、“素材”を編集加工することで、ウェブサイト（ホームページ）上で表示させるコンテンツに仕上げていきます。

7文章執筆・清書

最初に“フレーズ”、“単語”で書き出したものを繋げて文章として仕上げていくのがこの工程になります。

この段階では、既に基準となる文章が存在しているので、その文章をいわば推敲すいこうしていくようなイメージです。

ここでのポイントとして紙とウェブの違いがあります。それは、一度完成させたものを紙に印刷されたものは修正が大変であり、それが出版された書籍やパンフレットなどであれば、コストも発生するという点です。しかし、ウェブであればいつでも修正ができます。だからこそ、まずは仕上げてしまうことをゴールに進めていきます。

8必要に応じて、図形・表の作成

文章や画像だけでは伝わりづらい事柄は、図形や表で示すことで、より分かりやすく、そして素早く伝えることができます。

ウェブサイト（ホームページ）の訪問者が一字一句、じっくりと文章を読んでくれるというのは珍しく、ほとんどの訪問者は流し読みをしています。

そのような中で、少しでも発信している情報を受け取ってもらいたいと考えるなら、図形や表で表現することが望ましいと言えます。

9下書き用のページを用意

“下書き用のページ”とは、実際にブラウザ上でウェブサイト（ホームページ）を見たときに、どのように表示されるのかを確認するために使うものです。WordPressワードプレスでサイト運営を行う場合は、下書き用のWordPressワードプレスを用意することになります。

ただし、この段階でサーバーの準備ができていないことも少なくありません。そのような場合は、無料で使えるWordPressワードプレスもあるので、それを使っても問題ありません。

とにかく、実際にブラウザ上でウェブサイト（ホームページ）を見たときに、どのように表示されるのかを確かめることができる環境を、ここで用意しておくことが大切です。

10ページ内に文章とイメージ、映像などを配置

用意した“下書き用のページ”の中に、文章やイメージ画像、映像などのパーツを配置し、その雰囲気を確かめながら配置の調整を行います。

それぞれのパーツが組み合わさることで、どのような見た目の印象になるのかを早めに把握しておくことで、より精度の高いデザイン設計につなげることができます。

もし“下書き用のページ”を用意できていない場合は、引き続き、GoogleスライドやPowerPointなどのツールを使用しても問題ありません。

11サイト全体のデザイン設計

このデザイン設計の時に基準にするのは、サイトの訪問者です。

ここは難しい部分ですが、“デザイン設計”をする際、どうしても制作者がつくりたいものをつくる傾向があります。

これはウェブサイト（ホームページ）だけではなく、どんなものにも当てはまりますが、作り手がつくりたいものと使い手が使いやすいものは決して同じではないということです。

単なる自己満足なウェブサイト（ホームページ）にならないように、企画の工程で設定した、“サイトの訪問者”が使いやすいデザインを心がけることが大切です。

12[サイト全体]カラム設定

“カラム”というのは、“列”のことで、ウェブサイト（ホームページ）全体を１カラムかそれ以上のマルチカラムにするか？を最初に決めておきます。

ただ、既にレイアウトデザインの工程で大枠は決まっているはずなので、文章やコンテンツを配置してある状態で、どのカラムが読みやすいか？見やすいかを検証しておきます。

13[サイト全体]ヘッダーデザイン

“ヘッダー”というのは、ウェブサイト（ホームページ）のフロントページの上部に配置することが多い、主に画像・イメージのことで、これは“サイトの顔”と言える存在です。

YouTube動画でも、“サムネイル”というのがあって、それはその動画の顔の役割を果たしています。

ウェブサイト（ホームページ）のレイアウトデザインによっては、“ヘッダー”にイメージを置かないケースもありますが、その場合はそこに配置する別のコンテンツのデザインを手掛けるのがこの工程になります。

14[サイト全体]グローバルリンクの設定

“グローバルリンク”というのは、例えば書籍で言えば、“目次”にあたります。

つまりここは、ウェブサイト（ホームページ）の“目次”をつくる工程になります。

ウェブサイト（ホームページ）を訪問した人はこの“グローバルリンク”を辿って、様々なページを見ることになります。

15[サイト全体]フッターデザイン

“フッター”というのは、ウェブサイト（ホームページ）の下部に位置する部分で、こちらも“目次”の役割をはたしますが、他にも、そのページを訪問した人の次の行動を示すという役割も持っています。

どういうことかと言うと、『商品・サービスのページ』を訪問した人が興味を抱いて、“資料請求してみよう”と考えていた場合、“フッター”には、会社名や資料請求フォームなどがあれば、次の行動に移りやすくなります。

16ページ単体のデザイン設計

雑誌は複数のページが組み合わさって、雑誌といっているように、ウェブサイト（ホームページ）も複数のウェブページが組み合わさって出来ています。

ウェブサイト（ホームページ）全体のデザインが出来たら、次はそのウェブサイト（ホームページ）を構成している個々のウェブページのデザインに入るわけですが、ウェブページは会社情報ページや商品・サービスページなど様々な構成要素が詰まったページが存在しているため、それぞれのページごとのデザインが必要になります。

ここで行うのは、個々のウェブページのデザインと全てのウェブページに共通しているフォントなどの設定になります。

17[ページ単体]文章の装飾（文字の太さや色、マーカーなど）

“文字の太さ”、“特定の文字色”、“マーカーなどの強調”といった見た目の装飾に加え、“h2”や“h3”タグなどの構文に関係する箇所に装飾を施して、訪問者がより見やすい、読みやすいサイトづくりに取り組んでいくのがこの工程になります。

ウェブサイト（ホームページ）の訪問者は、よほどのことが無い限り一文字一文字じっくり文章を読んではくれません。だからこそ、つくり手としては、見やすい読みやすい構成を心がけることが大切になります。

18[ページ単体]背景色・背景イメージ

ウェブページの背景に色を付けたり、背景にイメージ画像を置いて、ページの印象を整えていきます。

“色”が人に与える印象は強く、例えば“青色”を基調に使っているサイトから人が得る印象としては、“ビジネス”、“クール”などがあり、“ピンク色”から人が得る印象は“女性的”、“可愛らしい”といったものがあります。

思いつきで色を考えるのではなく、企画、設計の工程で取り組んだ内容を元に、“カラーマネジメント”に取り組んでいきます。

19[ページ単体]リンクボタンの装飾

“リンクボタン”というのは、ウェブサイト（ホームページ）の特徴でもある、ウェブページから他のウェブページにクリック一つで遷移せんいすることが出来るという機能のことです。それに装飾を施すというのは、

クリックしたくなることを狙っていくということになります。

どういうことかと言うと、

例えば、商品・サービスなどの“資料請求”をして欲しいと考えた時、ページ内に“資料請求はこちら”というリンクボタンを設置して、そのリンクから“入力フォーム”のページに飛んでもらうとします。

そんな時、“資料請求はこちら”というリンクボタンを見つけやすく、そしてクリックしたくなるようなデザインを施すということがここでの工程になります。

20フォームなどのプログラムの導入

“プログラム”と言っても、ゼロからプログラミングしていくことはなく、いまは優れたプラグラマーさん達が作成されたウェブのプログラムを使わせていただくことができます。

WordPressワードプレスであれば、プラグインというウェブプログラムがパッケージされたアイテムを使うことで、お問合せフォームなどが完成します。

ウェブサイト（ホームページ）の主に動的な部分を担う、プログラムをここで導入していきます。

21見直し・加筆修正・微調整

ひと通り、制作工程が進んだら何でもそうですが、見直しや加筆修正、微調整を行うことでより洗練されたウェブサイト（ホームページ）に近づけていくことができます。

制作の工程を最初から見直しつつ、文脈が不自然な箇所は加筆修正を行い、配置した画像や映像に“なんか違うなぁ…”と感じたら、差し替えをしたり、ここの項目と次の項目の空白が広すぎるなぁ…と感じたら、空白を詰めたりしていきます。

22HTMLコーディング

“HTMLコーディング”というのは、ブラウザ上で表示させるためには、“HTML言語”で書かれていることが必須であることから、HTML構文を整えていくということになります。

分かりやすく言うと、このタイトルは大項目でその中に本文が入っていて、次は中項目なので…といった文章のそれぞれの箇所に適切なタグを付けて、ブラウザが正しく認識してくれるようにすることです。

ここは少し専門知識を要するところですが、それだけに重要な箇所でもあります。

23ディスクリプション作成

“ディスクリプション”というのは、Googleなどの検索エンジンの検索結果に表示された時にそのウェブページあるいはウェブサイト（ホームページ）のタイトルと簡単な説明文が表示されるのですが、その“簡単な説明文”のことを指します。

大体120文字前後が表示されることから、“ディスクリプション”は120文字前後で記述します。

これは、ウェブサイト（ホームページ）全体とここのウェブページそれぞれに必要になります。