概要
フリーランス Web 制作者・黒田こうすけのポートフォリオサイト「kurodafolio」です。Vite + Handlebars でコンポーネントを分割し、CMS
に頼らないフルスクラッチの静的サイトとして構築しました。
デザインツールは使わず、HTML と CSS
で直接デザインを起こし、設計から実装・運用までを一人で一貫して対応しています。
制作実績の掲載・ダークモード対応・お問い合わせ導線までを、保守しやすさを意識して自分の手で組み立てたサイトです。
課題
ポートフォリオは「作って終わり」ではなく、実績が増えるたびに手を入れ続けるサイトです。
ページが増えても破綻せず、後から自分でも安心して更新できる構成にしたい、というのが出発点でした。
同時に、閲覧環境を選ばず読みやすく、表示の軽さも保ちたいという狙いがありました。
解決アプローチ
保守性への配慮： Vite + Handlebars でヘッダーやカードなどの共通パーツをコンポーネント化し、ページ間で重複コードが増えないようにしました。各ページのメタ情報やパンくず・構造化データは 1 つのデータファイル（meta.json）で一元管理し、ページを追加するときに同じ作業を繰り返さずに済む構成にしています。
ダークモード・アクセシビリティへの配慮： CSS カスタムプロパティで配色を変数化し、ライト・ダークの両モードに対応しました。スキップリンクや適切な見出し構造、画像の代替テキストなど、閲覧環境を選ばず読みやすいマークアップを意識しています。
検索・表示への配慮： 各ページに構造化データ（JSON-LD）とパンくずを実装し、検索エンジンが内容を理解しやすい形に整えました。CMS を使わない静的サイトにすることで、表示の軽さを保ちたいという狙いもあります。画像は WebP を併用し、必要な部分だけ読み込む形にしています。Google アナリティクス（GA4）の計測タグや Google Search Console への登録・設定も、プラグインや CMS の自動連携に頼らず自分の手で行い、公開後の状況を確認できる状態まで整えました。
成果
要件整理からデザイン・実装・公開・運用までを一人で完結させ、現在も実績を追加しながら継続して更新しています。
デザインツールを介さず
HTML と CSS で直接デザインを起こしているため、見た目と実装のあいだに認識のずれが生まれにくく、修正もそのまま反映できます。
制作会社さまの視点では、設計から運用までを通して理解している点、そして自分のサイトを題材に「保守しやすい構成とは何か」を実装で示している点が強みになります。