Projects

OptFlow

快適なショッピング体験をテーマとしたアプリケーションです。

課題

「情報が多すぎて選びにくい」「操作が分かりづらい」——普段の買い物で感じる小さなストレスを減らしたかった。

工夫

見やすい画面構成と分かりやすい操作の流れを意識して設計。フロントは素の JavaScript と CSS で軽快に、サーバーサイドは PHP でデータ処理を組み立てた。

取り組み

個人開発として企画・設計・実装まで一貫して担当し、使い勝手の改善を少しずつ重ねている。

「ほしいものを、迷わず気持ちよく選べる」ことを目指して開発したショッピング向けの Web アプリケーションです。普段の買い物で感じる「情報が多すぎて選びにくい」「操作が分かりづらい」といった小さなストレスを減らすことをテーマに、見やすい画面構成と分かりやすい操作の流れを意識して設計しました。

フロントエンドは素の JavaScript と CSS で軽快な動きを、サーバーサイドは PHP でデータの処理を組み立てています。個人開発として、企画・設計・実装まで一貫して取り組みながら、使い勝手の改善を少しずつ重ねてきました。

使用技術

• PHP
• JavaScript
• CSS

ibit.dev

この個人サイトそのもの。フレームワークなしの PHP と素の CSS・JS で作っています。

課題

作ったものや活動を1か所で見せられる場所が欲しかった。既製のテーマではなく、仕組みから自分で理解して作りたかった。

工夫

インライン禁止の CSP、フォントの自前配信、ローカル SVG スプライトなど、速さと守りを最初から設計に組み込んだ。コンテンツは JSON で一元管理し、自作の管理画面から編集できる。

取り組み

Claude Code を開発のパートナーにして、デザインの刷新や細かい改善を続けている。作る過程は AI ページと記事でも公開中。

このサイト自体も、1つの制作物として作っています。フレームワークや外部 CDN に頼らず、PHP と素の CSS・JavaScript だけで組み立てました。

見えない部分にもこだわっていて、インラインを禁止した Content-Security-Policy、サブセットしたフォントの自前配信、PWA 対応など、個人サイトだからこそできる実験を詰め込んでいます。コンテンツは JSON で一元管理し、自作の管理画面から編集できるようにしました。

Claude Code を開発のパートナーにしており、その進め方は AI ページや記事でも公開しています。

使用技術

• PHP
• CSS
• JavaScript
• Claude

共有ボード

同じ Wi-Fi の中だけで、PC とスマホがテキストや画像を送り合える小さなツール。

課題

スマホで撮った写真やメモを PC へ渡すだけのために、クラウドを経由するのが面倒だった。AirDrop 的なことを家の LAN 内で完結させたかった。

工夫

認証なしで使える手軽さの代わりに、LAN の外からは使えない設計に。プロキシ経由のアクセスは拒否し、アップロードされた画像は拡張子ではなく中身を検証してから受け入れる。

取り組み

DB を使わず JSON ファイルとロックで永続化。書き込みは一時ファイルと rename の差し替えで壊れないように。古い項目は自動で消える。

同じ Wi-Fi につながった PC とスマホの間で、テキストと画像を送り合える Web アプリです。スマホで撮った写真を PC に渡す、PC で見ている URL をスマホへ送る、といった日常の小さな受け渡しを、クラウドを経由せずに済ませるために作りました。

インターネットへの公開はあえてしない設計です。プライベートネットワーク以外からのアクセスは拒否し、アップロードされた画像は拡張子や申告された形式ではなく中身を検証してから受け入れます。件数と時間の上限を超えた項目は自動で削除されるので、置きっぱなしにもなりません。

保存は DB ではなく JSON ファイルで、書き込みは一時ファイルと rename による差し替えにして、途中で壊れたデータが残らないようにしています。

使用技術

• PHP
• JavaScript
• CSS