ワイヤーフレーム制作でとても大切なこと
ワイヤーフレームの目的
クライアントの目的を達成するための手段を考えること
①操作性を重要視する
ユーザーが操作出来ないとそもそも使ってもらえない
②派手な演出はＮＧ
FLASHや過度なアニメーションはユーザーにウザがられる
③目的を明確にする
あくまでWEBサイトは目的を達成するための手段。最短でユーザーを目的に誘導する
ワイヤーフレーム作成手順
①WEBサイト制作の依頼内容をヒアリングする
依頼者がなぜWEBサイトを作りたいのか？目的や背景を知る
②同じジャンルのWEBサイトを徹底的に調査する
世の中に出ているWEBサイトは、良いデザイナーの知識の塊。良いところは頂戴する
③手書きでアイディアを書き出す
仕組みやレイアウトを書き出す
④PC上で清書
これを見てデザイン制作が出来るよう、詳しく頂戴する
文言などはダミーでもOK
ワイヤーフレームのツール
CACOO
MOCKUPS
など
第一段階のヒヤリング
※ヒヤリングとは？？
依頼者の要件を聞き出す行為
聞き出す→具体的な提案する
STEP１
WEBサイト制作の目的をはっきりさせる
STEP２
ターゲットを明確にする
STEP３
目的をターゲットに対する手段を決める
STEP４
企画やコンテンツを考える
STEP５
コンテンツの優先順位をはっきりさせる
(ページ構成)
WEBサイトを構成するパーツと構成について
・ヘッダーの役割
ヘッダーは決めたら動かさない
・メインビジュアル
利用したくなるようなPR部分
写真と一緒が多い
・ローカルナビ
カテゴリー一覧などの部分
カテゴリーがなければなくてもOK
・フッター
ページ情報やローカルナビと同じような記載をしたりする
なぜかというと、カテゴリーなどが多かったり、ページがながかったりすると、
スクロールしたときに、カテゴリーを選べるようにするため
初心者のためのワイヤーフレーム制作
①手書きでアイディアを書き出す
②PCで清書する
クライアントに見せる
テキストと四角型が打ち込めればOK
失敗しないワイヤーフレーム制作
①ファーストビュー
ヘッダー、メインビジュアルなどの部分。
開いたときに見える部分。
②視線の動き
Z型
F型
こっちの方が多い
同じ目的のサイトを徹底的に分析して、良いところを真似する
大体20サイトくらいは見る
io3000.comとかを参考にするといい