HP(ホームページ)の作成手順
HP(ホームページ)を作成するのに、どんな流れになっているのか。
作成手順:
サイトマップを作る
↓
ワイヤーフレームを作るページを決める
↓
一口メモ
↓
ページのレイアウトを決める
↓
ワイヤーフレームを書く
□企画
・目的を明確にする
ホームページを使って、どんな成果を出したいのか。
ホームページを使って商品を売りたいのか、
問い合わせを増やしたいのか、
顧客への情報提供と交流を行いたいのか。
ホームページで獲得したい具体的な成果
・掲載内容を表す
その目的を達成するために必要な内容が
ホームページに名刺程度の役割を求めているのであれば、
事業内容、連絡先、アクセスなどの情報が必要。
Web集客を考えるのであれば、
「お客様の声」「事例」「Q&A」「問い合わせフォーム」など、さまざまな要素が必要
自分たちの理念や考え方を表現したいなら、
ブログの設置や、自分たちの考えを表現できるものが効果的
・スケジュール表(納期)を決める
想定しているスケジュールも仕様書には必要
・サイトマップ(サイト構成図)
サイトマップは「ホームページ全体でどのようなページが必要か」といったサイト全体の
構成を表すもの
・ワイヤーフレーム
ホームページのレイアウトやコンテンツの配置を決めるための設計図。
ワイヤーフレームの目的:
・情報整理のため
ホームページ制作を行う過程で「情報設計」といい、
どういうコンテンツ(文章や写真)をどういう順番で配置するかといったことを決める工程
ホームページで取り扱うテキストや画像はかなりの数になるため、単純にテキストだけでなく、
ワイヤーフレームを活用すると非常に便利。
ここでは、一言一句細かな文章をワイヤーフレーム上で整理するのではなく
「ここら辺に、こういう感じの文章を置いておきたい」と決めていくのが狙い。
・ホームページのレイアウトを決めるため
コンテンツの整理だけではなく「どういったレイアウトを採用するのか」を
決めておくことも、ホームページの設計段階では非常に重要な工程の1つ
・プロジェクトメンバーと認識を合わせるため
認識を合わせるための資料としてワイヤーフレームは大きな効果を発揮
「議事録」的な役割も兼ねており、ミーティングなどで決まったことは
全てワイヤーフレームに反映させる
・アイデア出しや議論のたたき台にするため
線と文字だけ設計図なのですが、
ある程度「実際の完成図」のイメージを持つことができるため、
・ここには、こういう写真を持ってきた方が良いんじゃない?
・この部分には、お問い合わせのボタンを付けようよ!
などアイデア出しを促進させるために役立ちます。
ワイヤーフレームを作る際の注意点:
レイアウトの種類:
◆1カラムレイアウト
□メリット:
> 画面を横に大きくつかうため、インパクトを与えやすい
> 上から順番に見えていくため、ストーリーが作りやすい
□デメリット:
> コンテンツの量が多いと縦に長くなりすぎるため、読みにくい
◆タイル型レイアウト
□メリット:
> たくさんのコンテンツを並べられる
> 情報が区切られていて探しやすい
> スマホ対応しやすい
□デメリット:
> 掲載できる情報量が限定的
> コンテンツに優先順位や強弱がつけられない
◆マルチカラムレイアウト
□メリット:
> 情報を非常に整理しやすい
> 優先して見せたい情報は大きく表示するなど強弱がつけやすい
□デメリット:
> (タイル型と同じく)掲載できる情報量が限定的
> 1カラムやタイル型と比べてスマホ対応しにくい
◆サイドバー固定レイアウト
□メリット:
> メニュー(サイドバー)を常に表示できるので、ユーザーが迷いにくい
□デメリット:
> スマホで観覧するときには使用できない
各要素の設置について:
◆ヘッダー・グローバルナビゲーション
サイトの一番上に表示される部分。
全ページで共通して使用される。
TOPページのすぐ下の階層を並べると、Good
共通部分のための注意点:
・サイト全体の目次として情報を整理する
・どのページからでもエントリーできるようにする
エントリーページのような、
他のページと種類が異なるページは配置や見え方を変えるとGoodです。
◆メインビュー
TOPに入ってきたときに、真っ先に入る重要な部分。
インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要。
◆コンテンツエリア
採用サイトのTOPページは、サイト全体の「目次」的な役割になっているため、
下層のコンテンツページをわかりやすく並べてあげるのがコツ。
・全てのコンテンツを並べてはいけない
・見せたいコンテンツから並べる。
綺麗に情報を整理するには、経験やノウハウが必要になる。
ポイントは「どの情報を優先してユーザーに見せたいか?」
◆フッター
ヘッダーと同じく、全てのページに共通して表示されている部分。
主に、コンテンツを読んだ人の目に入るため、
サイトの全体像がわかるように目次として使われている。
フッターは縦幅が大きくなっても大丈夫。
ページをできるだけ掲載すると良いでしょう。
他ページへの導線
※他のページへのリンク部分はすぐに分かるように、色分け。
ワイヤーフレームを作る際の注意点:
・ページのコンテンツが、他のページに比べて大幅に異なるページ
・そのサイト特融のレイアウトを使用しているページ
・そのサイトにおいて非常に重要な役割を担うページ
をワイヤーフレームで作成するページの判断基準
デザインに凝りすぎない
・ワイヤーフレームは、線と文字だけでOK
スマホ版は別で作る
コンテンツの準備
ホームページの原稿や写真素材はどちらが準備するのかなど