UIデザイナーの能力開発ステップと鍛錬方法
先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。
一方で「デザイナーがいない。」とよく聞きますし「誰かいない？」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっていけるのではないか。と考えるようになりました。
では、デザイナー人口を増やすには、微力ながら自分で何かできないか。と考え、いろいろトライ&エラーした結果、同じ思想を持つCocoda!に出会い共感し、アドバイザーというカタチで力添えさせて頂くことになりました。
今回は、Cocoda!チームへの初アドバイスとして、"UIデザイナーになる、もしくは、より良いUIをアウトプットできるようになる為には、何を鍛錬したら良いのか" を考え、レベル設計の基礎を作りました。この時のアウトプットを元に記事を書きました。
デザイナーの業務範囲や要素の大事な事も書き出していますので、UIUXデザインを学んでいく方のヒントになれば幸いです。
・・・
まずは、いろいろ学びに関する知っている情報をバーっと描き出しながら試行錯誤しました。
試行錯誤してみた結果、Jesse James Garrett氏 の The Elements of User Experienceをベースに考えることにしました。（上の画像の左）
昨今のデザインプロセスはユーザーストーリーやユーザーシナリオを先に描く手法が多いと感じているので、3層目と4層目を入れ替えた方が個人的にはしっくりくるなーという感覚があり、勝手ながら入れ替えてみました。また、The Elements of User ExperienceのStrategyの部分をよくみてみると、User needsとSite Objectivesと書かれており、個人的には分けられるほどの粒度の大きさと感じたので2つに分けました。下記が思考の変遷です。
そして各階層に大事にすべき要素を詳細項目として書き出してみました。十分に落とし込めていない部分がまだありますので、ご意見頂けると嬉しいです。（図に入れていきたい！）
Visual Designの部分はいわゆるデザイン基礎の範囲と考えていて、美大出身の方は学業の中で叩き込まれていますが、非美大出身は就職してから先輩から教わったりしますので、業務しながらということもあり、十分鍛錬する時間が取れていないかもしれない、と思っていますし、実際、自分の経験がそうでした。ツールの使い方は習熟しますが、良いアウトプットを出す為の知識と鍛錬は、どこか足りないのではないか、美大出身の人には敵わないな、とも思います。ですが、シニアやマネージャーになってもデザインのフィードバックは必ずあり、どの年齢になっても大事ですし、鍛える部分だと思っていますので、レベル表現ではなく「土台として持つべき範囲」と思ったのでBasicと表現してみました。
（僕は非美大出身でめちゃくちゃ鍛錬した感覚はなく、興味関心もあって時間が許すなら基礎部分を学んでみたいといつも思っています）
要素としては、Basic ElementsとBasic Principlesが大事になると考えました。
Basic Elements（基本要素）
Line（線）
Color （色）
Shape （形）
Space （空間）
Form（フォーム）
Value （明度）
Texture（質感）
Basic Principles（基本原則）
Balance（バランス）
Gradation（グラデーション）
Repetition（反復）
Contrast（コントラスト）
Harmony（調和）
Dominance（割合）
引用させて頂いた元はbtraxさんのこのBlog記事です。
そして、UIデザイナーにとって大事なInterface DesignのみをLevel 1としてみました。要素の表現としてHuman Computer Interfaceとしたのは、Interfaceはユーザーだけのモノではなく、マシン側（コンピューター）との対話部分なので、マシン側のInterfaceでもあるのを意識すべき。と思ってこの単語を選びました。（余談ですが、この先、技術進化が進むと、デザイナーがAIとAIのInterfaceを考えたり作ったりする時代がくるかも？ですね）
Human Computer Interface
Clarity（明瞭さ）
Concision（簡潔さ）
Familiarity（親しさ）
Responsiveness（応答性）
Consistency（整合性）
Aesthetics（美意識）
Efficiency（能率性）
Forgiveness（寛容さ）
以降のレベルは、
・Level 2は、上記のBasicとLevel 1の両方を含め、決まっている機能をUIに落とし込むイメージ。
・Level 3は、Visual DesignからRequirement Designまでの範囲で、単一画面を対象として機能とUIをつくるイメージ。
・Level 4は、Visual DesignからInteraction Designまでの範囲で、ひとつの体験を描いて機能とUIに落とし込むイメージ。
・Level 5は、Visual DesignからResearch Designまでの範囲で、ターゲットユーザーを定義し、リサーチ→体験→UIまで作り切るイメージ。
・Level 6は、Strategy Designも含む全てで、ビジネスモデルからひとつのサービスをつくるイメージ。
上記のようにVisual Designから範囲がどんどん広がっていくに連れて業務範囲と難易度が上がっていくので、各階層を区切りとしてLevelに当てはめてみました。
どうしたらレベルごとに鍛錬できるか？
トレースやUIカイゼンやDaily UIなどいろいろ鍛錬する方法はありますが、どういった方法がどのあたりを鍛えられるのか、勝手ながら個人的見解ですが当てはめてみました。他の方法もあれば足していきたいと思います。
今回のCocodaのリニューアルではLevel 4がカバーされリニューアルしています。今後は各Levelが順次対応されていく予定なので、楽しみですね！
知っている範囲で他のサービスやガイドラインを書き出してみました。ご活用頂ければと思います。
Basic
color（色を見分けるの練習）
The Bèzier Game（ベジェ曲線の練習）
KERNTYPE（カーニングの練習）
SHAPETYPE（シェイプの練習）
Level 1
Human Interface Guideline（Apple）
Material Design（Google）
Fluent Design（Microsoft）
Level 3
また、多摩美の吉橋先生のMediumが、IT・スタートアップ界隈のデザイン教育を考えていらっしゃった時の内容とのことで、参考になると思いますので、ご興味ある方は、ぜひご覧ください！
実践で利用するツールはさまざまですが、だいたい下記のツールになると思います。最近では、優秀なエンジニアが開発言語問わず開発できる方がいるように、デザイナーもデザインツール問わずUIデザインする時代になってきていると思います。1つのツールではなく状況に合わせて複数のツールをうまく使いこなしていくのが良いですね。
昨今「デザイナーの役割が広がっている。」と言われていますが、階層の内容を改めてみてみると本当に広がっていると感じます。そして、UXリサーチャーやUXデザイナーという職種が誕生し広がり過ぎた業務を分担することでチームとして対処する方向性もあるのが想像できますね。
学んでいく順序は、必ずしもこのLevel順である必要はなく、今現在のご自身のできる所はどこで、それの隣接する階層はどこか、がわかれば、鍛えていく順序や方法が見えてくるのではないか。と思います。
みなさんのデザイン力向上のヒントになったら嬉しいです。
このLevel設計をベースに、Cocoda!が9/1にリニューアルされました！
デザイン力を上げたい方・デザイナーになりたい方は使ってみてください！
デザイナーを採用したい方は、DMしてみてください！
・・・余談・・・
この図を元に議論した中で、デザイナー採用の観点でどこを見ているか？が話題となった時、どの階層を重視するか。習熟度はどれぐらいがボーダーラインか。など話題となり、求める習熟度こそ微妙に違いましたが、重視するポイントが同じだったのが興味深かったのと、採用時の習熟度をはかるモノとしても使えるんだなーと気付きがありました。
個人的には、この図をもう1つ進化させて、マインドセットとスキルセットを分けて、また、ビジネスやエンジニアリングに寄ったスキルも加えて可視化できると良いなーと思っているので、さらに試行錯誤中です。
※追記
上記の完成形ができたので興味ありましたら下記も読んでみてください。
最後まで読んで頂き嬉しいです！ ♥やSNSにシェアもして頂けるともっと嬉しいです！！ 頂いたサポート金は執筆に繋がるような書籍や有料記事の購入費に使わせて頂きます。