【第三回】VI刷新からはじまる、コーポレートサイトリニューアルの裏側（実装・運用編）

はじめに

こんにちは！101DESIGNです。
2026年3月にフルリニューアルした、101 DESIGNのコーポレートサイト。
プロジェクトの裏側をお届けする連載も、今回でいよいよ最終回となります✍️
第1回の背景編、第2回のデザイン編に続き、第3回となる今回は「実装・運用編」をお届けします。

今回のリニューアルでは、デザイナーがデザインから実装までを一貫して担当し、ノーコードツールの「Studio」を活用してサイトを構築しました。
新しいデザインをどのように実装として落とし込んでいったのか、そして運用を見据えてどのような工夫を凝らしたのか、デザイナーがまとめた記事をご紹介します！

ぜひ、リリースしたコーポレートサイトとあわせてご覧いただけると嬉しいです。

運用を止めないためのStudio導入

第1回の背景編でも触れましたが、旧サイトの大きな課題のひとつが「運用のボトルネック」でした☁️

これまでは、ちょっとしたテキストの修正であってもエンジニアの工数を確保する必要があり、スピーディーな情報更新が難しい状態でした。しかし、Webサイトは作って終わりではなく、会社の成長に合わせて育てていくものです。

そこで今回のリニューアルでは、非エンジニアでも更新ができる仕組みづくりを目的として、Studioを導入しました。

導入の結果

現在ではテキストの書き換えや実績追加をメンバーだけで完結できるようになり、よりスピーディーな運用体制を実現できています🙌

Studio実装における3つの工夫

ここからは、実際のStudioでの実装フェーズでこだわったポイントや、工夫したことをご紹介します。

1. Lottieアニメーションで「共創サイクル」を表現

ファーストビューのメインコピーには101のミッションである「共創サイクルをつくる」を掲げました。

ビジュアル面でもミッションを表現するために、円が循環するグラフィックを作成しています。一番の懸念点は、アニメーションによる読み込み速度の低下による第一印象を損ねてしまうことでした。

そこでAfter Effectsで作成したアニメーションをLottieとしてStudioに設置。結果として、サイトのサクサクとした表示速度を保ちながら、ベクター形式ならではの滑らかな描画によって、「共創サイクル」を一切の妥協なく表現することができました✨

2. カスタムコードを活用したユーザビリティの向上

サイト全体の動きは、派手すぎないけれどユーザビリティを損なわない心地よいアニメーションを意識して設計しています。

サイドバーの目次がスクロールに合わせて追従し、現在地にハイライトが当たる処理をカスタムコードで実装。
ユーザーが今どこを読んでいるのかが直感的にわかる、より丁寧な体験を追求しています。

3. チーム連携とシームレスな制作体制

今回のプロジェクトは、デザインから実装までは約2ヶ月という非常にタイトなスケジュールでした。

ドメイン設定やフォーム周りはエンジニアにサポートを依頼し、デザイナーは実装に集中する。
また今回、デザイナー自身がデザインから実装までを一貫して担当できたことも大きなポイントです。意図を伝えるための資料作りや引き継ぎのロスがなく、デザインから実装までを驚くほどシームレスでスピーディーに進めることができました。

公開前テストにも工夫を凝らしました。

今回は自社の「顔」となるサイトだからこそ、あえて社内メンバー全員による検証を実施。全員の目を通し、細かなフィードバックをもらうことで、チーム全体が納得するクオリティまでブラッシュアップした上で、リリースを迎えられたのは本当に良かったです🙌

おわりに

全3回にわたってお届けしてきたコーポレートサイトリニューアルの裏側、いかがでしたでしょうか？💭

「VIの刷新」という根幹からスタートし、デザイン、実装、そして運用体制の見直しまで、チーム全体で駆け抜けた3ヶ月間でした。新しくなったサイトを通して、今の101らしさが少しでも多くの方に伝わればうれしいです。

最後までお読みいただき、本当にありがとうございました！

今回の詳しい内容については、noteで紹介しています👇
🔗 VI刷新からはじまる、コーポレートサイトリニューアルの裏側（実装・運用編）

こういう方とお話ししたいです

・仕組みづくりにも関わりたい
・AI×デザインに興味がある
・裁量を持って挑戦したい

そんな方がいれば、ぜひ一度カジュアルにお話ししましょう🕊️