Keiru ポートフォリオサイト
つくったもの / WEB10世代目です。9回作り直しました。
決まらなかったのはデザインではなく、何を見せるかのほうでした。
モックアップではなく、実際のサイトをそのまま撮っています（1440 / 834 / 390px）。
なぜ作ったか
作ったものを置く場所が欲しかった。それだけのはずでした。公開するまでに9回作り直しています。
途中で気づいたのは、迷っていたのが見た目ではなかったことです。製造業のDXの話を前に出すと、その業界向けの会社に見える。かといって個人開発の話ばかりだと、仕事の相談は来ない。ここに答えを出さないまま、デザインだけを何度も変えていました。
いまの形は、そこにようやく決着をつけたものです。トップは「作ったもの」と「できること」だけ。実務の実績は別のページに置きました。
このサイトでやっていること
- 作品9件のカタログ（カテゴリ絞り込み・ページ送り・スマホは横スクロール）
- 部屋の絵の中にあるテレビでYouTubeを再生（スクロールに合わせてテレビが点きます）
- 自前の音楽プレーヤー（5曲。同時に鳴るのは1曲だけです）
- note・Zenn の最新記事と YouTube の最新動画を自動反映（エッジで6時間キャッシュ）
- お問い合わせフォーム（迷惑送信対策と、受付確認の自動返信つき）
- 日本語 / 英語の切り替え（全ページ）
どう作ったか
フレームワークは使っていません。ビルドもしていません。依存パッケージはゼロで、HTMLとCSSとJavaScriptをそのまま書いています。配信は Cloudflare Pages、フォームや外部APIの取得は Pages Functions です。
実装は Claude Code と一緒に進めました。ただ、効いたのは書く速さより残し方のほうでした。「なぜこうしたか」「何をやめたか」を、そのつどリポジトリの中の文書に書き足しています。数週間後に同じところで迷わずに済みますし、AIに経緯を説明し直す手間も要りません。
詰まったところ
うまくいかなかったものも、そのまま書いています。
1. 背景の3D演出で、ファンが回った
- 課題
- 第7世代のとき、背景に Three.js でガラスの波を敷きました。しばらくして「低スペックのPCだとファンが回る」と指摘をもらいました。
- やったこと
- 描画を間引き、いちばん重い屈折の表現を切り、遅い端末では自動で品質を落とすところまで作りました。
- 結果
- それでも端末ごとに見え方も負荷も変わります。第9世代で、演出そのものをやめました。派手さより「どの端末でも同じ」を取った形です。いちばん効いたのは、消したことでした。
2. 見えないレイヤーが、クリックを奪っていた
- 課題
- ボタンを押しても何も起きない。見た目はどこも壊れていません。
- やったこと
- その座標に実際どの要素があるのか、ブラウザに聞きました。別のセクションの透明な面が、画面全体に居座っていました。
- 結果
- 親でクリックを無効にしても、子が有効なら効きません。それ以来、押せるかどうかは見た目で判断せず、座標で確かめるようにしています。
3. 直したのに、古いまま届く
- 課題
- 表示を速くするため、CSSや画像は1年キャッシュさせています。更新してもURLを変えなければ、訪問者には最長1年、古いものが出続けます。
- やったこと
- 変更したら全ページの版番号を同じ値に上げる。それと、配信が終わる前に新しいURLを開かない。開いてしまうと、その番号に古い内容が焼き付きます。
- 結果
- 速さと更新のしやすさは、仕組みだけでは両立できませんでした。ここは手順で守っています。
数字
- 世代
- 10（9回作り直し）
- 依存パッケージ
- 0（ビルドなし）
- 配信するJS
- 36KB / 1ファイル
- ページ
- 7枚 + API 3本
こうしたサイトの制作・改修のご相談も受け付けています。
メールで相談する