サイバーパンク ポートフォリオ HTMLテンプレート｜ネオン×グリッチ・スマホ対応・6カラー

ネオン・グリッチ・ダークの「サイバーパンク」な世界観で作品を魅せる、1ページ完結のHTML/CSSポートフォリオテンプレートです。

イラスト・3DCG/VFX・UI/UX・音楽/映像・エンジニアなど、近未来やテック系の世界観が合う方に。

■ こんな方におすすめ

・他と被らない、世界観の強いポートフォリオが欲しい

・サイバーパンク／近未来／テック系のテイストが好き

・配布サービスに依存せず、自分のドメイン／サーバーで作品サイトを持ちたい

・デザインを自分好みに細かく変えたい（ビルド不要・HTMLを書き換えるだけ）

■ 特徴

・サイバーパンクの演出を内蔵：グリッチする見出し／画面全体のスキャンライン／HUD風ステータスパネル／角ブラケット付きネオンカード／ターミナル風の連絡先ブロック

・配色テーマ6種同梱（Neon／Matrix／Synthwave／Acid／Bloodmoon／Hologram）→ 1行の変更で切替

・配色はCSS変数で一括管理。色変数を変えるとネオンの発光色も自動で追従

・完全レスポンシブ（PC／タブレット／スマホ・モバイルメニュー付き）

・依存ライブラリなし（HTML / CSS / 素のJavaScript のみ・ビルド不要）

・Google Fonts 使用（商用利用可：Orbitron / Share Tech Mono / Noto Sans JP）

・画像なしでも成立（グラデーションのプレースホルダ内蔵）

・prefers-reduced-motion 対応（動きを抑える設定では演出を停止）

■ 同梱の配色テーマ（6種）

Neon（標準・シアン×マゼンタ）／ Matrix（グリーン）／ Synthwave（80sレトロ）／ Acid（トキシック）／ Bloodmoon（レッド）／ Hologram（白基調）

■ ページ構成

・ヒーロー（グリッチ見出し＋HUDステータスパネル）

・About（プロフィール＋実績の数値カウンター）

・Works（作品ギャラリー：ネオンカード・複製で増やせます）

・Skills（発光するスキルバー）

・Contact（ターミナル風ブロック＋メール／SNSリンク）

・フッター

■ 同梱ファイル

・index.html … 本体

・css/style.css … デザイン（配色は冒頭の :root を編集）

・js/main.js … テーマ切替・年号更新・メニュー開閉

・themes/ … 配色テーマ5種＋一覧プレビュー＋解説（THEMES.md）

・README.md … 日本語の使い方ガイド

・LICENSE.txt … 利用規約

■ 使い方（3ステップ）

1. index.html の【...】を自分の情報に書き換える（名前・肩書き・作品・連絡先など）

2. 色を変えたい場合は css/style.css の :root か、themes/ のテーマを切り替える

3. フォルダごとサーバーにアップして公開（GitHub Pages / Netlify / レンタルサーバー）

■ 動作環境

モダンブラウザ（Chrome / Edge / Firefox / Safari の最新版）。ビルド・追加ソフト不要。

■ ライセンス概要

個人・商用ともに利用可／改変可／クライアント納品可。

本テンプレート自体の再配布・再販売は不可。詳細は同梱の LICENSE.txt をご確認ください。

■ 注意事項

・画像は含まれません（グラデーションのプレースホルダ内蔵。お好みで差し替え可能）。

・「サイバーパンク」は一般的なジャンル表現で、特定作品・企業のロゴ／商標／キャラクターは含みません。

・購入前にスクリーンショットで仕上がりイメージをご確認ください。

■ 更新履歴

v1.0 初版