こんにちは！
推し作家さんの原画展でグッズを爆買いした福本です。反省はするけど悔いはありません！

新卒デザイナーが1人1記事を担当してお送りする「新卒デザイナー研修物語」。
その第4話を私がお届けします。

これまでの研修についてはこちらをご覧ください。

　今回は「グラフィック作成（Sketch）」の研修についてお話しします。

研修概要

フェンリルでは、UIをデザインするときに「Sketch」というツールを使用しています。この研修では、アプリ画面をトレース（模写）し、Sketchの操作を学びました。トレースしたのは、食べ物の写真を投稿するSNSアプリ「Pecori」です。フェンリルの新卒研修のために制作されたアプリだと知り驚きました！

初めにチュートリアルとして先輩方とSketchを操作しました。資料をもとに丸一日かけて操作した後、課題のカンプをトレースしました。チュートリアルでツールに慣れたとはいっても、それだけでは習得が不十分なので、ここでは課題を通してSketchの理解をより深めます。

初めて使うSketch

今年の新卒デザイナー全員がSketchに初挑戦しました。Adobe Illustratorや、Sketchの類似ソフトであるFigmaとはまた違った操作感で、慣れるには時間がかかりました。特に新卒デザイナー全員が使ったことがあるAdobe Illustratorとは大きく違う「シンボル」という考え方に戸惑う人が続出しました。

「シンボル（あるいはコンポーネントと言うことも）」は再利用可能な機能、部品のことです。シンボルの大きな特徴は、複製した部品とその複製元の部品は親子関係を持っていて、子は親の構造を引き継ぐという点です。文字だけでは分かりづらいので、次の画像をご覧ください。

部品を大量に制作していると、時々「たくさん複製したあの部品のこの部分、全てを一度に変更したい」というニーズが生じます。しかし上図では3個の部品を変更しているだけですが、これが100個になったらどうでしょうか。1000個になったら？
シンボルという機能はこの「一度に変更したい」数が多ければ多いほど効果を発揮します！

研修を受けて

丁寧な研修に、感謝の正拳突き

新卒デザイナーの全員がSketchを初めて使うということで、皆が課題をうまく進められるか不安でした。しかし、研修担当の先輩から丁寧にフォローしてもらい、すぐに不安が解消しました！
課題のフィードバックやアドバイスを毎日もらうことができ、分からないことがあれば、その都度質問できました。問題をその日のうちに解決できたので、課題を進めていく中でつまずくことは少なかったです。

誰もが見やすいデータ作りが大事！

研修中に先輩から一貫して言われていたのは、「誰かに共有することを前提に、分かりやすいデータを作る」ということでした。自分だけが扱うファイルであれば、中身を整理しなくても不都合はないですが、業務では複数のデザイナーが編集することがあります。さらにフェンリルでは、エンジニアもそのデータを参考に画面を実装します。つまりデザイナーだけでなく、エンジニアにとっても分かりやすいデータを作る必要があります。「エンジニアにも分かりやすく」という点が、デザインと技術の両方を突き詰めるフェンリルならではだなと思いました。
この「誰が見ても分かりやすいデータ作り」に大活躍するのが、先ほど述べた「シンボル」という機能です。デザイナーにとっては、オリジナルを編集することで一度に部品を変更できるという編集のしやすさは、非常に重要なポイントです。また、実装の際に「これはシンボルだから、この画面のこの部品は、全画面で共通です」と指示しやすくなり、エンジニアにとっても分かりやすいデータを作ることができます。

あとがき

この研修ではSketchを使って、アプリ画面をトレースしました。新卒デザイナー全員が初めて使うソフトで戸惑うこともありましたが、研修担当の先輩からの丁寧なフォローもあり、研修を終えるころにはSketchを無事マスターできました。

以上で第4話「グラフィック作成（Sketch）」は終わりです。
最後まで読んでいただきありがとうございました。第5話「レイアウト指示」もお楽しみに！