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