CSS3&jQueryで作る スマートフォンサイトUI図鑑
著者:礒田優、久保知己、近藤直人、早川稔、宮田優希
監修:株式会社まぼろし
プロデュース:アスキー・メディアワークス
出版社:株式会社KADOKAWA
発売日:2015/02/23
「あの、ひゅーって横から出てくるメニュー」「え?どれ?Amazonみたいなやつ?」「じゃなくて、ほら、指でしゅってうごかせるやつ」「??」。スマートフォンサイトやWebアプリの制作時に「あるある」な光景ではないでしょうか。
本書は、そうした「スマホのUIパーツの名前がわからない」悩みを解決することを狙いの一つにしています。人によってUIの呼び名は異なり、必ずしも絶対的なものはありませんが、制作現場における一つの共通言語として活用されることを願って企画しました。
●ディレクターさん→クライアントやチームメンバーとの打ち合わせに
●デザイナーさん→サイト設計時のプロトタイプとして
●コーダー/フロントエンドエンジニアさん→実装の参考に
Webディレクターさん、デザイナーさんなど、スマートフォンサイトの制作に携わる、すべての方。
スマホサイトの画面設計やデザインの検討のときに、リファレンス的に使ってもらえるように作りました。
スマートフォンサイトの制作に欠かせない定番の43パーツを体系化して収録。
大きな誌面で、豊富なビジュアルを使って、UIパーツの構成要素や挙動を解説しました。
さらに、実際にUIが使われているサイトやアプリの事例、HTML/CSS、JQueryで実装するソースコードも紹介しています。
技術力に定評のあるWeb制作会社「まぼろし」のメンバーが執筆、監修。
実務に根ざした、実用的な何用を目指しました。
実装例のサンプルファイルをダウンロードにて提供。
商用利用可能、改変自由、著作権表示不要なので、すぐに仕事で利用できます。
本書のオススメの使い方が、サイト制作のプロジェクトメンバーの間での意識の統一です。
たとえばサイト制作の打ち合わせでは、UIパーツの名前や機能がメンバーの間で共有できず、面倒なことがあると思います。そんなときに本書を開いてもらえば、UIの名前をや実際に使っているサイトをその場で調べられます。
どんなUIを選んでどんなサイトを作るか。本書をめくりながら、メンバー間で議論していただければ幸いです。
01 ナビゲーションバー
02 タブバー
03 リストメニュー
04 アコーディオンメニュー
05 スプリングボード
06 プルダウンメニュー
07 スライドメニュー
08 サークルナビゲーション
09 セグメンテッドコントロール
10 パンくずリスト
11 ページネーション
12 ドラッグ&ドロップ
13 シェアボタン
14 グリッドリスト
15 スワイプリスト
16 インフィニットスクロール
17 タイムライン
18 タブパネル
19 カルーセルパネル
20 カード
21 モーダルウィンドウ
22 トランスルーセント
23 イメージ検索
24 フォトギャラリー
25 ポップアップムービー
26 マップ
27 横スクロールコンテンツ
28 ツールチップ
29 コーチマーク
30 アイコンバッジ
31 トースト
32 インフィニットインジケーター
33 プログレスバー
34 ステップナビゲーション
35 グラフ
36 基本的なフォーム
37 ログインフォーム
38 サーチボックス
39 トグルボタン
40 カスタムボタン
41 カスタムアップロードボタン
42 カスタムセレクトメニュー
43 カウンター付きテキストエリア
磯田 優: WEBデザイン系の専門学校を卒業した後、2014年3月から株式会社まぼろしにフロントエンドエンジニアとして入社。
久保 知己: WEBデザイン系の専門学校を卒業した後、2014年3月から株式会社まぼろしにフロントエンドエンジニアとして入社。
アスキー・メディアワークスは、KADOKAWAのブランドカンパニーのひとつです。「電撃」「アスキー」「魔法のiらんど」の3つのブランドを軸に、エンターテインメント分野を中心とした事業を展開。出版を基盤に、ウェブ・モバイル、電子書籍、アプリ、映像、音楽、グッズ、ゲーム、イベントなど、メディアを超えてコンテンツをプロデュース