ITベンチャーのためのサービスUI/UX講座 / 2013.09.24

1. 河原 香奈子 @kanakt
2013/9/24 ITベンチャーのためのサービスUI/UX講座
つくりか た
の
H
ello!

2. 河 原 香 奈 子
2013年5月にブラケット入社。
STORES.jpのデザイン全般を担当。
好きな動物はトリとネコ。
@kanakt

3. poppyvintage.stores.jpkotoriten.stores.jp
最 近 、S T O R E S . j pで 買いました

4. ・ 新機能のUI考えたり、既存のUI改善したり
・ HTML/CSS、JavaScript書いたり
・ サービス内容を伝えるためのページ作ったり
・ PR用の紙モノまで
デ ザイナー の 仕事って？

6. 最短２分で、驚くほど簡単に
オンラインストアがつくれる

9. 動画をご覧ください！

10. なんか簡単そう！

11. が提供するUX

12. ECサイト制作の知識が無くても
簡単にオンラインストアがつくれる！

13. 「いつのまにかできている」が
最良のゴールであると考える。

14. たとえば、ストアを作ってみよう
と思ったとき

15. オン ラ イン ショップの 開 設 に 必 要 な 情 報を 入 力してください 。
* は 必 須 で す 。 英 数 字 は 半 角 英 数 字 で入 力してください 。内 容 は 後で 変 更 することもで きま す 。
ご希 望 のア カウント http://
姓 名
stores.jp
ログイン I D
パ スワード
メールアドレス
メールアドレス（ 確 認 ）
代 表 者 電 話 番 号
登 録 者 名
セイ メイ登 録 者 名（ カナ ）

16. なんかめんどくさそうだよ∼
やっぱり大変そうだなあ∼

18. えっ、なんか簡単そう！
さっそくやってみよう！

19. なぜ「簡単そう」と感じた？

20. 一度にいろいろなことを聞かれると
混乱して面倒くさくなってしまうみたい。
3つくらいなら、すぐ決められそう。
「最初の一歩」の
ハードルは低い方がいい

21. ごちゃごちゃしてると迷っちゃう。
画面がすっきりしてると
次にどうしたらいいのかすぐにわかるね！
画面の構成要素は
すっきりしてる方がいい

22. 具体的にどうしたら良い？
画面を
すっきり
「最初の一歩」の
ハードル低く
×

23. のUIデザイン

24. 最初に決めるのは1∼3つ
やるべきことは重要なものから順番に
必要無いひとには見せない
❶
❷
❸

28. STORES.jpのUIは、いろいろな部分で
この考え方をもとにデザインされています。

30. これらを整理して、UIデザインに落とし込む
・ 機能の説明
・ 機能のON/OFF
・ 必要な設定
なに が 必 要？

31. 使わない
使いたい 説明 設定

32. 最初に決めるのはONかOFFのみ

33. はじめてONにしたときのみ説明を出す

34. 続いて、必要な設定画面が開く

35. 最初に決めるのは1∼3つ
やるべきことは重要なものから順番に
必要無いひとには見せない
❶
❷
❸

36. どう表現するか

37. 問 題 解 決 演 出＋

38. ・ビジュアル
・ことば（ラベリング）
・インタラクション
問 題 解 決 のた め の 表 現
なるべくシンプルな方法から試してみる

39. ・触ってみたくなるかどうか
・入力欄やボタンの大きさ
・色を限定する
「 簡 単そう 」な 気 分 の 演 出
ディテールの表現にもそれぞれ意味がある

43. まとめ

44. UIデザインはUXを達成するための手段。
ベストな組み立て方はサービスによって異なる。
サービスにとって適したUIはどういうものか
優先順位を決めて、やるべきことを絞ってみると
デザインに落とし込みやすい。

45. UIデザインをどのように表現するかで
サービスの世界観や個性がつくられるため
UIデザイン=ブランディングにも直結する。
STORES.jpも課題が沢山ありますが
よりよい答えに近づけるよう改善を続けています！

46. 最後に…

47. STORES.jpを運営する
ブラケットでは
デザイナーを募集しています！
お気軽にお声がけください！！
渋 谷 / オ フィス が お し ゃ れ / レッド ブ ル 無 料