その会社「らしさ」があるWEBのつくり方 【コーポレートサイト制作の教科書２】
㍿ブルーパドルでは、PR企画、商品企画、こどもコンテンツ以外に、コーポレートサイトや、WEBもいろいろ作っています。
このシリーズでは、WEBやコーポレートサイトについて書きます。シリーズ２つ目は「その会社らしいWEB」の作り方の話です。
サイトを作る人にも、サイトを依頼する担当者にも役立つ話なので、良かったら読んでみてください。
あと、１つ目の記事「ページ数が多いWEBは、作る人も見る人も大変」説もぜひ。
１：その会社「らしいWEB」とは
「らしいWEB」とは、ブルーパドルが大事にしているコーポレートサイト制作のスタイルです。このページにまとめています。
僕らがコーポレートサイトを作る場合、（当然のことですが）目的に合わせて、ターゲットや伝えたいことを整理し「情報が届きやすいWEB」を目指します。ただ、そうやって合理的にだけ作ると、どうしても、どのサイトも似た感じになります。
僕らは、そこに＋α「その会社らしさ」を抽出して、WEBの表現に落とし込みます。「分かりやすさ」と「らしさ」の交差点を探します。
２：伝えたい情報×その会社らしさ
僕らはいつも、こんなフローでサイトを作ります。
１：目的・ターゲットを整理
２：伝えたい情報／その会社らしさのキーワードを書き出し
３：情報の優先度を決めて、サイトに構造化
４：そこに加えて「その会社らしさ」を、WEBに落とし込むアイデア出し⭐️
例えば、架空のA社で説明します。
A社はNewsやVISION、採用情報などを伝えたいと考えてます。そして、この会社らしさは福利厚生・環境への気遣いなど「やさしさ」にあると仮定します。
この場合、どうやって考えて作るか。
１：情報構造
まず伝えたい情報に合わせて、素直にサイトの情報を構成。何か個性を出そうとして、ここをひねったものにしても「単なる見にくいWEB」になります。とはいえ、ただ整理するだけでも、平凡なWEBに見えてしまいます。
２：その会社らしさ
そこで、その会社らしさを、そっと一塩ふりそそぎます。A社の「やさしさ」を、WEBのUIやUX、コンテンツなどで表現するとどうなるか。
●UI・UXに「やさしさ」を宿らせる
●言葉づかいをすごく優しくする
●会社へ行くためのマップの説明を、神がかったやさしさにする
●見てる人のパケットを気遣って画像を減らし、サイトを軽くする
など、やさしいUIUXの演出を考えます。ここで大事なのは、その演出によって「伝えたい情報」を邪魔するものにしないこと。むしろ、より伝わりやすくなる交差点を探すことです。
そして、めっちゃやさしいサイトとして認識されることを狙います。
こうして、やさしいWEBができたとします。すると結果的に、伝えたい情報である「VISION」を体現することになったり、SNSなどでも語られる要素ができて、採用が有利になったりと、もともとの目的にもフィードバックされていきます。
これが、僕らの考える「らしいWEBのつくり方」です。
この記事で話したかったことは基本的に、これだけです。以下は、この「伝えたい情報×その会社らしさ」という公式に沿って、具体的な事例で紹介していきます。時間がある人は見てみてください。
ー
派手なバンドらしい「バグったWEB」
1980YENというバンドのサイトは、ド派手に作りました。一見、すごく過剰な見え方になっていますが、実は情報構造はシンプルで、特殊な演出もあまり加えてはいません。
これを「らしいWEB」の公式に当てはめると、こんな感じです。
●伝えたいこと：音楽やってます／曲／ニュース
●バンドらしさ：「ファストカルチャー」というコンセプト、POPな世界観
これをサイトに落とし込みます。
１：情報構造
素直に伝えたいものを積み上げたTOPにしています。ただ、これだけだと普通のバンドサイトになってしまいます。1980YENらしさが足りません。
２：バンドらしさ
そこで、伝えたい情報を邪魔しない形で表現する方法として、背景を活用しました。
⭐️背景をド派手な映像にする
⭐️UIはシンプルだが、色だけおかしくする
⭐️マウスカーソルやホバーなどで、過剰な演出を入れる
結果的に、一見ド派手だけど、意外と情報は接種できる、変なサイトができました。
https://1980yen.com/
ー
コピーライターらしい「言葉しかないWEB」
大御所のコピーライター「オカキン」さんこと、岡本欣也さんの会社のサイトも作らせて頂きました。
オカキンさんの場合、こんな感じです。
●伝えたいこと：事例（コピー）
●らしさ：数々の名作コピー、コピーの教科書にもなるような「事例の量」
オカキンさんの場合、事例（コピー）がちゃんと見えていればOKです。そして、そのコピーがどれも素敵なので、WEBデザインがその邪魔をしないことが重要でした。
なので、ここでは「言葉」しかないWEBを目指しました。ただ事例がシンプルに並ぶこと。しかも事例集は、コピーの教科書にもなりうるので、スクロールで大量に見れるように。事例の並び順も、新着順でなくランダム順をデフォルトに。
こういう余裕のある「引き算」が、オカキンさんの場合、らしさにつながると考えました。
そして、最後の一塩として、トップにオカキンさんの言葉たちを使って、「文字だけのちょっとした表現」を添えました。ここは、なくても成立する＋αの部分です。でも、その余白のために、サイト制作のエネルギーのほとんどを注ぐ「詰め／クオリティ」を注ぎました。
江戸時代の人が、裏地に気を使うように、重要ではない場所を凝るのもまた、オカキンさんのらしい粋だと思っています。
これを「格好いい演出のあるWEBを作りたい」という製作者の欲を出して、コピーの事例一覧の出し方を、有機的なエモい動きにしたり、タイピングされた感じで出すような演出は、ブルーパドル的にはNGです。
演出系と分類されるWEBでも、そのどこに演出を注ぐかで、サイトの意味は180°違うものになります。
ー
リゾート建築らしい「雑誌みたいなWEB」
リゾートのような注文住宅をつくるKAJAさん。
KAJAさんの場合、こんな感じです。
●伝えたいこと：家の事例、VISION、News
●らしさ：高いクオリティのリゾート建築
KAJAさんの場合、これ以外にも「強み・素材・採用・別事業」など伝えたいことが多くありました。整理とトンマナをごっちゃに考えると、何も伝えられない雰囲気WEBになる可能性が非常に高いプロジェクトでした。
１：情報構造
伝えたい優先度の１位２位を「事例」と「VISION」にしました。それ以外の情報も、TOPに順番に配置していきますが、最低限もって帰ってもらたいことは「家の事例」に集約させる設計にしました。
２：らしさ
KAJAさんらしさも、「家の事例」に集約されています。ということで、タスクは整理されました。
とにかく「家の事例」を、リゾート建築として、素敵に見せること
家探しの場合は、本気で探す人も多いので、多少重くてもいいから、写真を大量に見せることにしました。
らしさを出すためにやったことは以下の通りです。
●雑誌っぽく見せる
●家にあだ名をつける
●事例の詳細ページを、普通よりもかなり丁寧に見せる
こういうポートフォリオサイトの場合、僕らの手を離れても、トンマナを保っていけることが重要です。サムネイルのルールを決めたり、事例詳細のコントロールができるようにつとめました。
文章も写真を多くはさんで、リゾート的なゆったりした説明にしました。事例１つずつを、全部リライトする必要があるので、時間がかかりましたが、そういう工数は、ずっと報われるタイプの努力なので、クライアント側にも汗をかいてもらって、作るようにしています。
ー
下町のタクシー会社らしい「寅さんみたいな人情WEB」
互助交通さんは錦糸町にある老舗のタクシー会社。
互助交通さんがやりたいことは、採用と、面白タクシーをやっていることを伝えるページをつくること。会社は、とっても味のある雰囲気で、お世辞にもきれいな環境とは言えない感じでした。
●伝えたいこと：採用／面白タクシーやってるよ
●らしさ：下町の会社／古い／平均年齢高め
「古い会社→人情がある会社」ネガをポジに変える
ここで、採用のための戦略として、あまりネガになりそうな部分は隠して、きれいな写真や言葉で取り繕う方法もありました。
ただ結局、合わなければ辞めてしまうので、ちゃんと互助交通さんの雰囲気を、ポジティブに伝えた方が良いですよね。ネガに見れば「古い」でも、ポジティブに見れば「人情」があふれている会社。本当に、寅さんがいそうな感じの雰囲気でした。
そこで、人情味を出すために、サイトの言葉使いを寅さんみたいにしました。写真も邦画のような、味のある感じにしています。そして、ちょっと文字もかすれさせたり、小さな工夫をしました。
人情を推す・口調を変える・サイトをかすれさせる。やったことはこれだけです。もちろん「寅さん／人情らしさ」を表現する方法は、他にたくさんあります。動画を使ってドキュメンタリーにしたりすれば、もっと良いかもしれません。
しかし互助さんの場合、制作費的にもそこまでリッチなことをする余裕はなかったので、その中でできるアイデアの中で、ちゃんと「らしさ」を表現しました。
予算がないから、何も演出ができないということはないですよね。アイデア１つで、必ずやれることはあります。そこは何度も言いたい部分です。
http://ninjo.gojyo-taxi.com/
ー
面白法人カヤックらしい「５つの顔を持つWEB」
最後に、僕の前職の会社カヤックのコーポレートサイトの話も。僕が辞める前の最後の仕事として、大規模なサイトですが、ADとして作りきりました。
こちらは公式にすると、こんな感じ。代表のやなさんがCDをつとめているので、明確なディレクションが入ります。
●伝えたい：カヤックの様々なニュース
●らしさ：４つの特長（漫画・ゲーム・鎌倉・テクノロジー）
漫画っぽさ、ゲーム、鎌倉など多様な顔を、どうまとめるか
カヤックサイトは昔からずっと、漫画っぽいサイトを作ってきました。それがカヤックのアイデンティティであり、そこは外せません。ただ、2016年のリニューアル時、カヤックはいろんな顔がありました。漫画だけでなく、テック企業でもあり、鎌倉を根城にした企業であり、ゲーム会社であり、スタートアップの会社でもある。
多様なトンマナを包括した会社。ただし、それを表現することに固執すると、情報がわかりにくいサイトになる。それに正直、コンテンツで勝負すればいいので、サイトは白くてすっきりさせてしまえばいいとも思っていました。
そこで、サイト構造はシンプルに見やすく。ただし右下の「スタイルを変えるボタン」を押すと、５つのトンマナにスタイルが変わるという演出を、１つ入れました。
つまり大量のページのあるコーポレートサイトを、５倍の量で作るという、すごいエグい演出ではあったのですが、それをチームメンバーと作りきりました。
面白法人の矜持として、漫画やゲーム的な演出は必要。ただし、上場企業として、多数の情報を見やすく整理する。という２つの矛盾する要件を、こういう方法で作りました。
カヤックはもともと２−３年のペースで、コーポレートサイトをリニューアルしていますが、今回のサイトは４年以上続いています。そろそろリニューアルの季節だと思いますが、次はどんな答えを出すのか、楽しみにしています。
https://www.kayac.com/
らしいWEBは、ブランディングの話
以上、らしいWEBの話でした。これは要は、ブランディングの話です。ブランディングというと、CI（ロゴ）とか、WEBサイトのトンマナ（雰囲気）をイメージするかもしれません。
でも僕としては、もう少し広く「UIや、ボタンなどのワーディング、サイトの演出、UX、情報構造」などからも、ブランドらしさは、にじみ出るものだと思っています。
僕らの事例ではないですが、スマイルズさんのサイトのメニューの言葉が、こんな言い方になっているのも、らしいWEBです。
https://www.smiles.co.jp/
僕らは、その会社らしさがにじみ出るWEBを作っていきたいと考えています。
最近は、WEBを作る方法はたくさんあります。シンプルに情報を載せる場所で良いのであれば、noteに書いた方が絶対有効です。また、めちゃくちゃ格好良いサイトがお望みであれば、カッコイイ制作会社がたくさんあります。そういう依頼を頂いたときは、別の会社を紹介することも、よくしています。
そのどちらでもない、その会社「らしさ」を抽出していく作業が必要な場合が、僕らの役割だと認識しています。
https://blue-puddle.com/web-app
もしそういう役目が必要なときは、ご連絡ください。長文お付き合いいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？