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

はじめに

“勝手にUI改善”というUIトレーニングを1ヶ月以上続けているので、そのトレーニングによってできるようになったことやまだできないことをブログに書くことにしました。(勝手にUI改善is何？って方は、上のMomentsを見てください😊)

このブログの主目的は自分自身の振り返りを行うことですが、UIデザインに対する課題感を持っている人にも読んでもらえたらなと思います。独学でデザインを始めてみたいという人は、以下のブログを参考にして、トレースから始めることをオススメします。

背景

勝手にUIデザインを始めた経緯を説明します。私は独学でデザイナーを始めた身です。

ポートフォリオも制作物もない中、2016年の4月から都内のベンチャー企業でUXデザイナーとしてインターンを始めることができました(この経緯は今回は省きます)。

日々の仕事に追われる中でUIデザインに関するインプットを怠っていたこともあり、UIデザインに対する課題感を持ち続けていました。

課題感としては以下のようなものです。

1. 既存のUIを使いまわすことしかできない。(もちろん統一感のあるUIは大切ですが、負の遺産として排除したいUIもそのまま使ったりしていました)
2. 自分が作ったUIに全く自信がなく、なぜそれが良いのか説明できない。(作っても作ってもそのUIがベストな理由が説明できずに悩み続ける。悩んだ挙句に先輩デザイナーに相談しに行く)
3. エンジニアから相談を受けてもすぐに答えれない(2の理由から、こちらのUIが良いと説明できないので、結局先輩デザイナーに相談する)

上にあげた例はほんの一部ですが、UIデザインに対して苦手意識を持っていました。

そんな時、元Newspicks Designerカイさん(Takumi Kai)の以下のTweetを見つけました。

Tweetを見た瞬間、「これだ！」と感じその場でこのコミュニティへの参加を決めました。

そのコミュニティに参加してまずやったのはinstagramのトレースです。トレースについては以下のブログにまとめています。

他にもairbnbのトレースやTwitterのトレース等も行いました。

ある程度UIを設計する際のルールを掴んではきましたが、自分で能動的に考えて手を動かした訳ではないため物足りなさを感じていました。(トレースからの学びはたくさんあったので、独学から始める方は最初にトレースから始めることをオススメします)

その時、カイさんから何かアプリを作ってみるか既存アプリのリデザインをやってみると良いよと言われました。

1からアプリを考えるのも良かったのですが、既存アプリのリデザインの方が手軽に始めることができそうだと思ったので、“勝手にUI改善”を始めることにしました。これが私が“勝手にUI改善”を始めた背景です。

ちなみにアプリのリデザインを継続させるモチベーションとして自分の思考過程をTweetすることにしました。

たまにいいねとかリプライくるので、嬉しくて毎日続けたくなりますw

継続できないよという人にはオススメします。(後述しますが、TweetしながらUIを作ることは他にもメリットがあります)

できるようになったこと

スキル的にはまだまだですが、この1ヶ月を振り返ると以前よりも確実にスキルアップしている感があると思っています。(実際作ったやつを比較すると1ヶ月後の方が良くできてますねw)

ですので、今回は惜しまずにできるようになったこととして説明します。

1. 自分が作ったアウトプットに対して説明する力が少しついた

以前の課題感としてあげていた「アウトプットを説明する力」ですが、以前よりも確実についたと思います。この要因として以下の2つが考えられます。

1. トレースで得た学びを最大限フル活用してUIを作った。
2. 自分の思考過程をTweetすることで、誰かに説明することを意識しながら作ることができた。

まず、1.「トレースで得た学びを最大限フル活用してUIを作った。」について説明します。

トレースを行った結果、UI設計のルールがある程度理解できるようになっていました。さらに実際に自分で手を動かして作ることで、トレースの際に気がつかなかった点、例えばフォントカラーの差(クリックできるかどうかや情報の優劣を色で表現している)などに気がつくことができるようになりました。

結果的にUIを説明するボキャブラリーが増え、自分のアウトプットに対しても説明できるようになったのだと考えます。

次に、2.「自分の思考過程をTweetすることで、誰かに説明することを意識しながら作ることができた。」を説明します。

当初は自分のモチベーションアップのために始めたTweetですが、思わぬ副次効果があったと考えています。思いの外、いいねやリプライがあったので、Tweetする際も第三者を意識してTweetするようになりました。

