自社コーポレートサイト制作の裏側、全部見せます。

初めまして、webディレクターの平尾です。こんにちは。
I-neは今年8月にコーポレートサイトをフルリニューアルしました。

そうです、今ご覧になっているこのサイトのことです。
改めて比較をしてみるとこのように変わりました。

https://i-ne.co.jp/

コーポレートサイトのフルリニューアルは、企業のブランディングにも関わる、経営幹部を巻き込んだ大きなプロジェクトです。

サイトの大々的なフルリニューアルは頻繁に行われるものではありません。 それだけに今年の３月から長期的な戦略を立てました。

この記事では社内制作で自社サイトをフルリニューアルしたプロセスをお伝えします。
事業会社の方や、現職のインハウスデザイナーの方は、是非とも迷えるサイトリニューアルの参考にしてください。社内制作だからこその苦労と葛藤がありました。

今回、私はあくまで社員としてというよりも、一人のwebプロデューサーとしてこのプロジェクトと向き合うことを大切にしました。誰よりも中立な立場でいたかったからです。

結果、web制作を長年続けてきた私にとって集大成になりました。
なお、この記事では社内向け資料と個人的感想を多分に含みます。

サイトを変える目的

コーポレートサイトはデジタルコミュニケーションの支柱になります。
私がプロデユーサーとして設計した目的は主に下記の３つでした。

①発信型サイトにし、閲覧者が何を求めてるかを分析する（機能的アップデート）
②企業ステートメントをデザインに落とし込みビジュアルにする（思想的アップデート）
③言葉にして来なかったものを言葉にする（裏目標：社内ドキュメントアップデート）

主にプロジェクトメンバーや経営陣には先の二つを語り続けてきました。
『今回のフルリニューアルの目的はこれだ！』ってな感じでです。

でも実は３つ目は誰にも言っていません。
私がひそかに決めた裏目標だったからです。

では、それぞれについてご説明します。

誰がどうやって作ったか

webサイトの制作チームです

井上敦貴：Lead Designer
尾崎徳朗：Designer
山中宏介：Lead Enginner
榎田里菜：Art Director & Wording
平尾誠　：Producer & Animation Design

プロジェクトメンバーは全員制作会社から転職してきたインハウスクリエイターたち。ちなみにweb制作だけではなく、グラフィックデザイナーやアートディレクターもたくさん在籍しています。
もちろん他にも資料作りや事実確認などを含めば、もっとたくさんの社員たちが関わっています。

技術的側面に少しだけ触れると、運用・更新を誰でもできるようにWordpressと呼ばれるブログみたいな機能を組み込んで作りました。

フルリニューアルでやったこと

目的①：発信できるサイトにし、閲覧者が何を求めてるかを分析する

旧サイトはこんな感じ。

まぁ、デザイン的に悪くもないけど、全くパッとしません。

ページ数が少ないので、見るページは限られているサイトでした。
実は、“ユーザーが何を目的に訪問しているのか分析できない。”という課題を抱えていました。

新しいサイトでは内容を整理しページ数を増やしました。
また、ニュース配信を可能にし、記事カテゴリをあらかじめ整理しやすい５つに絞ります。
それによってサイト訪問者を分類分けして分析しやすくしました。

目的②：企業ステートメントをデザインに落とし込みビジュアルにする

こちらはサイトのファーストビュー。

消費者の手に商品が渡るまでのシーンを撮影しました。
商品開発→販売→営業などなど、弊社主力商品“BOTANIST”を中心に周りの風景を変えています。
また、それぞれのシーンに人感を入れることで、無機質なイメージではなく、情緒的な柔らかいイメージに仕上げました。

全体の印象としては、信頼ある印象を与えるため、清潔感のあるデザインを重視しました。

誰が何を言おうが、弊社のデザイナーもディレクターもエンジニアも優秀。

目標③：言葉にして来なかったものを言葉にする

この３つ目は、私が自分に課した裏目標です。

弊社I-neのビジネススピードは早い。

部署の組織編成はフレキシブルに変わるし、新商品や新ブランドの立ち上げがめちゃめちゃある。だからもちろん、『トレンドを追いながらも、次のトレンドを作るんだ』という気概というかグルーヴが社内にはあります。

それ自体はとてもいいことであり、弊社の強みの一つです。

ただし、変化が早過ぎて新しい取り組みが言語化されていなかったり、古い資料がアップデートされずに放置されるという弊害も起こります。
すると、社外に発信できる正確な情報がない。

私は、これを整理整頓するキッカケを作りたかった。

コーポレートサイトには正確な文章を掲載する必要があります。
社内資料を引っぱり出してきて、古いものはアップデートさせ、プロセスの中で無駄なものは削除していきたい。
また、ふわっとした概念しかないものはビジュアル化・言語化しドキュメントとして残します。

事業会社の内部からコーポレートサイトを作るとなると、ある程度の混乱や議論が生まれることはある程度予測していました。
そして、言葉にしてこれなかったものを言葉にし、サイトのフルリニューアルを終えた頃に、

『うちの会社のことはサイトに全部書いてあるから。読んだらわかるから。』

くらいになっているのがサイコーだなと。

コーポレートサイトをフルリニューアルする最大のメリットは、会社の強みを再定義し、言語化できることです。

大変だったこと

デザインが決まらない！

実際に制作フェーズに進むと僕はエンジニアとして稼働します。
進行管理は、ディレクターの榎田にパス。

