名古屋散策した時にジュンク堂書店(ロフト名古屋店)で購入した本『CSS3&jQueryで作る スマートフォンサイトUI図鑑』が長らく未読の状態が続いていたので、重い腰を上げてようやく今月になって本を開いてお勉強しはじめまして、今日ようやく完読したので、この本のレビュー・感想を書こうかなと。
『CSS3&jQueryで作る スマートフォンサイトUI図鑑』の概要
本のタイトル通り、CSSとjQueryを用いてスマートフォンサイトで使ういろいろなUI(ユーザーインターフェイス)の作り方を実例を実践しながら学ぶことができる内容になっています。
特にスマートフォンサイトのデザイン・実装に欠かせない定番のいろいろなUIが紹介されています。
最近あまりWEB制作のスキル的な事のお勉強をやっていなかったので、脳みそをフル回転でどうにか完読できた感じですね。
サンプルデータを使ってCSS&jQueryをエディタで実際にコード書きながら、本で紹介されている全サンプル(43個)を順番に読み進めていきました。
なんだかんだで完読するのに2週間ぐらいはかかりました。ん~よく頑張ったよ、自分(笑)
完読してみての感想はというと、脳みそフル回転した分、スマホサイトを制作するスキルというか引き出しが結構増えました(^_^.)
スマホサイトを制作する場合、画面の幅がPCと比べると小さいし、マウではなくて手でタップしたりスワイプして使う感じになるので、PCサイトとは違う制作スキルや考え方が必要になったりするんですけども、この本ではスマホサイト制作で必要だったり便利なCSSやjQueryの使い方・使いどころが多くの事例を使って紹介・解説されています。
具体的には、定番中の定番のハンバーガーアイコンを使用したナビゲーションバーやスライドバーなどの作り方、アコーディオンパネル、スライドメニュー、FontAweSomeを使用した各種アイコンの表現、インフィニットスクロール、タブパネル、カルーセルパネル、モーダルウィンドウ、フォトギャラリー、ポップアップムービー、Google Maps APIを使用したGoogleマップ、などなど、計43個のスマホUIの実サンプルデータで学ぶことが出来ます。
トリッキーなものはほとんどなくて、スマホサイトで定番で使われているよく見かけるUIがほとんどなので、実用性も高い制作テクニック・ノウハウを習得できると思います。
自分の場合、jQueryの基本的な事はうる覚えながら多少習得済みだったので、良い復習にもなりましたし、新たにjQueryの記述方法を学ぶ事も出来て、ちょうど良い内容でした。
本の難易度的にはjQueryを全く触った事がない人にはちょっと難しいかもな内容なので、そういう方はjavascript・jQueryの初心者向けの書籍(よくわかるJavaScriptの教科書など)から始めた方が良いかもですね。
jQueryの基本的な事がやれる人なら、この本の内容は簡単すぎず、難しすぎずでちょうど良い内容だと思うので、そういう方には特におすすめの本だと思います。
この本で習得できるスマホUIの実例
この本で習得できるスマホUIの実サンプルがどんなものなのかというのを、本でも紹介されていた実際のサイトURLで紹介したいと思います。
しっかり習得すれば、スマホサイトで人気のUI・定番のUIデザインを自作できるようになります。
ちなみに以下に紹介するURLはPC向けサイトではなくスマホサイトのUIなので、PCブラウザで見る場合はブラウザの画面幅を小さくしたり、シュミレータを使ってiPhone・Androidスマホ環境を再現して閲覧したり、はたまた実物のスマホで確認してもらう必要がありますので、あしからず(^_^.)
では、この本で習得できるスマホUI43の実例サンプルのうち少しだけ紹介します。(UIが変わっていたりしたら御愛嬌で)
プルダウンメニュー
スターバックス
スライドメニュー
MERY
シェアボタン
SHEEN
インフィニットスクロール
I/0 3000
タブパネル
livedoor
タブパネル
トンボ鉛筆
カルーセルパネル
dentsu
フォトギャラリー
mezza9
ポップアップムービー
nymi
グラフ
みるみるわかるEnergy
まとめ
『CSS3&jQueryで作る スマートフォンサイトUI図鑑』はユーザに使いやすいスマホサイトを制作したいという方におすすめの書籍だと思います。
この書籍でCSSとjQueryを勉強をすれば、実際の企業・お店のスマホサイトでよく使われているUI(ユーザインターフェイス)を実装したスマホサイトを自作して制作できるようになると思います。
本の難易度的には、CSSとjQueryの基本的記述が既に出来る方には、ちょうど良い内容だと思います(^_^.)
CSSとjQueryの全くの初心者の方にはちょっと難しい内容なので、初心者の方はjavascript・jQueryの入門書(よくわかるJavaScriptの教科書など)から始めた方が良いかもです(^_^.)