Keiru ポートフォリオサイト

つくったもの / WEB

10世代目のポートフォリオサイトです。公開までに9回作り直しました。

なかなか決まらなかったのは、デザインではなく「何を見せるか」でした。

掲載している画面はモックアップではなく、実際のサイトを1440 / 834 / 390pxで撮影しています。

なぜ作ったか

最初は、作ったものを置く場所が欲しかっただけでした。

ところが、作っては壊してを繰り返し、気づけば9回作り直していました。

迷っていたのは見た目ではありません。

実務経験を前に出しすぎると特定の業界向けに見える。個人制作ばかり見せると、今度は仕事で何ができるのか分かりにくい。

そこが曖昧なまま、デザインだけを何度も変えていました。

いまはトップページを「作ったもの」と「できること」に絞り、実務の実績は別ページに分けています。

HTML / CSS / JavaScriptで制作しています。フレームワークやビルドツールは使わず、依存パッケージもゼロです。

配信はCloudflare Pages、フォームや外部APIとのやり取りにはPages Functionsを使っています。

実装にはClaude Codeを使いました。

制作中に意識したのは、コードを書くこと以上に「なぜこうしたのか」「なぜやめたのか」を残すことです。

判断した理由をリポジトリに残しておくことで、数週間後に同じことで迷ったり、AIに経緯を説明し直したりすることが減りました。

HTMLCSSJavaScriptCloudflare PagesPages FunctionsClaude Code

うまくいかなかったものも、そのまま書いています。

第7世代では、Three.jsを使ったガラスの波を背景に入れていました。

見た目は気に入っていましたが、低スペックのPCでは負荷が高く、端末によって体験にも差が出ました。

軽量化も試しましたが、第9世代で演出そのものを削除。

足して改善するのではなく、消すことが一番効く場合もあると学びました。

見た目には何もないのに、ボタンが押せない不具合がありました。

調べると、別セクションの透明な要素が画面を覆い、クリックを奪っていました。

それ以来、操作できるかどうかは見た目だけで判断せず、ブラウザ上の座標まで確認するようにしています。

表示を速くするため、CSSや画像には長めのキャッシュを設定しています。

その結果、ファイルを更新しても古い内容が表示される問題が起きました。

現在は、更新時に全ページのバージョン番号を揃えて変更するルールにしています。

速く表示することだけでなく、きちんと更新されるところまで含めて運用するようになりました。

こうしたサイトの制作・改修のご相談も受け付けています。