榎田とリードデザイナーの井上が、サイトの顔になるファーストビューを決めます。
ここでかなり時間を費やします。
まあ当然ですね、議論が終わらないんです。たっぷり時間を使わせてもらいました。

『ボタニスト以外にもたくさん商品がある！』
『企業理念をビジュアルで表現するとしたら何？』
『この考え方と、この考え方の優先順位はどちらが上なの？』

そんな議論をチーム内で何度も何度も繰り返した結果、数々のボツ案が生まれます。

ほんとデザイナーの井上くん、ありがとう。

文章が決まらない！

どのような事実を基に文章を決めるかはとても大切。

なぜ文章が決まらないか、その本質は企業側が伝えたいことと、閲覧者が知りたいことは必ずしも同じではないからです。

企業側：サイトではこう見られたい、これを知って欲しい！
閲覧者：ちがう！他を知りたい！そんなの見栄にしか見えない！

この間を仲介するのが企業コーポレートサイトの役割だと私は思います。

コーポレートサイトで見栄をはった言葉ばかりを並べるわけにはいかない。
また、控えめに書きすぎても、閲覧者にとって魅力的ではなくなります。

だから事実と解釈は分けて考え、コンテンツを制作していかなければいけません。特に、社内制作では”偉い人がこう言ってるからそうしよう。”的な長い物に巻かれる事ってあると思います。
でも、巻かれてしまってはいけません。サイトを訪れる閲覧者目線でサイトを作ります。

制作チームは閲覧者に正直であるために、強さと責任を持つべきだと思います。

最大のピンチ

公開延期とその代償

サイト制作とは別のところで、企業ステートメントに一部変更があり、今後の弊社の在り方がブラッシュアップされました。
そのことで、サイトにも一部変更が生じました。 そして公開が後ろ倒しにならざるを得ない事態に。

作り直しや、もう陽の目を浴びないデザインやソースコードが発生します。
サイト公開間際のタイミングったので、公開に向けてリソースを集中していたチームメンバーの感情は、一気に苛立ちと落胆がピークに。

公開へ向けて、期日厳守だったチーム全員の緊張の糸が一度、完全に緩み、連携はほどけます。
理由は色々あり、仕方ない部分も多分に含みますが、ただ根回しと確認不足が原因なのは明確。

そして、私の責任であることも明白です。

社内リソースだからと言って費用がかかっていない訳ではない！

もしも、今回の制作が、外部のweb制作会社であれば、多大な追加制作費用を請求されているはずです。
インハウスでは、費用 = 社内リソース の感覚が希薄になりがちです。
プロジェクトマネージャーは“人が作っているということ”を絶対忘れてはいけませんよね。

デザインの裏側：サイトの課題と設計

ここからはwebサイト制作の裏側の設計を社内資料の一部を使いながらお伝えします。資料はAdobe XDで作りました。

webサイトの役割を再定義

とにかくI-neのことを正しく知って欲しいのです。

サイトに訪れているのは消費者よりも、ビジネスアカウントが多いことが旧サイトでわかっていました。ビジネスアカウントが知りたいページを用意し、魅力的なコンテンツにすることで理解をしてもらい、好きになってもらいます。

また、webサイトは広報や人事とも運営で密接に関係します。
あらかじめここでは、公開後のお互いの役割分担などを明確にしました。

サイトのKPI/KGI

コーポレートサイトで何よりも難しいのがKPIとKGI。
要するに何を成功とするかを決めなければならない。

これは会社によって追いかける項目は違う上に、数値ではわからないことがあまりにも多い。

今回はコーポレートブランディング全体としての数値と、サイト品質における数値を、滞在時間・セッション数・ダイレクト検索で追うことにしました。

ペルソナ：コアターゲット

コアターゲットの属性、趣味嗜好、言いそうな口癖まで詳しく定義します。

全部は明かしませんが、ざっくり言うと、情報感度の高いビジネスマンに向けて発信し共感してもらいたい。このコアターゲットをインフルエンサーと定義して、I-neに共感してもらえるコンテンツを設計していくこととなります。

ターゲットの回遊導線

とはいえ、サイトにはいろんな人が訪問します。
だから目的に合わせてドリルダウンで情報を見つけることができるグローバルナビを設置しました。
出来上がりのメニュー周りのデザインはこんな感じですね。

大企業でよく見るマウスを乗せればページ一覧が現れる、“メガメニュー”と呼ばれるナビゲーション。

どんなに変化が早い I-neでも、このデザインならレイアウトを大きく変えずにページが追加できます。

まとめ：公開を終えて

インハウスクリエイターたちでwebサイトを作ることができました。
これは、常々、インハウスでデジタルマーケティングやブランディングをしているからです。

いろんな部署をまたいでヒアリングした結果、現在の会社の強みが明確になり、情報をアップデートしたサイトを公開することができました。

“言葉にして来なかったものを言葉にする”
平坦ではありませんでしたが、きっかけを作れたと感じています。

公開後、おかげさまでwebデザインのまとめサイトにもいくつか掲載いただき、ありがたい限りです。

https://muuuuu.org

https://sankoudesign.com/

https://responsive-jp.com

ひとまず公開を終えてから、現在10月初旬、PV数が約130%増え、リニューアル前の2.3倍になりました。
また、人事部の地道な活動も相まって、採用エントリー数は約3倍にもなりました！
そして、これから分析を進めて改善点を洗い出していくところです。

まだまだコーポレートサイト作りは始まったばかりだといえます。
御社のコーポレートサイト制作の何かヒントになれば幸いです。

最後までお読みいただきありがとうございました。