PENGINのコーポレートサイトリニューアルの裏側を全部見せます！見てください！

この記事の執筆者

鈴木 将太 |CMO

大手メーカーでの企画職や個人事業の経験を持つ。現在は大手企業からベンチャー企業まで、幅広い企業のマーケティング伴走支援やWebディレクションを担当。
BtoBマーケティングを幅広く網羅し、サイト設計に深い理解を持つ。トレンドを取り入れたデザインから業界特化型のデザインまで柔軟に対応しています。

みなさんこんにちは！株式会社PENGINのCMO鈴木です。昨年12月末に、PENGINのコーポレートサイトをリニューアルしました。以前よりもイケてるサイトになったのではないかと思っています！

▼新しいPENGINのコーポレートサイト

東京のホームページ制作・WEB制作会社 – 株式会社PENGIN

今回はそんなWeb制作会社のサイトリニューアルの裏側を余すことなくお伝えします。きっと何かの役に立つはずです。そんな気がします。もし誰の役にも立たなければ数年後に読み返して一人でエモがります。どうぞよろしくお願いします！

難航したコンセプト決め

時は2025年6月に遡る…

粟飯原匠

粟飯原匠

上半期売上好調だから、何かに投資したい！コーポレートサイトリニューアルしよ！！

という思いつきから、プロジェクトは始動しました。PENGINの主要メンバーで集まり「サイトリニューアルするなら、どんなサイトにしたい？？」と、プロジェクトの目的をブレストすることからスタートしました。

▼ブレストで出てきた案

鈴木将太

鈴木将太

会社の方向を示すコンパス的な役割を持たせたいよね。いつでも初心や理念に立ち返れる場所としての機能が欲しい！

伊藤大地

伊藤大地

会社として発信力を強化して「憧れられる会社」にしていけたらいいですよねぇ。

山本圭志朗

山本圭志朗

PENGINの魅力が伝わるサイトにできるといいですね！メンバーを押し出したい…！

植木拓実

植木拓実

サイトを見る人みんなに「この会社おもろそう」って思ってもらえるサイトにしたい！

粟飯原匠

粟飯原匠

会社の理念「ワクワクする。ワクワクさせる」を表現することは譲れません！

などなど、、、みんなからそれぞれ好き勝手な意見が飛び交いました。その中で特に大きな議論ポイントになったのは、コーポレートサイトを自社のWebマーケティングの中核に据えるか否かという点。

がっつりWebマーケティングをするのであれば、SEOやCVRを意識して、潜在顧客に事業内容やPENGINの特徴を伝えることを優先する必要があります。一方で、自分たちを含むPENGINで働く人たちのワクワクを優先する場合は、ある程度遊びを取り入れたWebサイトにしたい気持ちになります。

さらには、下記のような意見も出てきて議論は喧々諤々の様相を呈してきます。

  • 404ページで遊びたい
  • 特設ページ作りたい
  • TOPページはがっつり遊びたい
  • やっぱりWebマーケティング頑張りたい
  • 尖ったコピー書きたい
  • PENGINってそもそも青なんだっけ？黒じゃない？

コンセプトやリニューアルの方向性を決めるまでに1ヶ月以上を要し、なかなか決まらない。プロジェクト開始直後に早くも「これ終わるのか…？？」という暗雲が立ち込めましたが、最終的な合意内容としては以下のようになりました。

  • TOPページはアニメーションを入れて尖らせよう
  • 特定のキーワードを狙うSEO対策は基本的には考慮しない。哲学やスタンスは出したい。
  • 本リニューアルをマーケティング施策とは位置付けない
  • 事業内容や特徴については真面目に書くが、がっつり遊ぶページもつくる（これはプロジェクトが進行していく中で予算・リソースの都合上なくなりました…😭）

▼確定したコンセプト

  • コンセプト：ワクワクする。ワクワクさせる。
  • 重視るすポイント：サイトに訪れた人をワクワクさせるサイト

辛くも面白い情報設計

サイトが目指す方向性が固まったら、必要なコンテンツを洗い出していきます。ひとまずは予算やリソースを度外視して「こんなコンテンツが欲しい！」というアイデアを出し合い、モリモリなサイトマップ/コンテンツ案を作成しました。

▼確定したサイトマップ

必要なページが決まったら、ワイヤーフレームを作成します。実際にワイヤーフレームに落とし込んでみると「このページ、弱くない？この内容だったらいらないのでは？」というようなページがいくつか出てきました。

例えば以下のようなページを削除しました。

  • 特徴・強みページ：作るのが難しすぎたため除外
  • 特集ページ：予算の都合上除外

また、ワイヤーフレームの作成についても難航しました。

自分のことを自分で説明するのは非常に難易度が高いです。メンバー各人が携わっている範囲も人によって異なるため、それぞれが自覚している自社の強みや特徴にも微妙にずれがあります。コンテンツの流れなどの大枠はある程度スムーズに決まったのですが、細部がなかなか固まらずに非常に苦戦しました。

植木

植木