例えば、「先ほどの案と比較してなぜ変更を加えたのか」をTweetするように意識していました。

実際にUIを作るときも常になぜ？変更が必要なのか、また、無限に考えられる改善案からなぜそれを選択したのかを意識して作りました。

その結果、自分のアウトプットに対して説明する力がついてきたと考えています。

2. 複数案を作って比較することが癖になった

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

カイさん含め、多数の先輩デザイナーから複数案作って比較することが大切と言われていましたが、実際に手を動かすことで習慣化することができました。

3. 実務で以前より早くUIが作れるようになった

実は今回のトレーニングを始めた当社は夏休みをいただいていたこともあり、インターン先に出社していませんでした。

夏休みを終え、普段の仕事を再び始めた時、1つのアウトプットを出すまでの時間もフィードバックをもらってからアウトプットを修正するまでの時間も短くなっていることに気がつきました。

要因としては、「考えて作ること」を意識した結果、なぜそのUIなの？という問いに自分で答えることができたので、悩む時間が減ったのではないかと考えています。

4. インプットの質が上がった

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

その結果、普段アプリを触っているとき、またアプリのUIデザインを積極的に研究するとき、自分の苦手なポイントに関して意識的に吸収するようになりました。

以前のインプットは、漠然とアプリを見てその事実から学びを得ようとしていましたが、現在のインプットでは自分が不得意とする分野を他のアプリではどうなっているか？なぜそうしているのだろうか？をより深く考えることができるようになりました。

また、毎日アウトプットを出しているので、インプットをしたことがすぐに試せていることもインプットの質をあげている要因の1つだと考えています。

まだできないこと

もちろん、まだできていないこともたくさんあります。今できていないことを明確にしてこれからの学びにつなげたいと思います。

1.「文字組み」「配色」のバランス感覚

「文字組み」「配色」のバランス感覚が圧倒的に弱いなと思います。その結果、情報の優劣の違いがわかりづらくなっています。

カイさんにも相談したところ、経験値によるところもある。改善する方法は、たくさんのパターンを作って自分の中でその感覚を磨いていったり、FacebookやTwitter、テキスト系のサービスを完コピしてみるのも良いとのことでした。

今回の勝手にUI改善が終わったら挑戦してみようと思います。

2. わかりやすくてクールなデザイン

先日、Twitterで見かけたこのツイート。UI設計のルールを学習した結果、わかりやすいデザインに近づいているとは思いますが（近づいていてほしい）、クールなデザインにはほど遠いなと思います。

「文字組み」「配色」のバランス感覚を鍛えるだけでも、現状よりは改善されるとは思います。

また、クールなデザインはなぜクールなのか？という問いに対する答えが、自分の中で言語化できていないので、日々のインプットで意識していきたいポイントだなと思います。

3. 決定力のあるUIデザイン

リデザイン時にあまり意識できていなかったのが、決定力のあるデザインだと思います。

上記のブログの中で決定力のあるデザインとは以下のように定義されています。

「実装面まで考慮された実装可能なデザインであるか」

今回のリデザイン時では、実装面まで考慮されたデザインを作ることができていませんでした。例えば以下の画面を見てください。

20/20のコミュニティ内でカイさんからのフィードバックを一部掲載します。(ちなみに20/20に入ると毎週カイさんからアウトプットに対するフィードバックをもらえます)

・タイトルが３行の時を表示できなくなってるUIな気がして、情報量が減るのであれば、それはやらない方がベターかなと思った

上記のように、私が最初に作った案ではタイトルが3行以上のとき、どう表現するかが全く考慮されていませんでした。

静的なスクショを見ながら改善していくわけため、実装面を意識するのは忘れがちなポイントですが、確実に使えるスキルを身につけていくために意識していきたいと思います。

おわりに

1ヶ月ほぼ毎日継続してトレーニングを続けたおかげでたくさんの学びがありました。また、今回ブログに書くために気づきや学びを整理をしたことで、UI改善を続ける上での課題感や意識した方が良いポイントが明確になったと思います。

“勝手にUI改善”については、完成次第ブログにまとめる予定ですので、楽しみに？してお待ちください。

長文でしたが最後まで読んで頂きありがとうございます。