Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin

Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。

サイトのキャプチャ

Web UI Design Patterns 2014

本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。

eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。
本書の中身を簡単に紹介します。

PDFのキャプチャ

まずは表紙、本書はオールカラー全195ページです。

PDFのキャプチャ

1章は本書の紹介、2章から本格的な内容がスタートします。まずはスマホ時代のレスポンシブデザインの取り入れ方から。

PDFのキャプチャ

3章からはさまざまなUIパターン、最初はInput系のコンテンツです。通常のフォームやモーダルウインドウなど、ソーシャルサービスにも欠かせないUIです。

PDFのキャプチャ

4章はナビゲーション、カード型レイアウト用、縦長1ページ用、無限スクロール用など新しいタイプのものをはじめ、関連情報やお気に入りといったコンテンツ寄りのナビゲート方法、オーバーフローやモーフィングを使った視覚的に面白いナビゲーション、上部固定やサイドバー表示など、実例と注意点が記されています。

PDFのキャプチャ

トップページからのナビゲート方法は、特に大切なポイントですね。

PDFのキャプチャ

5章はソーシャルコンテンツ。TwitterやFacebookをはじめとするシェアは優先度大です。事例にはすぐに採用したい方法やここは注意しなくてはといったポイントが網羅されています。

PDFのキャプチャ

6章はコンテンツ マネジメント、コンテンツをより分かりやすくよりかっこよく見せるか。今まではいかにクリックして目的のページに辿り着いてもらうかでしたが、最近の傾向はいかにスクロールしてもらうかに重点がおかれるようになりました。

PDFのキャプチャ

スクロールやホバーに楽しいエフェクトを加えたり、フルスクリーンで美しい写真や動画を表示したりといった演出もさまざまなものがあります。

PDFのキャプチャ

レイアウトのパターンも新しいものが定着してきました。カード型レイアウト、フルスクリーン表示の1カラム、レスポンシブ時代の複数カラムの使い方など。

PDFのキャプチャ

Webサービスなどでは、データが無い状態の表示も考える必要があります。技術的な情報を表示するのではなく、無い状態ならではを有効に活用した事例は勉強になります。

PDFをダウンロードするには、下記ページの下方にメールアドレスを入力します。

サイトのキャプチャ

Web UI Design Patterns 2014

「Send Me the Book」ボタンをクリックすると、ダウンロードページに移動するので、左上の「Download」からPDFをダウンロードできます。

サイトのキャプチャ

ダウンロードページ

sponsors

top of page

©2018 coliss