program study story

プログラムの勉強 アウトプット

HP(ホームページ)の作成手順

 

HP(ホームページ)を作成するのに、どんな流れになっているのか。

 

作成手順:

サイトマップを作る

ワイヤーフレームを作るページを決める

一口メモ

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

ワイヤーフレームを書く

 

□企画

・目的を明確にする
ホームページを使って、どんな成果を出したいのか。

ホームページを使って商品を売りたいのか、
問い合わせを増やしたいのか、
顧客への情報提供と交流を行いたいのか。
ホームページで獲得したい具体的な成果

・掲載内容を表す

その目的を達成するために必要な内容が
ホームページに名刺程度の役割を求めているのであれば、
事業内容、連絡先、アクセスなどの情報が必要。

Web集客を考えるのであれば、
「お客様の声」「事例」「Q&A」「問い合わせフォーム」など、さまざまな要素が必要

自分たちの理念や考え方を表現したいなら、
ブログの設置や、自分たちの考えを表現できるものが効果的

・スケジュール表(納期)を決める
想定しているスケジュールも仕様書には必要

サイトマップ(サイト構成図)
サイトマップは「ホームページ全体でどのようなページが必要か」といったサイト全体の
構成を表すもの

ワイヤーフレーム
ホームページのレイアウトやコンテンツの配置を決めるための設計図。

ワイヤーフレームの目的:
・情報整理のため
ホームページ制作を行う過程で「情報設計」といい、
どういうコンテンツ(文章や写真)をどういう順番で配置するかといったことを決める工程

ホームページで取り扱うテキストや画像はかなりの数になるため、単純にテキストだけでなく、
ワイヤーフレームを活用すると非常に便利。
ここでは、一言一句細かな文章をワイヤーフレーム上で整理するのではなく
「ここら辺に、こういう感じの文章を置いておきたい」と決めていくのが狙い。


・ホームページのレイアウトを決めるため
コンテンツの整理だけではなく「どういったレイアウトを採用するのか」を
決めておくことも、ホームページの設計段階では非常に重要な工程の1つ

・プロジェクトメンバーと認識を合わせるため
認識を合わせるための資料としてワイヤーフレームは大きな効果を発揮
「議事録」的な役割も兼ねており、ミーティングなどで決まったことは
全てワイヤーフレームに反映させる

・アイデア出しや議論のたたき台にするため
線と文字だけ設計図なのですが、
ある程度「実際の完成図」のイメージを持つことができるため、
・ここには、こういう写真を持ってきた方が良いんじゃない?
・この部分には、お問い合わせのボタンを付けようよ!
などアイデア出しを促進させるために役立ちます。

 

 

ワイヤーフレームを作る際の注意点:

レイアウトの種類:

 

◆1カラムレイアウト
□メリット:
> 画面を横に大きくつかうため、インパクトを与えやすい
> 上から順番に見えていくため、ストーリーが作りやすい
□デメリット:
> コンテンツの量が多いと縦に長くなりすぎるため、読みにくい

◆タイル型レイアウト
□メリット:
> たくさんのコンテンツを並べられる
> 情報が区切られていて探しやすい
> スマホ対応しやすい
□デメリット:
> 掲載できる情報量が限定的
> コンテンツに優先順位や強弱がつけられない

◆マルチカラムレイアウト
□メリット:
> 情報を非常に整理しやすい
> 優先して見せたい情報は大きく表示するなど強弱がつけやすい
□デメリット:
> (タイル型と同じく)掲載できる情報量が限定的
> 1カラムやタイル型と比べてスマホ対応しにくい

◆サイドバー固定レイアウト
□メリット:
> メニュー(サイドバー)を常に表示できるので、ユーザーが迷いにくい
□デメリット:
> スマホで観覧するときには使用できない


各要素の設置について:

◆ヘッダー・グローバルナビゲーション
サイトの一番上に表示される部分。
全ページで共通して使用される。
TOPページのすぐ下の階層を並べると、Good

共通部分のための注意点:

・サイト全体の目次として情報を整理する
・どのページからでもエントリーできるようにする

エントリーページのような、
他のページと種類が異なるページは配置や見え方を変えるとGoodです。

◆メインビュー
TOPに入ってきたときに、真っ先に入る重要な部分。
インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要。

◆コンテンツエリア
採用サイトのTOPページは、サイト全体の「目次」的な役割になっているため、
下層のコンテンツページをわかりやすく並べてあげるのがコツ。
・全てのコンテンツを並べてはいけない

・見せたいコンテンツから並べる。
綺麗に情報を整理するには、経験やノウハウが必要になる。
ポイントは「どの情報を優先してユーザーに見せたいか?」

◆フッター
ヘッダーと同じく、全てのページに共通して表示されている部分。
主に、コンテンツを読んだ人の目に入るため、
サイトの全体像がわかるように目次として使われている。

フッターは縦幅が大きくなっても大丈夫。
ページをできるだけ掲載すると良いでしょう。

他ページへの導線

※他のページへのリンク部分はすぐに分かるように、色分け。

ワイヤーフレームを作る際の注意点:

・ページのコンテンツが、他のページに比べて大幅に異なるページ
・そのサイト特融のレイアウトを使用しているページ
・そのサイトにおいて非常に重要な役割を担うページ

ワイヤーフレームで作成するページの判断基準

デザインに凝りすぎない
ワイヤーフレームは、線と文字だけでOK

スマホ版は別で作る

コンテンツの準備
ホームページの原稿や写真素材はどちらが準備するのかなど