見出し画像

その会社「らしさ」があるWEBのつくり方 【コーポレートサイト制作の教科書2】

㍿ブルーパドルでは、PR企画、商品企画、こどもコンテンツ以外に、コーポレートサイトや、WEBもいろいろ作っています。

このシリーズでは、WEBやコーポレートサイトについて書きます。シリーズ2つ目は「その会社らしいWEB」の作り方の話です。

サイトを作る人にも、サイトを依頼する担当者にも役立つ話なので、良かったら読んでみてください。

あと、1つ目の記事「ページ数が多いWEBは、作る人も見る人も大変もぜひ。

1:その会社「らしいWEB」とは

「らしいWEB」とは、ブルーパドルが大事にしているコーポレートサイト制作のスタイルです。このページにまとめています。

僕らがコーポレートサイトを作る場合、(当然のことですが)目的に合わせて、ターゲットや伝えたいことを整理し「情報が届きやすいWEB」を目指します。ただ、そうやって合理的にだけ作ると、どうしても、どのサイトも似た感じになります。

僕らは、そこに+α「その会社らしさ」を抽出して、WEBの表現に落とし込みます。「分かりやすさ」と「らしさ」の交差点を探します。

2:伝えたい情報×その会社らしさ

僕らはいつも、こんなフローでサイトを作ります。

1:目的・ターゲットを整理
2:伝えたい情報/その会社らしさのキーワードを書き出し
3:情報の優先度を決めて、サイトに構造化
4:そこに加えて「その会社らしさ」を、WEBに落とし込むアイデア出し⭐️

例えば、架空のA社で説明します。
A社はNewsやVISION、採用情報などを伝えたいと考えてます。そして、この会社らしさは福利厚生・環境への気遣いなど「やさしさ」にあると仮定します。

この場合、どうやって考えて作るか。

1:情報構造
まず伝えたい情報に合わせて、素直にサイトの情報を構成。何か個性を出そうとして、ここをひねったものにしても「単なる見にくいWEB」になります。とはいえ、ただ整理するだけでも、平凡なWEBに見えてしまいます。

2:その会社らしさ
そこで、その会社らしさを、そっと一塩ふりそそぎます。A社の「やさしさ」を、WEBのUIやUX、コンテンツなどで表現するとどうなるか。

●UI・UXに「やさしさ」を宿らせる
●言葉づかいをすごく優しくする
●会社へ行くためのマップの説明を、神がかったやさしさにする
●見てる人のパケットを気遣って画像を減らし、サイトを軽くする

など、やさしいUIUXの演出を考えます。ここで大事なのは、その演出によって「伝えたい情報」を邪魔するものにしないこと。むしろ、より伝わりやすくなる交差点を探すことです。

そして、めっちゃやさしいサイトとして認識されることを狙います。

こうして、やさしいWEBができたとします。すると結果的に、伝えたい情報である「VISION」を体現することになったり、SNSなどでも語られる要素ができて、採用が有利になったりと、もともとの目的にもフィードバックされていきます。

これが、僕らの考える「らしいWEBのつくり方」です。

この記事で話したかったことは基本的に、これだけです。以下は、この「伝えたい情報×その会社らしさ」という公式に沿って、具体的な事例で紹介していきます。時間がある人は見てみてください。

派手なバンドらしい「バグったWEB」

1980YENというバンドのサイトは、ド派手に作りました。一見、すごく過剰な見え方になっていますが、実は情報構造はシンプルで、特殊な演出もあまり加えてはいません。

https://1980yen.com/

これを「らしいWEB」の公式に当てはめると、こんな感じです。

●伝えたいこと:音楽やってます/曲/ニュース
●バンドらしさ:「ファストカルチャー」というコンセプト、POPな世界観

これをサイトに落とし込みます。

1:情報構造
素直に伝えたいものを積み上げたTOPにしています。ただ、これだけだと普通のバンドサイトになってしまいます。1980YENらしさが足りません。

2:バンドらしさ
そこで、伝えたい情報を邪魔しない形で表現する方法として、背景を活用しました。

⭐️背景をド派手な映像にする
⭐️UIはシンプルだが、色だけおかしくする
⭐️マウスカーソルやホバーなどで、過剰な演出を入れる

結果的に、一見ド派手だけど、意外と情報は接種できる、変なサイトができました。
https://1980yen.com/

コピーライターらしい「言葉しかないWEB」

大御所のコピーライター「オカキン」さんこと、岡本欣也さんの会社のサイトも作らせて頂きました。

http://okakin.jp/

オカキンさんの場合、こんな感じです。

●伝えたいこと:事例(コピー)
●らしさ:数々の名作コピー、コピーの教科書にもなるような「事例の量」

オカキンさんの場合、事例(コピー)がちゃんと見えていればOKです。そして、そのコピーがどれも素敵なので、WEBデザインがその邪魔をしないことが重要でした。

なので、ここでは「言葉」しかないWEBを目指しました。ただ事例がシンプルに並ぶこと。しかも事例集は、コピーの教科書にもなりうるので、スクロールで大量に見れるように。事例の並び順も、新着順でなくランダム順をデフォルトに。

こういう余裕のある「引き算」が、オカキンさんの場合、らしさにつながると考えました。

