Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

STORES.jpのつくりかた

28,466 views

Published on

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

Published in: Design
  • Be the first to comment

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を運営する ブラケットでは デザイナーを募集しています! お気軽にお声がけください!! 渋 谷 / オ フィス が お し ゃ れ / レッド ブ ル 無 料

×