「モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 」を読んでみた

UIの勘を取り戻すために復習的に読んでみました。
ただ、パターン集で膨大な数のスクショが掲載されているので、読むというより見るに近いかもしれないです。

ちなみに第1版はモバイルデザインパターン― ユーザーインタフェースのためのパターン集で、前回の240ページから416ページにだいぶ増量しています。
内容としては第1版の発売から約2年半ほど経過していることもあり、内容に追加というよりも、ほぼフルリニューアルに近い状態です。
流石に2012年から比べると画面サイズも増えたし、iOS7でのアップデート…など、2版発売までの間に随分とデザインパターンは増えたため、それらを吸収して説明してくれています。
(また来年くらいに第3版出るのだろうか)

この書籍で良いところは主に以下の3点です。

  1. 過去のデザインパターンの紹介。
  2. デザインパターンの分類
  3. アンチパターンの紹介

過去のデザインパターンの紹介

1つ目は、過去のアプリのバージョンのデザインパターンを紹介しているところです。。
自分が知らないだけかもですが、今のところ過去のデザインパターンを見る方法としては、Google画像検索で日時指定をするか、Great Apps Timeline、またはpttrnsで特定のアプリの日付を遡るくらいしか方法が内容な気がします。
それでも、大手のアプリしか見ることができなかったりするので、最近デザインを始めた人は過去からの推移を含めて読んでみることをオススメします。
また、そういう意味では、第1版から読んでみるとより変化を感じられて良いかもしれません。

モバイルデザインパターン― ユーザーインタフェースのためのパターン集
Theresa Neil
オライリージャパン
売り上げランキング: 380,026

デザインパターンの分類

デザインパターンの本なので当たり前なのですが、実はデザインパターンの分類はとてもむずかしいです。
実はモバイルデザインパターンの第2版の発売少し前に、同様に分類する試みをやってみたのですが、ダブりなども考えてしまうとなかなか終わらなかった気がします。
デザインパターンの分類に正解はないですが、その他にはpttrnsの分類も参考になるかもしれません。
チーム内でのコミュニケーションのために、共通で認識できるパターンの名称があると良いかと思います。

余談ですが、スタンダードでは以前、参考になるデザインパターンのスクショをDropboxに集め、それをPixaでタグを付けする形で管理していました。
pixaでのUI管理

モバイルデザインパターンでは、主に章ごとに以下のような大分類を行い、その中で更に細かく分類する形で整理されています。

  1. ナビゲーション
  2. フォーム
  3. テーブル
  4. 検索、並べ替え、フィルタリング
  5. ツール
  6. チャート
  7. チュートリアルと誘導
  8. ソーシャル
  9. フィードバックとアフォーダンス

アンチパターンの紹介

通常の推奨されるパターンだけではなく、各章ごとにアンチパターンも紹介されており、第11章では30Pほどですが、アンチパターンだけでの紹介もされています。
それぞれアンチパターンだけではなく、通常のパターンについても正解はないため、自分で批評しながら読むことで、より学びに繋げることができるでしょう。
ちなみに前職で担当していたSlideStoryというアプリが、チュートリアルのアンチパターンと、ステータス表示のGoodパターンとして紹介されていました。

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集
Theresa Neil
オライリージャパン
売り上げランキング: 293,107
SHARE
tomohiro.suzuki

株式会社スタンダード UXデザイナー。最近よく読む書籍の分野は戦略、統計学、組織論など。好きな漫画は3月のライオンとワールドトリガー。趣味は塩分摂取とアルコール。