スマホサイト制作の参考になりすぎるオススメ本、ユーザーにとって使いやすいUIを基礎から実装まで徹底解説

コンテンツをより魅力的に見せるためには、UIデザインが非常に大切。
スマホサイトの定番である43種類のUIを豊富なビジュアルと分かりやすいテキストで解説し、その役割や挙動をしっかり理解し、実装方法や効果的な使い方までを学ぶことができるオススメの本を紹介します。

今回は献本していただいたのですが、書店で見かけたら普通に「即買いの一冊」です。

新しいプロジェクトのネタを集めたいディレクター、コンテンツを魅力的に見せるUIを考えてるデザイナー、UIを実装する時にその方法を知りたいコーダーまで、Web制作に携わる幅広い人をターゲットにしています。

本書は購入すると、なんと「同じ内容のPDF」を無料でダウンロードできます！
詳しくは、書籍の最後のページ「アスキーブッククラブのご案内」をご覧ください。

Kindle版もでており、お値段が少しお安めです。

• スマートフォンサイトUI図鑑（Kindle版）

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書ではスマホサイトのデザイン・実装に欠かせない定番のユーザインターフェイス43種類が体系化して一冊にまとめられています。

ナビゲーション・リスト・グリッド・ウィジェット・通知・ビジュアライズ・フォームなど、よく見かけるUIの機能や実装方法が分かります。

各UIの説明では、そのUIの名称、実際に使用されているサイトやアプリの事例をはじめ、

UIパーツの意味、役割、挙動が説明されており、画面構成図もあるので実装する際に非常に役立ちます。

もちろん、具体的な実装方法もHTML, CSS, jQueryなどを使ってコードベースの解説が充実しています。また、ちょっとした改良ポイントなども掲載されています。

ページの見開きは、こんな感じ。
グラフィックと文字の量のバランスがちょうどよいです。

コードはシンタックスハイライトに対応しており、実装のポイントとなる箇所の詳しい説明はありがたいですね。

さまざまなUIがある中、どれをどのように使えばいいのか、そういったヒントもたくさんちりばめられています。

最近は、:before, :afterの疑似要素でいろいろな形状を画像無しで作るようになりました。

SVGなど、その実装の仕組みが少し複雑なものは図による解説でしっかり把握しておきましょう。

実装で困った時に役立つ知識も満載です！

スマートフォンサイトUI図鑑の目次

1. メインナビゲーション

   ナビゲーションバー

   タブバー

   リストメニュー

   アコーディオンメニュー

   スプリングボード

   プルダウンメニュー

   スライドメニュー

   サークルナビゲーション

2. サブナビゲーション

   セグメンテッドコントロール

   パンくずリスト

   ページネーション

   ドラッグ&ドロップUI

   シェアボタン

3. リスト・グリッド

   グリッドリスト

   スワイプリスト

   インフィニットスクロール

   タイムライン

4. ウィジェット

   タブパネル

   カルーセルパネル

   カードUI

   モーダルウインドウ

   トランスルーセント

   イメージ検索

   フォトギャラリー

   ポップアップムービー

   マップ

   横スクロールコンテンツ

5. 通知

   ツールチップ

   コーチマーク

   アイコンバッジ

   トースト

6. ビジュアライズ

   インフィニットインジケーター

   プログレスバー

   ステップナビゲーション

   グラフ

7. フォーム

   基本的なフォーム

   ログインフォーム

   サーチボックス

   トグルボタン

   カスタムボタン

   カスタムアップロードボタン

   カスタムセレクトメニュー

   カウンター付きテキストエリア

「図鑑」だと見るだけでになってしまいますが、本書は見るだけでなく「作る」ことにも重点がおかれた一冊になっています。
さまざまなUIの名称とその役割・機能・実装方法を勉強することができます。

本書でのサンプルは、すべて専用ページからダウンロードでき、商用利用無料・改変自由・著作権表示不要となっています。

献本の御礼

最後に、献本いただいたアスキー・メディアワークスの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス