2. ホームページの見た目を作る

02_ホームページの見た目を作る.jpg

2-1. サイトマップを作る

ここからは、実際にホームページを制作する具体的な手順について確認していきましょう。まずは、ホームページ制作の「設計図」を作っていきます。何かを制作する時に、完成図を想定しておかないと、どこを目指せばいいのかわからなくなるからです。

設計図には全体的な「外観」とそれぞれのページの「詳細」部分が存在します。初めに作っていくのは、ホームページの全体像である「サイトマップ」です。どのページを作るのか、どのような導線にするのかを決めていきます。もちろんこれを作るのに、前半で見てきたターゲットや目的について考えたことも反映させていきます。

2-2. ページのレイアウトを決める

次に、トップページや商品紹介のページ、会社概要のページなど、様々なページレイアウトを決めていきます。この具体的なページの設計図のことを、ワイヤーフレームと呼ぶことがあります。

ホームページを見ている人は、デスクトップ画面では「左から右・上から下」、モバイル画面だと「上から下」に視線を動かします。優先順位が高いほど上に配置して目立たせる必要があります。また、見せたいものを意識してレイアウトを組んでいきます。

ページの設計図は、一昔前はスケッチで済ませてしまう人もいましたが、最近ではプロトタイピングツールと呼ばれるデザイン・マネジメントツールも増えてきました。プロトタイピングツールを使うことで、クリックやタップで次の画面に移動し、実際に作動しているように見えます。

3. コードを書く

03_コードを書く.jpg

3-1. CMSの設定をする

最近ではWordPressやMovable TypeなどのCMSコンテンツ・マネジメント・システム)を使うことも多くなってきました。仮にCMSを使う必要がある場合には、事前に環境設定をしておきましょう。CMSを使うと、テーマ(テンプレート)を設定しておくだけで、Web制作者以外の人もページを追加することができます。

3-2. コーディングする

いよいよソースコードの打ち込み作業です。場合によっては、ホームページビルダーやBiNDのようにWYSIWIG(見たままにレイアウトを作っていく方法)で編集することもありますが、こうしたツールを使うと余計なコードが挿入されることもあります。

最近では便利なエディタもたくさん登場しています。タグごとに見やすく色分けしたり、開始タグを入力してEnterキーを押すと閉じタグを自動で挿入してくれるものもあります。様々なエディタがあるので、自分にあったツールを見つけていきましょう。

3-3. ロゴやバナーを作成する

コーダーのほかにグラフィックデザイナーがいる場合は、コーディングと同時進行でホームページの顔となるロゴやバナーなどのクリエイティブの作成を行います。事前に設計図で打ち合わせたサイズでデザインを行います。

忘れがちなのが、ファビコンの作成です。ファビコンとは、ホームページをブックマークした際に横に表示されるアイコンです。最近では、ブラウザのブックマーク用のファビコンだけでなく、iOSAndroidでホーム画面にホームページのブックマークを単独で作成できるので、忘れずに設定しておきましょう。

3-4. ブラウザチェックを行う

ブラウザチェックとは、色々なブラウザでサイトを確認し、レイアウトが崩れていたり、表示のおかしいところがないかを確認する作業です。世の中にはたくさんのブラウザがありますが、Internet Explorer、Microsoft Edge、Google Chrome、Mozilla Firefox、Safariは多くの人が使っているので、最低限チェックしておきたいところです。また、スマートフォンやタブレットでも想定どおりに表示されるか確認しておきましょう。

3-5. テストサーバーで確認する

ローカル開発環境で開発した場合は、自分自身や自社のメンバーしかアクセスできない状態になっています。インターネット上で誰でも閲覧できるようにするためには、サーバーにアップロードして動作を確認する必要があります。いきなり本番環境で公開して動かなかったり、リンクが切れていたり、リンクをクリックしたらまったく別の場所に飛んでしまうこともあるので、まずはテスト環境のサーバーで動作を確認します。問題がなければ、本番環境で公開をします。