そして、最後の一塩として、トップにオカキンさんの言葉たちを使って、「文字だけのちょっとした表現」を添えました。ここは、なくても成立する+αの部分です。でも、その余白のために、サイト制作のエネルギーのほとんどを注ぐ「詰め/クオリティ」を注ぎました。

江戸時代の人が、裏地に気を使うように、重要ではない場所を凝るのもまた、オカキンさんのらしい粋だと思っています。

これを「格好いい演出のあるWEBを作りたい」という製作者の欲を出して、コピーの事例一覧の出し方を、有機的なエモい動きにしたり、タイピングされた感じで出すような演出は、ブルーパドル的にはNGです。

演出系と分類されるWEBでも、そのどこに演出を注ぐかで、サイトの意味は180°違うものになります。

リゾート建築らしい「雑誌みたいなWEB」

リゾートのような注文住宅をつくるKAJAさん。

https://kaja-design.com/

KAJAさんの場合、こんな感じです。

●伝えたいこと:家の事例、VISION、News
●らしさ:高いクオリティのリゾート建築

KAJAさんの場合、これ以外にも「強み・素材・採用・別事業」など伝えたいことが多くありました。整理とトンマナをごっちゃに考えると、何も伝えられない雰囲気WEBになる可能性が非常に高いプロジェクトでした。

1:情報構造
伝えたい優先度の1位2位を「事例」と「VISION」にしました。それ以外の情報も、TOPに順番に配置していきますが、最低限もって帰ってもらたいことは「家の事例」に集約させる設計にしました。

2:らしさ
KAJAさんらしさも、「家の事例」に集約されています。ということで、タスクは整理されました。

とにかく「家の事例」を、リゾート建築として、素敵に見せること

家探しの場合は、本気で探す人も多いので、多少重くてもいいから、写真を大量に見せることにしました。

らしさを出すためにやったことは以下の通りです。

●雑誌っぽく見せる
●家にあだ名をつける
●事例の詳細ページを、普通よりもかなり丁寧に見せる

こういうポートフォリオサイトの場合、僕らの手を離れても、トンマナを保っていけることが重要です。サムネイルのルールを決めたり、事例詳細のコントロールができるようにつとめました。

文章も写真を多くはさんで、リゾート的なゆったりした説明にしました。事例1つずつを、全部リライトする必要があるので、時間がかかりましたが、そういう工数は、ずっと報われるタイプの努力なので、クライアント側にも汗をかいてもらって、作るようにしています。

https://kaja-design.com/

下町のタクシー会社らしい「寅さんみたいな人情WEB」

互助交通さんは錦糸町にある老舗のタクシー会社。

http://ninjo.gojyo-taxi.com/

互助交通さんがやりたいことは、採用と、面白タクシーをやっていることを伝えるページをつくること。会社は、とっても味のある雰囲気で、お世辞にもきれいな環境とは言えない感じでした。

●伝えたいこと:採用/面白タクシーやってるよ
●らしさ:下町の会社/古い/平均年齢高め

「古い会社→人情がある会社」ネガをポジに変える

ここで、採用のための戦略として、あまりネガになりそうな部分は隠して、きれいな写真や言葉で取り繕う方法もありました。

ただ結局、合わなければ辞めてしまうので、ちゃんと互助交通さんの雰囲気を、ポジティブに伝えた方が良いですよね。ネガに見れば「古い」でも、ポジティブに見れば「人情」があふれている会社。本当に、寅さんがいそうな感じの雰囲気でした。

そこで、人情味を出すために、サイトの言葉使いを寅さんみたいにしました。写真も邦画のような、味のある感じにしています。そして、ちょっと文字もかすれさせたり、小さな工夫をしました。

人情を推す・口調を変える・サイトをかすれさせる。やったことはこれだけです。もちろん「寅さん/人情らしさ」を表現する方法は、他にたくさんあります。動画を使ってドキュメンタリーにしたりすれば、もっと良いかもしれません。

しかし互助さんの場合、制作費的にもそこまでリッチなことをする余裕はなかったので、その中でできるアイデアの中で、ちゃんと「らしさ」を表現しました。

予算がないから、何も演出ができないということはないですよね。アイデア1つで、必ずやれることはあります。そこは何度も言いたい部分です。
http://ninjo.gojyo-taxi.com/

面白法人カヤックらしい「5つの顔を持つWEB」

最後に、僕の前職の会社カヤックのコーポレートサイトの話も。僕が辞める前の最後の仕事として、大規模なサイトですが、ADとして作りきりました。

https://www.kayac.com/

こちらは公式にすると、こんな感じ。代表のやなさんがCDをつとめているので、明確なディレクションが入ります。

●伝えたい:カヤックの様々なニュース
●らしさ:4つの特長(漫画・ゲーム・鎌倉・テクノロジー)

漫画っぽさ、ゲーム、鎌倉など多様な顔を、どうまとめるか

カヤックサイトは昔からずっと、漫画っぽいサイトを作ってきました。それがカヤックのアイデンティティであり、そこは外せません。ただ、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

もしそういう役目が必要なときは、ご連絡ください。長文お付き合いいただき、ありがとうございました。

info@blue-puddle.com

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
137
1982年生まれ。プランナー/アートディレクター。株式会社ブルーパドル代表。『不思議な宿』『小1起業家』『CODE COFFEE』『変なWEBメディア』『5歳児が値段を決める美術館』『Kocri』など、様々なコンテンツを量産中。