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