1. 「優先順位を決めて、やるべきことを絞る」- ブラケット河原香奈子氏が語る、「STORES.jpのUI・UXデザイン」

「優先順位を決めて、やるべきことを絞る」- ブラケット河原香奈子氏が語る、「STORES.jpのUI・UXデザイン」


 多くの人に使われるWebサービスを作る上で、UX(ユーザー体験)は非常に大切なものになる。UXが大事であると分かっている企業は多いが、実際どのようにしていけば良いのか頭を悩ませている企業も多いことだろう。  


 大企業からスピンアウトする起業家のためのコミュニティを運営する「Spinout」とクラウドソーシング事業に成長を続ける「クラウドワークス」がコラボして行われた勉強会「エンジニア・デザイナーのための100万人に使われるサービスの作り方 第一歩」にて最短2分で、驚くほど簡単にオンラインストアがつくれる「STORES.jp」を提供する株式会社ブラケットにてUI/UXデザイン全般を担当する河原香奈子氏が語った「STORES.jpのUI・UXデザイン」をまとめた

「なんか簡単そう」がコンセプト

 STORES.jpは最短2分で、驚くほど簡単にオンラインストアが作れるWebサービス。つまり、ECサイト制作の知識が無くても簡単にオンラインストアが作れるようでなければいけない。


 目指すべきは、「いつの間にかできている」と思ってもらえること。それこそがSTORES.jpが提供するUXのゴールだと考えている。

 例えば、ストアを作ってみようと思ったときに、こういった画面が出てきたらどう思うだろうか。多くの人が「面倒くさそうだな」「大変そうだな」と感じてしまうと思う。

 だからこそ、STORES.jpは名前やログインIDといった面倒さと感じるような項目をなくし、「メールアドレス・パスワード・URL」の3つにした。入力項目が3つだけなら、多くの人が「簡単そう」「早速やってみよう」と思ってもらいやすくなる。

「ハードルを低く」×「画面すっきり」

 STORES.jpを使うまでのステップが「簡単そう」だと思えたのには、2つの理由がある。


1. 「最初の一歩」のハードルを低くした

 一度に色々なことを聞かれると、混乱して面倒くさくなってしまう。しかし、3つだったらどうだろうか。きっと多くの人が、「すぐ決められそう」だと感じるだろう。


2. 画面の構成要素をすっきりさせた

 ごちゃごちゃしているとユーザーは迷ってしまう。しかし、画面をすきっりさせておけば、ユーザーは次に何をすれば良いのかが分かるので迷うことがなくなる。

STORES.jpのUIデザイン3つの肝

 STORES.jpのUIデザインの多くは、3つの考えをもとにデザインされている。


1. 最初に決めるものは1つ〜3つ

2. やるべきことは重要なものから順番に

3. 必要ない人には見せない


 このように、STORES.jpは基本的にON/OFFのボタンを設置して選択させるようにしている。ONにした人にのみ、それ以降の情報を公開し、OFFの人にはそれ以上の情報は見せないようにしている。こうすることで画面はすっきりし、自分のサイトを運用するハードルも下がる。

ディテールの表現にもこだわる

 STORES.jpは「なんか簡単そう」というイメージを表現するために意識しているのは、「触ってみるかどうか」「入力欄やボタンの大きさ」「色を限定する」などディテールにもこだわること。

 例えば、クレジットカードの情報を入力する際、番号や名前を入力しやすいように大きくすることにした。しかし、そこだけ大きくしてしまうと全体的にもバランスが悪くなってしまうし、「細かくて分かりづらい」というイメージを持たれてしまう可能性もあったので、有効期限やセキュリティーコードも同じ大きさにした。

 

 こういった細かい部分の一つ一つを積み重ねていくことによって、ユーザーに「なんか簡単そう」と思ってもらえるようになる。

優先順位を決めて、やるべきことを絞る

 UIデザインは、UXを達成するための手段。ベストな組み立て方はサービスによって異なり、全てのサービス通づるといものはない。


 そのためにも、サービスにとって適したUIはどういうものか優先順位を決めて、やるべきことを絞ってみるとデザインに落とし込みやすくなる。


 またUIデザインを、どのように表現するかでサービスの世界観や個性が作られるためUIデザイン=ブランディングにも直結する。すぐに完璧な答えなど出てこないので、とにかく改善を続けていくことが大切だということを覚えておいてほしい。



 

 大企業からスピンアウトする起業家のためのコミュニティを運営する「Spinout」では、このような勉強会を開催しています。起業に興味のある大企業の人は、ぜひ一度サイトをご覧になってください。


 


 


U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する