Honmushi blog
2019/02/13

【実践技術書】スマートフォンサイトUI図鑑

スマートフォンサイトでよく使われるUIを集めた本です。使われているサイトの紹介と実装方法も載っています。全部で43種類が掲載されています。

CSSによる表現の調整の部分が多く、実際のデータの処理に関する部分はあまり載っていませえん。 よく見るUIの表現について、CSSをJSを用いて表現します。

実装の概念やパターンを知ることができるので、スマートフォン向けのサイトをつくるときの参考になります。本でも紹介されていますが、UI表現を集めたサイトがいくつか存在しているので、そちらも一緒に参考にすると表現の幅が広がります。

ざっくり紹介

CSSとjQueryをつかったUIの紹介です。jQueryのプラグインをつかった実装も多く載っていました。サンプルコードもアスキーのサポートサイトでダウンロードできます。ただし、メールアドレスをつかって会員登録が必要です。

データの処理などに関しては載っておらず、あくまでも見た目についての情報になっており、CSSの属性指定の部分が多いです。jQueryの部分では難しい処理はありません。

説明もわかりやすく書いてあるので、HTMLとCSSについて理解があれば簡単だと思います。デザイナーの人におすすめです。

おわりに

たくさんのUIの表現の例が載っています。参考になるサイトの例も載っているので、実際にスマートフォンでサイトにアクセスしてみるとわかりやすいです。

この本では見た目についての実装のみなので、かなり簡単なソースコードになっています。実際のサイトでの利用ではほかにも考慮することがあってややこしくなると思います。タイトルの通りUIの表現の図鑑として使う分には十分だと思います。デザインの部分で迷ったりしたときに読み直してみたり、インプットの一つとして暇なときに読んでみると良いです。

  • このエントリーをはてなブックマークに追加