ワイヤーフレームとは？
お部屋の間取り図のようなもの
ウェブサイトの骨組み
ワイヤーフレーム制作は家づくりの土台と一緒
↓
枠組みがしっかりしていないともろく崩れてしまう
ワイヤーフレーム制作でとても大事なこと
①操作性を重要視する←ユーザーが操作できないとそもそも使って貰えない
お申し込みはどこでするの？お問い合わせフォームは？どうやって購入するの？
②派手な演出はNG←FLASHや過度なアニメーションはユーザーにウザがられる
音楽の流れるサイト、入口ページがある、、過度なアニメーション、、
③目的を明確にする←あくまでWebサイトは目的を達成するための手段。最短でユーザーを目的に誘導しよう
参加者を集めたい、伝えたい、広告として、売りたい、お問い合わせしてほしい
お客様の考えるWebサイトの目的
ワイヤーフレーム制作の目的
↓
クライアントの目的を達成するための手段を考えること
【ワイヤーフレーム作成手順】
①Webサイト制作の依頼内容をヒアリングする←依頼者がなぜWebサイトを作りたいのか？目的や背景を知る
②同じジャンルのWebサイトを徹底的に調査する←世の中に出ているWebサイトは良いデザイナーの知恵の塊。良いところは頂戴しよう
③手書きでアイデアを書き出す←仕組みやレイアウトを大まかに考える（手書きなど）
④PC上で清書する←これを見てデザイン制作ができるよう詳しく丁寧に清書する
文章まで正確に書く
出来れば、原寸のピクセル・正しい寸法で
清書に便利なツール
・CACOO
・MOCKUPS
・イラストレーター
【失敗しないWebサイトのヒアリングのコツ】
そもそも、Webサイトのヒアリングって何？
↓
依頼者の要件を聞く行為
↓
依頼者の要件を引き出す行為
※いけない例 聞くヒアリング
●●したい、●●っぽい感じで、●●みたいな雰囲気で、、、
具体的ではない、抽象的
イメージが具体化できていない
ウェブサイトで何でもできると思っている
目的がきちんと絞りこめていない
やりたいことがだけが増える
要望だけが膨らむ
目的があやふやで制作しにくい
引き出すヒアリングをする
イメージ・隠れた要望・プロからの意見
具体性が追加される
失敗しないヒアリングのコツは？
最初の段階で要望・目的を絞りこむ
↓
クライアントの隠れた要望を引き出すヒアリングをしよう
【Webサイト制作のためのヒアリング方法】
ヒアリングは2段階
①サイトの設計・企画に関するヒアリング←ワイヤーフレーム制作は第一段階
②デザイン・マークアップ・運用や集客に関するヒアリング
STEP①Webサイト制作の目的をはっきりさせる
STEP②目的に対するターゲットを明確にする
STEP③目的とターゲットに対する手段を決める
STEP④企画やコンテンツを考える
STEP⑤コンテンツの優先順位をはっきりさせる（ページ構成）
【Webサイトを構成するレイアウトパーツの役割と名称】
ヘッダーの役割 ロゴやグローバルナビゲーション
ヘッダーの位置を一度決めたら変えないこと
メインビジュアルの役割
ユーザーの関心を引き付ける・利用したいと思わせられるか
フッターでロゴとグローバルナビをつけておくと便利
【初心者のためのワイヤーフレーム作成方法】
ワイヤーフレームとは？
ウェブサイトの枠組み
【ワイヤーフレーム制作で注意する点】
→何をどこに配置するのがBESTか？
→色や細かい装飾などのデザイン面の事は考えない
→ユーザーがサイトを巡りやすくするためにはどんな工夫が必要か（ユーザービリティ）
①手書きでアイデアを書き出す
自分の頭の中を整理するため。思いつただけ、どんどん書く
②PC上で清書する
クライアントに見せる用。また制作者がこれを見て制作作業に入れるようにするため
何でワイヤーフレームを清書すれば＿
テキストと四角形が撃ち込めればOK
【初心者向け】
Excel
ぱわーポイント
ワード等
【上級者向け】
ILLUSTRATOR
PHOTOSHOP
CACOO
MOCKUPS
【失敗しないワイヤーフレーム作成方法】
ワイヤーフレーム制作で注意する点
→ターゲットが迷子にならないサイトのレイアウト
→ファーストビュー
→視線の動き
→ターゲットが迷子にならないサイトのレイアウト
レイアウトのパターンは最大2種類まで
ヘッダー、ナビゲーション、フッターの位置は固定
→ファーストビュー
ページが表示された瞬間に見える範囲のこと
重要な内容や見て欲しいコンテンツを配置
閲覧してほしいページへのリンクを配置
コンテンツをちょっと見せることで下にコンテンツがあることをわかりやすい
→視線の動き
ゼット型とエフ型に視線が動く
視線の集まる場所に重要な要素を配置する
ワイヤーフレーム制作に失敗しないコツ
↓
同じ目的を持つサイトを徹底的に調査し、良い所を真似する
同じ目的のサイトを20サイトを見つけよう
ウェブサイトに関することは、
このワイヤーフレームを見たら全てわかるような状態にしましょう
コメントを残す