こんにちは！　今年4月に22年間過ごした仙台から大阪に引っ越してきました、新卒デザイナーの早坂です。大阪のマンションは大きいですね。

今回は、下の表の色がついているアイコン作成とレイアウト作成（グラフィック作成）についてお伝えします。

研修概要

グラフィック制作の研修は大きく2つに分かれています。

まず1つ目は、アイコン作成です。この研修では、アプリ内で使われるアイコンのデザインについて学びました。

2つ目が、研修開始前から楽しみにしていたUIデザインについてです。具体的には、一から画面を作成するのではなく、トレースをしながらUIをデザインする際のデータの作り方について主に学びました。

それぞれ個人ではやったことがありましたが、新しい発見がたくさんありました！

それではUIの事例を交えて詳しく紹介します。

アイコン作成とイラストレーター

アイコン作成の研修では、Adobe Illustratorを使ってアイコンを制作しました。学生の頃から日常的に使用していたデザインツールですが、とある機能を全く使いこなせていなかったことがこの研修で判明します。

それが、「アピアランス」です。研修以前、この機能が何なのか正直よくわかっていませんでした。ですが、アイコン作成など正確性が求められる作業には必須のツールであることが理解できました。

例えばこのようなアイコンを作りたい！　と言う場合。

このアイコンは、同じ形が円周上に均等に配置されています。それを手作業で作っていくのは大変ですし、正確性に欠けますよね。そんな時に使えるのがアピアランスです！

例えば、同じJ形状のパーツを複数作り、ある法則に従って均等に配置する場合です。このアイコンは1つのパーツが放射線状に6つ配置されています。基準となる形を1つ作ってしまえば、360度÷6=60度ずつ回転させながらコピーを作成することで正確に描画できるようになるのです。

アイコンは反復や左右対称などが多いので、この機能を使えば効率的に制作できます。そのほかにも細かいテクニックを教わり非常に勉強になりました！

UIづくりとパーツ管理

次に受けたのがUIデザインの研修です。ここで難しいのがUI (User Interface) とは何かという話なのですが、今回は便宜上サービスを利用するためにユーザーが触れる部分だと思ってください。例えば、画面上のボタンなど普段サービスを利用するときに触れる部分のことですね！

この課題では、研修用に先輩が作ってくださったアプリの画面をSketchというソフトウエアを使ってトレース（模写）しました。なんだ！　簡単じゃないか！　と思うかもしれません（私も初めはそう思っていました）

ですが、この研修の趣旨は単に画面を再現することではありませんでした。

アプリの画面は、繰り返し使用可能なパーツで構成されていることが多いです。例えばボタンやアイコンなどは同じものが複数の画面に登場しますよね。そういったパーツを洗い出し、整理をすることがこの課題の趣旨でした。今までデザインしていたアプリの画面数は10画面程度で、パーツの整理のことまで考えずにデザインできていました。しかしフェンリルで開発するサービスの画面数は膨大になるので、このパーツ管理が非常に重要になってきます。

初めは不慣れで戸惑うことばかりでしたが、丁寧にサポートいただいて何とかコツをつかむことができました。

上の画像は実際に整理したデータの一部です。アプリを構成するパーツを列挙しており、これらを再利用する形で画面を構成していきます。

このデータ管理はUIを扱うデザイナーにとって重要スキルのひとつだということが理解できた研修でした。このパーツ管理は奥が深いので、これからも先輩方から学びながら精進していきたいと思います！

あとがき

グラフィック制作編で学んだのはただ作るだけではなく、運用されることを考えてデザインするということです。アイコン1つとっても、画面上でぼやけないようにデータを整えたり管理しやすいように名前をつけたりと細かい配慮がないと運用可能なデータにならないということが分かりました。

今回学んだことを忘れずに、他のデザイナーやエンジニアにも使いやすいデータを作ることを心がけていきます！

最後までお読みいただきありがとうございました。

次回は、第四話「麻婆デザインテスト」です！