デザインは気づきが大切!デザインを見る目をどのように養えばよいのか

UIのデザイナーをはじめ、デザイナーではない人でも、どのようにデザインのセンスを磨き、デザインを見る目をどのように養えばよいのかを紹介します。

サイトのキャプチャ

How to develop an eye for Design

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

デザインのセンスを磨き、デザインを見る目を養う

私はデザインを始めた時、デザインが苦手でした。

Dribbbleなどからトレンドのデザインをコピーするのに夢中で、それらがどのように機能するのか気がついていませんでした。私が加えたドロップシャドウや不必要なエフェクトをもしあなたが見たら、ぞっとすると思います。

私はデザインの天才ではありません。そのため、必要とするスキルをどのように身につけるべきかを考えました。そして今、その中の一つをあなたと共有したいと思います。
あなたがデザイナーであるかどうかに関係なく、ここではデザインのセンスを磨き、デザインを見る目を養うのに役立ちます。

アプリは使うだけではなく、そこから何を学ぶか

スマホアプリは単に使うだけではなく、そのアプリのデザイナーの身になって考えることで、デザインの目を育てることができます。よく使用するアプリを開いた際に、コンテンツを楽しむ衝動を抑え、デザイナーとしてスクリーンを観察してみてください。注目すべきポイントがいくつかあります。

Hierarchy -階層

デザインはどのようにあなたのフォーカスを方向付けていますか? どんな情報が強調表示されていますか? どのようにカラーとテキストの処理が特定の要素の重要性を伝えていますか?

Content -コンテンツ

コンテンツを見た際にときめくような言葉が使用されていますか? どのようなコンテンツが目に見え、より興味深くみえますか? 表示されていないコンテンツはどれですか? コンテンツをグルーピングするために空白スペースはどのように使用されますか?

Intent -目的

そのアプリはどんな人が利用しますか? どんな問題を解決しますか? デザインはどのようにしてその問題をより良く解決するのに役立ちますか?

Audience -支持者

このアプリを使用している人は誰ですか? その使用例はあなたとどのように異なりますか? デザインはどのようにこれらの使用例をサポートしますか?

実際のアプリを分析

下記のGIFアニメーションは、各コンポーネントにフォーカスを合わせるためにアプリのUIを分析したものです。アニメーションでどのコンポーネントが次に来るかを予測すると、これまで認識できなかったディテールを観察することができます。

それぞれのコンポーネントが構築されるのを見て、これらのアプリのUIに必要なものを考えてみます。

AirbnbのUIを分析

  • 検索バーのプレースホルダーのテキストには「ここで検索」と書かれていてもかまいませんが、代わりに都市名を入力するように書かれています。私はロンドンに行くつもりはありませんが、そういった可能性を見ることは楽しくなります。
  • 「Dates」と「Guest」でフローにおけるポイントを繰り返し分析してみました。このアプリでは、場所を選択するまで日付は表示されません。これはユーザーがどのように検索するのか、そしていつ条件を追加するのか不思議に思えます。

TwitterのUIを分析

  • まず、「Retweets」と「Likes」の数字が太字であることに注目です
  • タイムスタンプには日付だけでなく、時間も含まれています。この時間はプロフィールで見ると表記が変わり、「5h」のように経過時間になります。なぜこのように異なるのか目的を考えてみてください。
  • Tweetstormでは、ツイートするための「Tweet」ボタンだけでなく、別のツイートを追加するためのアイコンが用意されています。それは「Add a Tweet」ではなく、「Add another Tweet」になっていることにも深い理由があるでしょう。
Tweetstormのキャプチャ

Tweetstorm

SpotifyのUIを分析

  • 最初に注目すべきは、Spotifyが再生中の曲をどのように表示しているかです。
  • New Releasesでは、選択したコンテンツに新しいプレイリストと新しいアルバムやシングルが含まれます。
  • New Music Fridayのプレイリストではフォロワーのカウントがありますが、Release Radarのプレイリストにはありません。これがなぜか、考えてみましょう。Release Radarはユーザー固有のものなので、フォロワーがありません。誰かがコンテンツのユースケースをすべてマップし、ペアにすべき適切なサブヘッダを決めなければなりません。こういったルールに気がつくこともできます。

ルールが分かれば、壊すこともできる

あなたが普段使用しているアプリを開き、デザイナーがなぜそのようにデザインしたのか考えてみることは、よい勉強になります。定期的にさまざまなアプリを分析することで、あなたはデザインの考え方を学び、あなた自身でアプリをデザインすることがより上手くなるでしょう。

この話題についてもっと知りたい時は、下記の記事も参考になります。

sponsors

top of page

©2018 coliss