スマートフォンサイトUI図鑑 — 眺めて楽しめて正しく知識をつける本
この記事は約5分ぐらいで読めます
この本は、近年特に重要さを増してきているスマートフォンサイトの制作において特にニーズのある、スマートフォンサイトやアプリケーションでのUIパターンを実例とビジュアル、コードなどで多角的に解説したものです。書籍のタイトルにある図鑑という言葉通り、眺めるだけでも面白い本です。
CSS3 & jQueryで作るスマートフォンサイトUI図鑑
ビジュアルでわかる目次
目次で様々なUIの見た目が一覧できる
本の目次が、そのまま紹介されているUIの一覧表になっています。目的のものをビジュアルから探すことができるので、通読しなくても必要なときにパラパラっと確認できるのが良さそうですね。
その名称がイラストに描かれた画面のどこを指しているのか色をつけてわかるようにしてあったりするとなお良いなーと思いました。
項目
紹介されているUIパーツは以下のような項目に分かれています。
- メインナビゲーション
- サブナビゲーション
- リスト/グリッド
- ウィジェット
- 通知
- ヴィジュアライズ
- フォーム
これらの項目のなかで更にアコーディオンメニュー、トグルボタン、トピックパスなどのよくあるUIパーツに名前を与えて分類、紹介しています。デファクトな名前が定まってないもの、あえてそうやって呼ぶことは少なそうなものもありますが…網羅しておかないとアレですし、実際どう呼ぶかって統一しておけばとりあえず仕事の役には立つでしょうしね。
実例とコードで各UIを解説
名称と役割の概要
各UIパーツごとに、冒頭で名称と役割や見た目を解説します。よく使われる名称がいくつもあるようなものはタイトルの下に他の呼び名が書かれていますが、これが地味に良いなと思いました。
人に説明するときや同じもの似ついて話しているとき、プルダウンメニュー？ドロップダウンメニュー？と言葉が混ざるときもあると思うのですが、こういうもので認識を統一しおくと良さそうですよね。そういう意味では実装者やデザイナーだけでなく、ディレクターさんなんかも目を通しておくと良さそうです。
各項目内ではさらに実際にそのUIを採用しているサイトのスクリーンショットやイラストを用いて、そのパターンがどんな場合に有用なのか、どのように実装するかを解説しています。
カラーの写真とHTML、CSS、JSのコードサンプル
CSS3、jQueryを使ったシンプルな実装のやり方とその応用例なども紹介されていますが、このコードサンプルは本を購入して得られるコードを使ってWebからダウンロードもできます。この際、本書のPDF版もダウンロードできます★
おわりに
この本は株式会社まぼろしが監修しており、執筆陣もまぼろしの社員の方たちで書かれた本です。KOJIKA17のこじかちん（@kojika17）も参加していて、最近本書きまくっててすげえなあと思っている次第ですw
さらっと読めるわりに、そのままで使えるコードも解説してあるので、実用的でもあると思います。前書きにもありますが、マークアップエンジニアだけでなくデザイナーやディレクターがワイヤーやカンプを作成する際の参考にもなる、会社に一冊あると良さそうな本でした！
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 2,923
今回はアスキーの担当者様より本書をいただきました。この場を借りてお礼申し上げます。
WEBCRE8.jpでは献本を受け付けています。お問い合わせはmail@webcre8.jpまでご連絡をいただければと思います。