Re:placement

prot01

HighChartsとfullPage.jsを利用したデータ連携型チャートサイト（サンプル）

このページへ行く

このプロジェクトは、データ連携型のインタラクティブ・チャートサイトです。各ページには異なるチャートコンポーネントが配置され、ユーザーがページを移動するときにFramer Motionによるアニメーション演出が滑らかに再生されるよう設計されています。ページ構成はfullpage.jsによる縦スクロール遷移で構成され、セクションごとの動作やアニメーションが動的に制御されます。

チャート描画にはHighchartsを採用しており、各グラフ（例：折れ線グラフ、円グラフなど）は独立したReactコンポーネントとして実装されています。データはFirebase Realtime Databaseと連携しており、グラフ上のポイントをクリックすると数値がランダムに更新され、その変更がリアルタイムでFirebaseに反映されます。また、リセットボタンを押すことで、Firebase上のデータを初期状態に戻すこともできます。これにより、動的なデータ操作と可視化を簡潔なUIで実現しています。

フロントエンドはNext.js（Pages Router構成）とReactで構築されており、サーバーレス環境にも対応しています。各ページはpages/ディレクトリ配下で管理され、_app.jsや_document.jsで全体設定や共通レイアウトを制御しています。ビルド時には**Next.jsの静的エクスポート機能（output: export）**を利用して静的ファイルとして出力され、ホスティング環境に依存せず軽量に配信できる構成になっています。

このページへ行く

prot05

fullPage.jsを利用したビジュアル重視のWebサイト（サンプル）

このページへ行く

JavaScriptライブラリページのfullPage.jsと、GSAP（GreenSock Animation Platform）を組み合わせたスライド型Webサイト（サンプル）です。ページをスクロールするとともに、セクションごとにコンテンツが遷移する設計になっています。セクション遷移時にアニメーションが開始されるため、視覚的なインパクトを提供することができます。

また、このサイトはVue.jsを使用して構築されています。Vue.jsは、リアクティブなUIを作成するための強力なフレームワークであり、コンポーネントベースのアーキテクチャを活用しています。開発効率を高めるため、Viteをビルドツールとして使用しており、Viteの高速なビルドとホットリロード機能により、開発中の作業がスムーズに進みます。

このページへ行く

prot06

Firestoreを利用した掲示板（サンプル）

このページへ行く

Firestore (Cloud Firestore) は、Google Firebaseが提供するNoSQLデータベースです。クラウド上にデータを保存し、モバイルやWebアプリケーションでよく利用されます。

axiosは、HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリです。axiosを使ってFirestoreのREST APIを呼び出すことで、柔軟なデータ操作が可能です。

スケーラブルでリアルタイムなバックエンドを提供するFirestoreと、HTTPリクエストをシンプルに行うaxios、そして直感的なフロントエンドフレームワークであるVue.js。この組み合わせは、効率的でスムーズなWebアプリケーションを構築する際に非常に有効です。

このページへ行く

prot08

Next.jsとmicroCMSを組み合わせた、カフェ風のWebサイト（サンプル）

このページへ行く

Next.jsは、Reactをベースに開発された、フロントエンドフレームワークです。
レンダリング手法にSSGを用いて、ビルド時にすべてのページを事前に生成することで、ユーザーがページにアクセスした際にサーバーからのデータ取得を待つ必要がなく、非常に迅速にコンテンツが表示されます。

microCMSは、ヘッドレスCMS（Content Management System）の一種で、コンテンツ管理とAPIベースのデータ配信に特化したクラウド型サービスです。
Webhookを利用することで、microCMSでコンテンツの更新や作成があったときに、自動でビルドを開始しサイトを更新することができます。ユーザー側は技術的な作業を意識せずに管理画面のみで操作が完結します。

Tailwind CSSは、ユーティリティファースト（Utility-First）のCSSフレームワークです。 ビルドプロセスでPurgeCSS（パージ機能）が実行され、不要なCSSが含まれずに、軽量・コンパクトなファイルが生成されます。

このページへ行く

prot09

OpenWeather APIを利用した、都市の現在の気温を表示する機能

このページへ行く

都市名をクリックするとその都市の天気情報を表示します。都市名を入力して追加することもできます。追加した都市は削除も可能。

OpenWeather APIという外部APIを利用して、都市の天気情報（温度、天気アイコンなど）を取得。fetchを使ってAPIからデータを取得し、その結果を表示します。

観光情報サイトにも使えそうな機能です。

このページへ行く

prot10

フロントエンドとバックエンドが独立した、セキュアな音楽ストリーミングサービス（サンプル）

このページへ行く

ユーザーに音楽を安全にストリーミング配信することを目的としたサービスです。特定の音楽トラックをクリックすることで、ブラウザ上で直接再生できる仕組みを提供しています。このサービスの特徴は、セキュリティとユーザー体験の両方を重視した設計にあります。

まず、技術スタックとしては、Next.js（Vercelが開発したフレームワーク）を用いてフロントエンドを構築しています。また、バックエンドにはNode.jsとExpress.jsを採用し、音楽ファイルへのセキュアなアクセスを提供するAPIを構築しました。このAPIは、Renderというクラウドホスティングサービス上で動作します。フロントエンドとバックエンドが独立して運用されるため、それぞれの役割に特化した最適化が可能です。技術選定に関してはAIアシスタントの助けを借りながら行いました。

安全性に配慮した設計が、このプロジェクトのもう一つの特徴です。ユーザーが音楽トラックを選択すると、フロントエンドはバックエンドにリクエストを送信し、音楽ファイルへの一時的なセキュアリンクを生成します。このリンクはJWT（JSON Web Tokens）を用いて署名されており、トークンにはリクエストされた音楽トラックの情報や有効期限が含まれています。この仕組みにより、リンクが不正に共有されたり、長期間にわたって悪用されたりすることを防ぎます。また、CORS（Cross-Origin Resource Sharing）を適切に設定することで、不正なクロスオリジンリクエストからAPIを保護しています。

