”ギリギリアウト”なwebサイトを作りたい！
今回、湘南を中心に神奈川県の物件を得意とする不動産会社「株式会社Blue」様のコーポレートサイト制作をお手伝いさせていただきました。
“ギリギリアウト”なwebサイトを作りたい！という驚きの一言から始まった、
株式会社ippaiattenaと株式会社Blue様の青春溢れる制作ストーリーをお届けします。
- 制作期間：約5ヶ月：2025年3月〜2025年10月
- 制作内容：コーポレートサイトリニューアル（要件定義、情報設計、Webデザイン、実装、アニメーション、動画制作）
コンセプト設計 – サイト制作のストーリーを組み立てる
2025年3月 弊社サイトからのお問い合わせをきっかけに、コーポレートサイトリニューアルプロジェクトがスタートしました。
株式会社Blueの林さんはちょっと変わったfunnyな社長。
「「「「「「「ギリギリアウトなサイトを作りたい！！！！？？？？？」」」」」」」
湘南を中心に神奈川県の物件を手がける不動産会社 株式会社Blueは、これまでの「THE・不動産」なイメージから1歩抜け出したい！（最終的に無事100歩くらい飛び出すことになります。）というご要望でした。
ちょっと尖った“ギリギリアウト”なコーポレートサイトへのリニューアルを目指して動き出したプロジェクト。
まずはコンセプトの提案・すり合わせを繰り返し進めていきました。
コーポレートサイトを作る目的を考える
コーポレートサイトをリニューアルするにあたって、まずはリニューアルの目的について整理していきます。
今回の制作において「もっとお客様を増やそう！」「求職者にアピールしよう！」という部分は主要ではないとのこと。
Blueとして一番大事にしたいのは、まず自分たちが幸せでいること。
「自分たちが楽しんでなきゃ、他の人なんて幸せにできないよね」という考え方を表現したい。そして、その想いに共感してくれる人に刺されば….そんな想いがこのプロジェクトのど真ん中。この想いをサイト制作の軸として据え進めていくことにしました。
ターゲットとしては Blueの想いや世界観に共感してくれる方。
+刺さる人だけに刺されば良い！ という強い想いを表現するため、次のフェーズではアウトプットのあり方について考えていきます。
デザインの方向性 – 理想のアウトプットを明確にしていく
目指すべき方向性を可視化する
整理したコンセプトをどのようにアウトプットするのが最適なのか。
最適な”ギリギリアウト”具合とはどのくらいなのか。
ヒアリングを重ねながら段階を踏んで明確にしていきます。
まずは目指すべき方向性・ギリギリ具合を、掘り下げていきました。
どんな方向性でどんなデザイン・表現方法を用いるとよさそうなのかが少しづつ見えてきます。
今回のプロジェクトに限らずですが、webサイトだけでなく、映画やポスター、動画、ブランディング事例など縛りなく参考を集め擦り合わせていくように意識しています。いろんなヒントが落ちているからです。
ただただアウトなサイトを作るのではなく、⚠️株式会社Blueだからこそのギリギリアウト⚠️ではありたい。
ここはアウトプットに向かう過程で見失ってはいけない大切なポイントです。
Blueだからこそ＝Blueらしさと考え、次はBlueを表すためのキーワードを抽出してみます。
ここで出ている特徴的なワードが“青春”ですね。
株式会社Blueの社名の由来には、カッコつけずに青春をやり直す。という想いが込められています。
ゴリゴリのTHE 不動産ではなく、素直に真っ直ぐ、青くさい気持ちを忘れずに青春を駆け抜けるような不動産会社でありたい。そんな林さんの強い気持ちがありました。まさにBlueという会社を表すのに最適なキーワードです。
アウトプットの方法を考える
このフェーズでは、アウトプットの方法についてより詳細に考えていきます。
どんな表現方法を用いることで、理想の“ギリギリアウト”を叶えられるのか？
候補として出た案がこちら。
・大人が本気でコスプレをする
・インパクトのある映画広告をイメージしたサイトにする
・Blueに染まる、をコンセプトにペンキまみれになってみる
・ダイナミックなアニメーションを用いたwebサイトにしてみる
どれもいい感じにギリギリを攻めて遊べそうな案ですね。
ここで、先ほど抽出したキーワードとすり合わせながら、どの手法が最適なのかを考えていきます。
“カッコつけずに青春をやり直す。”を掲げるBlue、人生の節目に関わる不動産という仕事、部屋探しという一人ひとりの人生の大切なワンシーン、なんだか映画に通ずるものがある気がしました。
家探しも転職も、新しい暮らしも、まるで映画のように胸が熱くなる物語を一緒に紡ぎたい。
そんな想いから今回のプロジェクトのテーマが決定しました。
青春×映画仕立て
初めは青春映画の告知サイトのようなものを作る想定でしたが、映画から作っちゃおう！という思い切った提案に進みました。
・2分ぐらいの告知動画をイメージしたショートムービー
・撮影のメイキング映像
上記の映像作品に伴った青春ドタバタコメディ映画の告知サイトを目指します。
動画制作の計画・進行
ストーリー制作〜絵コンテの作成、外部の映像チームへの依頼、撮影当日の進行計画等を進めていきます。
林さんにもご協力いただき学校をロケ地として抑えました。社員の皆様には、アウトプット案でも出た本気の「コスプレ」で学生時代に戻っていただきます。
…ストーリー制作、撮影の絵コンテ
…撮影の様子
社員の皆様もとても協力的で、見事にコスプレを着こなし、最高にふざけ切った青春溢れる撮影になりました！ありがとうございました！
アウトプットの結果
映像作品
まずは出来上がった映像作品がこちら
【本編（予告動画風）】
【メイキング】
コーポレートサイト
コーポレートサイトは、映像作品の世界観に合わせて制作を進めました。
しっかり“ギリギリ”ふざけながら、こだわりポイント盛りだくさんのサイトになっています。
POINT 1 本物の映画サイトを思わせるTOPデザイン
映画の告知サイトを参考に、本当にこんな映画があるんじゃないか!?と思わせるようなTOPページに。
念の為※不動産サイトですの注意書きを入れました。
POINT 2 数字で見るページ
数字で見るのページはテストの答案用紙をイメージしたデザインに。
回答の部分もしっかりふざけているので細かくチェックしてみてください！
POINT 3 店舗ごとのテーマ設定
Blueには複数店舗・部署が存在します。
店舗ごとに雰囲気や社員の方々のキャラクターに個性があることでしたので、各店舗にあったちょっとコミカルで青春なテーマを設定しました。
・藤沢店＝湘南loverが多い店舗…運動部の青春ドラマをイメージ
・横浜西口店＝バリバリ！強気！…ヤンキーの学園ドラマをイメージ
・横浜西口店＝フレッシュ系…THE・王道青春をイメージ
・事業推進部＝4.50代の方がメイン…職員室をイメージ
・契約者センター＝女性の方が多い…保健室、恋愛趣味レーションゲームをイメージ
各店舗の個性を、サイトの世界観に合わせて表現しています。
POINT 4 映画サイトならでは！相関図を使用したメンバー紹介
メンバー紹介は、ドラマや映画のサイトによくある相関図を用いて作成しました。
映画のストーリーに沿った相関図。しっかりと一人一人に役名も設定しています。
メンバーの詳細ページには、学生時代を思い出すプロフィール帳のデザインを採用しました。
POINT 5 隠しコマンド
お知らせページの♩をクリックすると….!?
今回林さんにご協力いただき主題歌まで作成しました。こんな隠しコマンドも見所です。
また、映画の告知動画内で、林さん演じる校長・青木 裕三郎が何者かに打たれるシーンがあります。
あらすじページにその犯人の答えが……..！
こういった細かい部分にもこだわっています。これは撮影中の会話から、こうしたら面白いんじゃない！？という案が出て採用になりました。制作しながら新しいアイデアを付け足していく過程もワクワクします。
採用ページ
採用ページは、他ページとは少しトンマナを変えてしっかりと働き方や社内の様子を伝えるページに。
採用ページは、社員の方々の雰囲気やどんな会社かがしっかりと伝えたいページ。
社員の皆様にご協力いただき普段の様子や社内のイベントの様子、皆様の人柄が伝わるような写真を共有いただき、ふんだんに使用しました！
とはいえ“ギリギリアウト”を目指しているサイトには変わりありません。
GIFや採用ページ用に撮影いただいた写真を活用しながら、Blueらしい採用ページに仕上がったのではないでしょうか。
横から飛び出したり走り抜けるGIFがこだわりポイントです。
プロジェクトを振り返って
今回のサイト制作は、通常の枠にとらわれない柔軟な発想と創造力が求められるプロジェクトでした。
「こんなこともできるのでは？」「この表現はどうだろう？」と、さまざまな角度からアイデアを出し合い、それを実際の形にしていきました。
映像作品の撮影やアニメーション・音楽を取り入れた表現など、普段の制作ではあまり経験できない表現方法にも取り組むことができ、制作チームとしても貴重な経験になりました。
株式会社Blueと真剣に向き合い、”Blueらしさ”を120%表現した素敵なサイトに仕上がったのではないでしょうか。
