よりぶろ

アプリのUIとかについて書いてく予定

スマホアプリデザイナーひとりAdvent Calendar #20 /ex4/ スマートフォンアプリのUIを知るための書籍をいくつか

いよいよAdventCalendarも最終回。

何かまとめ的なものにしようかなーと思い至った結果、シンプルにドキュメントのまとめにしたいと思います。

2012年のUI振り返りみたいなんでもいいかなとも思いましたが、それはまた年末あたりにでも。

スマホアプリのデザインをいきなりすることになっても、ひとまずこれに目を通しておけば大丈夫でしょっていうのを選びました。その筋の方にはお馴染みの本ばかりです。

またタイトルでは書籍と書きましたが、一部ネット上のドキュメントも含んでいます。

あとめんどくさいのでアフィリンクは仕込んでない!!

 

スマートフォンのUI全般

デザイナーのためのスマートフォンインターフェースデザイン

【対象OS】iOS(iPhone) / Android

【目次】UIデザインを考える / UIを描く/ UIを実装する

もしこれからデザインするアプリのプラットフォームが決まっていない場合や、もしくはiOSとAndroid両方の場合、この本が参考になります。また、Webサイトとかグラフィックのデザインはしたことあるけどスマホは初めて…というデザイナーさんにもぴったりです。

目次を見てわかるように、ページの1/3が「UI要素の作成方法」に割かれています。Adobe Illustratorを使っての方法なので、普段Photoshopを使われている方は参考になります。

3項目めの「UIを実装する」編は大半がAndroidに関してなので、iOSメインの方が読むと少し物足りないかもしれません。

 

モバイルデザインパターン― ユーザーインタフェースのためのパターン集

【対象OS】iOS(iPhone) / Android

【目次】ナビゲーション / フォーム / テーブルとリスト / 検索 / 並べ替え / フィルター / ツール / グラフ / 誘導 / フィードバック / アフォーダンス / ヘルプ / アンチパターン

 最近オライリーから出た書籍です。その名の通り、モバイルアプリにおいてどんなUIのパターンがあるのかを集めたものです。

あくまでもパターン集なので、iOSとAndroidの違いについてはそれほど書かれていません。どういう画面構成ならユーザーに負担がかからないのか、どういうレイアウトなら小さな画面にちゃんと収まって使いやすいのか、について書かれています。

自分がデザインするアプリのパターンが予めわかれば、これを参考に(悪い例も載っています)デザインを進めることができます。

全ての例にフルカラーのスクリーンショットが載っており、作者のサイトから参照することもできます。

 

各OSのデザインガイドライン

スマートフォンのアプリをデザインする上で、やはりデザインガイドラインは外せません。以下は書籍ではありませんが、必ず一度は目を通すべきドキュメントです。

iOS: iOS Human Interface Guideline日本語PDF / iPadのHIG

Android: Android Design

Windows Phone: デザインライブラリ

Windows Store Apps: アプリのUXの設計(デザインガイドラインの項もこの中にあります)

iOSのHIGはPDFで落とせるので、タブレット等に入れておけば、空いた時間に読むことができます。

WPとストア アプリは、URLの ja-jp を en-us に変えると英語版になります。翻訳しきれていないドキュメントも存在しているので、基本は英語で見るのをオススメします。

 

iOS

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

【対象OS】iOS(iPhone)

【目次】素早い操作 / タップする価値のあるアプリか / 小さなタッチスクリーン / デザインを始める前に / 標準のUIパーツ / 目立たせる / 第一印象 / スワイプ、ピンチ、フリック / 横向き画面の活用 / 礼儀正しい会話 /

iPhoneアプリのUI本といえば、やはりこれでしょう。ひとつのOSに特化したことで、iPhoneの基本操作や標準のUIデザインに関する情報も記載されています。

また、今回紹介する本の中では最も教科書的と言えるので、モバイルアプリ全般に対して参考になることがたくさん書かれています。Androidしかやらない人でも一度は目を通してみると、書かれている言葉から色々な影響を受けられると思います。

お値段は少しお高めですが、オライリーのEbookからだと安く購入できます。

 

Android

Androidに関しては、現状デザインオンリーの書籍は見当たりません。タイトルにUIと入ったものもいくつかありますが、内容はプログラミング寄りです。 

しばらくはAndroid Designを読んで自主勉強、といったところでしょうか。まだHoloを採用したアプリの数も少なく、またパターン的にはそれほど多様でもないので、まとまった本が出るにはしばらく時間がかかるような気がします。

 

Windows Phone / Windows Store Apps 

Windows8 UI/UXデザイン入門

【対象OS】Windows 8 / Windows Phone

【目次】Metro / タイポグラフィ / グリッドシステムとテンプレート / アプリケーションの画面の状態 / ナビゲーション / コントロール / タイルを使いこなす / 独自性を持たせる / 実践Expression Blend

手前味噌ですが、私が共著で書かせて頂いた本は、今のところ日本語でWP、Windows ストア アプリのデザインを知ることができる唯一の本です。海外でもデザイン本はぼちぼち出始めた頃かなぁ。。

内容はWindows 8がメインなので、WPをがっつり知りたいという方にはあまり向いていないかもしれません(基本的なレイアウトとか、タイルの話はあります)。

Windows ストア アプリのデザインガイドラインは、内容はとても充実しているのですがサイト内が迷子になりやすく、情報をうまくまとめることが難しいです。

この本をとっかかりにして、少しでもWindows 8、Windows Phoneに興味を持って頂けたら嬉しいです。

 

もう一歩踏み込んで

上で紹介されたものは全部読破したぜ!って方は、以下の書籍も参考にしてみてください。

デザイニング・インターフェース

インターフェースデザインの心理学―ウェブやアプリに新たな視点をもたらす100の指針

デザイニング・インターフェースは昔からあるので有名な本ですよね。第2版になってモバイルアプリの項などが増えました。

内容はいかにもオライリーッ!てな感じで、正直僕は全部に目を通していません。お金に余裕があればとりあえず手元に置いとくといいんでないでしょうか。ただしそれなりに大きいので、紙じゃないと嫌だ!という方以外はEbook版を買うことをおすすめします。

インターフェースデザインの心理学は、個人的に今年出た中のベスト・オブ・おもしろ本です。

まず、構成がシンプルでいい。 タイトル通り100個の指針が、1つ2〜3ページで紹介されています。そして、どの指針に関しても、論文や研究結果を元に紹介されているので、1つ1つの持つ説得力がすごい。ぱらぱら捲ってもよし、一気に読んでもよしの万能本です。

この本を参考にすれば、自分のデザインにさらに説得力を持たせることができるんじゃないかと思います。 

 

というわけで、最後はUIデザインについてあまり詳しくない方向けの記事となりました。

数としては少なめでしたが、もちろん、他にも参考になる本はたくさんあります。そもそもアプリのUIについて理解したからと言って、必ずしもそれがいいアプリのデザインに繋がるとも限りません。

設計のお話とか、OSによってあれができないこれができないの把握とか、あとは基本的なとこだけど色彩とかレイアウトとか。とにかく学ぶべきことは本当に広いし、たぶん終わりとかないですね。

 

さてノリではじめたこのAdventCalendarも、1日を除いてなんとか続けられることができました。まっ、大半は日を過ぎてからだったけど笑(来年はもう少し計画的にできるといいな)

わりと周りからの評判はよろしい感じだったので、AdventCalendarが終わったからこのブログも書くのを止める、ではなく、週に1回くらいはこんな感じの内容を投稿していきたいと思います。そのうち、自分が考えてるアプリのデザインなんかも出せるといいな。