レスポンシブ時代におけるWebデザインのレイアウトの知識とテクニックを学べる無料のeBook
Post on:2015年12月18日
Webサイトのデザインにはいくつかの知っておくべき必要な知識と、それを効果的に使うテクニックがあります。
ページを表示するスクリーンにおける人間の行動原理をもとに、構造の組み立て方、空白スペースの使い方、スクロールの取り入れ方など、レイアウトの知識とテクニックを学べる無料のeBookを紹介します。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-01.png)
Design for a Perfect Screen Book
まずは、eBookのダウンロード。
下記ページの「Download It Now For Free」をクリックし、メールアドレスを入力すると、ダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121801.png)
Design for a Perfect Screen Book
中身は英語ですが、キャプチャがたっぷりあるので、英語が苦手な人も勉強になると思います。
中身を少しだけ、ご紹介。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-02.png)
11章構成で、全116ページ。
スクリーンにおける人間の行動原理から、コンテンツの置き方、エレメントの使い方、コンテンツの流れの作り方、読みやすいレイアウト、黄金比、空白スペース、グリッド、スクロールなど、充実の内容です。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-04.png)
スクリーンで一番気をつけたいのは、人の目の動き。左上からスタートし、右下に流れます。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-05.png)
コンテンツの配置は、目の動きに基づいて考えてみましょう。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-06.png)
YouTubeでも重要コンテンツは左上、強調したいものは右、続くものは左下に配置されています。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-07.png)
エレメントを配置する際にも、この知識は役に立ちます。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-08.png)
最近はこういったカード型のレイアウトも多く見かけるようになりました。横に広い溝と縦に広い溝、それぞれの特長を巧く利用したいですね。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-10.png)
黄金比を使ったレイアウトも人気のテクニックです。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-11.png)
Appleの美しいヘッダ画像も、黄金比と空白スペースを巧みに使ってレイアウトされています。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-14.png)
レスポンシブ時代のレイアウトパターンは、だいぶ成熟されてきました。定番のグリッドの使い方は一通り覚えておきたいですね。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-15.png)
最近多いのは、スクロールを前提としたページです。垂直方向のスクロールの特性を理解しておくと、デザインにも役立ちます。
![ebookのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015121802-16.png)
スクロールは垂直方向だけではありません、水平方向も増えてきました。デスクトップでは水平スクロールは操作が困難ですが、スワイプ操作だと非常に快適だからでしょうか。
sponsors