コムデのデザイナーで勉強会 Vol.01〜業務のちょっぴりお悩み解決編〜

はじめに

こんにちは！クリエイティブ事業部デザイナーの近藤です。
2024年も半年が過ぎて、あっという間に秋めいてきそうですね〜

さて今回は、デザイナーチーム内でデザイナー歴の浅いメンバーの疑問を解決するべく、みんなで意見を出し合う勉強会を行ってみました。
その模様を一部レポートとしてまとめてみたのでご覧ください！

目的や経緯

開催するにあたり、なぜこのような勉強会をすることになったのかご説明します。

理由として、執筆者の近藤を含め、経歴の浅いメンバーが業務中に抱くちょっとした疑問点が始まりでした。

「このツールの使い方・見方って、本当にあってるのかな？」
「私はこの作業方法だけど、他のメンバーはどうしているんだろう？」

などなど…
作業は一旦行えるし、自分で調べたりして解決はする。けれど、作業効率化や知識としてしっかり会得できているのかが不安なところを、上長にじっくり相談したいな〜と思うことが度々発生していました。

業務中は案件を回していくために、時間を大幅に割くことは難しい状況だったので、上記を勉強会として時間を設ければ、業務に追われることなく、疑問についてもしっかり聞くことのできる会になるのでは？と考えました。

また、疑問を抱くメンバーの不安解消に繋がるだけでなく、他メンバーも疑問に答え、アウトプットをすることで、知識を定着させることができます。
検討した結果、疑問解消のための勉強会を行うことになりました。

事前準備と当日の流れ

勉強会開始前に、事前準備やルール策定を行いました。

① デザイナー歴が1〜2年目のメンバーを対象に、業務中の疑問点などを勉強会前に洗い出しリスト化する事前に洗い出しておくことで、対象者本人も疑問点のストックを残せますし、勉強会当日の空気感に焦らず説明することができます。また、当日は既にリスト化してあるので、説明の抜けなどを防いで効率的にMTGを進行することができます。

② 勉強会は、1〜2ヶ月に1回開催をルール化する
勉強会をルール化することで、デザイナー個々の能力レベルを定期的に把握することができます。それにより業務割り振り等も検討しやすくなり、個人のレベルにあった案件を任せることができます。慣れてくれば経験の浅いメンバーだけでなく、チーム全体での疑問点も含めてディスカッション出来る場として活用していく予定です。

上記の準備が整ったところで、勉強会を開始します。

まずは順々に、対象者が洗い出した質問を読み上げて、1問1答形式で進行しました。
質問と回答内容は、ナレッジとしても残せるので、付箋形式で議事録を取っていきます。
（今回はツールとしてFigmaを使用しています）

実際に使用された議事録の付箋と、Q&Aを以下に記載していきます。

Q1：バナー作成の際に、商品画像等のサイズ感や配置感を決めるにはどうしてる？

メンバーの意見

文字組をある程度決めてから、配置場所を決めている
優先度を決めてから、目立たせたいものは大きくするなど、クライアントの意図に合わせて設定する
あまり余白を作らない意識でレイアウトを組みつつ配置する
世の中に出回っているバナーなどを参考に配列を考えてみる
目的に違和感がないか、デザインのバランス的に違和感がないかを確認して配置する

Q2：新規ページを作る際の参考探しは何基準で探してる？もしくはコツはある？

メンバーの意見

ムードボードを活用してイメージを固めてから作業する
レイアウトやフォント等、ポイントごとで沢山参考を見つけてストックを残し、後に精査していく
1つだけの理想のサイトを探すのではなく、多数のワードを連想してデザイン参考を探すことを心がける
サイト制作の目的やターゲット層を、一度言語化してから探してみると軸が定まりやすい
参考探しに行き詰まったら、何に行き詰まったのかを言語化し一度頭を整理する
パーツや画像だけを見て参考を探すのではなく、例えば参考サイトに掲載されているデザインの意図の補足文なども合わせて読んでみると、探すワードも増やすことができ検索しやすくなる

Q3：改修の時に、既存サイトに似たフォントを探さなければ行けなくなった時、どうやって探してる？

メンバーの意見

以下の手順で探ってみる
①あたりをつけてみる（有料フォントor無料フォントなのか）
②Google Font/Adobe Fontで探してみる
③フリーフォントのまとめサイトなどで探してみる
④Morisawa Fontsなどの有料フォントを探してみる
⑤上記を満たさなければ似たフォントで対応する
癖のあるフォントなどは、無料フォントが多い傾向がある
英語フォントは、世の中でよく使用されているフォントを、見ただけでわかるようにしておくと良い
最近は画像やカメラでフォントを探してくれるシステムがある

Q4：PhotoshopやIllustratorのレイヤー構造について知りたい！

今回は実際にPhotoshopの仕様に慣れているメンバーから、画面共有で以下内容を直接レクチャーして貰いました！

レイヤーマスクの構造
複数レイヤーにまとめてマスクをかけたい時の方法
レイヤーサムネイル横にある、リンクマークはどのような場合に使用するのか

などなど、レイヤーの構造を改めて理解して、案件でもすぐ活用できる技を伝授してもらいました。

このようにして、所要時間1時間程で勉強会が終了しました。

実際に開催してみて

いつもの勉強会と違う新しい形式でしたが、疑問解消は勿論、自分以外の他メンバーが、質問にあるような事例が起きた時に、これまでどう解決してきたかの経緯を、メンバー全体が知れるとてもいい機会になりました。

自分では考え付かなかった調べ方を知れて検索の幅が広がったり、質問したこと以外のプラスアルファーな知識も知ることができて、とても有意義な時間を過ごすことができました。

終わりに

いかがでしたでしょうか？
経験の浅いメンバーの質問がメインだったので、これからデザイナーを目指される方にも、参考になる内容だったのではないかと思います。

今回の勉強会をきっかけに、メンバーから出た意見で知識も取り入れつつ、自分の効率のいいやり方や、更にいい知識を見つけたら共有することをルーティン化していけば、チーム全体の作業効率やデザインクオリティを上げることができると考えています。
この勉強会は今後も実施するので、その模様もまたご紹介できればと思います。

コムデではこういった取り組みを通じて、社内だけでなくデザイナーとして働かれている方々に、少しでも参考になるような記事をお届けできたらと思います！