#51 デザイン会社が実践する、初心者が圧倒的デザインの実力をつけるUI学習法

2022年7月29日 10:11

皆さん、こんにちは！Design Switchです✋。前回は「相性の良い英字フォント同士の組み合わせとは?」について紹介しました。まだ前の記事を読んでいない方はこちらから是非読んでみてください👉

Archecoでは様々な案件に取り組む中で、デザイナーに求められている要素は速さと質が挙げられます。デザイナー以外の人からすると、なぜ短時間で美しいUIを可視化できるのか不思議に感じられます。やっぱり才能がある人は違うと言われることもあります。

しかし、それは間違いです。私達デザイナーは素早く美しい画面設計ができるように日頃から訓練をしているのです 💪。逆に言えば継続して訓練すれば誰でも素早く美しいデザインができるようになります ✌️。その方法として今回はArchecoで行っている「Pinterest Time」を紹介したいと思います！

デザインの実力を伸ばす Pinterest Time って?

Archecoで行っているPinterest Timeとは、Pinterestを活用したUIのリサーチ、言語化、可視化、共有を行うUIデザイン作成訓練です✍️。ちなみにPinterestは様々なアイデア (画像) を収集・保管できるサービスです。無料ですので是非利用してみてください！

Pinterest Timeを会社で実施している目的は3つです。

① デザインのトレンドを把握する
② 表現の引き出しを増やす
③ デザインの論理構成と説明力を身につける

実際にUIを作っている方は、上記のようなプロセスを実際の業務で取り組んでいるのではないでしょうか。Pinterest Timeの特徴は、普段デザイナーがなんとなくやって身につけていたこと (美しく表現するためにどうすれば良いか、それを可視化する方法) を標準化することができ、仕事としても活用できることです。つまり、内省・属人化していた知識を標準化することができる取り組みでもあります。また、言語化と可視化を入念に行うことでデザインの意図を説明しやすくなることも特徴です。

また、継続的に実施することでビジュアル的な表現の幅が広がり、デザインの説明力の向上も期待できます。

Pinterest Timeのプロセス

プロセスは0~4までの計5ステップあります。トータル2~3時間ぐらいで行っています。※Pinterest Timeの実施した例を記事後方に載せております😼！

📝 00.Pinterestの準備
まずは、Pinterestの準備をします😎。アカウントを持っていない方は作成して、Pinterest Time用 (UIの参考画像をリサーチしてストックできるボード)のボードを事前に作成しておきましょう！

📝 01.デザインをみつける
次に、UIの参考を探します。探す媒体はPinterest、Behance、Dribbbleでも何でも構いません。探す時のポイントは以下の通りです。

① 見たことのない新しいデザイン (新規性)
② 自分がチャレンジしてみたいデザイン (能動性・表現幅の拡張)
③ これから流行りそうなデザイン (流行)

見つけた参考のUI画像は事前に作ったPinterestのボードに貼りためておきましょう👍

📝 02.言語化する
次に探してボードに貼りつけたUIの言語化を行います。具体的には良いと感じた理由を、構造・構図 (UI上の情報の位置、レイアウト)、UI上の要素 (エレメント: 線、形、質感、空間、文字、比率、色)に分けて言葉で表していきます。

📝 03.似ているものを探す
次に言語化が終わったら、それを元に似た別の参考のUIを探します。前の工程で、良いと感じた理由 (良さを表現するための必要条件) を言語化したと思います。その理由を兼ね備えた参考を2~3ピックアップし、良いと感じた理由を満たしていれば、最初にいいなと感じた参考の良さを表現できそうか検証していきます🤔。

ピックアップしたUIは最初に選んだUIと比較し、似ていること、そうでないことを箇条書きで書きましょう。そうすることで、良いと感じた理由の精度が上がり、どの条件を満たせば良さを表現できるかが明らかになります。