VercelとRenderを併用した理由も、このプロジェクトの設計思想を反映しています。Vercelはフロントエンドのホスティングを担当し、特にNext.jsアプリケーションとの親和性が高いため、デプロイやパフォーマンス最適化が簡単に行えます。一方、RenderはバックエンドのAPIをホスティングしています。このAPIは音楽ファイルへのリンク生成やストリーミングを管理する重要な役割を果たします。Renderを選択した理由は、持続的なサーバー動作を保証し、特に音楽ストリーミングのような継続的なリクエストに対応できるからです。（無料で出来る幅が広いのも理由の一つ）

また、開発者体験も考慮されています。フロントエンドとバックエンドが独立しているため、別々の環境で開発・テストが可能です。例えば、フロントエンドの変更がバックエンドに影響を与えることなくデプロイできます。Vercelのプレビュー環境やRenderのAPIログ機能を活用することで、チームでの効率的な開発も実現可能です。

このページへ行く

prot11

FirebaseとChart.jsを組み合わせた、インタラクティブなグラフ表示アプリケーション

このページへ行く

ユーザーがデータを直感的に操作し、視覚的なフィードバックを得られるように設計されたインタラクティブなアプリケーションです。特に、月ごとにデータを追加、更新、削除し、それを視覚化する機能を提供します。この機能は、データの変化を即座に反映するリアルタイム性を重視しており、どのデバイスからアクセスしても最新の情報を正確に確認できるという利便性が特徴です。

このWebアプリケーションは、モダンなフロントエンド技術スタックを基盤としており、開発フレームワークとしてはNext.jsを採用しています。そして、バックエンドには軽量なNode.jsサーバーを利用し、データの保存にはFirebaseのRealtime Databaseを採用しました。

Realtime Databaseは、クラウドベースでスケーラブルなデータストレージを提供するだけでなく、リアルタイムのデータ同期機能を備えています。この仕組みにより、ユーザーがデータを更新すると、他のユーザーの画面にも即座に反映されるため、データの一貫性を維持しながら高いインタラクティブ性を実現できます。

また、アプリケーションの視覚化には、グラフ描画ライブラリであるChart.jsを組み合わせて使用しています。これにより、ユーザーは入力した数値データをわかりやすいグラフ形式で確認でき、データの変化や傾向を視覚的に把握することが可能です。

さらに、フロントエンドのホスティングにVercelを利用することで、迅速かつ効率的なデプロイ環境を実現できます。セットアップは簡単で、GitHubのリポジトリにコードをプッシュするだけで自動的にデプロイが完了します。こうした機能により、リアルタイムのデータ更新が重要なこのアプリケーションにおいて、開発効率とユーザー体験を大幅に向上させることができます。

このページへ行く

prot12

SwiperとLottieアニメーションを組み合わせた、スライド型Webサイト（サンプル）

このページへ行く

JavaScriptライブラリのSwiperと、Lottieアニメーションを組み合わせたスライド型Webサイト（サンプル）です。各スライドはアニメーションとコンテンツが調和し、視覚的に魅力的なエクスペリエンスを提供することを目指しています。

このサイトは、Vue.jsを基盤としたフレームワークであるNuxtを採用して開発されています。Nuxtは、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、多彩な機能を備えており、効率的でスケーラブルなWebアプリケーションを構築するための強力なツールです。

また、軽量で多機能なライブラリであるSwiperを利用して、フルスクリーンの縦方向スライダーの実装を行っています。これにより、スムーズでインタラクティブなユーザー体験を提供しています。

さらに、Lottieアニメーションを活用し、SVG形式で軽量かつパフォーマンスに優れたアニメーションを実現しています。アニメーションは初回ロード時に停止した状態で表示され、ユーザーがスライドを変更する際に対応するアニメーションが再生される仕組みです。

このプロジェクトはGitHub上で管理され、Netlifyを利用してデプロイされています。Netlifyは、高速かつ信頼性の高いホスティングソリューションを提供しており、このサイトの迅速なデプロイとスムーズな運用を支えています。

このページへ行く

prot13

スケルトンスクリーンとUnsplash APIを組み合わせた、ギャラリー形式の写真表示サイト（サンプル）

このページへ行く

写真とその説明を手軽に閲覧できるギャラリー形式の画像表示サイトです。写真はすべてUnsplash APIを使用して取得しており、初回ロード時には20枚の写真を一括で取得し、読み込みが完了したものから順に表示されます。その後はページ末尾への到達をIntersectionObserverで検知し、10枚ずつ新しい写真を追加します。最大で100枚まで途切れることなく写真を表示します。

このプロジェクトの開発環境には高速なビルドツールであるViteを採用し、軽量で直感的なフレームワークであるVue.jsを使用して構築されています。また、Unsplash APIからのデータ取得にはaxiosを活用して非同期通信を簡潔かつ効率的に実現しました。さらに、各写真の実際の読み込み完了に連動してスケルトンスクリーン（プレースホルダー）から画像へ滑らかに切り替わる仕組みを実装しています。追加ロードにはIntersectionObserverとビューポート充足チェックを組み合わせており、極端なズームアウト環境のように多数の写真が一度に画面に収まる場合でも、追加ロードが正しく継続されます。

スケルトンスクリーンやスクロール連動のロード機能を駆使することで、読み込みの遅延や中断をなるべく感じさせずに、技術的にも視覚的にも満足度を高めることを目指しました。

このページへ行く

prot14

GSAPとThree.jsを組み合わせた、モダンなコーポレートサイト（サンプル）

このページへ行く

コーポレートサイトをイメージしたサンプルデザインで、スクロール操作に応じてコンテンツが動的に表示・遷移します。3D表現にはThree.jsを活用し、インタラクティブで立体感のあるビジュアルを提供。また、GSAP ScrollTriggerを用いてスクロール操作に同期したアニメーションを実現しています。

