Thinking Backwards #ugf0308 | blog / bookslope

3/8 (土) に福井県のふくい産業支援センターが主催するイベント「アップグレードふくい＋ for the WEB」というイベントに参加してきました。福井県に来るのは二度目で、WCAF vol.9「Think of UX」というイベント（2012年11月）に参加して以来です。今回もそのときにお世話になった佐々木さん（オールコネクト）からのお声がけで実現しました。

登壇者は豪華で、田口さん（デスクトップワークス）、坂下さん（ゴンウェブコンサルティング）、松尾さん（ウェブライダー）、松尾教授（matuo大学）、森内さん（ロフトワーク）、そしてトリを務めた中川さん（アンティー・ファクトリー）の6名でした。

プレゼンテーション

Thinking Backwards: モバイルデザインと情報アーキテクチャの課題 from Takashi Sakamoto

ボクの講演タイトルは「モバイルデザインと情報アーキテクチャの課題」で、執筆をしている新刊で考えてきたエッセンスをお話するとともに、Schooでお話ししたような視点の違いによるお話をしました。

構成はだいたい以下3つで、表紙にも書いたタイトルは「逆から考える (Thinking Backwards)」です。ボクが話すのでIA寄りの話にはなりますが、最終的にはUIの話をしています。

ナビゲーションセカンドとRWD
2つの視点の違い
モバイルにおけるIAパターン
モバイルデザインとIA的課題
質疑応答

ナビゲーションセカンドとRWD

最近フラットデザインにリニューアルしたソニーのサイトを題材に、レスポンシブウェブデザインをふまえた「コンテンツ・ファースト/ナビゲーション・セカンド」の話をしました。Windows Store App のガイドラインを参照し、Web サイトからアプリへの転換方法としてナビゲーションとコンテンツの切り分けを紹介。

RWDのマルチデバイスのレイアウトパターンを紹介したうえで、進め方として「Responsive Design Workflow」にもある「ライナーデザイン/リニアデザイン」を説明しています。ソニーのサイトがシングルカラムだったこともあり、3カラム構成の宇多田ヒカルさんのサイトを題材に検証。ナビゲーションセカンドの説明には、前週実施したDevLOVEの参加者（Kutekenさん）のブログからスケッチを拝借。

2つの視点の違い

Schooでも話した2つの視点。たとえば、タレントのサイトを見てこれで十分だと思う方は、プロダクト観点の持ち主です。一方で、これでは不十分だけどWikipediaで調べるし…と思う方はエコシステム観点の持ち主と言えます。

同じように、Webサイト自体（品質や細部）の話をしがちなのは「プロダクトデザイン視点」、マーケティングや背景から見た場合のWebサイトをとらえる方は「サービスデザイン視点」としています。ポイントはどちらか一方だけではない点です。ご自身のバックグラウンドや経験したスキルによって解釈が異なりますが、こうしたタイプ（視点）があることを理解しておくと、相手とのコミュニケーションはがぜん豊かになります。

モバイルにおけるIAパターン

これは「ユーザー体験の構造化」「サイト構造の設計」「コンテンツ構造の設計」などに分けて、情報アーキテクチャがとらえるフィールド（範疇）としてツールやメソッド（デザインパターン）を紹介しています。とくにジャーニーマップに潜む課題や、最終的に必要になるのは結局「要求の整理」にあること、IAパターンとしての種類（表示・遷移・関係性）、増え続けるUIパターンについてご紹介をしています。

モバイルデザインとIA的課題

IAシンキングの定義を自分なりにまとめると―

人間中心デザインに基づいた、情報アーキテクチャの分野におけるソリューションを提供するための手法。

としていますが、JJGの5階層プロセスを前提に「現状を調査し情報を可視化したうえで目的や課題を明らかにし、新たな情報の提供方法を構築すること」を実践し、得られたイシューを最後にいくつかご紹介しています。内容は、画面レイアウトの優先順位・階層ナビゲーションの移行・シナリオの最適化・設計の思想になります。

今回の講演では、表紙タイトルにもあるように「逆から考える」をポイントにしていますが、新刊に取り組む中で見えてきた（ふだん気づかない）視点の違いや実現手段・実現方法としての表現の幅についてお話ししました。今回の「逆から考える」とは、ビジネスにおける問題解決手段を指しています。