ノンデザイナーがUIのモックを作るには

僕は普段、フロントエンドのエンジニアとして働いているのですが今回たまたまUIのデザインをする機会がありました。

内定先の研修の一環として「iHatch」という新規事業立案ビジコン勉強会を行いました。

この研修で、僕らはWANTと言う「ホシイ」を叶えるプラットフォームを立案しました。簡単に説明すると、今の投げ銭ブームに乗っかったようなサービスです。

僕はこのサービスの原案とアプリのデザインをしたんですが、このアプリのデザインが結構好評だったので、なにに気をつけながら作ったか。を記事にしたいと思います。（ツイートはこちら）

いいねくださった皆さまありがとうございます🙇

最初に考えること

まず僕が最初に考えたのは、どんなイメージをユーザーに持たしたいのかを考えました。このサービスは悪く言えば貢ぎサービスになりえてキャバクラやホストの「貢ぎ」をインターネットに持ってきたように捉えられてしまいます。ただ僕らの思いとしては、なにか頑張ってる人を応援したいだとか、ファンだから貢献してあげよう。みたいなとこを抑えたかったので、ガヤガヤするよりシンプルにまとめたほうがいいかなと思いました。

なのでスプラッシュ画面（アプリ起動時に一番最初に出てくる画面）はとても簡潔にロゴだけのせた形にしました。似ているもので言うとZOZO社の提供する「WEAR」です。

ロゴだけのせる画面を作るにあたりサービス名とロゴをつくらないといけません。

サービス名は、「ホシイ」を叶えるプラットフォームなので簡潔に「WANT」とし、最後のピリオドは字の全体のバランスで堅くなってしまうかもと思ったので可愛らしさが出るようにつけました。

画面を作っていくのに気をつけること

僕は普段からフロントエンドのエンジニアとして働いているためアプリを使う時に操作感や画面のみやすさなどを気にして使っています。そうすると、こう言うデザインをする時に「あのUIをパクれるのではないか」という発想がでてきます。

普段からアプリのUIをしっかりみて使うこと。

デザイナーでもないなんの知識もない人がUIを作るには、徹底的にパクることが結構重要になってきます。

これはアプリの自分のページ（マイページ）です。

ここも僕は徹底的にパクりました。参考にしたのは、またもWEARです。

WEARからパクったのは、タブのデザインとアイコン、名前の表記の部分です。タブは、アクティブな場所が太く、そうでないところが細くなっています。アイコンは、アイコンを丸いボーダーで空白をあけてデザインされています。

MYPAGEの説明にも書いているようにWANTにはユーザーにランクがあります。これにより名前の右についているロゴの色が変化します。この発想はTwitterの認証マークです。

次に取り掛かったのがユーザーのホシイを一覧にしてその詳細にいった時の画面です。

一覧のカード型はMaterial Designを意識もしましたが、徹底的にパクる精神を元に「Medium」というサービスのアプリのデザインからヒントをもらいました。

mediumの記事が横並びになっているカードにヒントをもらい、一覧を下にすると「new item」や「pickup item」などの表示は見辛いと思い横並びにしました。

詳細画面では、「支援する！」と言うボタンを押して欲しいのでそれ以外とボタンとで高さをだすため影をつけました。

最後にシェアをする画面です。支援をしたらシェアをする画面に遷移するのですが、その時のボタンも影をつけて高さをだし配色は「Talkroom」というアプリを作っている会社の社長であるしょせまるさん（@shosemaru）が最近リリースした「BATON」と言うサービスのシェアボタンの色を徹底的にパクりました。

徹底的にパクる

どの画面にも共通しているのは、部品的にデザインは徹底的にパクることです。パクることが悪と言う考えの人もいらっしゃるかも知れませんが僕は、「部品単位でパクる」や「他のサービスに似せる」ことは逆にユーザーとしても使い慣れたUIになり双方利点があるのではと思います。

ただ完全にパクるのではなく、パクった後少しだけ変えてみるのが良いと思います。徹底的にパクるとパクったほうのサービスを使っているユーザーからすれば、同じUIだ。となり、同じような動きをするのではと思わせてしまう可能性もあるからです。その他に、自分のサービスと完全にマッチすることのほうが少なく、ある程度は自分のサービスの色もだしていけるチャンスなのでだしたほうがいいのではと思います。

河野純也 @konojunya