0

%

Case Study

口グセからコンセプトを作る。強いビジュアルを目指したコーポレートサイトです。

Project Overview

SEOマーケティング・コンサルティングを軸にしたサービスを行う株式会社COUNTERさまのWebサイトをARUTEGAでリニューアルしました。

クライアントのCOUTER社が意匠的なデザインに期待してくれていることは弊社の実績をみてよくわかっていました。
ただ当の彼らは、デザイン会社ではなく、マーケティングの会社です。
見た目がかっこいいだけで、事業内容やビジネスモデルの強みが伝わらないサイトを作っても意味がない。
もちろんそれは理解している前提で、それでも「ビジュアル的に強いものを作りたい」という期待があった。

だからこそマーケティングの思想×アート表現をどう両立させるか。
ここが最初の論点でした。

ARUTEGAの役割
Concept, Copy, Web Design and Development
パートナー
COUNTER株式会社

コンセプト策定からデザインまでの流れ

コンセプトというのは、「何者か」を一言で示すためのものです。
今回で言えば、COUNTER社という会社が一体何者なのか、どんな特徴があって、他のマーケティング会社と何が決定的に違うのか。
そのコンセプトを起点に、視覚や文章で伝えるために表現に変えて世界にしてゆきます。

どうビジュアルに翻訳するか

まず考えたのは、コンセプトをどうビジュアルで一目で伝えるか。
整いすぎて無機質にはしたくない。
でも感情に寄りすぎて散らかった印象にもしたくない。
そんな二刀流の立ち姿を目指し言語化の世界を旅し続けました。

マーケティングを突き詰めていくと、ロジックに沿って数値的実績を記載したものにすべきだと結論づけることになります。
やがてそれは『ひとつの正解を正確に伝える』という責任を果たすことになるでしょう。
ただし、それ自体が既存のものであり、当たり前でもある。
マーケティングの会社であればなおさら、わざわざ口にするまでもない存在意義でした。

だからこそ、COUNTER社は既存のメインストリームから逸脱し、ロジカルシンキングだけでは成し得ない、未踏の領域に果敢に飛び込む覚悟を決めています。
次のフェーズに向かうには、感情的かつ情緒的意思表示が必要だとプロジェクトメンバー全員の認識があリマした。

プロローグの策定

そこでプロローグ(スローガン)から作ることにしました。
この時点では『COUNTER社が何者なのか』を、対話をしながらプロジェクトメンバーの頭の中に同じイメージを作るのが最大の目的でした。
デザインにも記載すると決めたのはだいぶ後になります。

表明したのは、「メインストリームをひっくり返す」という企業スローガン。

この一文と、それに続くボディコピーは平尾が書きました。
アルテガの制作でよくやる手法で、いわば彼らの「プロローグ」を書き記します。

  • 何を約束する会社なのか
  • どこに向かっていくのか

それを短い文章に落とし込む。説明文というより宣誓。

いつも私たちはプロローグを書く際に、自分が社長に憑依したつもりで、満員のドームに社員がパンパンになっている光景を想像します。
社員たちに向けて、でっかいモニターにデカデカと掲げられたこのプロローグを読み上げます。
すると、社員たちは大きく頷ずき拍手する。

そして彼ら自身がどのような人間か。
その人間理解を示すのがブランドアーキタイプ。

ブランドアーキタイプ

そのキーワード群をもとに、ブランドアーキタイプを整理します。

詳しい説明は省きますが、人間の性格を12の原型に分けて考える心理学者のユングのフレームワークがあります。
それをブランドに当てはめて考えてみます。

すると、COUNTER社のメンバーは、普段からアウトローっぽいことを言いながらも、実はやっていることは愚直で、正面から課題に向き合っている会社だということが見えてきた。

秩序はある。
論理も構造もある。
だが逆に矛盾して混沌が渦巻き、熱量と衝動に突き動かされる未来をイメージして行きます。

「構造化されたカオス」という言葉に辿り着く

結論から先に言うと、デザインコンセプトは「構造化されたカオス」に決まります。
この言葉に辿り着くまでに、すでに3週間が経過しています。デザインの前にする目線あわせがこれほど重要だとは、あまり知られていないのではないかと思います。

特にブランドリニューアルであれば尚更、慎重になります。
彼らとワークショップと焼肉とたくさんの飲み会を経ていても、それだけに時間をかけて醸造していく必要がありました。
だからこそ精緻なものが出来上がったといえます。

① 口癖を洗い出す

弊ディレクターの坂さんが、COUNTER社のメンバーが日頃よく使っている「口癖」を徹底的に書き出してくれたこと。これはかなり大きな突破口でした。
何気ない言葉の中に、会社のDNAや思想、スタンスがにじみ出る。
それを俯瞰してまとめていくことで、「この会社が何を大事にしているか」をクリアにしていきます。

② デザインコンセプト:構造化されたカオス

ここまでのプロセスの結果、「構造化されたカオス」という言葉がしっくりきました。
その言葉に内包された強いキーワードに含まれた印象を定めていきます。

決まったメインビジュアルはこちら。

文脈がわかればメインビジュアルの意味はわかるけど、初見で誰が見てもわかるようなものにはならないように心がけた。
複雑さが内包されていないとハレーションを起こすため。

次は「情報設計」の話

デザインの方向性が決まったあと、次に取り組んだのがサイト全体の情報設計。

COUNTER社からの要望としては、「下層ページは変えなくていい」というものでした。
ただ、話を聞いていく中で、制作実績は今後も増えていくな、という感覚がありました。

だから、制作実績ページだけは、クライアントワークの意図をしっかり書けるポートフォリオページに作り直すことに。
単に実績を並べるだけじゃなく、背景や思考、価値が伝わる余白を持たせた構成にしています。

もう一つ大きかったのが、発信コンテンツの整理。
COUNTERは、YouTube、ブログ、noteなど、複数の発信チャネルを持っている。特に代表の宮田さんは、かなり多方面で継続的に発信している。

これは明確な強みだ。それぞれを点として置くのではなく、「思想がいろんな形で外に出ている」そう見えるようにまとめ直しました。
散らばっていた点を、線にして円にする。これもまた「情報設計」の一部です。

まとめ

今回のサイト制作で一貫して大事にしたのは、

  • まず言葉で定義すること
  • それをビジュアルとコピーで翻訳すること
  • 最後に構造として矛盾なくまとめること

この順番を崩さなかったこと。

だからこそ「構造化されたカオス」という言葉が、キャッチコピーで終わらず、サイト全体に宿ったと感じています。
デザインは、見た目を整える仕事ではありません。
ブランドの思想を、構造と表現に変換する仕事だと、改めて感じました。

メディア掲載実績

ありがたいことに、デザインブックマークサイトやメディアで掲載してもらうことになりました。
掲載してくれたメディアの方、ありがとうございました。

https://www.s5-style.com/11131/

https://muuuuu.org/color/white/22366.html

https://sankoudesign.com/web/counter

https://idid.team/articles/sites-of-interest/2511/#3nbspCOUNTER

https://webdesignclip.com/counter-digital/

https://mekikiki.com/8459/

Project Manager
Shogo Mori (COUNTER)
Creative Director,Design
Makoto Hirao (ARUTEGA)
SEO Director
Kazuya Miyata (COUNTER)
Director
Yoki Sakamoto (ARUTEGA)
Art Director
Norio Ozaki (ARUTEGA)
Develop
Wataru Kojima (ARUTEGA)