STORES.jpのつくりかた

26,466 views
27,301 views

Published on

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

Published in: Design

STORES.jpのつくりかた

  1. 1. 河原 香奈子 @kanakt 2013/9/24 ITベンチャーのためのサービスUI/UX講座 つくりか た の H ello!
  2. 2. 河 原 香 奈 子 2013年5月にブラケット入社。 STORES.jpのデザイン全般を担当。 好きな動物はトリとネコ。 @kanakt
  3. 3. poppyvintage.stores.jpkotoriten.stores.jp 最 近 、S T O R E S . j pで 買いました
  4. 4. ・ 新機能のUI考えたり、既存のUI改善したり ・ HTML/CSS、JavaScript書いたり ・ サービス内容を伝えるためのページ作ったり ・ PR用の紙モノまで デ ザイナー の 仕事って?
  5. 5. 最短2分で、驚くほど簡単に オンラインストアがつくれる
  6. 6. 動画をご覧ください!
  7. 7. なんか簡単そう!
  8. 8. が提供するUX
  9. 9. ECサイト制作の知識が無くても 簡単にオンラインストアがつくれる!
  10. 10. 「いつのまにかできている」が 最良のゴールであると考える。
  11. 11. たとえば、ストアを作ってみよう と思ったとき
  12. 12. オン ラ イン ショップの 開 設 に 必 要 な 情 報を 入 力してください 。 * は 必 須 で す 。 英 数 字 は 半 角 英 数 字 で入 力してください 。内 容 は 後で 変 更 することもで きま す 。 ご希 望 のア カウント http:// 姓 名 stores.jp ログイン I D パ スワード メールアドレス メールアドレス( 確 認 ) 代 表 者 電 話 番 号 登 録 者 名 セイ メイ登 録 者 名( カナ )
  13. 13. なんかめんどくさそうだよ∼ やっぱり大変そうだなあ∼
  14. 14. えっ、なんか簡単そう! さっそくやってみよう!
  15. 15. なぜ「簡単そう」と感じた?
  16. 16. 一度にいろいろなことを聞かれると 混乱して面倒くさくなってしまうみたい。 3つくらいなら、すぐ決められそう。 「最初の一歩」の ハードルは低い方がいい
  17. 17. ごちゃごちゃしてると迷っちゃう。 画面がすっきりしてると 次にどうしたらいいのかすぐにわかるね! 画面の構成要素は すっきりしてる方がいい
  18. 18. 具体的にどうしたら良い? 画面を すっきり 「最初の一歩」の ハードル低く ×
  19. 19. のUIデザイン
  20. 20. 最初に決めるのは1∼3つ やるべきことは重要なものから順番に 必要無いひとには見せない ❶ ❷ ❸
  21. 21. STORES.jpのUIは、いろいろな部分で この考え方をもとにデザインされています。
  22. 22. これらを整理して、UIデザインに落とし込む ・ 機能の説明 ・ 機能のON/OFF ・ 必要な設定 なに が 必 要?
  23. 23. 使わない 使いたい 説明 設定
  24. 24. 最初に決めるのはONかOFFのみ
  25. 25. はじめてONにしたときのみ説明を出す
  26. 26. 続いて、必要な設定画面が開く
  27. 27. 最初に決めるのは1∼3つ やるべきことは重要なものから順番に 必要無いひとには見せない ❶ ❷ ❸
  28. 28. どう表現するか
  29. 29. 問 題 解 決 演 出+
  30. 30. ・ビジュアル ・ことば(ラベリング) ・インタラクション 問 題 解 決 のた め の 表 現 なるべくシンプルな方法から試してみる
  31. 31. ・触ってみたくなるかどうか ・入力欄やボタンの大きさ ・色を限定する 「 簡 単そう 」な 気 分 の 演 出 ディテールの表現にもそれぞれ意味がある
  32. 32. まとめ
  33. 33. UIデザインはUXを達成するための手段。 ベストな組み立て方はサービスによって異なる。 サービスにとって適したUIはどういうものか 優先順位を決めて、やるべきことを絞ってみると デザインに落とし込みやすい。
  34. 34. UIデザインをどのように表現するかで サービスの世界観や個性がつくられるため UIデザイン=ブランディングにも直結する。 STORES.jpも課題が沢山ありますが よりよい答えに近づけるよう改善を続けています!
  35. 35. 最後に…
  36. 36. STORES.jpを運営する ブラケットでは デザイナーを募集しています! お気軽にお声がけください!! 渋 谷 / オ フィス が お し ゃ れ / レッド ブ ル 無 料

×