ウェブサイト（ホームページ）をつくる３番目の工程は制作

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

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

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

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

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文字前後で記述する。

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