Asobica_ブランディング

  • 2026-08-24
  • VI
  • Tools
  • Web
Asobica_ブランディング

About

SHIFTBRAIN社の旗振りのもと、株式会社AsobicaのコーポレートVIとWebサイトを刷新。すでに策定されていたロゴ、思想、ブランドキャラクター、デザインガイドラインをもとに、それぞれの背景やつながりを外部の視点から解釈し、企業ブランドとして一貫した表現戦略を構築した。既存の要素を変更するのではなく、その魅力を最大限に活かしながら、Asobicaのロゴタイプから生まれるビジュアルシステムを開発。Webサイトをはじめ、採用ツール、Company Deck、オンラインミーティング背景など、さまざまな媒体へ展開できるブランド基盤として整備した。

夜.は現状整理、ブランドの解釈、ワークショップ設計・実施、アートディレクション、デザイン、Studio実装を担当した。

Background

Asobicaでは、ミッションやビジョンをはじめ、企業として大切にする思想やブランドキャラクターが言語化され、ロゴ、カラー、フォントなどのVIも社内で一度定義されていた。一方で、今後もこのVIを軸に展開していくべきか、また、実際の制作物へどのように展開すれば企業ブランドとして魅力的に見せられるのか、迷いが生じていた。そこで、既存のブランド資産を外部の視点から捉え直し、表現戦略を整理したいという要望があった。

採用活動や情報発信の強化に伴い、Webサイト、note、SNS、イベント、社内外の資料など、今後さらに制作物が増えていくことも見据え、すでにあるロゴや思想、ブランドキャラクターを最大限に活かしながら、それぞれを一貫した表現へとつなぎ、媒体を横断してAsobicaらしさを保てる仕組みが求められていた。

Asobicaのブランドキャラクターと既存ブランド資産

Target

  • ・取引先・導入検討企業
  • ・採用応募検討者
  • ・株主・投資家
  • ・メディア・協業パートナー
  • ・Asobicaで働く社員

Visual

_デザインの考え方

今回のプロジェクトでは、新しい思想やブランドキャラクターを加えるのではなく、Asobicaの中にすでにある言葉や考えを、どのように一つの企業表現へつなげるかを重視した。ミッション「遊びのような熱狂で、世界を彩る」と、ビジョン「顧客中心の経営をスタンダードにする」。この二つをつなぐものとして、Asobicaにとっての「熱狂」を、単なる勢いや感情の高まりではなく、未来を思い描くからこそ対象を深く観察し、理解し、考え、工夫を繰り返す「没頭」と解釈した。その熱狂は自分たちのためだけにあるのではなく、顧客や人、社会や未来へ向けられている。

一つひとつの熱狂は、具体へ深く潜り込む個の集中である。それらが集まると、互いに交差し、距離を縮め、ときには余白を保って離れる。それぞれが自立しているからこそ、近づいたり離れたりしながら対話し、影響を与え合う。そこにAsobicaらしさが生まれると考えた。

既存のブランドキャラクターである「熱狂」「毅然」「遊び心」についても、表現へ接続するためにそれぞれの意味を整理した。「熱狂」は、エンドユーザーや世界に届くところまで本気で取り組み、物事の本質を見極めながら考え続けること。「毅然」は、自分たちが心から信じられる未来へ、長期志向と先見力をもって着実に歩み、信頼を積み上げること。「遊び心」は、ゆとりと余白をつくり、対話を楽しみ、相手も楽しませながら、個性の集まりからポジティブな関係を築くこととした。この三つをデザインに共通する判断軸とし、媒体や目的に応じて比率を調整することで、一貫性を保ちながら異なる表情をつくれるようにした。

Asobicaデザインの考え方

_VIとビジュアルシステム

ビジュアルは、新たなモチーフを加えるのではなく、既存のAsobicaロゴタイプそのものから開発した。ロゴタイプの一文字を選び、その一部へ大胆にフォーカスした黒のオブジェクトによって構成している。文字へ深く寄る行為は、視野が狭くなるほど対象にのめり込む「熱狂」の視線を表している。単体のオブジェクトは、個の集中や没頭を表す。それらが複数集まり、交差し、距離を縮め、ときには余白を保って離れることで、自立した人々が互いの距離を選びながら対話する姿を描いた。黒はさまざまな色が混じり合って生まれる色として、一人ひとりの個性が重なることで生まれる揺るぎない強さを象徴している。モノトーンを基調とすることで「熱狂」と「毅然」を、ベージュの余白とオブジェクトが接することで生まれる体温によって「対話」と「遊び心」を表現した。

