こんにちは。vol.1から引き続き、新卒の焼酎好きの山口が担当します。
vol.1をまだ読まれていない方は、こちらからどうぞ。

今回は、グラフィック系の研修を2つ合わせてお伝えします。

1つはグラフィック作成、もう1つはユニバーサルデザイン（以降UD）研修です。どちらもビジュアライズの面でとても重要で基礎的な内容ですが、研修内容は大きく違います。私たちがそれぞれをどのように学んだか、研修の流れに沿ってお伝えします。

グラフィック作成研修

グラフィック作成の研修では主にアイコンをメインとし、 Illustratorを使用してさまざまなアイコンをトレースする訓練をした後、「Pecori」という研修専用の架空アプリのアイコンを作成します。

アイコントレース

5日間にわたるグラフィック作成の研修は、まずはIllustratorを触ってみるところから始まります。デザイナーとして採用された我々7人ですが、これまでに勉強してきたことや使ってきたツールはさまざまです。研修担当の先輩方は新卒メンバー全員をキャッチアップできるように、座学とともにクローズパスやピクセルの数値をハンズオンで実践的に学ぶレクチャーにしてくださいました。

Illustratorのテクニックに一通り触れたあとは、アイコンをトレースします。複雑に見えるものもシンプルな形の組み合わせでできていると気付けると、効率良くトレースできます。Illustratorの機能を使いこなせるようになれば、パスツールよりも容易に図形を作成できると感じました。実務では限られた時間の中で制作物を完成させる必要があるため、自身の作業時間をきちんと把握することが大切です。そこで、先輩からのアドバイスをもとに作業時間を記録して、今の自分がどれくらいの時間で作れるかと、今後どれくらいの時間で作れるようになりたいかを意識して取り組みました。

これが、私たちにお題として課されたアイコンです。上記の中級編の前後に初級編や上級編があり、これらをトレースしながら自身のペースで進めていくシステムです。

お天気アイコン作成

次はトレースから発展して、お天気アプリで使用する天気を表すアイコンを作成します。

・どんなものが天気をシンプルに表すか
・デザインのテイストやサイズ感をどのようにするか
・どのように分解したら作れるか

この3つを考慮しながら新卒7名が作ったアイコンがこちらです。

日常的に見ているアイコンのはずですが、それぞれ違ったものを作ろうと奮闘している様子が見て取れますね。それぞれのアイコンについて、先輩方からさまざまな観点で講評をいただきました。
線の太さ、アイコンの大きさ、左右上下の対称性、色味、位置とサイズのピクセルの調整など、自身では意識しづらい細かい点を確認でき、研修後に頼まれた仕事でのチェック項目として覚えておこうとメモしました。

Pecoriアイコン作成

アイコンを構成する要素や基本的な手法とルールを学んだら、今度はPecoriのアプリアイコンを新卒メンバーがそれぞれ考案します。そもそもPecoriとは、研修用に考案された架空のアプリなのですが、料理やスイーツの写真をテキスト付きで投稿し、いいねでゆるくつながるSNSサービスです。

ロゴ制作の主な手順や、デザインの方向性を決める際の要素などを座学で学んだら、いよいよFigJamでコンセプトを作りつつ、Illustratorを使用しての制作期間に入ります。

研修は出社とリモートを選択できる環境でしたが、出社したときは、オフィスの本棚にある参考文献を読むことで学びを深められたのでよかったです。私はロゴデザインの本を読み漁り、アイコン制作の課題に役立てました。大学の図書館のように気になったことを書籍で参照しながらデザインできる環境は、とてもありがたいですね。

FigJamでは座学で学んだ手順に則って、コンセプト決め→デザインの方向性→ラフ作成→ラフ絞り込み＆整え→ロゴデザイン決定と段階を踏んで進めます。同じ手順で進めても、メンバーによって注力するポイントが違うため、完成した作品を見るとそれぞれに特性がみられ、興味深かったです。

新卒7名が制作したPecoriアイコンがこちら！

キャッチーさとオリジナリティを追い求めて案出しをすると、いいものができたと思っても、小さなスマホの中では認識しにくい懸念が浮かび上がることの連続でした。両立の仕方を試行錯誤するのが、難しくも楽しいです。シンプルに仕上げつつもオリジナリティを出さなければならないため、得意なことと苦手なことが明らかになる研修でした。

UD研修

この研修では、UDとアクセシビリティについての座学と、UD視点でアプリをリデザインするワークショップをしました。

UDとは

まずは、UDとは何かを学びます。障害者や高齢者など特定の方を対象にするのがバリアフリーであるのに対し、利用する全ての人が対象となるのがUDです。一時的に手がふさがったり、メガネを忘れて見にくかったりするのは、全ての人にとって価値ある概念です。

駅のパネルの多言語表示や、シャンプーとリンスの容器の突起による識別など、多くの人が日常の中で既に体験していると思います。全ての人が対象である中でも、特に配慮をすべき方々にできることやUD7原則を学んだ上で、多目的トイレの写真を見ながらUDの観点で配慮すべき箇所をディスカッションしました。

UDをアプリやウェブに取り入れる際には、主にコントラストや色、UDフォントを含む文字、そして改行や余白などのレイアウトが挙げられます。色覚特性の見え方を追体験できるようなシミュレーターを使うと、色覚特性を持つ人の見え方が分かるため、そうしたアプリを利用しながらハンズオンで実践的に体感します。このようにUDでなされている配慮や工夫を整理して推奨しているのが、「フェンリルUDガイドライン」です。

アクセシビリティ

アクセシビリティとは、情報やサービスへのアクセスのしやすさという意味です。自分が必要な情報の場所が分かりやすく、簡単にアクセスして1人でたどり着けることを目指しています。
説明が少し抽象的でしたが、この研修ではiPhoneのVoice Overや拡大機能を使って、普段利用しているiPhoneの文字情報を読み上げてもらったり、文字を格段に大きくしたりする体験をしました。それによって、知らなかった機能でどのように困りごとが解決されているかを体感できます。

UD視点リデザインワークショップ

UD研修の最後に、とあるアプリの画面 をデザインし直すワークショップをしました。
既存のプロダクトやアプリケーションをUD視点で観察・細分化・俯瞰することで、通常利用では気付かない不便さや使いにくさ、配慮不足を洗い出します。
特にコントラスト比や情報設計などに注目しながら画面の再構築をするのは、UD視点がどんどん自分の中に取り入れられているようで感銘を受けました。具体的には、コントラスト比をチェックできるプラグインを用いて可読性の高い色彩設定にしたり、情報に優先順位をつけて余白を確保したワイヤフレームを作成したりしました。

不慣れながら短時間で仕上げたリデザインの結果を、研修担当の先輩が詳しいところまで言及してくださいました。

最後に

私は建築を専攻した身で、建築におけるUDは知っていても、アプリやウェブにおけるUDに関しては未熟でした。福祉や障害といったことにも興味があったので、この研修以後もUDに対しての理解をより深めたいと考え、メンターさんと共に追加で調べる時間を作りました。UDの観点を持っているかどうかで、グラフィックやUI設計の考え方が大きく変わってくる、とても革新的な研修でした。

vol.3では、UI系の研修についてお伝えします。お楽しみに！