ワイヤーフレームの進捗悪くないっすか？

鈴木

鈴木

平日に時間とるの無理だ…クライアントワークで溢れかえってる😇

植木

植木

…じゃあ、めっちゃ嫌だけど土日に一緒に会社でやりますか…😀

こうして、植木と鈴木の休日を返上し、なんとかワイヤーフレームが形になりました。

TOPページはなかなかコンテンツの方向性が固まらず、ワイヤーフレームが5案くらいになりました。…が、最終的には鈴木と植木の深夜のテンションによって、下記のようなWFになりました。

（大部分は予算/リソースの都合上削除されることになります。フッターの下のペンギンのアイコンをクリックすると、404ページに迷い込める謎仕様を想定していました）

デザイン、どこに依頼する？？問題

今回のリニューアルでは「自分たちがワクワクする」ことも重視していたため、デザインは外部に委託することにしました。また、TOPページにはがっつりアニメーションを入れたかったので、クリエイティブとアニメーションに強い制作会社に依頼しようと考えていました。

それぞれが憧れの会社や気になる制作会社にお見積りを依頼しました。各社丁寧にヒアリングしてくれて、とても良かったのですが、なにぶん予算が合わない…😭

みんなが知ってるような有名な会社に発注できたらいいなとゆるふわっと考えていましたが、いつも依頼してる&方向性決めからしっかり手伝ってくれる会社にしました。
（ヒアリングやご提案をいただいた皆様、本当にありがとうございます🙇）

  • 予算の範囲内（重要）
  • わがままに根気強く付き合ってくれる
  • ブレストから付き合ってくれる
  • 予想を超えるデザインをつくってくれそう

いつも一緒にお仕事させていただいているデザイン会社「ゆらり」さんにご発注しました。ゆらりさんのサイトも最近つくった模様。めっちゃ素敵なので見てください。

デザイン会社「ゆらり」：https://yurari.llc/

想像を超えろ！デザイン制作

デザインのイメージがまったくない中で、ゆらりさんにはブレストから付き合ってもらいました。

「ワクワクする感じ」「ちょっと遊びは入れたいけど、ふざけてる感じは嫌」など、希望だけをざっくりと伝えて、ブレストから付き合っていただきました。

デザインのたたき第一弾として提出してくれた案が下記です。

足跡

一歩ずつ、仲間と進む。
 その足跡は偶然ではなく、意志と情熱の結晶。
 無数の軌跡が集まり、やがて「PENGIN」という名を浮かび上がらせる。
 私たちは地に足をつけた挑戦で、白いキャンバスを色鮮やかな物語へと変えていく。足跡で文字形成
 ペンギンの足跡が集まり「PENGIN」ロゴやキーワードが浮かび上がる。

冒険 / 海に潜る

飛べない鳥が、海を翔けるーー。私たちはその姿のように、制約を力へと変え、未知へと漕ぎ出す。多分野のスペシャリストが群れとなり、知恵と行動を幾重にも重ね、まだ誰も見たことのない景色を、クライアントとともに描いていく。泥にまみれたその旅路こそ、ひときわ鮮やかな輝きを放つ。

冒険 / 深海

飛べない鳥が海を翔ける姿は、挑戦と進化の証。深い藍に白い飛沫が弾け、静と動が交わる境界で、私たちは制約を推進力へ変える。多分野のスペシャリストが群れとなり、知恵と行動を幾重にも重ね、
 クライアントと共に、まだ誰も見たことのない未来を描いていく。

進化するキャンバス

最初は、何も描かれていない真っ白なキャンバス。そこにひとつの点が生まれ、色が滲み、模様が重なり合う。伴走と投資が交差するたび、景色は豊かさを増し、複雑な輝きを放つ。私たちは、その変化をクライアントとともに描き、未来という作品を進化させていく。

無限のワクワク

静かに立つペンギンを中心に、色と光のアイデアが絶え間なく巡る。その軌跡は、無数の可能性と未来への鼓動。
 ぶれない軸があるからこそ、想像は自由に広がり、心が跳ねる。ワクワクしないと始まらない――私たちは、その始まりを共に描く。

ひらめき

静かに立つペンギンから放たれる、一瞬のひらめき。光の粒が重なり合い、未来を照らす輝きへと広がる。確かな軸があるからこそ、発想は自由に跳ね、ワクワクが生まれる。

多面体 切り口

多面体の宝石が光を放つのは、無数のカットがあるから。私たちもまた、戦略・デザイン・技術の切り口を幾重にも重ね、
 挑戦の旅路で磨き続けることで、新しいワクワクを生み出します。冒険こそが、成果を最大限に輝かせる唯一の方法です。

めちゃくちゃたくさんアイデアを出していただきました。

これらのデザインイメージから、しっくりくるキーワードやビジュアルイメージ、我々が「PENGINっぽい」と感じるものを選び、ブラッシュアップしていく形でデザインの制作を進めていきました。

