2022.05.30

アタリマエ品質の底上げ若手デザイナーの「観点」と「審美眼」を育てる

森重湧太

こんにちは、デザイナーの森重です。

Visionalではデザインそのものを企業文化として浸透させようとしており、デザイナーのデザインスキルも高いレベルに育てたいという想いがあります。

現在、60名以上のデザイナーが在籍しており、個人のスキルも業務の中でしっかり育てつつ、組織全体でもレベルを高められないかと模索しています。

今回はデザイン組織のスキルアップを図って企画した「アタリマエ品質向上プロジェクト」を紹介します。

デザイナーの育成施策をお考えの方へ向け、施策内容を中心にお伝えします。

アタリマエ品質向上プロジェクトとは

アタリマエ品質向上プロジェクトとは、特に若手のデザイナーのデザイン品質を底上げしようという取り組みです。

ただ、デザイナーがデザインをするといっても、様々な段階があります。

今回「デザイン品質」として焦点をあてているのは、UIやグラフィック、写真加工、ロゴなど、ビジュアル面をつくる「表層」のデザインがメインです。一部、画面をレイアウトする「骨格」のデザイン、情報設計にあたる「構造」のデザインも含みます。

Visionalの「プロダクトデザイナー」と、「コミュニケーションデザイナー」に求められるデザインは、それぞれ異なります。

プロダクトデザイナーは主にUIデザインや情報設計、コミュニケーションデザイナーはグラフィックやノベルティのデザインなどが求められるので、それぞれに合わせた施策を考えました。

若手デザイナーの「観点」と「審美眼」を高めたい

ここからは、約半年にわたってプロジェクトの企画、運営を担当した神志那、寺内の2名に話を聞きました。

森重：
「どういった背景でこの企画を始めたんですか？」

神志那：
「デザイン組織の中期テーマに「アタリマエ品質の向上」を掲げています。その背景として、ものづくりの最終工程にデザイナーが位置しており、上流から一貫性を持ったアウトプットをするために表層の品質はデザイナーが守るべき基本的な部分だという考えからです。

最初は私主導で、デザインマネージャーへのヒアリングから始めました。

さまざまな意見や課題感がありましたが、特に新卒2、3年クラスの若手デザイナーに対して

プロダクトデザイナーのマネージャーからは「デザインの観点をもっと増やしたい」
コミュニケーションデザイナーのマネージャーからは「審美眼をさらに高めてほしい」

という意見が散見され、まずは若手デザイナーのスキル底上げにつながることをやりたいと思いました。

また、デザイン組織の中期テーマに『表層デザインのアタリマエ品質をアタリマエに』を掲げていることもあり、企画を始めました。」

森重：
「そうなんですね。ちなみに『観点』や『審美眼』というのは具体的にはどういう能力のことでしょうか？」

寺内：
「『観点』というのは、ユーザビリティの観点、世の中一般のサービスガイドラインの観点などデザイナーなら必ず知っておいてほしい観点です。また、前提にあるUIデザインや情報設計の作法も含みます。たくさんのデザインルールから適切なデザインを選択するために必要なスキルです。

『審美眼』というのは、明らかに不自然な表現がないか、きれいで自然な表現かに気付き、それを再現できるスキルです。

例えば、スマートフォンのモックアップを作るときに『はめこんだ画像がズレていないか』はもちろん、『ガラス面に当たる光の反射』まで意識して作り込めるスキルを意味しています。」

今回のアタリマエ品質向上プロジェクトは、プロダクトデザイナーとコミュニケーションデザイナーで別々の内容となっていますので、順に説明します。

プロダクトデザイナー編

マテリアルデザインの学習で「観点」を育てる

森重：
「プロダクトデザイナー向けのプログラムはどのような内容ですか？」

寺内：
「プロダクトデザイナーは『Googleが提唱しているマテリアルデザインに則ってBtoBのキュレーションサイトを制作する』という内容です。」

森重：
「テーマをマテリアルデザインにしたのはなぜでしょうか？」

寺内：
「マテリアルデザインにはレイアウト、色、ナビゲーションなどのガイドラインが用意されています。ただUIを作る能力だけでなく、さまざまなガイドラインの観点を持ってチェックする能力も磨くためにこのテーマになりました。」

森重：
「このプログラムはどのような設計になっているか概要を教えていただけますか？」

寺内：
「受講者は業務と並行しながら、サイトを作っていきます。制作だけでなく、フィードバックを受ける機会を設けました。この時間に制作意図を講師に説明してもらいます。

講師側にはデザインマネージャーが2名いて、回ごとに受講者の制作物にフィードバックします。受講者はそのフィードバックを受けて修正し、次の段階へ進むという流れで進めました。」

