WebSig会議 vol.33： http://websig247.jp/meeting/33/ オープニングセッション ／藤川真一（えふしん、WebSigモデレーター）

1. ハッシュタグ: #websig
第３３回WebSig会議
「感覚的アプローチからのスマホUIデザイン」
2013年6月29日

2. ハッシュタグ: #websig
えふしん
@fshin2000
藤川 真一
2000年∼
Web受託
2006年
papeboy&co. ショッピングモール
「カラメル」担当
2007年
初代モバツイ開発者
現在
（株）想創社 代表取締役
慶應義塾大学大学院メディアデザイン研究科D1
BASE株式会社顧問

3. ハッシュタグ: #websig
WebSig24/7ってなに？
2004年７月∼
Webに関連するマーケットの健全な発展を促し、
人々の生活を豊かにすることを目的とした任意団体
2013年版∼
「変化し続けるWebの明日を研究し、
新しい視点を共有していくコミュニティ」

4. ハッシュタグ: #websig
2004年から「WebSig会議」というセミナー、会議形式の
勉強会を継続的に開催
• 第32回「便便利利さと、怖さと、⼼心強さと〜～戦う会社のための
社内セキュリティ 2013年年のスタンダードとは？！」
• 第30回「Webディレクターの過去・現在・未来〜～これから
求められるスキルセット・マインドセット」
• 第29回「効率率率化だけではない！中⼩小〜～中堅ECサイトの成果
を上げる「メディア編集⼒力力」とは」

5. ハッシュタグ: #websig
5

6. ハッシュタグ: #websig

7. ハッシュタグ: #websig
7

8. ハッシュタグ: #websig
今年も10月5日に、WebSig１日学校を
開催します。
「Re:Think
‒ あたりまえになったWebを考えなおす」
（仮）
鋭意、詳細計画中！是非、ご参加下さい！

9. ハッシュタグ: #websig
第３３回 WebSig会議
「感覚的アプローチからのスマホUIデザイン」

10. ハッシュタグ: #websig
今回のイベントの動機
「良いスマホアプリを作るのは
Webより遥かに難しくね？！」

11. ハッシュタグ: #websig
一例：通信を伴う画面遷移
・Webブラウザの場合
画面遷移、ローディングは、
ブラウザの仕事
・アプリの場合は、アプリ側で制御
↑
・いつ、どう読み込む？
・読込中表示の操作は？
・画面遷移のタイミング
・電車の中で、読み込めなかった時に
何を表示する？
・エラーの時に表示できない情報は、
どうデザインされているべき？！
プロセス全体でのUI設計が必要

12. ハッシュタグ: #websig
「アプリは実質的にWebサービスの
フロントエンド」

13. ハッシュタグ: #websig
「アプリはブラウザがやってくれてたこと
も再設計しなくてはならない」
＝ブラウザを前提とした設計論では
足りない。

14. ハッシュタグ: #websig
ブラウザ
＝ ツールよりメディア
アプリ
＝ メディアよりツール
（利用シーンや心地良い文脈ありきで、
Web上にあるメディアを活用する）

15. ハッシュタグ: #websig
PC Webからモバイルアプリへの変遷
間接的な情報サービスから、
ライフスタイルを直接サポートする道具へ

16. ハッシュタグ: #websig
だからこそ、ユーザー体験重要
その中でも、特に
ユーザインターフェース超重要

17. ハッシュタグ: #websig
今、不確実なタイミングだからこそ、
みんなが考えなきゃいけないことに
気づき、考えよう！

18. ハッシュタグ: #websig
今回のイベントの流れ
１．The GUILD 深津貴之さん
手触りと美的センスについて
２．Good Patch 土屋さん
Gunosyの事例や、UIについて
３．グループワーク

19. ハッシュタグ: #websig
スタンフォード大学
ハッソ・プラットナー・デザイン研究所
慶應義塾大学 SFC
デザイン思考研究会[編集]
柏野尊徳[監訳]木村徳沙/梶希生/中村珠希[訳]

20. ハッシュタグ: #websig
• 言うのではなくて見せる
• 人の価値観に焦点を当てる
• すばやく形にする
• 徹底的な協働

21. ハッシュタグ: #websig
直感的なUIデザインアプローチの体感
• とにかくUIについて考えてみる
• プロトタイプを作り上げる
• 形にしていく課程を体感する

22. ハッシュタグ: #websig
• 「学び」を楽しくする教材のUI
• 新聞のUI

23. ハッシュタグ: #websig
それでは本日はよろしくお願いします。