技術スタックには、軽量かつ高性能なビルドツールであるViteを採用しています。モジュール化と再利用性を重視してVue.jsで構築されており、各コンポーネント間のアニメーションが自然でスムーズに感じられる設計が可能になっています。

サイト構成としては、最初にスクロール連動型のアニメーションセクションが登場し、次にThree.jsを活用した3Dカルーセルが続きます。最終セクションでは、左右から入ってくるテキストとともにコピーライトがフェードインし、黒背景の落ち着いた印象で締めくくられます。

このページへ行く

prot15

GSAPとThree.jsを活用した、ページ遷移アニメーションを備えたSPA

このページへ行く

動的な背景色と滑らかなページ遷移を組み合わせたシングルページアプリケーション（SPA）です。3ページで構成されており、それぞれのページに特有の背景色が設定されています。ユーザーがページを移動する際、背景色がシームレスに変化するだけでなく、Three.jsを用いたインタラクティブな3Dオブジェクトが各ページに配置され、視覚的な魅力を高めています。

Three.jsを使用して構築された3Dコンテンツは、ブラウザ内でリアルタイムにレンダリングされ、ページごとに異なるデザインやアニメーションを提供します。また、アニメーションの管理にはGSAP（GreenSock Animation Platform）を採用し、ページ遷移時の動きや3Dオブジェクトのトランスフォーメーションをスムーズに制御しています。GSAPのパワフルなタイムライン機能を活用することで、複雑なアニメーションシーケンスを直感的に実装しました。

開発には、Vue.jsをフレームワークとして採用し、Vue Routerでページ間のルーティングを実現しました。<router-view>と<transition>を組み合わせることで、各ページへの切り替え時に背景色やコンテンツのアニメーションが連動する仕組みを構築しています。また、ビルドツールにはViteを使用し、モジュールバンドルを効率化しています。CSSフレームワークとしてTailwindCSSを活用し、ヘッダーやレイアウトのデザインを効率よく実現しました。

このページへ行く

prot17

開発にDockerを活用したWordPressサイト（サンプル）

このページへ行く

コーポレートサイトとして機能するWordPressのオリジナルテーマの開発を目的としたプロジェクトです。開発環境の構築にはDockerを活用しています。開発環境の構築においてwp-envを使用する方法もありますが、本プロジェクトではdocker-compose.ymlを採用しています。これにより、ローカル環境でも本番環境と同じ構成を再現でき、開発の効率と再現性を向上させています。

また、CSSの管理にはSassを導入し、スタイルの記述を効率化しました。SassのコンパイルにはNode.js（npm）を利用し、以下のスクリプトをpackage.jsonに追加しています。

"scripts": {
  "watch": "sass --watch wp-content/themes/prot17/assets/scss/style.scss wp-content/themes/prot17/style.css",
}

このスクリプトを実行することで、Sassの変更が即座にCSSへ反映される仕組みを構築しています。圧縮CSSを生成する場合、以下のスクリプトをpackage.jsonに追加。

"scripts": {
  "build": "sass assets/scss/style.scss assets/css/style.css --style=compressed",
}

投稿やページにカスタムフィールドを追加できるプラグインMeta Boxを使用しています。functions.phpに記述を追加し、投稿ページや固定ページで『キービジュアル画像（アイキャッチとは別）』『導入テキスト』『よくある質問（FAQ）』を設定できるようにしました。管理画面からすぐに入力・更新ができるようになるなど、運用の担当者がHTMLを意識せずに作業できる設計を目指しました。

デプロイ環境について、サイトがレンタルサーバーで運用され、FTPでのファイルアップロードが行われることを想定しています。また、ドキュメントルート直下ではなくサブディレクトリ（https://replacement.jp/den/prot17/）に設置されることを前提に構築されています。

このページへ行く

prot19

gulpとesbuildで構築した、クライアントサイド完結型のWebP画像変換・ダウンロードツール

このページへ行く

JPGやPNG形式の画像をWebP形式に変換し、個別またはZIPで一括ダウンロードできるツールです。画像の変換はすべてクライアントサイドで完結し、アップロードされた画像が外部に送信されることはありません。そのため、セキュリティやプライバシーの面でも安心して利用できる構成となっています。

開発においては、CSSプリプロセッサとしてSASSを導入し、保守性と記述性の高いスタイル設計を実現しました。JavaScriptのモジュール管理にはES Modulesを採用し、バンドルには高速なビルドが可能なesbuildを使用しています。WebpackやViteといった主流のバンドラーを使用せず、gulpとesbuildの組み合わせにより構築しています。

gulpは、開発フローを自動化するタスクランナーとして導入し、SASSファイルのコンパイルやCSS/JSのminify、esbuildによるモジュールのバンドルといった処理を担っています。特に、gulp単体ではES Modulesに対応しきれない課題があったため、esbuildと連携させる構成にすることで、軽量かつ柔軟な開発環境を実現しました。また、CSSについても、SASSで記述したスタイルをgulp経由でビルドし、最終的に圧縮されたCSSとして出力しています。

なお、本アプリケーションでgulpを使用していることを明確に示すため、gulpタスクやesbuildの設定を含めたソースコードをGitHub上に公開しています。

https://github.com/test-20240925/prot19 このページへ行く

prot20

株式会社フロム・ソフトウェアのコーポレートサイトを模倣し、PC/SP対応UIやロードモアを再現した静的サイト（サンプル）

このページへ行く

このサイトは、株式会社フロム・ソフトウェアのコーポレートサイトの仕組みを参考に、リバースエンジニアリングのような形で模倣して制作したサンプルです。実際のサービスやデータを利用しているわけではなく、技術的な検証・ポートフォリオ用の学習成果物として構築しています。登場する名称等は架空のものです。

トップページは、PCとスマートフォンで異なるUIを採用しています。PC版では、ゲームタイトルの一覧から項目をクリックすると、右側にその詳細情報や動画が切り替わって表示される仕組みになっています。ページ遷移を伴わず、シングルページ的に情報を展開できるため、ユーザーは途切れのない体験を得られます。スマートフォン版では、Swiperを用いたスライドUIを実装しています。各スライドをタップするとFancyboxのモーダルが開き、動画や説明をそのまま閲覧できます。

