コンセプト、目的、ターゲットを決める

ホームページのコンセプトを決める

ホームページの方向性を決めることです。ホームページ制作に関わる全ての人たちがどの方向に向かって制作を進めていけば良いのか『指針』を最初に決めておくことが大切です。

例えばホテルのホームページ制作であれば

『都内随一のラグジュアリーホテル』
『都内最安のビジネスホテル』
『都内一コストパフォーマンスに優れたシティホテル』
などなど・・・

制作に関わる全ての人たちがどのような『指針』を元に制作すれば良いか決めておけば、制作後によく聞く『こんなはずではなかった』を極力なくすことができます。

ホームページの目的を決める

このホームページは「ユーザーに何をさせたいサイトなのか？」を決めることです。
よくある失敗例は制作時に希望・要望が広がり過ぎて、『あれもこれもしたい』というパターンです。
結果ホームページの目的が増えてしまい、情報にまとまりがなくなります。

制作完了後、最終的に何を伝えたいのかわかりづらいホームページになってしまったという話はよくある話です。

ホームページを見てもらいたいターゲットを決める

制作するホームページを見てほしい『理想のユーザー像』を決めます。
ターゲットを決める際は『絞り過ぎる』くらいでも問題ありません。

例えばあなたが友人に手紙を書くとします。
30人の友人に向けて共通の手紙を書くより、1人決めた友人に向けて書く手紙の方が文章の精度が上がります。

ホームページの内容も同様です。
ターゲットを絞って、1人のユーザーに向けて配信する方が情報の精度が上がります。

また、ユーザーがホームページを閲覧する際の環境を想定しておくのも大切です。

・どんな端末（スマホ・PC等）から閲覧するのか？
・端末の環境（OSや使用ブラウザなど）はどんなものが多いか？
・どの時間帯にどんな場所で閲覧することが多いのか？

ユーザーの環境を考慮したターゲット選定を行いましょう。

情報構造・画面・キーワードの設計

情報構造の設計

ホームページのTOPページとそれ以下がどのような階層になっているかを決めます。
一般的にはサイトマップという資料を使い、どのようなフォルダ構成でWebサーバー上にアップするかエクセルやパワーポイントで作成します

また、ホームページの規模によってはユーザーの属性ごとに対象となるコンテンツを視覚化するハイレベルサイトマップや検索エンジンに施策も考慮して各ページの「タイトル（title）」「見出し（h1）」「検索結果で表示される概要テキスト（description）」を含んだディレクトリマップを作成したりもします。

画面設計

デザイン制作の前にレイアウトやページの構成の資料を作成します。
一般的にワイヤーフレームという資料を作成して、どういった画面構成にするかをパソコン用とスマートフォン用に作成します。

キーワード設計

Googleが提供している「キーワードプランナー」や「Googleトレンド」を使用してキーワードの検索動向を調査します。
事前に設定したターゲットユーザーが「どんなキーワードで検索をするか？」「よく検索されているキーワードはどんなものか？」を調査してホームページ内にうまくキーワードを挿入することが重要になります。

また、調査したキーワード全て詰め込むのはなく、コンテンツと整合性が取れるように比較検討・取捨選択をしていくことでキーワードを詰め込み過ぎないよう配慮が必要です。

テキスト、画像素材の準備

ホームページは９割以上がテキストと画像で構成されています。
そのためホームページ制作の素材とは主に『テキスト』と『画像』になります。

素材の準備は情報構造の設計でどんなコンテンツを配信するか決まったら、用意を始めることが可能です。制作直前ではなく、出来る限り早めに準備をしておくことが大切です。

デザインカンプの制作

制作の参考となるデザインテイスト、ベースカラー、メインカラーを元にまずはトップページのデザインカンプの制作に入ります。
参考デザインテイストは『こんな雰囲気のホームページにしたい』というものがあれば、そのURLが参考デザインテイストとなるホームページです。

次にホームページのベースカラー・メインカラーを決めます。
ベースカラーは背景の色、メインカラーは背景の次によく使う色です。

色の選定はホームページの目的によって決めていきます。

