周年サイトを Claude Code で作ってみてわかったこと
「周年スライドを作ってほしい」
今回の仕事は、その一言から始まりました。
iCAREは今年で創業15周年。Carelyはリリースから10周年。会社としてもプロダクトとしても大きな節目の年です。
最初に依頼されたのはスライド資料でした。ただ、資料を作りながらずっと違和感がありました。15年という時間を、本当にスライドで伝えられるのだろうか、と。会社の歴史だけではなく、その時代ごとの空気や熱量、少しずつ変わってきた価値観や挑戦の積み重ねまで含めて伝えようとすると、どうしても限界を感じたのです。
そこで試しにWebで作ってみることにしました。
今振り返ると、この判断自体がAI以前とAI以後の違いだった気がします。以前なら、ワイヤーフレームを引き、デザインを作り、レビューをしてから実装するという流れでした。しかし今回はClaude Codeを立ち上げてプロトタイプを作り始めたところ、30分後にはほぼ原型ができていました。
ロゴが現れ、スクロールに合わせて画面が変化し、写真が動き、数字がカウントアップする。完成品ではありませんでしたが、「何を作りたいのか」は十分伝わる状態でした。
そのプロトタイプを共有すると反応は想像以上でした。
「これでいこう」
気づけばスライドの話は消え、周年サイトの制作が始まっていました。
チームと役割
今回のプロジェクトは3人で進めました。
私は設計と実装を担当し、一人がビジョンとフィードバック、もう一人がコピーとコンテンツを担当しました。
デザイナーもディレクターもいません。その代わり、意思決定者同士の距離がとても近いプロジェクトでした。チャットでフィードバックが飛び、その場で修正し、また確認してもらう。このループを何度も回しながら作っていきました。
周年ロゴ作成
Webサイトを作るにあたって、まず必要だったのが周年ロゴでした。
今回はiCARE 15周年とCarely 10周年というダブルアニバーサリーです。ロゴも2種類必要でしたが、それぞれ独立しているだけではなく、並べた時にセットとして見える必要がありました。
コンセプトは数字を主役にすることでした。周年サイトなので、まず目に入るべきは「15」と「10」です。その中にブランドらしさをどう組み込むかを考えました。
試行錯誤の末、iCARE版は「15」の中に地平線を思わせるモチーフを組み込み、Carely版は「10」の中にキャラクターの顔を組み込む構成にしました。数字そのものを活かしながら、それぞれのブランドの個性も表現できたと思います。
最終的に並べた時、ちゃんとセットとして見えるロゴになりました。
デザインカンプもなく作り始める
プロトタイプを共有した後、メンバーから参考サイトが送られてきました。
「こんな感じにできる？」
ただ、それ以上の仕様はほとんどありませんでした。
Figmaもありません。デザインカンプもありません。会話だけで進んでいきます。
昔の自分なら少し不安だったと思います。でも今回は違いました。なぜなら、その場で形にできるからです。
「もっとリッチにしたい」
そんな曖昧な会話が、その日のうちに画面になります。
実装できるかどうかを議論する時間より、何を見せたいのかを議論する時間の方が長くなっていました。
Claude Codeとの仕事
今回のコードの全てはClaude Codeが作りました。
印象的だったのは、実装そのものよりも「こういうことをやりたい」という会話の比重が大きくなったことでした。
例えばAppleのプロダクトページで見たようなズーム演出を入れたいと思った時も、「あの感じをやりたい」と伝えるだけで実装の土台ができあがります。
以前ならライブラリを探し、実装方法を調べ、試行錯誤するところから始まっていたはずです。今は「どう作るか」よりも「何を作るか」を考える時間の方が長くなっています。
もちろんバグ修正や細かな調整は必要です。それでも、アイデアを形にするまでの距離は驚くほど短くなりました。
7つのセクション
最終的にサイトは7つのセクションで構成されました。
HeroではSVGマスクを使い、ロゴの形に写真が浮かび上がる演出を実装しました。
Why NowではiCAREとCarely、それぞれの「今」を語る2つのパネルを配置し、スクロールに合わせて切り替わる構成にしています。
Manifestoでは1単語ずつテキストが現れるリビールアニメーションを採用しました。
Image Zoomではスクロールしながら写真が拡大していく演出を入れています。
Timelineでは2011年から現在までの歩みを横スクロール形式で表現しました。
Historyでは写真とともに「1st」「2nd」から「15th」までがカウントアップしていきます。
最後のFutureでは採用メッセージを配置し、次の15年へとつながる締め方にしました。
細かいフィードバックが、すべてを作る
制作中はチャットに細かなフィードバックが次々と届きました。
「スクロール効かない？」 「モザイクちょっと奇妙」 「この写真に変えたい」 「スマホでロゴが見づらい」
技術的には些細なことかもしれません。でも完成度はこういう違和感の積み重ねで決まると思っています。
特に印象に残っているのは、「1、2、3...と数字だけを見せるより、1st、2nd、3rdの方がイカス」という一言でした。
実装そのものは数分で終わります。でも、その発想はコードからは生まれません。
AIがコードを書くようになった今、こうした感覚や違和感を拾う力の価値はむしろ大きくなっている気がします。
退職者の顔をどうするか
開発中にひとつ悩ましい問題がありました。
Historyセクションで使う写真には、すでに退職しているメンバーも写っています。
人を消すことは簡単です。でも、それは違う気がしました。
人がいるから、その時代の空気が伝わる。会議室で笑っている人たちや、オフィスで働いている人たちがいるからこそ、15年の歴史が実感を伴って見えてくるからです。
一方で、本人の同意なく顔を公開し続けることも避けるべきでした。
最終的に選んだのはモザイク処理でした。
人はいる。でも個人は特定できない。
写真の雰囲気を残しながらプライバシーにも配慮する方法です。
問題は作業量でした。写真は複数枚あります。Photoshopで一枚ずつ処理するのは現実的ではありません。
だったらツールを作ればいい。
複数画像の一括処理にも対応し、最終的には数分で必要な写真を用意できました。
サイトのために作業を効率化しようとしていたら、気づけば別のプロダクトが生まれていました。
公開
2026年6月19日、サイトを公開しました。
https://anniversary2026.icare-carely.co.jp/
公開後、メンバーからチャットが届きました。
「サイト公開！また一個思い出ができました！」
そのメッセージを見ながら、今回作っていたのは単なる周年サイトではなかったのかもしれないと思いました。
会社の15年をどう残すか。そのための方法を考える仕事だったのだと思います。
振り返って
今回いちばん印象に残ったのは、AIによってコードを書く時間が減ったことではありません。
むしろ、何を作るのか、なぜ作るのか、何を残して何を削るのかを考える時間が増えたことでした。
Claude Codeはコードを書いてくれます。アニメーションも実装してくれます。バグの原因も調べてくれます。
でも、「どの写真を使うのか」「どんな言葉を残すのか」「退職者の顔をどう扱うのか」といった判断は最後まで人間の仕事でした。
30分で原型ができるようになったからこそ、考えることから逃げられなくなった。
今回の周年サイト制作は、そのことを強く実感したプロジェクトでした。
スタック
Vite 6 + React 18 + TypeScript
Tailwind CSS v4
motion/react v12
Lenis
Firebase Hosting
Claude Code
読んでくださってありがとうございました。
この記事が「なるほど」と思えたら、「スキ」や「フォロー」もらえるとうれしいです。チームにもシェアしてもらえると、次の記事のモチベーションになります。
プロモーション
iCAREでは、一緒に成長しながら新しいチャレンジに挑戦できる仲間を募集しています。
まずは、カジュアル面談のお申し込み からお気軽にお話ししてみませんか？
皆さまのご応募を、心よりお待ちしています。
XでもUIデザインやプロダクト開発に関する投稿をしています。ご興味がありましたら、ぜひフォローしていただけると嬉しいです。
いいなと思ったら応援しよう！
よろしければ応援お願いします！いただいたチップはUIデザインプロダクト開発に関するnote作成に使わせていただきます！