実践Webデザインスキル - 第1章 Lesson7

失敗しないワイヤーフレーム作成方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ワイヤーフレームで注意する点について説明していきたいと思います。



この動画で学べること

・ユーザーが迷子にならないレイアウト方法
・効果的なファーストビューについて
・Webサイトを見るときの視線の動き




ターゲットが迷子にならないレイアウトをしよう

ページごとにサイトのレイアウトが大きく変わってしまうと、ユーザーが迷子になってしまいます。
ですので、基本的なサイトのレイアウトも一つ決めたらそれを変えないようにしましょう。


迷子にならないサイトのレイアウトのポイント
・レイヤードのパターンは最大2種類まで
・ヘッダー、ナビゲーション、フッターの位置は固定
この二つは必ず守ってください。




効果的なファーストビューについて

ファーストビューとはページが表示された瞬間に見える範囲のことです。
ファーストビューには重要な内容や見て欲しいコンテンツを配置します。
また、閲覧して欲しい ページへ のリンクを配置することでも、サイトの目的を達成しやすくなります。



視線の動きに注意して配置を考えよう

人が何かを見たり書いたりする時には必ず左上からになります。
大きく分けてZ型とF型の2つの視線の動き方がありますが、Webサイトの場合はF型になることが多いです。
これらの視線の動きに注意して、視線が集まる場所に重要な要素を配置するようにすると、ユーザーにとって使いやすいWebサイトになります。

ワイヤーフレーム政策で失敗しないコツは、同じ目的をもったWebサイトを徹底的に調査し、良いところ真似しましょう。
最低でも20サイトは見てくださいね!