森重：
「そうなんですね。そのフィードバックはどのくらいのペースで行いましたか？」

寺内：
「サイト制作の一連を経験してもらうワークを約半年間で全5回行いました。

業務と並行して行うことを想定し、余裕を持って進めるため、3〜4週間に1度の間隔でフィードバックの場を設けました。」

森重：
「1回目から5回目まで分割して進めていたということですが、受講者の作業ポイントをそれぞれの回ごとに教えていただけますか？」

寺内：
「1回目は情報整理やワイヤーフレームをする内容です。作業のポイントとしては

サイトに掲載する情報の洗い出し、グルーピング、優先順位付けができているか
レイアウト、ヘッダー / フッターに表示する情報の整理、グローバルナビゲーション、サイドバーなどの骨格ができているか

といった点です。

2回目と3回目はデザイン作業です。作業のポイントとしては

任意の1ページ（主にTOPページ）のデザインがひと通りできているか
ビジュアルルールが適用されているか（タイポグラフィ、色など）

レビューを反映したデザイン修正ができているか
他ページの作り込み（カテゴリ、記事、会員登録フォームなど）

といった点です。

4回目は、レスポンシブ対応をメインにしつつ、3回目のレビューを反映したデザイン修正もポイントでした。

最終の5回目は完成に向けての仕上げです。デザインのクオリティを高めたり、全体感を見て微調整したり、細部まで詰めていく作業でした。」

森重：
「回ごとにフィードバックがあると思いますが、講師は受講者にどんなフィードバックをしていたのですか？」

寺内：
「基本的には、マテリアルデザインの原則に従ってですが、講師本人に聞いてみるとよさそうです。」

後日、講師担当として参加したデザインマネージャーにもフィードバックのポイントを聞いてみました。

デザインマネージャー：
「観点を増やしてほしいので、指摘よりも質問や疑問を投げかけるようにしました。
フィードバッカーである私にすぐに正解を聞いてほしくないんですよね。自分で考えて自分で正解を探せるようになってほしいんです。
あとはもちろん、基本的なマテリアルデザインの原則に則ってフィードバックしました。」

森重：
「たしかに、観点というのは誰かに教えてもらって気づくのでは身につかないですよね。自分で気づけるようになって成長していくものだと私も思います。」

サイト制作体験で「意図」を考えるようになった

若手デザイナーは事業に配属されると、最初は「既存サービスをグロースさせる」ところからスタートになります。

普段は既存サービスのデザインを元にデザインする環境ですが、今回のようにゼロから作成する場合は、自分ですべて考えなければなりません。

実際、全てのプログラムを終えた受講者からの感想にはこうありました。

ゼロイチでキュレーションサイトを作るなかで、デザインコンセプト、配色、タイポグラフィー、コンポーネントなど、さまざまなものをゼロから設計する経験ができて、デザインをこだわってつくる楽しさを再認識できました。

このように、「ゼロからデザインする」経験をすることで、普段は考慮しない観点だけでなく、デザインを作り込む楽しさも感じられたようです。

インタビューをしてみて思ったことは、表面的にデザインのトンマナを合わせるだけでなく、「なぜそういうデザインにしたのか」ということをフィードバッカーから何度も質問されることで、「すべてのデザインに意図をもたせる」という意識が身についているように思えました。

コミュニケーションデザイナー編

デッサンやトレースの特訓で「審美眼」を育てる

森重：
「コミュニケーションデザイナー向けには、どのようなペースでどんなことを行ったのですか？」

神志那：
「全7回で、2週間に1度のペースで行いました。

プロダクトデザイナーの場合と同様で、業務の合間を縫ってワークを行う前提でスケジュールをしています。

コミュニケーションデザイナーには、1. 基礎デジタルデッサン、2. レタッチ、3. 紙デザイントレース、4. Webデザイントレース、これら4種類のワークを行い、「審美眼」を強化するプログラムとしました。

全7回のプログラムはこのようになっています。

1回目：基礎デジタルデッサン

「光・影・接地面・パース」気をつけてものの見方や捉え方を身につけてもらう
りんごの写真を見てデジタルデッサン（ペンタブを使用）

2回目：レタッチ

クリスタルトロフィーの画像素材をレタッチ
デジタルデッサン同様に「光・影・接地面・パース」を踏まえた表現力・再現力を磨いてもらう

3-5回目：紙デザイントレース

ポスターをトレースする
デザインの4原則、文字詰め、エディトリアルデザイン、カーニングなどの観点を意識しながらトレースしてもらう
終わったあとは何に気をつけたか説明してもらう