・会社紹介が目的ならロゴ等で使用されるコーポレートカラー
・商品、サービス紹介が目的なら商品、サービスがイメージできる色

ここでは目的を達成する為にユーザーに認知してもらいたい色の選定を心がけます。

コーディング、Webシステムの構築

コーディングとは

デザインが決定したら、デザインカンプのPSD（フォトショップファイル）を元にコーディングに入ります。
また、内容により同時並行かコーディング完了後にシステムの構築に入ります。

コーディングとはインターネットを閲覧する際によく使用される「インターネットエクスプローラ」「Google Chrome」などに「こういう形で表示させますよ～」というソースコードが書かれたプログラムファイルの制作作業です。
先に完成したデザインカンプ通りのホームページをインターネット上に表示させる為に、必要な作業となります。

Webシステムの構築

代表的なWebシステムの例として、ホームページを閲覧した際によく見る「お問い合わせフォーム」があります。
ユーザーが入力できて、ネットワークを通して送信ができる。静的な表示ではなくユーザーのアクションによって動くページはWebシステムが導入されているページになります。

また、他にはホームページの運営側が管理画面を通して、コンテンツページを更新できるCMS（コンテンツマネジメントシステム）も代表的なWebシステムです。

ホームページは制作後の運用が大切

※PR文を含みます

ホームページ運用のPDCA

ホームページは制作後の運用が非常に大切です。「作ってそのまま」では間違いなく失敗に終わります。そこで大切なのがホームページ運用のPDCAを繰り返し行うことです。

「P」はプラン（PLAN）

目標や施策を考え、戦略を立てます。

「D」はドゥ（DO）

考えた施策を実行します。

「C」はチェック（CHECK）

実行結果のフィードバック・調査

「A」はアクション（ACTION）

前回の結果から改善を実施・再実行

ユーザビリティ改善

ユーザビリティという単語はホームページに限らず「使い勝手」や「使いやすさ」などに使用されます。ホームページの運用では日々の改善が重要になります。
ホームページにおけるユーザビリティはユーザーがホームページ上で目的を達成に対する「効率の良さ」「満足度の高さ」などを示します。
先のPDCAほど戦略性の高い施策ではなく、本当に些細な改善でユーザーに使いやすくなり、売上や集客効果が大幅にアップすることも可能です。

・ボタンのテキスト表記を別の言い回しに変えてみる
・バラバラだった情報を1箇所にまとめてみる
・表示するページを1つ減らしてみる

少しの改善で大きく売上を伸ばしたECサイトも多数あります。ユーザーの目線に立って日々改善を実施しましょう。

SEO（検索エンジン最適化）、集客施策の実施

ユーザーがホームページを訪問する経路は大きく分けて3つになります。

1. 検索エンジン経由の流入
2. 外部リンク経由の流入
3. URL直接入力やブックマークによる直接流入

SEOは検索エンジンから流入してもらう為の施策になります。
ユーザーが興味を持ったり、欲求度が高い状態で検索したキーワードの上位表示を成功させることができれば売上や集客効果を大幅にアップにつながります。

外部リンク経由の流入は外部のサイトへの広告出稿やSNSでの情報発信、メルマガ等により意図的に集客施策を行うことで流入数を増やす施策になります。
また、ユーザーが情報を生成するタイプ（Yahoo知恵袋や掲示板）のサイトからの流入も外部リンク経由の流入になります。

直接流入は大半が既存ユーザー、またはリアルな媒体への広告出稿があった場合対象広告からの流入の可能性もあります。

セキュリティ

ホームページを制作、運用する際はデザインや機能に注力してしまいがちですが、近年ではセキュリティ面での施策が非常に重要となってきています。
ユーザー情報の流出、ホームページの情報を格納しているサーバーへの攻撃で売上や信頼に大きな損害が出る前に最低限の施策を行うようにしましょう。

おわりに

ホームページ制作の流れについて一通り要点を書かせていただきました。意外に知られていないのですが、デザインなどに入る前に決めなければいけない内容がたくさんあります。事前の情報収集をしっかりとしていただくことが、良いホームページの制作へとつながります。