Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin
Post on:2014年10月1日
sponsors
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。
本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。
- ワイヤーフレームや最近のUIを解説したワイヤフレームガイド
- 2014年、進化しているWebデザインのトレンドをチェックできる無料のE-Book
- スマホページ・アプリのさまざまなUIの特徴と実装の注意点がまとめられた無料のeBook
eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。
本書の中身を簡単に紹介します。
まずは表紙、本書はオールカラー全195ページです。
1章は本書の紹介、2章から本格的な内容がスタートします。まずはスマホ時代のレスポンシブデザインの取り入れ方から。
3章からはさまざまなUIパターン、最初はInput系のコンテンツです。通常のフォームやモーダルウインドウなど、ソーシャルサービスにも欠かせないUIです。
4章はナビゲーション、カード型レイアウト用、縦長1ページ用、無限スクロール用など新しいタイプのものをはじめ、関連情報やお気に入りといったコンテンツ寄りのナビゲート方法、オーバーフローやモーフィングを使った視覚的に面白いナビゲーション、上部固定やサイドバー表示など、実例と注意点が記されています。
トップページからのナビゲート方法は、特に大切なポイントですね。
5章はソーシャルコンテンツ。TwitterやFacebookをはじめとするシェアは優先度大です。事例にはすぐに採用したい方法やここは注意しなくてはといったポイントが網羅されています。
6章はコンテンツ マネジメント、コンテンツをより分かりやすくよりかっこよく見せるか。今まではいかにクリックして目的のページに辿り着いてもらうかでしたが、最近の傾向はいかにスクロールしてもらうかに重点がおかれるようになりました。
スクロールやホバーに楽しいエフェクトを加えたり、フルスクリーンで美しい写真や動画を表示したりといった演出もさまざまなものがあります。
レイアウトのパターンも新しいものが定着してきました。カード型レイアウト、フルスクリーン表示の1カラム、レスポンシブ時代の複数カラムの使い方など。
Webサービスなどでは、データが無い状態の表示も考える必要があります。技術的な情報を表示するのではなく、無い状態ならではを有効に活用した事例は勉強になります。
PDFをダウンロードするには、下記ページの下方にメールアドレスを入力します。
「Send Me the Book」ボタンをクリックすると、ダウンロードページに移動するので、左上の「Download」からPDFをダウンロードできます。
ダウンロードページ
sponsors
