ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog

テクノロジー

ロゴデザインの作り方 〜 Yahoo! JAPAN Tech Conference 2022のデザイン

はじめまして。Yahoo!ショッピングにて、販促周りのデザインを担当しています、亀岡です。

普段はYahoo!ショッピングでデザインをおこなっているのですが、今回は兼務で担当したYahoo! JAPAN Tech Conference 2022 ロゴデザインの過程についてまとめました。

この記事では

  • コンセプトに沿ったロゴの制作
  • ロゴに沿ったUI・他グラフィックの展開
を中心にお話しします。とくに、UIデザインだけでなくグラフィックも担当するような方にお役に立てると嬉しいです。

Yahoo! JAPAN Tech Conferenceとは

Yahoo! JAPAN Tech Conferenceとは、Yahoo! JAPANのクリエイターを中心とした、技術的な取り組みを紹介する場です。今回は5回目の開催であり、毎年特設サイトが開設されています。私が所属しているアートディレクションチーム内で、ロゴデザインの募集がされていたのでぜひ参加したいと思い、2案ほど提出したのがきっかけです。

応募したデザインについて

Yahoo! JAPAN Tech Conferenceのロゴは毎年同じ形ですが、色使いやサイトで使用する装飾を更新しています。初めはスマートな印象を与えるグラフィックと、ポップな印象を与えるグラフィックの2案で提出しました。

初期案

コンセプトに沿ったロゴの制作について

数案の中から選ばれたのですが、まだプロジェクトメンバーのイメージに沿っておらず、ブラッシュアップが必要でした。

そこで、イメージの擦り合わせを行うために

  • プロジェクトメンバーからフィードバックを受ける
  • ベテランデザイナーのアドバイスを受ける

の2つを行っています。

プロジェクトメンバーからフィードバックを受ける

プロジェクトメンバーからは、テック感をもっと出してほしい、テーマにもっと沿ってほしいなどのフィードバックを受けました。私の方ではフィードバックを元に、関連キーワードを書き出し、出てきたキーワードを元にグラフィックに落とし込む作業を進めていきます。
今回であれば「領域の関わり合い」、「積み重ね」、「コミット」といったキーワードを出しています。キーワードを元に作成すると、グラフィック1つ1つの方向性がはっきりします。3つの方向性に絞り、グラフィックを再度提出し、プロジェクトメンバーのイメージとすり合わせをおこなっていきました。方向性をそれぞれ分けたグラフィックを複数案だすことは、どの方向性がイメージに近いかを比較できるため、グラフィック決定の後押しになったのではと思っています。

キーワードを元に提出した案

今回使用されたロゴは、「AI」・「領域の関わり合い」・「テック」というキーワードを元に作成しています。「AI」からは、解析中のUIでよく使われる有機曲線をwebサイトなどに使用しています。また、カラーコードを #FF0000 など極端なもの多用することで、デジタル感、テック感を強めています。

ベテランデザイナーのアドバイスを受ける

方向性が決まったあとは、ベテランデザイナーからもアドバイスを受けることができました。ロゴを主役に引き立たせるために周辺オブジェクトのカラーを抑えることや、グラフィックをWebサイトへ展開するためのコントラストについてのアドバイスを受けています。このアドバイスをもとに、ロゴ周辺のカラー調整など細かな調整を入れて、今年のロゴが決定しました。

ロゴのブラッシュアップまとめ

左にあるはじめのロゴから、何度かのフィードバックを経て、最終的に右の今回のロゴになりました。左から順に以下のような修正を加えています。

  1. ロゴの形をわかりやすくするために全体的な色味の修正・AI感を出すために周辺オブジェクトの形調整
  2. テック感を強めるための色味の調整
  3. ロゴの印象を強めるために、周辺オブジェクトのカラー調整

繰り返しデザイン案を見てもらうことで、プロジェクトメンバーからのイメージに沿ったものに仕上がったと思っています。

ブラッシュアップ過程

ロゴに沿ったUI・他グラフィックの展開

ブラッシュアップの過程の中で、ロゴの骨子が固まっていきました。以下の画像はロゴコンセプト資料の一部になります。

ロゴコンセプト資料

今回のYahoo! JAPAN Tech Conferenceには他のデザイナーも関わっており、展開したロゴコンセプト資料を元にTシャツやプレゼン資料などを制作いただきました。Tシャツは、使用カラーの制限がある中で有機曲線のモチーフをうまく利用しています。

展開例

また、SNSシェア画像やスタンプ機能も、カラー資料を元に作成しています。スタンプ機能に関しては、多くの方に使っていただき大変嬉しかったです。

さいごに

Yahoo! JAPAN Tech Conference 2022の開催は終了しましたが、サイトやアーカイブ動画は公開しています。スピーカーは幅広く、エンジニアだけでなくデザイナーも登壇しています。興味のある方は、こちらからご覧ください。

こちらの記事のご感想を聞かせください。

  • 学びがある
  • わかりやすい
  • 新しい視点

ご感想ありがとうございました


亀岡 瑠璃
Yahoo!ショッピング デザイナー

このページの先頭へ