ちなみに、私がもっともしっくりきた案は「冒険/深海」の案です。PENGINはまだ5期目のドベンチャーです。日々目まぐるしく変わる環境でハードワークが必要となる局面も多々あります。そのため、ポップでかわいい感じよりも荒々しく、泥臭さを感じさせる少し怖いくらいのビジュアルに強く惹かれました。
（他のメンバーからは「ちょっと怖くない…」と引かれました）

ちょっと待てよ…？「Web制作会社 東京」で検索上位に浮上

そんなこんなでデザイン制作が佳境に差し掛かってきたある日のこと、なんとなしに「Web制作会社 東京」で検索すると、PENGINのTOPページが9位に…

あれ、風向き変わってきた？？

▼「Web制作会社 東京」で上位に上がってきた経緯はこちら

思い出してください。コンセプト決めのときに「SEOで特定のキーワードは狙わない」「本リニューアルをマーケティング施策とは位置付けない」ということが決まっていたことを…

そうは言っても、購買に繋がりうる検索キーワードで上位を獲得できてしまうとだいぶスケベ心が出てきてしまうもので、TOPページのHTML構造や下層ページのコンテンツは「お問い合わせにつながる設計」も考慮して悪あがきをしました。

一生あがってこない図解・ライティング…

今回のサイトリニューアルのキモは、サービスページを動的にして、コンテンツをリッチにすることでした。サービスページのページ数も、1ページ1ページの充実感も一気に改善したくてサイトマップとワイヤーフレームをつくりました。そして、みんなでサービスページの図解作成とライティングを分担して進めました。

でも僕は忘れていました。自分が必要以上に凝り性で、最終的には自分でやりたくなってしまうくせに、自分で作業する時間は取れないということを。

植木

植木

鈴木さん、図解とライティングできましたか？

鈴木

鈴木

一通りみんなにやってもらったけど、一旦全部手いれたいからちょっと待って

1週間後

植木

植木

鈴木さん、その後ワイヤーの進捗どうですか？

鈴木

鈴木

うーん、だいたいできてるんだけど、もうちょい時間ちょうだい

1ヶ月後…

植木

植木

鈴木さん、もうさすがにやらないと！

鈴木

鈴木

今週の土日でやる！絶対やるわ！

…さらに1ヶ月後

植木

植木

鈴木さん、、もう待てないっす。最後通告です。

鈴木

鈴木

ぐああああ、えいやっ！！！

そんなこんなで、植木の最後通告に背中を押され、みんなにも多大な協力をしてもらい、最後はなんとか公開に間に合わせました。図解やライティングでクオリティが低いと感じる箇所があれば、それは僕の責任です。謝ります。ごめんなさい。

楽しかった撮影会

植木

植木

やばい！コーポレートサイトに掲載する写真を撮らなくちゃ！！！鈴木さん、手配お願いします！！

鈴木

鈴木

おっけー！！（なんでもかんでも俺に言えばいいと思いやがって…ぶつくさ、ぶつくさ）

鈴木

鈴木

場所とカメラマン、手配できたよ！！みんなが空いてそうなスケジュールで抑えました😃

植木

植木

ごめんなさい！！インフルになりました！リスケおねがいします…😭

鈴木

鈴木

😇

そんなこともありつつ、なんとか撮影を実施しました。カメラマンの方もとってもいい方で急なリスケにも嫌な顔ひとつせずにご対応いただけました。

新たなチャレンジ！実装フェーズ

2025年11月から実装が始まりました。新たな試みとして、three.jsを導入したアニメーションに取り組みました。

植木

植木

TOPページはゴリっと動かしたいです。1週間でなにかしら形にしてもらえませんか？

長谷さん（コーダー）

（…え、指示雑すぎん？）

…1週間後

長谷さん（コーダー）

全然できません！！！

植木

植木

わかりました！（AIに聞きながら一旦やってみるか…）

そんな感じで、PENGINのCTO植木とコーダーの長谷さんの二人三脚でどうにかこうにか形にしていただきました。年末の忙しい中、さらに忙しい思いをさせてしまいましたが、出来上がっていく過程をみて本当に感動しました。ありがとう！！！

また、デザイナー・ライターチームで連携して、制作実績や事例インタビューの投稿の作成も一丸となりがんばりました。11月〜12月にかけては怒涛の働きぶりを見せてくれたみなさん、本当にありがとうございます。

こうして、12月25日に無事新しいサイトをリリースすることができました。

サイトリニューアルを終えて

自社のサイトリニューアルを自社でやるのって改めて本当に大変ですね。途中で頓挫しなくてよかった。

デザインを担当してくれたゆらりさん、途中でPMを巻き取ってくれた植木、デザイン作業を柔軟に進めてくれた新田さん、鈴木の無茶振りに耐えてくれた伊藤さん、ライティング周りをゴリゴリっと進めてくれた中平さん、難易度の高い実装をがんばってくれた長谷さん。

本当に、本当にありがとうございました！

みなさんも自社内でコーポレートサイトをリニューアルするときには、タスクの押し付け合いになって、仲悪くならないように気をつけましょう！それではまた！

一覧にもどる