はじめに
はじめまして、エキサイトで就業型インターンをしている田中です。 私は大学ではデザインを専攻しておらず、これまで独学で学んできたので、実際のデザイナーの仕事についてもっと知りたいと思い参加を決めました。
今回は私がインターンを通じて行ったこと、そして学んだことを共有させていただきたいと思います。
インターンでは大きく分けて二つのことを行いました。一つはウェビナーのサムネイル制作、もう一つは経営管理SaaSプロダクト「KUROTEN」のUI制作です。
サムネイル制作
最初のお仕事はエキサイトのSaaSプロダクト「KUROTEN」紹介セミナーのためのサムネイル制作です。
調査
制作にあたってまず行ったのは、サムネイルのデザインの調査です。
画像検索でITとビジネスに関するウェビナーのサムネイル画像を検索し、良い感じの画像を集めます。 そして、集めたサムネイル画像を見て、構図やよく使われるあしらいを抽出します。
ここでは以下のような特徴があることがわかりました。
調べてみるまで気が付かなかったのですが、多くのサムネイルは似たようなレイアウトとあしらいの組み合わせでできており、イベントの雰囲気に合わせて色彩やフォントを変えることで特徴を出しているようです。
また、このようにレイアウトやあしらいのパターンを事前に準備しておくことで、これらを組み合わせて新しくサムネイルを作ることができるはずです。
サムネイル制作
次に以上の調査に基づいて、実際にサムネイルを制作しました。
まず行ったのはラフの作成です。上で準備したレイアウトとあしらいのパターンを組み合わせて、複数のラフを作りました。 今回はSaaSプロダクトに関するウェビナーなので、落ち着いた色合いで作ってみました。
その後、さらにブラッシュアップするためにエキサイトのデザイナーに皆さんからフィードバックをいただきました。レビューをもらうことで自分だけでは気づけなかった余白の取り方や字詰めの違和感がわかって、大変勉強になりました。
私はこれまでサークル活動や自主制作でデザインをすることが多かったので、自分の作ったものに納得いかなくても、どこがおかしいのかわからず曖昧なままになっていました。今回はしっくりこない点を明確に言語化していただいたおかげで、うまく改善ができたと思います。
レビューをもとに改善を行い、最終的に完成したのが、以下のサムネイルです。
また１枚目に引き続き、もう一枚別のイベントのサムネイルも作成しました。 前回の制作で学んだことを活かして、一枚目の半分ほどの時間で作り終えることができ、成長を実感しました。
UI作成
サムネイルを作成した後は、KUROTENのUIに関わらせていただきました。
具体的には、実装されている画面からfigmaでデザインのマスターデータを作成し、更新された新しいコンポーネントに置き換えるという作業です。
「ユーザー設定」と「メッセージ」という重要な画面を任せていただいたので、気合を入れて頑張りました。
ここで気を付けたことは、自分が担当していない画面のUIとの整合性を保った上で、デザインの提案や修正を行うということです。 見た目や使い勝手を考えて作成したはずのUIでも、アイコンやボタンの動作がプロダクトを通して一貫していなければ、かえって混乱を招くことになります。こうした点に注意していると、簡単そうに思えるタスクのUIでも意外と作るのに時間がかかってしまいました。 個別のデザインだけでなく、整合性についても注意を払うことは今後の課題になりそうです。
おわりに
今回のインターンでは、一ヶ月にわたってサムネイルとUIの制作をさせていただきました。
これまでデザイナーの方のレビューをいただくという機会がなかったので、毎回フィードバックをもらうたびに新しい発見があって、大変勉強になりました。 また、全てオンラインではありましたが、わからないことがあればいつでもメンターの方に質問できて、丁寧に教えていただけたので、不安や困り事はほとんどありませんでした。 それに加えて社員の方々のミーティングに参加させていただき、実際にデザイナーがどのように仕事を進めているのかを知ることができたのも大きかったです。
インターン期間は残りわずかですが、最後まで気を抜かずに取り組んでいきたいと思います！
