既存アプリの改善案をTwitterで発信、デザイナーたちの視点 #デザイン筋トレ

[ 目次 ]
・はじめに
・＃デザイン筋トレ
　・ちぎらさんのデザイン提案ー『note』
　・タカサカさんのデザイン提案ー『connpass』
　・大嶋さんのデザイン提案ー『LINE』
　・タクミカイさんのデザイン提案ー『AbemaTV』
　・はるたさん のデザイン提案ー『スポナビプロ野球速報』
・おわりに

はじめに

「このアプリ、もっと使い勝手を良くするためにはどうしたらいいんだろう」

たとえば、こんな風によく使うWebサイトやアプリなども「より良くするためには」といった視点を持つ。これもクリエイターにとって大切なことですよね。

特にデザイナーたちにおける自主学習的な取り組みが「#デザイン筋トレ」。

UIにおける課題を自分なりに分析、解決するためのUI設計やデザイン案をTwitterなどで公開。実際に採用されてもおかしくないのでは？といったクオリティでアウトプットをしているデザイナーも少なくありません。

彼らはどんな視点で、「＃デザイン筋トレ」に取り組んでいる？ そこから得られるものとは？

手を動かし、自分でつくってみてこそ見える優れた機能の裏側、そして学べるデザインプロセスの言語化、解像度を上げたインプットの方法…。具体的な「＃デザイン筋トレ」を例に参考に、みなさんもUI改善・提案に挑戦してみましょう。

#デザイン筋トレ

ちぎらさん（＠harapeko29）のデザイン提案 ー『note』

勝手にプチ改善：「note」ログイン導線のUI

まずはじめに紹介するのは、テキストや音声など、コンテンツのプラットフォーム『note』の改善。特筆すべきは自身がユーザーとして気になった、小さな課題の改善を行なっているところ。

注目したのはサイト上部にある「ログイン」の機能でした。

私は既に登録をしているので、『ログイン』をしたかったのですが、『登録』を押してしました。何故かというと、『／』部分が区切りではなくて意味合いとして『＆』かと思ったのです。つまり、別々のリンクではなく、1つのリンクに見えました。（遷移先が登録ページだったので「あれ？なんでだろう」となりました。）加えてフォントサイズが小さく且つ『／』でしか区切っておらずリンク同士が近くて、どちらにしても押しにくい…。そんな訳でこんな感じに直すのもありなのかな、という案

実際の改善アイデア。ログイン機能がボタンに変更されています。

なんとこの改善のブログはnote公式に届き、実際にUIが改善されたそうです。小さな提案でも発信してみるといいことがありそうです。

---

タカサカさん（＠obuject_obuject）のデザイン提案ー『connpass』

connpassのアプリUIデザインを考える

次に紹介するのは、勉強会やミートアップの情報が集まるポータルサイト「connpass」の改善例。

ユニークなのは、今のUIの資産を生かしつつデザイン変更のアイデアを考えているところ。イチからデザインしなおさなくてもできる改善の提案は、始めやすそう。

終了済みにはステイタス表示はせず、文字をうすめのグレーにして対応。それを申し込み済みのセグメント内でも流用。

上の例では、各パーツは過去の資産を生かしつつ、色味やフォントなどの調整を行なっています。

---

大嶋さん （＠ta0o_o0821）のデザイン提案ー『LINE』

大嶋さんのツイートより

続いては、『LINE』の事例。

他のメディアのいいところを上手く取り込んで、タイムライン派生でトークを生み出したり、個人トークが一定時間で消えたりというアイデアを提案。この事例では、ただUIを改善するだけではなく、新しい機能を追加してみているところが参考にしたいポイントになりそうです。

また、大嶋さんの取り組みで面白かったのがインスタのストーリーでABテストを実践しているところ。

大嶋さんのツイートより

UIの改善提案を考えたあとは、大嶋さんのように、実際にユーザーに見せて反応をみてみるというのも面白いかもしれません。

---

タクミカイさん （＠takumii_kai）のデザイン提案ー『AbemaTV』

画面遷移全体を再設計、 invisionで公開中

次は、ネットでライブストリーミング視聴が可能なTV番組「AbemaTV」の例。

決算データを参照して、ターゲットやサイト全体が目指すべき方向からデザインしようと試みているのが、他の改善と大きく異なります。

https://twitter.com/takumii_kai/status/975294859790630912

UIの改善・提案がカバーする領域は大小さまざまです。まずは小さなものから始めてみること、慣れてきたら大規模な改善にもトライしてみるといいのかもしれません。

カイさんの改善は、まさにAbemaTVで開発中の機能だった様子

企業の垣根を超えて、デザインの改善案がTwitter上で話されるというのは、今まであまりみなかった光景ですよね。こういった事例が増えると、デザインの改善案をSNSにアップするのも楽しくなっていきそうです。

---

はるたさん （＠hrtnde）のデザイン提案ー『スポナビプロ野球速報』

1ヶ月続けた“勝手にUI改善”の振り返り

最後に紹介するのは、プロ野球の情報を発信するアプリ「スポナビプロ野球速報」を改善したfreeeの新米デザイナー、春田さん。かれは、以前CAREER HACKにも登場してくださいました。

関連記事：ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道

記事でも少し触れていますが、彼はUIの改善・提案をデザインを学ぶ方法論として使っています。UI模写（トレース）と呼ばれる、すでにあるサービスの完コピから初めて、最終的には改善提案まで。得られた知見について、ブログで次のように振り返っています。

ー春田さんが得られたこと（ブログより抜粋）

・自分が作ったアウトプットに対して、説明する力が少しついた
実際にUIを作るときも常になぜ？変更が必要なのか、また、無限に考えられる改善案からなぜそれを選択したのかを意識して作りました。その結果、自分のアウトプットに対して説明する力がついてきたと考えています。

・複数案を作って比較することが癖になった
これは、自分のアウトプットを説明するために複数案を作らないと「なぜこの案にしたの？」という問いに答えられなかったからだと思います。

・実務で以前より早くUIが作れるようになった
「考えて作ること」を意識した結果、なぜそのUIなの？という問いに自分で答えることができたので、悩む時間が減ったのではないかと考えています。

・インプットの質が上がった
普段アウトプットをし続けることで、課題感が明確になっていきます。私の場合は「文字組み」や「配色」のバランス感覚に関する課題感が明確になっていきました。

初心者にとってもたくさんの学びをもたらしてくれるUIの改善提案。トライしてみる価値は十分ありそうです。

おわりに

それぞれの事例を見てきましたが、おもしろかったのは、改善内容やモチベーションはさまざまであること。ただ、共通していたのは、Twitterなどのパブリックな場所に公開したり、恥を恐れず自分がいいと思う「デザイン」を表明していたり。発信することで思わぬ出会いを生んだケースもあるようでした。

今は、noteやmediumなど自ら発信するプラットフォームは多く存在しています。Twitterのみで発信している方も。必要なのは一歩を踏み出す勇気のみかもしれません。

文 ＝ まっさん