制作コンセプト
QUICK INSTANTは、「すぐ届く、いま感じる」をコンセプトに設計された個人サイトです。
当初は1ページスクロール型として開発されましたが、現在は7ページ構成のマルチページサイトに進化しています。
各ページは統一されたデザインシステムを持ちながらも、独自の目的を持っています
トップページ(index.html)、プロフィール(about.html)など製作者個人のページ以外に、技術仕様(claude.html)など、全てのページが共通のヘッダー・フッターで統一され、シームレスなナビゲーション体験を提供します。
技術的な実装
フロントエンド
- 日本語対応フォント
タイトル・見出し: Dela Gothic One (極太アメコミ風)
本文: M PLUS Rounded 1c (読みやすい丸ゴシック)
Google Fonts経由で読み込み、日本語でもしっかり表示 - 統一ヘッダー・フッター
全7ページで共通のナビゲーション
common.css/common.jsによるモジュール化
戻る矢印SVG、レスポンシブハンバーガーメニュー実装 - リアルタイム天気連動
Open-Meteo APIで東京(板橋区)の天気データ取得 - 今月のヘビロテ
Last.fm APIでトップトラック取得
モーダル表示、クリックで曲詳細へ遷移
アルバムアート付き、再生回数表示 - イースターエッグ
タイトルを3回タップで秘密ページに遷移
500ms以内のタップ判定、カウントリセット機能 - ダーク/ライトモード
手動切り替えボタンを実装
システム設定(prefers-color-scheme)の自動検知
localStorageによる設定の永続化 - レスポンシブデザイン
モバイル、タブレット、デスクトップに対応
CSS clamp()による可変フォントサイズ
CSS Grid auto-fitによる自動レイアウト調整
バックエンド
- Cloudflare Workers
サーバーレスアーキテクチャの採用
Notion API、Last.fm APIのプロキシとして機能
CORS対応による安全なクロスオリジン通信 - Notion API連携
Blog、Podcast、各種コンテンツの動的取得
予約投稿機能(JST日時による公開制御)
KV Storageを活用したキャッシング機構 - フォールバック機能
API接続失敗時のKVストレージからの自動読み込み
古いブラウザ環境への対応
3段階のフェイルセーフ設計(通常API → フォールバックAPI → エラーメッセージ)
パフォーマンス最適化
- Promise.allによる複数API並行取得
- ローディングアニメーション実装
- 不要なスライドショー削除によるシンプル化
- 画像最適化とLazy Loading
採用技術スタック
- フロントエンド: HTML5, CSS3, Vanilla JavaScript
- バックエンド: Cloudflare Workers, KV Storage
- API: Notion API, Open-Meteo API, Last.fm API
- フォント: Google Fonts (Dela Gothic One, M PLUS Rounded 1c)
開発期間
2026年2月14日〜16日の3日間で開発。初日にv1を完成させ、2日目に複数ページへの拡張とNotion API連携を実装、3日目にモジュール化とイースターエッグを追加しました。
開発はShun TonegawaとClaude Sonnet 4.6がリアルタイムで協力し、要件定義からデザイン、実装、デプロイまで一貫して行いました。