WebSig会議 vol.33「感覚的アプローチからのスマホUIデザイン」終了報告&セッション資料公開

モデレーターの馮です。こんにちは。

WebSig会議 vol.33「感覚的アプローチからのスマホUIデザイン」が2013年6月29日に開催され,大盛況のうちに閉会しました。今回は,募集をかけて1日をまたずに定員100名が埋まり,さらに追加枠40名もすぐに埋まってしまったほどの大人気会議となりました。会場は渋谷にある株式会社ミクシィさんのセミナールームにて(ミクシィの皆さん,ありがとうございました!)。

加えて,名古屋・大阪・高松・宮崎の4つの地域でのサテライト開催も行われ,4地域で30名を超える参加者が,総勢で170名近くの皆さんにご参加いただきました。

WebSig会議 vol.33


◆きっかけは 「良いスマホアプリを作るのはWebより遥かに難しくね?!」

今回の会議設計のきっかけは「スマホアプリのUIデザインはWebアプリ(サイト)のUIデザインより難しいのでは?」というところから。このあたりについて,WebSigモデレーターえふしんこと藤川真一さんからの説明で会がスタートしました。

えふしんさん

資料はこちら。

◆手触りを意識する!@fladdictこと深津さんセッション

前段をふまえて最初のセッションを担当したのは,@fladdictこと深津貴之さん。「スマホアプリの"手触り"や"美的センス"について」というタイトルのもと,ご自身がこれまでデザインしてきたスマホアプリのUI,また,実際にUIデザインを行うときに意識していること,使っているノウハウについて大公開していただきました。

深津さん

深津さんいわく,(良いモノを創り上げるうえで)大事なのは「恥ずかしいと思う気持ち」。つまり,良いモノを目指していくという考えではなくて,人から見られて恥ずかしいと思うモノを減らしていくこと,プロジェクトであれば恥ずかしさを共有して,その恥ずかしさを潰していくことが,結果として良いモノにつながっていくという考え方です。

加えて,UIデザインをするときに大事な要素として「手触り」を挙げました。これは,仕様書だけでは表現しきれないので,そのために実物を見せること,それをいつでもできるよう(自身のノウハウ・経験から生まれたアウトプットの)ストックを貯めておくことが大事とし,セッションを締め括りました。

深津さんのセッションでは,実際に動きを交えたり,アニメーションを利用したプレゼン内容が多く,資料だけではわかりづらい部分があるかと思いますが,とにかく,「触ってみること」「動きを意識すること」,こういった部分が大切だということが伝わってくる発表でした。

資料はこちら。

◆ハートに響くUIを生み出すためのデザインプロセス

続いて,最近注目を集めるニュースアグリゲーションサービス「Gunosy」のiPhoneアプリUIデザインを担当した株式会社グッドパッチから,代表取締役土屋尚史さんにご登壇いただき,「ハートに響くUIを生み出すためのデザインプロセス」というテーマでお話いただきました。

土屋さん

ドラマチック(?)だった創業時のエピソードを皮切りに,なぜUIにフォーカスする会社を目指したのか,そして,UIで何を実現するのか,土屋さんの考えについて伝わってくる発表でした。

まず事例としてUIを意識していると考えられるシリコンバレーを中心とした米国企業をピックアップし,UIを意識していると考える理由の1つとして,UI担当者が取締役として在籍しているケースが少なくないことを取り上げました。このように,先進的な企業では,組織面からもUIの重要性を考えているとのこと。

また,根本的なところとして「一番ユーザと距離が近いものなので,UIが重要なのは当たり前!」という持論を展開し,そこで突き詰めた結果から「他社との差別化になる」と判断してUIにフォーカスする会社にしたという,現在に至るまでの経緯についても紹介しました。

その他,グッドパッチ社内でのUIおよび業務に対する取り組み方,UIデザインの品質向上のノウハウなどについても細かく紹介していただきました。今後,公開できるものはどんどん出していくとのことなので,引き続き注目しましょう。

資料はこちら。

◆手触り重要!「直感的なUIデザインアプローチの体感」するグループワーク

最後に,これまでのセッションをふまえて,全員参加型のグループワーク「直感的なUIデザインアプローチの体感」を実施しました。具体的には,「新聞」「教材」という2つのお題に対して,UIの改善・改修を目指しながら,プロトタイプを創っていくというもの。

今回は100名を超える参加者,加えて,デザイン思考というこれまでのWebSig会議のグループワークから一歩進んだ取り組みで実施し,(正直なところ)どういう結果になるか,モデレーター内でも始めるまでドキドキしていました。

グループワーク開始後に,まず1チーム6名となり参加者同士で話し合い,決めたお題に対して個人としての体験の振り返り,課題の設定,課題に対する考えをまとめ,チーム内で共有してもらいました。

グループワーク風景

グループワーク風景

その後,チーム内での共有とともにプロトタイプの作成に進みます。プロトタイプ作成にあたっては,あらかじめ用意しておいた道具,たとえばセロテープやペンなどの文房具,風船やゴムボールといった遊具,アルミホイル,ティッシュなどの日用品など,ふだん身の回りにあるものを改めて触ることで,「手触り」を意識してもらう狙いを込めました。

道具 道具

道具 道具

ワークを進めていく中では,たとえばアルミホイルを使ってUIの動き(手触り)を表現したり,紙コップの動きと音をUIになぞらえるといった表現を想定し発表につなげるチームがあり,改めて「直感」「手触り」の有用性・重要性が共有できたのではないかと感じています。

発表

とくに印象的だったチームには,懇親会の場で発表してもらいました。

発表

参加した皆さんには,ご自身がどう感じたのか,ぜひブログなどで書いてコメントいただけると嬉しいです。

◆各サテライトでもグループワークを実践!

前々回(第31回)ぐらいから,サテライトにも積極的にグループワークに参加してもらえるように設計していまして,今回も東京会場と同じ設定で,サテライトごとにグループワークが実施されました。

名古屋の様子。
名古屋

大阪の様子。
大阪

高松の様子。
高松

宮崎の様子。
宮崎

写真からもわかるとおり,各地域とも,手触りを意識した「直感的なUIデザインアプローチ」を少しでも体感していただけたのではないでしょうか。

◆◆◆

以上,当日の模様を紹介するとともに終了報告といたします。

シート

あらためまして,スピーカーの深津さん,土屋さん,参加者の皆さん,ありがとうございました!

深津さんと土屋さん

6月29日当日のツイートまとめはこちらになります。

WebSig会議 vol.33「感覚的アプローチからのスマホUIデザイン」 #websig
http://togetter.com/li/526565

※今回からWebSig会議のナンバリング表記を「vol.」に変更しています。

◆次はWebSig1日学校2013,10月5日開催です

次回WebSig会議は,毎年恒例となった「WebSig1日学校」です。開催日は2013年10月5日,場所はこれまでと同じく,八王子にあるデジタルハリウッド大学八王子制作スタジオ(旧三本松小学校)です。

告知が始まりましたらお知らせしますので,ふるってご参加ください!(まずは10月5日を空けておいてください!)

前へ

WebSig会議 vol.33「感覚的アプローチからのスマホUIデザイン」,追加枠販売決定!2ndセッションにグッドパッチ土屋氏登壇!

次へ

「Re-design:あたりまえになったWebを考えなおす」~4回目となるWebSig1日学校2013、10月5日に開校決定!!