ニュースページは「ロードモア方式」を採用していて、最初は記事が6件だけ表示されます。「もっと見る」ボタンをクリックすることで、次の6件が段階的に追加表示されていきます。記事データはすでにJavaScript内に用意されており、サーバーへの追加リクエストは発生しません。つまり、非同期通信（Ajaxなど）は行わず、すべてクライアントサイドで動的に描画しています。

さらにこのページでは「カテゴリ切り替え機能」も備わっています。画面上部にあるタブやセレクトボックスからカテゴリ（「NEWS」「EVENT」「RELEASE」など）を選ぶと、該当する記事だけが一覧に再構成されます。これもサーバー通信を伴わないクライアントサイド処理であり、あらかじめ読み込まれた記事データの中から条件に一致するものだけを抽出・再描画しています。そのため、カテゴリを切り替えても瞬時に表示が切り替わり、スムーズなユーザー体験が実現されています。

本番環境ではサブディレクトリ（/den/prot20/）に配置しても正しく動作するよう、構成を工夫しています。開発時はWebpack Dev Serverのルートで動作しますが、本番ではURL階層が異なるため、それに対応できるようにしました。具体的には、WebpackのpublicPathを環境ごとに切り替え、本番用には絶対パス（/den/prot20/）を設定しています。これにより、出力されるHTML内のJS/CSSの参照パスが常に正しくなるよう制御されています。

また、テンプレートエンジンとしてEJSを導入し、HTMLテンプレート内で <%= PUBLIC_PATH %> のように変数を埋め込むことで、環境に応じた動的なパス指定が可能になっています。これにより、手動で相対パスを修正する手間を省き、保守性が向上しました。さらに、_sidemenu.html のような共通部品のパス指定にも同じ仕組みを活用し、開発環境でも本番環境でも同じHTMLテンプレートで共通UIを正しく読み込むことができます。

このページへ行く

アクセスいただきありがとうございます。青く光っている部分が、一番見ていただきたいページです。

このモーダルウィンドウを閉じてご確認ください。

prot21

バイブコーディング

バイブコーディングで構築した、店舗情報を管理できる小規模飲食店向けWebアプリ（Nuxt 3 + Supabase + Cloudinary）

このページへ行く

• メールアドレス： demo-reviewer@example.com Copied!
• パスワード： PortfolioDemo2026! Copied!

小規模な飲食店が自分たちでメニューや店舗情報を管理できるWebアプリです。管理者がログインして操作する管理画面と、お客様向けの公開ページの両方を備えており、一つのアプリで店舗の情報発信を完結できる構成になっています。開発はAIアシスタントとの対話を中心に進めるバイブコーディング（Claude Code）で行い、設計判断・実装・デバッグまで一貫してこの手法で完成させました。

技術スタック

フロントエンドとAPIサーバーをNuxt 3に統合したフルスタック構成を採用しています。データベースはSupabase（PostgreSQL・東京リージョン）、画像ストレージはCloudinary、デプロイ先はVercelで、いずれも無料枠で運用できるよう設計しています。カスタムドメイン（サブドメイン）はVercelのCNAME設定で対応済みです。認証はJWTをCookieに保存する方式で、APIアクセスのたびにサーバー側でトークンを再発行することで、操作中は24時間ログアウトされない仕組みになっています。

環境構成

本番（mainブランチ）と開発（devブランチ）の2環境をVercelで管理しています。それぞれ別のSupabaseプロジェクトに接続しており、同一GitHubリポジトリからブランチごとに自動デプロイされます。Cloudinaryは共通で使用しています。Supabaseのスリープ防止にはGoogle Apps Scriptで毎日9時にAPIを叩く仕組みを設定済みです。

画像管理

