Webアプリを作る人へ！UIの重要性 ~Webサービスをもっと使ってもらうには？~

![UIの重要性_ページ_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/fdd148de-2560-b5db-87a6-cd33842fe2e7.jpeg)

##はじめまして。
星乃やひろと申します。
自分はあまりこのようなスライドを使って、発表することはないのですが、今回機会があってこのような発表をさせていただく流れとなりました。
せっかく作ったスライドなので、発表だけで終わらせるのも勿体無いので、Qiitaに掲載させていただくことにしました。
自分なりに**UIの重要性**について考えて見ました。

![UIの重要性_ページ_02.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/a9176a24-0ca0-930e-23ea-b67fa059aec1.jpeg)

##まず、自己紹介。
最近クラウドソーシングなどでお仕事をいただくようになり、少しずつお仕事を通して学ばさせていただいております。
デザイナーでもほんとはないですが、勝手に名乗って、勝手にやらせていただいているというのが実情です。
Twitterは[@Yahimotto](https://twitter.com/yahimotto)、ポートフォリオは[Yahiro.me](https://yahiro.me)です。

##ここでクイズです。
![UIの重要性_ページ_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/7e190495-e79b-e618-e92b-e206f8b17811.jpeg)

![UIの重要性_ページ_04.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/7f32138c-a86a-8d5b-145d-a0baa8f4e65b.jpeg)

この中から**５秒で選択肢の中から**UIはなんの略かを選んでください！
###答えは...
![UIの重要性_ページ_06.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/74da4f3c-e9fa-e811-dc16-15ec41df032e.jpeg)

こんな感じで明らかに情報過多、情報過少なクイズだったわけですが、
![UIの重要性_ページ_05.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/73373bf3-1305-2754-812f-db24ec3b4c76.jpeg)
![UIの重要性_ページ_07.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/5d2f2695-6fe1-4487-0833-2c8b86baf002.jpeg)

UIが悪いと、**クイズにすらならないんです。**

##このクイズは
![UIの重要性_ページ_08.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/1f04ca54-b4b5-1ca6-ddb0-fa9fbccffccc.jpeg)

実は、あの誰もがプレイしたこのあるであろうゲームを制作している、**任天堂**の新人デザイナー研修で実際に**「UIデザインの重要性」**について伝えるために使用されているんです。
実際に体験してもらうことで、重要性をしっかりと伝え、それが実際のゲームにも反映されているんですね。

##任天堂の「伝え方の心がけ」
![UIの重要性_ページ_09.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/e84aeb1f-5b44-bbfd-7972-5d5be4721b1f.jpeg)

実際にこのような重要なポイント３つから任天堂はデザインを作っている、と言います。

![UIの重要性_ページ_10.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/bc9a809b-a157-e243-da66-b5e22383a521.jpeg)

でもこれって、当然**「Webサイト・アプリにも使えませんか？」**

実際にポイント一つ一つを「Webサイト・アプリ」で置き換えて見て見ましょう。

##教えるよりも体験してもらう
![UIの重要性_ページ_11.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/97f2f3e6-5f92-deb8-49d6-0feac1c33776.jpeg)

![UIの重要性_ページ_12.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/3680b8b3-11d3-def7-7196-69809b453ccb.jpeg)

例えば、TwitterなどのCtoCアプリであれば、

![UIの重要性_ページ_13.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/8b45d769-1b76-e22d-f083-147e3057e872.jpeg)

このようなツイートをするUIがあったとします。
どうすれば体験をしてもらえるように、進められるでしょうか？
簡単ではありますが、「一言」を付け加えるだけでも良いかもしれません。

![UIの重要性_ページ_14.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/444e527b-36ce-08e6-f3cc-d639e4ab57e5.jpeg)

このように、「やってみよう」と思ってもらえるハードルをなるべく下げる、ことで「利用者」を増やすことに繋がると思うんです。

##ファーストインプレッションを大事にする
![UIの重要性_ページ_15.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/a0b7930f-5f6b-0c21-35e5-0b8c1d464ea7.jpeg)

人の**「初めての体験」**は、とても重要です。みなさんにもそういう経験があるのではないでしょうか。
初めての経験っていうのは、**１度しかない**んです。その体験でどのようにアプローチすれば、ユーザーのこころを掴めるのかを考える必要があると思うんです。

UIはあんまり関係なくなりますが、
人と人が繋がるCtoCのアプリは、
![UIの重要性_ページ_17.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/f409442e-4c2d-4ffc-c25a-4f5f7dc101f9.jpeg)
**無理やりユーザー同士を繋げることが必要など思うんです。**

なぜか、
![UIの重要性_ページ_19.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/46a63725-ea8b-4013-e36c-b185b4919dec.jpeg)
みなさんも、SNSを使用されているので、よく感じると思うんですが、Twitterで誰かに話しかけられる、いいねやRTをされるって、一定のステータスになるぐらい、今の時代では重要になると思うんです。
CtoCのアプリをずっと使い続けてもらいたいのであれば、**無理やり人を繋げてしまえば解決するんじゃないでしょうか？**

![UIの重要性_ページ_21.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/8e1cd1ea-ab11-6b93-70b8-3c80f02ec605.jpeg)

このように、ユーザーの関わりを持ってもらうことで、そのアプリを使い続けてくれると思うんです。
なぜ、みなさんは最近発表された、キャリア三社の「＋メッセージ」を使わずに、LINEを使うのでしょう？
そこに「人の繋がり」があるからではないですか？

![UIの重要性_ページ_22.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/b327577d-8ad2-895e-e909-69ff5a4db747.jpeg)

UIの話から脱線しましたが、簡単に人とユーザーにつながってもらうためには、
操作も簡単である必要があります。
なので、すぐ操作できるUIが必要です。

##体験はおもしろく。
![UIの重要性_ページ_23.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/a7c80ce4-93f2-b16e-1f3b-ed596c6750ca.jpeg)

先ほども話しましたが、実際に体験してもらうことで、理解してもらうことも多いですが、それが苦になってゲームなどでもチュートリアルをボタン連打で飛ばすなんて経験がある人もいるでしょう。
そこで、操作を理解してもらうにはどうしたら良いのでしょう。**面白くすればいいんです。**

![UIの重要性_ページ_24.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/eb3a4d35-2ecd-c440-1e81-9b7460a3baae.jpeg)

任天堂から発売されているダンボールを工作しておもちゃ「トイコン」を作る、Nintendo Laboはまさにそれに基づいています。
ユーザーが何か行動をできると「サイコ〜」や「オッケー！」というような**褒め言葉**が表示されます。
実はこの「トイコン」を作る作業、多いもので４時間かかるものもあったりするのです。
それを苦なく続けてもらうために「褒める」という行為をする、ということだと思います。さすが任天堂。配慮がすごい。

![UIの重要性_ページ_25.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/91463289-3dd0-81b5-48a6-95d52d41ceca.jpeg)

このように、場面によってUIだけでなく、SEや言葉遣いをもデザインすることで、プロダクトの完成度が上がるんじゃないでしょうか？

![UIの重要性_ページ_26.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/f200a6b5-54e1-bee0-39da-2950c23e8c09.jpeg)

UI面では、例えばフォロワーが１０人を超えたらアプリ起動時にものすごいファンファーレを流してみるとか、ものすごいお祝いのパーティクルを表示するとか、そんなことがあれば、良いのではないでしょうか？（もちろん、ターゲットによってこんなものはいらねぇ！ってなる場合もありますよ！）

##終わりに
![UIの重要性_ページ_27.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/15991333-edd5-ed84-b4f3-b2dde47c4aea.jpeg)

![UIの重要性_ページ_28.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/9391aa3f-5eb3-3ead-1702-18a7cadda1df.jpeg)

今回は任天堂のDNA、考え方を引用しながら自分なりに「Webサイト・アプリ」に利用したら良いのか考えました。
みなさんも、もし優れたデザインがあったら真似をすれば良いと思います。もちろんロゴを丸パクリというのは倫理的にもNGですが、UIであれば、真似をしてよくなるんであれば、そうして自分のスキルに磨きを入れるべきだと思います。先人の知恵を借りましょう。レッツトライ！

稚拙な文章でしたが、最後まで目を通してくださりありがとうございました。
自分もまだまだ未熟な身なので、これから頑張って行きたいなと思います！
「夏休みはやっぱり短い」(夏の決心)

![UIの重要性_ページ_29.jpg](https://qiita-image-store.s3.amazonaws.com/0/237833/eb41d13f-1998-26be-31e3-88aa7143021a.jpeg)

####PDFファイルはこちらからご覧いただけます。
https://drive.google.com/file/d/1dBvwmNZ2z7i7FIljMEyAy7-Kzo_tFCd2/view