6-7回目：Webデザイントレース

現在のトレンドが反映されたLPをトレース
Webデザインのお作法を学びつつ、グラフィックデザイン要素の高い題材でビジュアルデザイン力を高めてもらう

以上です。」

森重：
「IT企業で業務上デッサンをすることはほとんどないかと思いますが、どうして取り入れたんですか？」

寺内：
「デッサンはすべてのデザインの基礎だからですね。

光の入り方、影の付け方、その強弱などをしっかり観察する必要があります。

バナー作成やレタッチをする際にも光や影の違和感や、文字やオブジェクトのズレなどがないか目を凝らす必要があるので、必ず身について欲しいスキルと考えています。」

森重：
「たしかにデッサンは基礎スキルとして大事ですよね。レタッチも同じ意図ですか？」

寺内：
「そうですね。レタッチの元素材は、クリスタルのトロフィーが写っているグラフィックで、光や影の細かな再現を必要とするものです。」

森重：
「紙やWebのトレースについてはどういう意図がありますか？」

寺内：
「トレースは、多くを吸収できるようレベルの高いデザインを用意しました。広告賞などの受賞歴のあるクリエイティブや、日本トップレベルのデザイナーが制作したものがトレースの対象です。」

デッサンやトレースでは「気づき」が言語化された

森重：
「コミュニケーションデザイナーのワークでやってよかったことは何でしょうか？」

寺内：
「デッサンやトレースは同じものを模写しているので、誰もが同じようなアウトプットになってしまいます。そこで『自分が何に注意したか』という発表の場を設けたのが、よい学びとなりました。

例えば、Aさんはブラシのタッチで立体感が出るように気をつけたり、りんごらしい柄や質感を表現することに注力していましたが、Bさんでは質感、下地に着目していて、黄色を下地として塗っておき、削るようにして色を出したところに気をつけていました。また、Cさんではペンタブ自体が初めてで感覚を掴むことを大事にしているとあり、ツールに対して着目している方もいました。

『どこに着目していたか』を言語化したことで、自分の制作物に再注目したり、新たに発見があったりして、講師側だけでなく私たち運営側にとっても、受講者の気づきを知れる機会となりました。」

また、全てのプログラムを終えた受講者からは、以下のようなコメントがありました。」

最初、「再現力」が身につくと思っていたんですが、「世の中のクリエイティブを見る力」が底上げされたなと思います。全部ゼロからデザインやトレースをしたことによって、見えてくる細部の仕事があるんだと感じました。

「影がこの位置まで入っているからこそ、画面の全体感が保たれてるんだ」とか、細部と俯瞰の捉え方ができるようになったことが大きかったです。

眼でしっかりトレースするスキルは、どんな業務にも共通して使えるものだと思いました。このような時間をいただけたことは、本当にありがたかったです。

寺内：
「このように受講者側も観察することの重要性を強く感じてくれていました。」

終えてみて｜デザイナー同士の協力関係の高さが垣間見れた

森重：
「最後に、プロジェクトを完遂できた理由はなんでしょうか？」

神志那：
「教育施策は講師担当者も受講者も業務のリソースを少なからず奪われるので、途中で離脱することも多いですし、続けられず頓挫してしまったりするケースがあります。講師担当も受講者も自主性が高いVisionalだからこそできた施策だったと思います。

私たち運営側だけで完結する施策ではないですし、現場のデザインマネージャーを企画や実施に巻き込むことがアクションとして大事だったと思います。

CDOの田中もオブザーバーの講師として参加していて、指導やフィードバックをもらいながら進めていました。受講者とのフィードバックの場の作り方や、進捗の読み違いなどにうまく対応していくこともポイントだったので、オブザーバー視点のサポートがあったことも心強かったです。」

森重：
「神志那さん、寺内さん、ありがとうございました！」

インタビューを終えてみて、プロジェクト運営側は素材の準備やスケジューリング、講師側はフィードバックのすり合わせや方向性の確認、受講者側は通常業務と並行しながら課題をすすめるといった協力関係がうまく働いていて成功した企画だと思いました！

デザイン組織の中期テーマである「表層デザインのアタリマエ品質をアタリマエに」する場が若手デザイナーに提供されたことは、このテーマを実体験として感じる場にもなったはずです。受講者は「私たちが学ぶことで、組織が成長する」と思えるような設計だと思いましたし、講師側もそれを理解して若手デザイナーを手助けしていたように私の目には映りました。

ここまで、若手デザイナー向けの教育施策「アタリマエ品質向上プロジェクト」を紹介させていただきました。またデザイン組織の強化に関する取り組みを実施した際は紹介したいと思います。