CloudinaryのURLはVercelのルートプロキシで /images/** にマスクし、外部ストレージを使っていることをURLから隠しています。表示時はCloudinaryの変換パラメータ（w_、q_、f_auto）でサムネイルを軽量配信します。

画像管理はImagePicker（画像選択用）とImageManager（画像管理用）の2つのコンポーネントで構成しています。各画面で「画像を選ぶ」ためのモーダルUIはImagePickerに統一され、画像管理ページではImageManagerが一覧表示・削除・アップロードを統合的に扱います。

レイアウトにはJustified Layout（均等行高レイアウト）を実装しており、縦横比がバラバラな画像群を自然なグリッドで表示できます。初回24件表示・「もっと読み込む」で追加取得する方式で、サムネクリックで詳細モーダル（Splideでの矢印・キーボード・スワイプ切替対応）に対応しています。

同名ファイルの重複排除には独自の連番採番方式を採用しました。同じファイル名で別画像を上げた場合、menu/1/photo.png、menu/2/photo.png のようにフォルダ単位で連番を採番してCloudinary側でも別画像として保存します。URLにランダム文字列を含めず、意味のある番号で識別できる設計です。

ファイル名の日本語対応もしており、お肉ステーキ.jpg のような日本語ファイル名でもCloudinaryに保存・表示できます。表示時はURLデコードして読みやすく表示します。

SVGアップロードにも対応しており、サーバー側で <script> タグ・イベントハンドラ属性・javascript: スキームなどを除去するサニタイザを通してから保存します。

画像削除には使用中チェック機能があります。削除前にsettings・menus・postsテーブルを検索し、使用中の場合は警告メッセージを表示したうえで確認を求めます。削除実行後はsettingsの hero_image_url・hero_image_urls・footer_logo_url などからも該当URLを自動除去します。複数画像の選択削除モードにも対応しており、削除中は「削除中…」のドットアニメーション、削除完了時にはクリップパスで上から削れていく砂崩れ風アニメーションが表示されます。

白いロゴSVGなど透過画像との視認性を確保するため、管理画面のすべての画像プレビューには #d8d8d8 の薄いグレー背景を統一して当てています。

ヒーローセクション

トップページの設定を /admin から行います。設定項目はカードパネル形式でセクション分けされており、5つのカード（表示タイプ／背景メディア／ロゴ／テキスト・ボタン／その他オプション）で整理されています。

表示タイプは「画像1枚・画像スライダー・動画」の3択で、それぞれ専用のwebpイラストアイコンで視覚的に選択します。さらにパララックス表示のON/OFFをトグルで切り替えられます。

画像1枚では「なし」または「ゆっくりズームイン」のエフェクトを選べます。画像スライダーでは横スライド・フェードの切り替え方式、切り替え間隔、インジケーター（ドット）の表示/非表示を設定できます。インジケーターはクリック操作不可の表示専用です。スライダーは常に左方向にスライドします。動画はMP4 URLとYouTube動画IDの2種類に対応しています。

キャッチコピー・サブテキストのフォントサイズも clamp() ベースで設定でき、それぞれ最小・推奨・最大を rem/vw 単位で指定することで、画面幅に応じた可変フォントサイズを実現しています。

ヒーローの高さは4段階から選択でき、キャッチコピー・サブテキスト・ボタンテキスト・ボタンリンクも設定できます。

表示時はClientOnlyでラップしてSSRによるhydrationミスマッチを防止し、最初の画像をプリロードして読み込み完了後にフェードインで表示します。ローディング中はグレーのプレースホルダーとスピナーを表示します。

メニュー管理

カテゴリー・名前・説明・価格・画像・スラッグURLをCRUDで管理できます。SortableJSで並び替えにも対応しています。新規メニューは常に先頭（左上）に挿入される仕様で、最新の追加が見つけやすくなっています。「おすすめ」フラグ（最大4件）を設定でき、トップページにカード形式で表示されます。

お知らせ・ブログ管理

タイトル・本文・サムネイル・スラッグURLを管理でき、予約投稿に対応しています。本文はMarkdown風の画像挿入記法（![](url)）をサポートし、表示時に <img> タグへ変換します。管理画面でプレビュータブによる事前確認が可能です。

SEO・SNS設定

/admin/settings の「SEO・SNS設定」セクションで、サイト全体のメタ情報を一元管理できます。設定項目は以下のとおりです。

• サイトタイトル（各ページのタイトルは「ページ名 ｜ サイトタイトル」の形式）
• サイトURL（OG・canonical用の絶対URL生成に使用）
• ディスクリプション（120〜160文字目安）
• OG画像（推奨1200×630px、ImagePickerで選択）
• Twitterカード形式（summary／summary_large_image／app／player から選択。app・playerには審査・承認が必要な旨の警告表示）
• noindex,nofollow トグル

サイト全体設定をデフォルト値とし、ニュース詳細ではニュースタイトル・本文の冒頭・サムネイル画像、メニュー詳細ではメニュー名・説明・画像で個別に上書きされる仕組みです。og:title / og:description / og:image / og:url / og:type / og:site_name、twitter:card / twitter:title / twitter:description / twitter:image、canonical URL を全ページで自動出力します。

設定ページ

設定ページは各セクションがアコーディオン形式（開閉アニメーション付き）で整理されています。実装済みのセクションは以下のとおりです。

• 価格フォーマット（14種類・税率・文字サイズ・カラー）
• 画像アスペクト比
• SEO・SNS設定
• フッター（店名・住所・電話・Googleマップ・コピーライトなど）
• プライバシーポリシー（テンプレート自動生成・プレビュー・表示ON/OFF）
• GTM・GA4連携（同意モード）
• Cookieバナー（GTM連動で出し分け）
• メンテナンスモード
• 利用規約（テンプレート自動生成・プレビュー・表示ON/OFF）
• 操作ログ（before/after形式・ページネーション）

URL構成

ユーザー向けは /・/menu・/menu/[slug]・/news・/news/[slug]・/privacy・/terms・/maintenance。管理系は /admin（トップページ設定）・/admin/menu・/admin/news・/admin/images・/admin/settings・/admin/login・/admin/setup です。

その他の実装済み機能

• 入力値サニタイズ（stripHtml）
• Cloudinaryアップロード制限（10MB・MIMEタイプ、クライアント+サーバー両側）
• スラッグのリアルタイム重複チェック（デバウンス付き）
• JWT認証（Cookie・APIごとに自動延長）
• 長文字列の自動折り返し（英数字連続文字列がレイアウトをはみ出さないようグローバルCSSで対応）
• 固定ヘッダー・ハンバーガーメニュー
• トースト通知
• ログイン時のみ表示される「管理画面」リンク（/admin/settings へのリンク）

このページへ行く

prot22

カラーフォント(COLRv1)技術を用いて、日本の自治体の市章をフォント化し、ブラウザ上で好きな文章を入力して表示・体験できるWebページ

このページへ行く

「自作フォントを作ってみたい」という思いと、以前から好きだった市町村章への興味を組み合わせて生まれた実験的なWebページです。ひらがな1文字ごとに、その読みを名称に持つ自治体の紋章を割り当て、自作のカラーフォント「Emblem」として収録しています。テキストボックスに文章を入力すると、入力された文字が対応する自治体の紋章へリアルタイムに置き換わって表示される仕組みになっており、ページ下部の五十音表からは各文字に割り当てられた紋章をクリックして、その自治体名を確認することができます。

紋章の選定にあたっては、現在も存続している自治体の章を優先しつつ、対応する自治体が見つからない文字については、市町村合併などにより廃止された旧自治体の章も採用しました。「き・ぐ・じ・に・は・ほ・め・も・ろ」の各文字には、こうした廃止自治体の章が割り当てられています。また、「ぬ・ね・ら・る・れ・を」については、ひらがなを図案化した紋章が見つからなかったため、カタカナを図案化したものを採用しています。たとえば「ぬ」の場合は、カタカナの「ヌ」を図案化した静岡県沼津市の市章が表示されます。市章だけでは50音すべてを揃えることが難しかったため、県章・市章・町章・村章・区章の中から幅広く選定していますが、それでも対応するものが見つからない一部の文字は空欄としています。

制作工程としては、まず1文字ずつの紋章データをIllustratorでトレース・整形し、SVG形式で書き出しました。フォント化の工程では、ブラウザ上で手軽に自作フォントを作成できるサービス『Calligraphr』を活用し、用意したSVGをひらがなの各グリフに割り当てる形でベースフォントを生成しています。その後、複数色の表現を可能にするため、COLRv1形式のOpenTypeカラーフォントとしてビルドし直し、最終的なフォントファイル「Emblem」として仕上げました。COLRv1はベクター情報と色情報を保持したまま拡大・縮小ができるため、市章特有の繊細な曲線や複数色の構成をどのサイズでも忠実に再現できる点が大きな特徴です。

実装面では、生成したフォントを@font-faceでブラウザに読み込ませ、入力テキストにそのまま適用しています。フォント読み込み時のレイアウトシフトを抑えるためfont-display: swapを指定し、表示までの待機時間にも配慮しました。収録した紋章には現在も使用されている自治体のものに加え、市町村合併などにより廃止された旧自治体の章も含まれており、紋章デザインのアーカイブ的な側面も持たせた構成としています。

このページへ行く

prot23

バイブコーディング

バイブコーディングで構築した、野球実況配信者向けのリアルタイムOBSオーバーレイサービス（Cloudflare Workers + Durable Objects）

このページへ行く

野球の試合をテレビなどで観ながら「実況・解説」を行う配信者のために、OBSにそのまま重ねて使えるスコアボードや各種オーバーレイを提供するWebサービスです。試合映像そのものは扱わず、選手名や成績は配信者が手入力する設計とすることで、公式データの自動取得や球団ロゴの利用といった権利上のリスクを避けています。これは「映像を映さない実況解説スタイル」という配信者の使い方に最適化した、意図的な設計判断です。開発はAIアシスタントとの対話を中心に進めるバイブコーディング（Claude Code）で行い、技術選定・アーキテクチャ設計・実装・デバッグまで一貫してこの手法で完成させました。

技術スタック

バックエンドは Cloudflare Workers と Durable Objects を採用し、サーバーコードは TypeScript で記述、デプロイは Wrangler で行っています。フロントエンドはフレームワークやビルドツールを一切使わず、単一のHTMLと素のJavaScript（Vanilla JS）だけで構成した軽量な作りです。リアルタイム通信には WebSocket、状態の永続化にはDurable Objects内蔵の SQLite を利用し、フォントには Adobe Fonts、QRコード生成には外部の画像API（goQR）を組み合わせています。いずれもCloudflareの無料枠を中心に、低コストで運用できるよう設計しています。

アーキテクチャ・リアルタイム同期

各配信ルームを1つのDurable Object（GameRoom クラス）として表現し、ルームごとに状態を完全に分離しています。クライアントとの接続には WebSocket Hibernation を用いることで、アイドル時にメモリを解放しつつ接続自体は維持し、課金とリソースを抑えながら常時接続を実現しています。操作画面での入力はWebSocketを通じて、すべてのオーバーレイと他のオペレーター画面へ即座に反映されます。状態はSQLiteへ永続化しているため、サーバーが一時停止・再開しても直前の試合状況がそのまま復元されます。常駐サーバーを持たないエッジ環境に全面的に寄せることで、スケーラビリティと運用コストの両立を図りました。

共同操作・権限管理

複数人で1つの配信を支える運用を想定し、オペレーターは承認制としています。最初に入室した人がホストとなり、後から参加した人のリクエストをホストが承認することでルームに加わる仕組みです。ホストが退出した場合には、残っているオペレーターへ自動的にホスト権限が移譲されるため、配信の途中で誰も操作できなくなる事態を防いでいます。現在の操作可能人数（ホスト・承認済みのみ）も管理し、共同運用の状況を把握できるようにしています。

OBSへの組み込みを前提としたオーバーレイ設計

スコアボード（ボール・ストライク・アウト）、ラインスコア、打順表、塁上の走者表示といった各表示物は、それぞれ独立したURLを持つ個別のオーバーレイとして提供しています。URLパラメータ（?view=overlay&widget=bso|score|lineup|bases）で表示するウィジェットを切り替えられ、配信者は必要なものだけをOBSの「ブラウザソース」として追加し、画面上の好きな位置・大きさに自由に配置できます。

カウント表示と走者表示を1つにまとめた組み合わせモードも用意しており、レイアウトの作り込み方に応じて単体表示と一体表示を選べます。打順オーバーレイでは、URLパラメータでどちらのチームを表示するかも指定できます。各オーバーレイが独立しているため、ある要素だけを画面の隅に小さく置いたり、シーンごとに異なる組み合わせを使い分けたりと、配信者が自分のシーン設計に合わせて自由にレイアウトを組める点が、実運用での大きな利点になっています。

表示機能

野球中継に必要な表示物を幅広くカバーしています。実装済みの主な機能は以下のとおりです。

• ボール・ストライク・アウトのカウント表示（即時反映／手動確定の2モード、長押しリセット対応）
• 表裏に対応したラインスコア（イニングごとの得点、H／安打・E／失策の表示切り替え、現在の半回ハイライト、未入力セルの空欄表示）
• 塁上の走者表示（一・二・三塁のダイヤモンド表示）
• 現在の打者表示（打順表と連動）
• 打順表に紐づく打席成績（ヒット系・四死球・その他のアウトをカテゴリごとに色分けし、打点を丸数字で付与）

打席成績は、操作画面ではポップアップから成績用語を選んで入力する方式とし、入力した結果はオーバーレイ上で文字数に関わらず同じ大きさの色付きチップとして整然と並ぶようにしています。野球というドメインに固有の「表裏」や「すでに行われた回」の判定をスコアボードへ正確に反映している点も、見た目の正確さに直結する作り込みです。

操作ミスに強いグローバルUndo

ライブ運用で重要になる「操作のやり直し」を、全パネル横断のグローバルUndo（Ctrl+Z）として実装しています。サーバー側で操作前の状態スナップショットを履歴スタックとして保持し、カウント・スコア・打順・走者・現在打者といった複数領域をまとめて1手戻せます。クライアントへは履歴の件数だけを軽量に送ることで、Undoボタンの活性状態を制御しつつ通信量を抑えています。配信中の入力ミスを即座に取り消せることは、生放送ならではの安心感につながっています。

カスタマイズ性・UI

配信者が自分の画面づくりに合わせて細かく調整できるよう、多数の日本語フォント（Adobe Fonts・計24種）の選択、要素ごとにアクセントカラーを変えられる配色カスタマイズに対応しています。操作画面はPCでは1画面にスコア・両チームの打順・カウントをまとめて表示し、タブ切り替えなしで素早く操作でき、狭い画面ではタブとハンバーガーメニューへ自動的に切り替わるレスポンシブな統合UIとしています。設定はモーダルにまとめ、共有用のリンクとQRコードもワンタッチで取り出せます。

使い方

実際の配信での利用の流れは次のとおりです。

• 操作画面を開いてルームを作成し、打順・スコア・カウントなどを入力します。
• 共同で操作したい場合は、表示される共有リンクやQRコードを渡し、参加者のリクエストをホストが承認します。
• スコアボード・ラインスコア・打順・走者などのオーバーレイURLをOBSの「ブラウザソース」として追加し、配信画面の好きな位置に配置します。
• あとは操作画面でカウントやスコアを動かすだけで、配信に乗ったオーバーレイがリアルタイムに更新されます。
• フォントや配色は設定からいつでも変更でき、操作を間違えても Ctrl+Z で素早く取り消せます。

このページへ行く

prot24

バイブコーディング

バイブコーディングで構築した、手持ちの画像をその場で「ホログラムシール」「プリズムシール」に変換する、ブラウザ完結型のWebGLシミュレータ

このページへ行く

アップロードした1枚の画像を、虹色に輝く「ホログラム箔シール」や、傾けると分光する「プリズムシール」として、ブラウザ上でリアルタイムに再現するWebアプリです。見る角度で流れる回折光・放射状の後光・分光の虹といった質感を、GPUのシェーダーで物理的な挙動に寄せて表現しています。画像の解析から描画まですべてブラウザ内（WebGL・Canvas）で完結し、画像は外部に送信されません。フレームワークやビルドツールを使わない、単一HTML＋素のJavaScriptの軽量な作りで、開発はバイブコーディング（Claude／Claude Code）で行いました。

2つのシールモード

• ホログラム：箔の回折光を再現。生の WebGL と自作 GLSL シェーダーで、角度で流れる虹色と放射状の後光を描きます。
• プリズム：正方形マイクロプリズム・アレイを再現。Three.js で波長ごとの屈折や再帰反射を物理ベースで再現します。

技術スタック

フレームワークやビルドツールを使わず、単一のHTMLと素のJavaScript（Vanilla JS）で構成しています。ホログラムは生の WebGL（WebGL1）と自作 GLSL、プリズムは Three.js で描画し、画像解析には Canvas（getImageData）を用いています。タイトル文字には Adobe Fonts を利用しています。サーバーを持たない単一の静的HTMLで、すべてクライアントサイドで完結します。

ホログラムモードの仕組み

画像を輝度で明暗の階調（バンド）に分ける「版分解」を行い、線画と背景を検出して、背景は後光の出る素箔として別扱いにします。GPU側では各バンドごとに回折の色を決め、隣り合うテクセルを「量子化した後の色」で合成することで、絵柄の境目に偽色の線が出ないようにしています。

元の色を反映するホログラム配色

明暗だけで色を決めると、青い服も緑のベストも、明るさが近いと同じ色に潰れてしまいます。そこで元画像の局所色から画素単位で色相を取り出し（彩度で重み付け）、箔の色をその場所の元色へ寄せることで、青は青・ピンクはピンクと元の色の違いが表れます。肌などの淡い部分は虹色のまま残し、色相を滑らかに補間することで、境目に段差を出さずに仕上げています。

プリズムモードの仕組み

48mm四方に正方形のマイクロプリズムが約7.8個（1辺約6.15mm）並ぶ構造をモデル化し、9つの波長を波長依存の屈折率 n(λ) で屈折させて分散の虹を合成します。錐（コーナーキューブ）は再帰反射性を持ち、光源を背にすると一斉に発光します。さらにシート全体の反り、経年のざらつき・くすみ、台紙ラミネートのテカリを重ね、実物に近い質感へ寄せています。

使い方

• シールにしたい画像をアップロードし、「ホログラム」か「プリズム」を選びます。
• 版数・色・分散・光源角などのスライダーで、好みの質感に調整します。
• シールをドラッグして傾けると、回折光や分光の虹が角度に応じて流れます。

このページへ行く

prot25

バイブコーディング

株式会社Cygamesのコーポレートサイトを模倣し、WordPressオリジナルテーマとして再現したサイト（サンプル）

このページへ行く

このサイトは、株式会社Cygamesのコーポレートサイトの仕組みを参考に、リバースエンジニアリングのような形で模倣して制作したサンプルです。トップページの動画ヒーローが持つ独特の切り替わり方、ページネーションの細かな動き、スクロールに応じて姿を変えるヘッダーなど、一見地味に見える部分ほど作り込みの差が出ると考え、アニメーションのタイミングや状態管理を1つずつ検証しながら組み立てました。ロゴ・写真・コピーはすべて権利上の理由から自作のプレースホルダーに差し替えており、コピー元サイトの著作物は一切使用していません。開発はバイブコーディング（Claude／Claude Code）で行いました。

技術スタック

テーマは WordPress のオリジナルテーマとしてフルスクラッチで構築し、CSS設計は destyle.css によるリセットの上にプレーンなCSSを積む方式を採用しています。スライダーには Swiper、ビルドには webpack を使用し、CSS/JSともにエントリごとに分割してビルドしています。フォントは日付表示に Jost（Google Fonts）、本文全体に Noto Sans JP（Google Fonts）と約物の詰まりを整える YakuHanJP（CDN・バージョン固定）を組み合わせています。開発環境は Docker（MySQL + WordPress + phpMyAdmin）で構築し、本番は Xserver のサブディレクトリへデプロイしています。

ヒーロースライダーの演出

トップの動画ヒーローは、単純なクロスフェードではなく「ディップ・トゥ・ブラック」という切り替え方を実装しています。選択したスライドへ切り替わる際、まず黒幕がフェードインして画面を覆い、その裏で瞬時にスライドを切り替え、次の動画が実際に再生され始めたことを確認してから黒幕を上げる、という流れです。これにより「次の動画の最初の一瞬が止まって見える」という違和感を解消しています。自動送りの際は、動画が終わるより少し早いタイミングで黒落ちを開始することで、黒へ沈む間も前の動画が止まらず再生され続けるよう調整しました。円形のプログレスバーはSVGの `getTotalLength()` とWeb Animations APIで描画し、12時位置から開始する回転もCSSではなくSVG属性で制御することで、ブラウザのキャッシュ差異に影響されない実装にしています。

ページネーションのサムネイルプレビュー

PC表示では、縦に並んだページネーションのバー（またはその左側）にカーソルを重ねると、該当スライドのサムネイルが右を起点に幅方向のワイプアニメーションで現れ、クリックでそのスライドへ直接ジャンプできます。バーとサムネイルの間にホバー判定の隙間ができないよう見えない当たり判定を追加し、サムネイル自体にカーソルを乗せても表示が途切れないようにしています。サムネイルはバー要素の子要素として実装しているため、クリック処理を追加で書く必要がなく、既存のバー用クリックハンドラがそのまま機能する設計です。

スライド内プロモーション表示

各スライドの左下には、ロゴ・タイトル・リンクボタンを表示するプロモーションエリアを設けています。これらは白い矩形が左から広がって覆い隠し、続いて右起点で縮みながら消えていくことで下に隠れていた要素が現れる、という「ボックスワイプ」演出で表示されます。ロゴ→タイトル→ボタンの3要素をそれぞれ独立したマスクとして実装し、`animation-delay` で時間差をつけることで、順番に浮かび上がるように見せています。モバイルではロゴを上段、タイトルとボタンを下段（左右）に配置するレイアウトに切り替えています。

お知らせ・会社情報

お知らせは投稿（post）を流用し、記事詳細を /news/id-◯◯/ という独自URLで表示するリライトルールを実装しています。一覧ページ（/news/）は10件ごとのページネーション付きで、メインクエリに依存しない独自の WP_Query を使うことで表示の確実性を高めています。会社情報ページも同様にリライトルールで実装し、トップページの「会社情報」と「設備紹介」は1つのセクションにまとめて、共通のデザイン言語（大きな透かし文字、左右反転レイアウト）で統一しています。透かし文字のロゴ画像は、提供された画像をベクタートレースして単一のSVGパスに変換し、外側の輪郭と文字の内側の穴を保ったまま実装しました。

ヘッダー・フッター

ヘッダーは固定表示で、トップページのヒーロー上では透過＋白文字、スクロールで白背景＋黒文字に切り替わり、状態に関わらずホバー時は黒背景＋白文字になります。切り替わりの判定はスクロール量の計算ではなく `getBoundingClientRect()` によるビューポート基準の判定にすることで、管理バー表示時のズレも自動的に吸収しています。モバイルではヘッダーを常時黒背景の固定にし、ハンバーガーメニューでフルスクリーンのナビゲーションを開閉する仕様にしました。フッターはSNSアイコン・トップへ戻るボタン・リンク集を配置し、SNSのURLはプラグインを使わずWordPress標準のカスタマイザーから編集できるようにしています（数個程度の低頻度な項目にプラグイン依存を持ち込まない判断です）。

Cookie同意・GTM連携

Cookie同意バナーを実装し、「すべて同意／すべて拒否／設定」から選択できます。Google Tag Manager は同意状態を見て条件付きで読み込むハードブロック方式とし、分析用途への同意が得られるまで一切スクリプトを読み込まないようにしています。同意状態はCookieに保存し、フッターの「Cookie設定」からいつでも再設定できます。

初回訪問時のスプラッシュ演出

トップページに限り、初回ロード時だけ黒画面にロゴがじわっと浮かび上がる演出を実装しています。判定はセッション単位（sessionStorage）で、同じタブ内での再訪問では表示されません。フェードインのイージングを工夫し、「もう見えている」と感じさせない自然な現れ方になるよう調整しました。

開発の進め方

開発はAIアシスタントとの対話を中心に進め、実装のたびにローカル環境（Docker）でビルド検証しながら1機能ずつ積み上げました。並行してMarkdown形式の手順書を作成し、実際のテーマファイルと常にバイト単位で一致させることで、後から見返しても環境構築からデプロイまで再現できる状態を保っています。デプロイは初回のみWordPressコア一式を配置し、以降はテーマフォルダの差分だけを本番へアップロードする運用にすることで、更新作業の負荷を抑えています。

使い方

管理画面から更新できる主な項目です。

• 投稿でお知らせ記事を作成すると、トップの最新3件と一覧ページに自動的に反映されます。
• 外観 > メニューでグローバルナビの項目を編集できます（位置への割り当てが必要です）。
• 外観 > カスタマイズ > フッターSNSで、X・Facebook・Instagram・YouTubeのリンク先を設定できます（未入力のSNSは自動的に非表示になります）。
• 設定 > 表示設定の「検索エンジンでの表示」で、検索避けをワンクリックで切り替えられます。
• スライドごとのロゴ・タイトル・リンクや各種プレースホルダー画像は、テーマ内のアセットを差し替えるだけで更新できます。

このページへ行く