ビジュアルシステムは、「どの文字を選ぶか」「その文字のどの部分へフォーカスするか」「いくつ組み合わせるか」という三つの変数で構成している。この組み合わせを変えることで、共通するAsobicaらしさを保ちながら、多様なビジュアルを生成できる仕組みとした。

ビジュアルは、ロゴやコピーを配置する「ホワイトスペース」と、オブジェクトを並べる「オブジェクトスペース」の二つの領域を基本とする。明快な画面分割は「毅然」を、大胆にトリミングされたオブジェクトは「熱狂」を、組み合わせから生まれる形と余白は「対話」と「遊び心」を表す。領域の比率やオブジェクトの構成を媒体に合わせて変えることで、異なる形式にも柔軟に展開できるようにした。

同じ完成形を繰り返すのではなく、ロゴという共通の素材から、その都度新しい形を見つけられることもこのシステムの特徴である。ロゴの中から自分が惹かれる一文字や曲線を選び、誰かが選んだ形と組み合わせる。くっついても、離れても、それぞれが独立したまま対話することで、新しい形と心地よい余白が生まれる。制作に関わる人それぞれが、自分なりの「好き」と「熱狂」を起点に参加できるVIを目指した。

AsobicaVIとビジュアルシステム

_Webサイト

コーポレートサイトでは、構築したVIを基盤に、企業としての信頼感と、Asobicaで働く人々の熱量が共存する世界観を構築した。ロゴから生まれたオブジェクトと人物写真を組み合わせ、一人ひとりの個性や言葉、それぞれが向き合う対象への熱狂が連なっていく構成としている。

企業情報、プロダクト、事業戦略、採用など、性質の異なる情報を一つのブランドのもとで伝えながら、ページの目的に応じてオブジェクトの構成や「熱狂」「毅然」「遊び心」の比率を調整。情報量の多いページでは読みやすさを優先し、各ページの導入や回遊の接点ではVIを印象的に配置することで、情報伝達とブランド体験の両立を図った。デザインからStudioでの実装まで一貫して行い、更新性や運用性にも配慮している。

AsobicaWebサイト

_ツール展開

Company Deck、採用資料、オンラインミーティング背景、SNSやnoteのサムネイルなど、日常的に使用するさまざまなツールへ展開した。媒体のサイズや情報量に応じて、使用する文字、トリミング、オブジェクトの数、画面分割の比率を変更。どのツールでも同じ見た目を再現するのではなく、ビジュアルシステムに沿って異なる形を生み出すことで、一貫性を保ちながら、接するたびに新しい表情を感じられる展開とした。企業から発信される情報だけでなく、社員一人ひとりが使うツールにもVIを広げることで、社内外のさまざまな接点からAsobicaらしさが蓄積されていくことを目指した。

Color

メインカラー

  • #FFFFFF(0, 0, 0, 0)
  • #222222(83, 78, 77, 60)
  • #DFDAD9(12, 13, 11, 6)
  • #EFEDEC(7, 7, 6, 3)
  • #F9F8F7(2, 2, 2, 3)

サブカラー

  • #C84E38(24, 82, 81, 0)
  • #6FA390(62, 25, 48, 0)
  • #DA9D8E(18, 47, 40, 0)
  • #6F9CA9(62, 31, 31, 0)
  • #B09FB4(37, 39, 19, 0)
  • #7D8AAD(58, 44, 20, 0)

Fonts

A P-SK 石井ゴシック StdN

Noto Sans Japanese

Helvetica

Inter

Tools

  • Illustrator
  • Figma
  • AfterEffects
  • Studio

Staff

Production
SHIFTBRAIN Inc.
Account Planner / Producer
Yoko Manabe
Project Manager
Mana Ohtake
Art Director / Designer / Studio Developer
Yukari Yokozawa(夜.)
Studio Advisor
Takashi Inukai(NEWTOWN Inc.)
  • Asobica_ブランディング
  • Asobica_ブランディング