本記事はNRIネットコム Advent Calendar 2021 15日目の記事です。
🎄 14日目 ▶▶ 本記事 ▶▶ 16日目 🎅
はじめまして、小出と申します。
NRIネットコムでは12年目になります。 普段はWebプロデューサーとして、担当するお客さまへの様々な提案やコンサルティング、UXデザイン、フロントエンド制作などを中心に担当しています。
この2021年4月に、当社NRIネットコムが30周年を迎え、会社サイトや本ブログのリニューアルを行うことになり、ちょうど少し余裕があったのでプロデューサーとして担当することになりました。 今回はリニューアルの背景など、新たに導入した技術など含めリニューアルの裏話をお話したいと思います。
サイトリニューアルの背景
会社サイト
前回は2015年にWordpressを採用してリニューアルを行いました。 コンテンツは社内に部門横断のチームが形成して検討を行い、CMS構築やビジュアルデザインなど主なサイト制作については、外部委託にて作成しました。
それから5年余りが経過し、コンテンツ内容だけでなく、技術的にも、ビジュアル面でも老朽化が顕著な状態となり、 社内でアンケートを取ったところ、社員の多くが愛着を持てるサイトではなかったことから、リニューアルを行うことになりました。
ブログ
会社サイトリニューアルを担当することになった際、オウンドメディアとして会社サイトを活性化する施策の検討を始めてみましたが、会社サイト内のコンテンツを高頻度で追加や更新を行う場合、広報のチェックが追いつかないという課題がありました。
このブログは外郭サイトとの位置づけで広報チェックの必要なく高頻度で更新できるという整理がされていたため、本ブログを立ち上げたメンバーに相談し会社サイトに合わせリニューアルを行うことになりました。
旧サイトの課題点
リニューアルにあたって、以下のような4つの課題を上げました。
サイトから当社のブランドが感じられない
→コンセプトからブランディングのあり方を考え直そう！コンテンツが古くて、更新も行き届いていない
→更新できないなら、減らしちゃえ！（コンテンツの断捨離）運営体制が整っておらず、サイト品質が低い
→顧客サイトと同じようにしっかり運用したい！（コンテンツ運用の仕組みとワークフローの見直し）サイト基盤の運用保守にかかるコストを下げたい
→クラウドネイティブに！（Jamstackアーキテクチャを採用しサーバレスに）
このような課題を整理して、改善策を検討し、リニューアル計画を策定して、手が足りない部分はパートナー企業へ委託する体制を確保し、経営に対して稟議申請し、今年7月頃から着手開始しました。
プロジェクト体制
体制は以下のようなイメージです。7-8月ぐらいに構想を練っている段階では割と工数かけていましたが、9月ぐらいから皆忙しくなって、テレワークの隙間を縫うように時間を捻出して対応にあたりました。
- プロデューサー兼いろいろ：1名
- アートディレクター：2名
- ディレクター兼フロントエンドエンジニア：1名
- フロントエンドエンジニア：1名
- パートナー（主にビジュアル制作やWebGL範囲など）
リニューアルのポイント（会社サイト編）
会社のビジョンを反映したメインビジュアル
「共に歩み、共に創り、めざす『ミライ』に挑み続ける」というネットコムのビジョンを、メインビジュアルで糸をモチーフに表現しています。
最近、「糸」モチーフは何かと流行りなので少し悩みましたが、人類が糸を紡ぎ布を作りだしたのは紀元前5,000年以前からと言われており、悠久の時を思えば些細なことだと思い決断しました。
私たちNRIネットコムの社員1人1人が、お客さまとともに小さな糸口からビジネスを紡ぎ、時間の経過とともに、お客さまや社会とともに形を変え、「ミライ」へ向かう姿を表現しているのですが、伝わってますかね？
なお、技術的にはWebGLが流行りなので、流行りに乗ってthree.jsとそのライブラリを活用して作ってもらいました。
Jamstackアーキテクチャの導入
旧サイトはWordPressでオンプレ環境に構築していました。 今回はJamstackアーキテクチャ *1を採用しています。
Jamstackでは、静的サイトジェネレーター（SSG）を利用して事前にデータを埋め込んだ静的HTMLを生成し、そのままCDNで配信できるので、これまで必要だったWebサーバーなどが不要になりサーバーレスで構成することができました。
動的なデータも、JavaScriptで扱えるので認証が必要なコンテンツや随時情報更新されるコンテンツなどにも対応できます。
今回は会社サイトなので、殆どのコンテンツをヘッドレスCMSで更新できるように、SSGを作り込んでいます。
今回、開発を担当したメンバーも、アドベントカレンダーで執筆予定なのでJamstackの詳細はそちらに譲りたいと思います。
クラウドネイティブ
前述のJamstackを採用しクラウドをフル活用したモダンな構成にするために、ヘッドレスCMS（microCMS）を採用し、ソース管理はBitbucket、CDN/ADNはNetlify、各種通知をSlackで受けるなど、全てクラウドで成立するようにデザインしました。
AWSやGCPなどが得意な当社ですが、他の様々なクラウドサービスを試すことも重要なミッションと考えています。
リニューアルのポイント（ブログ編）
テクノロジー、クリエイティブ、マーケティングのカテゴライズ
技術ブログとしてスタートを切った本ブログですが、今後はクリエイティブやデジタルマーケティングを担う部門の社員も積極的に発信して行く方針です。 やはり、ごった煮状態では分かりにくいので、今回のリニューアルで大きく3つにカテゴライズを明確にしました。
はてなブログらしくないビジュアル
技術ブログ開始当初から「はてなブログ」を利用していますが、左右非対象のカラム分けで、左側に記事、右側にブログぽい部品が並ぶという古式ゆかしいブログスタイルを廃止し、記事ページは記事に集中できるように、インデックスやアーカイブはビジュアルも含めて一覧できるようにデザインしました。 はてなさんには申し訳無いですが、某n●teぽい感じにして中和を試みています。
会社サイトTOPにブログへのリンクを追加
会社サイトTOPページにブログの新着記事へのリンクを設置しました。 これまで会社サイトでブログについての告知はされず、ある意味で密やかに運用されていました。 そのため、このブログの存在に気づいていなかった方もいたのではないかと思われます。 これからは気づいて貰えると嬉しいです。
最後に…
今年5月にWebサイト制作や運用について、幅広くサポートした本をWebクリエイティブ部門のオジさんたち4人で出版しました。 興味のある方は是非、手に取っていただければと思います。
この本でも書いていますが、Webサイトは作って終わりではなく、作ってからが始まりなので、これからしっかり運用して行きたいと考えています。 また、コンテンツの更新だけでなく、パフォーマンス面やインタラクションなど修正したい箇所がまだまだ残っているので、作りっぱなしに為ずに改善を続けて行きたいです。
最後に、今回のリニューアルにあたり、ご協力いただいた全ての皆さまに感謝申し上げます。
NRIネットコム Advent Calendar 2021
🎁 14日目 ▶▶ 本記事 ▶▶ 16日目 🍰
