レスポンシブ時代におけるWebデザインのレイアウトの知識とテクニックを学べる無料のeBook

Webサイトのデザインにはいくつかの知っておくべき必要な知識と、それを効果的に使うテクニックがあります。

ページを表示するスクリーンにおける人間の行動原理をもとに、構造の組み立て方、空白スペースの使い方、スクロールの取り入れ方など、レイアウトの知識とテクニックを学べる無料のeBookを紹介します。

Design for a Perfect Screen Book

まずは、eBookのダウンロード。
下記ページの「Download It Now For Free」をクリックし、メールアドレスを入力すると、ダウンロードできます。

Design for a Perfect Screen Book

中身は英語ですが、キャプチャがたっぷりあるので、英語が苦手な人も勉強になると思います。

中身を少しだけ、ご紹介。

11章構成で、全116ページ。
スクリーンにおける人間の行動原理から、コンテンツの置き方、エレメントの使い方、コンテンツの流れの作り方、読みやすいレイアウト、黄金比、空白スペース、グリッド、スクロールなど、充実の内容です。

スクリーンで一番気をつけたいのは、人の目の動き。左上からスタートし、右下に流れます。

コンテンツの配置は、目の動きに基づいて考えてみましょう。

YouTubeでも重要コンテンツは左上、強調したいものは右、続くものは左下に配置されています。

エレメントを配置する際にも、この知識は役に立ちます。

最近はこういったカード型のレイアウトも多く見かけるようになりました。横に広い溝と縦に広い溝、それぞれの特長を巧く利用したいですね。

黄金比を使ったレイアウトも人気のテクニックです。

Appleの美しいヘッダ画像も、黄金比と空白スペースを巧みに使ってレイアウトされています。

レスポンシブ時代のレイアウトパターンは、だいぶ成熟されてきました。定番のグリッドの使い方は一通り覚えておきたいですね。

最近多いのは、スクロールを前提としたページです。垂直方向のスクロールの特性を理解しておくと、デザインにも役立ちます。

スクロールは垂直方向だけではありません、水平方向も増えてきました。デスクトップでは水平スクロールは操作が困難ですが、スワイプ操作だと非常に快適だからでしょうか。