私ごとですが、ポートフォリオを更新しました。
その際に自然言語でどれだけWebページを作れるかなと検証もできたので記録に残したいと思います。
ウェブ知識がない人でも、僕がやった過程の話は役に立つかなと思います。
実際に作ったものはこちら
どうして作り直した？
Adobeポートフォリオでずっと載せていたポートフォリオですが、、、
Adobeとバイバイしたので、、どこかでにポートフォリオおかないとなぁーと考えて１年ぐらい先送りにしてました。
そのあいだに、仕事とは別に半年くらいWebサイトを触る経験をしたので、
「AIと一緒に、自分のポートフォリオくらいなら自作ぐらいいけるのでは」と思い至り、制作は2週間（デザインとモックで1週間、修正と微調整で1週間）で試してみることにしました。
実際にAdobeポートフォリオへ置いていたのは、レジュメをそのままコピーしたようなポートフォリオページでしたが、
せっかく作るなら、ただのレジュメポートフォリオではなく、アニメーションやインタラクション を入れようと考えていました。
今回作ってみて、インタラクトやアニメーション込みだとどこまで 自然言語（チャットに文章で指示するだけ） だけでいけるかということもわかりました。
AIの既存サービスは使った？
LovableやFramer AIなどといったものがあると思いますが、僕はシンプルに一からローカルで作ってデプロイしています。
この記事でわかること
- デザインから完成までの進め方
- 自然言語で進みやすかったこと
- 自然言語の限界点と工夫
前提：使ったツールと期間
- エディタ／エージェント: Cursor Pro（プランはサブスク）
- 主な単発的な表現に使用: Claude Pro（同様にサブスクで利用）
- 制作期間: 合計 2週間
- 1週目: デザインの方向性、ページ構成、モックに近い見た目と動きのたたき
- 2週目: 崩れ修正、スクロールや遷移の微調整、ビルドまわりの仕上げ
基本的にClaudeは小さく 表現だけ を再現してもらったりレビューや、画像を使ってモックを作ってテストさせることに使いました。
全体のWebページとして作るのはCursorを使って整えていきました。
フレームワークとライブラリ
- UI 基盤: React 19 + Vite 7
- ルーティングと静的化: Vike（
vike-reactでSSG化 ) - スタイル: Tailwind CSS 4（
@tailwindcss/vite） - アニメーションとインタラクション
- anime.js v4 が中心です。animejsのホームページが好きで使ってみたかったというだけで採用してます。
- Motion（
motion/react）は、animejsがちょっと使いづらいところがあって、簡単なスクロールと連動させて動かすところに使っています。 - Three.js は、ロゴまわりの WebGL 表現など、一部コンポーネントで使用しています。
メインは anime.js、スクロール連動の一部に Motion、ロゴ表現に Three.js という感じです。
2週間の進め方（ざっくり）
1週目：デザインとモック
イメージ制作
とりあえず、トップの印象を最初に決めて、FigmaやAffinityなどを使って簡単にイメージを固めていきました。
どういうふうに推移させて、どういうふうにポートフォリオを見せるかと決めていきました。
といっても、とりあえず最初のヒーローページとどんなふうに推移させるかだけを簡単に作った感じです。
ざっくりとヒーローイメージを作って、流れをAffinity上で組んで見たのを、そのままキャプチャしてClaudeでやりとりして、プランを作成させました。
実際に出来上がったページはほぼ違うのですが。。笑
作成しながらかなり変えて、テストしているうちにこれいいじゃんとなったアニメーションなどを加えてます。
モック作成
とりあえず、
Claudeに画像を読み込ませてヒーロー画面から最後までを現代っぽい一ページで完結するポートフォリオにして。みたいな感じでプロンプトして作らせました。
まずはPlanでざっくりと方針や色味などを決めて、全部作ってもらいました。
実際に出来上がったのを見て、いまいちでしたが、フレームとしてはいい感じだったので、それを元にして一つ一つ、Claudeへ指示していきました。
dev用に、コンポーネントと別ページを別々で作らせてまずは、一つずつ一枚絵としていいかなというレベルまで仕上がったら、それを本番用のページへ追加しながら繋げていきました。
- ヒーローページのシェーダー作成(表現調整できるようにlevaを追加)
- スクロールと連動するタイピングアニメーション(汎用的なコンポーネント化)
- 英語と日本語対応
- レジュメダウンローダーボタン
- メニューボタン
- SKill部分のカード作成
- About部分の説明文のタイピングアニメーション
- Workのリール表示アニメーション
実際は、デザインパートと、実際にコードベースで組んで見ながら、モックを作成していきました。
2週目：修正と微調整
実際にAnimejsやwebglなどを書かせると、意図しない動きだったり本来のコーディングとは違うような感じで書かれてしまうことが多々ありました。
なので、SkillsやRulesでどういうふうに書いて欲しいのかをまとめました。
具体的に守る点と、公式のページを読み込まれて、どういうふうに作られるべきなのかを理解させるとまだマシになりました。
ただ、こちらの人間側の知識が薄いと、なんか違うけどどこが違うのかわからん。
みたいなことが多々起きました。
Animejsやを実際に使うのはほぼ初めてでしたし、ドキュメントの読み込みは最初にきっちりやっておくとAIにブン回されずに済むな〜と後から思いました。
処理上げ(パフォーマンス改善)
かなりWebブラウザが角ついたり、スマホで動作が異常に重かったりなどが目立ったのでこれはもう全部Claudeにお任せしました。
ただし、レビューと処理上げを3回ぐらい繰り返して。
実際に触ってみて、またプロンプトするというのを繰り返しました。
あとは、気になったら自分で開発者モードで直接パフォーマンスを見てみたり、Cursorのデバックモードで実際にページを動かしたりしながら対話して最適化をしていきました。
自然言語でどこまでいったか
タイトルの通り9割ぐらいは自然言語で完成できたと思います。（WEB業界の方が見たらなんじゃこりゃと言われるかもしれませんが💦）
コードを書いたところと言えば、AIがどうもハンドルできそうにないところを少し手で直す感じでした。（AIが理解していないモジュールの使い方を治してあげる感じです）
成果物
公開サイト: https://testkun.net/
まとめ
コードはほぼ書かない時代になった。。。かな！といった印象です。
ただし事前知識のインプットがかなり必要で、そん精度をあげればあげるほどAIはさらに優秀な相棒になると思います。
