ホームページを作成するためには、大きく分けるとこんな手順があります
手順
- 内容や文章などを考えてホームページ全体の設計図を作る
- その設計図を元にデザインを作る
- 作ったデザインを元に構築
- 構築したデータを検証して一般公開
ざっくりと分けてみましたが、それぞれの工程にはもっと細かく行う作業があります。今回はそんなホームページの作成手順について解説していきます。
なお、Web制作会社によっては違う流れの場合もありますが、一般的なものとしてご覧ください。
※補足
これからご説明する内容はご自身のものではなく、お客さまのホームページを作る前提で解説していきます。
執筆者紹介
Web／UIデザイナー歴17年目のフリーランス。これまで数々のWebデザインスクール取材＆体験を行ってきた経験をもとにしたWebメディアを運営。多数の大手企業Webサイト制作経験あり。» 詳細はこちら
1. 内容や文章などを考えてサイト全体の設計図を作る
ホームページをデザインするためには、はじめにどんな内容のものを作るのか、その設計図（ワイヤーフレームやページ、サイト構造など）が必要です。
設計図を用意する工程としては以下のような流れがあります。
1. 打合せ（ヒアリング）をする
打合せでは
- どんなホームページを作りたいのか？
- 作って何をしたいのか？
- いつまでに作りたいのか？
などの希望を伺います。
打合せは1回で終わることもあれば何度も行うこともあります。
特に「どんなホームページを作りたいのか？」がハッキリしないと、お客様にも満足いただけず、やり直しや場合によってはキャンセルになってしまうこともあるためここはしっかりと取り組んでおく必要があります。
2. 作りたいホームページの内容を紙やパワーポイントなどにまとめる
競合との差別化やアピールポイントなど情報の整理ができたら、おおまかな構成を紙やパワーポイント、XDなどに考えてまとめます。
そして、ざっくりとした構成から、何度かお客様と確認を取りながら細かいところまでまとめ、完成させます。
このとき、文章を自分で考えることもできますが、文章専門のライターやコピーライターにお願いすることもあります。
また、内容によっては取材が必要だったり、イラスト制作・撮影が必要な場合があります。
3. ライティング
お客様の商品をより魅力的に伝えるためには文章のセンスが必要です。
キャッチコピーなどの短くインパクトのある文章を作る場合はコピーライターにお願いする場合もあります。
また、文章作成が苦手な場合はWebライターにお願いしましょう。
ライティング作業はホームページの目的を達成するためにはとても重要な役割ですので、お客様との密なやりとりが必要です。
4. 案件によってその他必要なこと
取材をする
取材する場合は、どんな内容の取材なのかをあらかじめ決めておき、取材したい方に事前にアポを取っておく必要があります。
また、文章をライターにお願いする場合もどんな取材をしたいか、あらかじめ打合せを行っておく必要があります。
イラストを制作する
ホームページ内に掲載するイラストは基本的にイラストレーターに依頼するか、またはPIXTAなどのストックフォトサービスを利用します。
どんな内容のイラストが必要なのかをあらかじめ決めておき、イラストレーターと事前に打合せを行っておく必要があります。
写真撮影をする
写真は、お客様自身がお持ちでない場合はこちらで用意する必要があります。
最近では様々なシーンの写真がストックフォトサービスを利用して手に入るためその中から選んで購入する場合がほとんどですが、取材する場合や、外観・商品・スタッフなど、ストックフォトでは手に入らない写真が必要な場合は撮影を行います。
撮影は、どんな内容の写真が必要なのかをあらかじめ決めておき、撮影したい方に事前にアポを取っておく必要があります。
また、写真をフォトグラファーにお願いする場合もどんな写真をお願いしたいか、あらかじめ打合せを行っておく必要があります。
設計図作成に必要なスキルは以下の「プランニング技術」で詳しく解説しています
2. サイトの設計図を元にデザインを作る
仕上がった構成書を元に、ホームページのデザインを作ります。打合せで決まったデザインの方向性をパソコンで具体的に落とし込んでいきます。
1. デザインの方向性を決める
具体的なデザイン制作に入る前に、はじめにデザインの方向性を検討します。
サイトの目的を達成するためにはターゲットにしっかり届くデザインにする必要があり、ここでしっかりとデザインのテイストを見極めておかなければ後々大幅修正を行う場合があるため、とても重要な作業です。
できれば、お客様にはあらかじめどんなデザインテイストのサイトが希望か、いくつかのサンプルサイトを選定して頂くことが理想です。
2. デザインする
実際のデザイン作業を進めます。
この作業では「これまでどれだけ多くのサイトを見てきたか？」という、あなたのデザインの引き出しが多いほどアイデアが出しやすくなります。
そしてさらに「デザインの知識」が多いほど計画性のあるデザインを作り出すことができ、作業がはかどります。
デザインの知識があると
- ここは信頼感を表したいから青色を使う。
- ここは柔らかい印象にしたいから角を丸くする。
- ここは高級感を表したいから余白を多く取る。
- ここはアカデミックなイメージだから明朝体のフォントを使う。
- ここはボタンを押しやすいよう◯ピクセルで作る。
こういう作業をスムーズに行うことができます。
3. 修正する
仕上がったデザインを初めてクライアントに提出した後は、基本的には修正依頼がやってきます。
修正内容は大小様々なものが来ますが、上でご紹介した通りしっかり理論立ててデザインされたものほど修正が少ない場合が多いです。
大きめの修正が来てしまっても、ヘコまず焦らず、改めてお客様の求めるデザインを再確認することが重要です。
正しい方向性の修正が済めば、仕事は必ず終わります。
デザインに必要なスキルやソフトは以下の「デザイン技術」で詳しく解説しています
3. 作ったデザインを元に構築する
デザインが仕上がったら、構築を行います。
ホームページはデザインを作ればそのまま一般公開できるわけではありません。
IE・Chrome・Safariなどインターネットを見るためのソフト（ブラウザといいます）は、デザインをそのまま認識することはできず、すべてHTMLやCSS、JavaScriptといったブラウザが認識できるものに変換しなければいけません。
HTML
デザインの骨格、たとえば「これはタイトルです」「これは画像です」「これはリンクです」のような骨組みとなる部分を作るのがHTMLです。
CSS
骨格で作ったHTMLをどのような色・形・大きさで表現するかといった、主にデザインを作るのがCSSです。
JavaScript
たとえばHTMLだけで「今は12時50分です」と書いた場合は、何時にホームページを開いても12時50分と表示されたままですが、JavaScriptを使うことでページを開いたタイミングの時間をリアルタイムに表示することができます。
構築に必要なスキルは以下で詳しく解説しています
4. 構築したデータを検証して一般公開する
構築も終わってデータが用意できたらいよいよ一般公開です。
その前には必ず要件通りの動きとなっているか、ブラウザごとの見え方の違いはどの程度かなどの最終確認を行い、問題がなければ公開作業を行います。
一般公開するためには、仕上がったデータを「Webサーバー」というホームページを公開するためのパソコン（一般的には有料レンタルで公開スペースを借ります。◯GBなど）に移行します。そしてそのデータがある住所（URL）をネットで入力することでホームページが表示されます。
このとき、URLは有料レンタルサーバーのアドレスとなってしまいますが、これを独自のhttp://◯◯◯.comなどとしたい場合は、独自ドメインの契約をすることで取得できます。
Webデザイナーの担当領域は？
分業制が進んでいる会社勤務の場合は、Webデザイナーが担当する部分は主に1.ヒアリングと2.デザインです。
フリーランスの場合は、1〜4すべての工程を行う方もいらっしゃいますし、2.デザインのみ行う方や3.構築を行う方もいます。
ホームページは目で見て操作して使うものですので、「画面を作り上げる部分」はすべてWebデザイナーが関わりを持つことができます。
まとめ
ある程度ざっくりと解説してまいりましたが、基本的にはこのような流れでホームページは作れられています。
一口にホームページ作成と言っても、とにかく色々やることあるんですね！
最後に、改めてまとめた手順を掲載しますので参考にしてみてください。
手順
- 内容や文章などを考えてホームページ全体の設計図を作る
- その設計図を元にデザインを作る
- 作ったデザインを元に構築
- 構築したデータを検証して一般公開
