このサイトについて

インタラクティブ文章形式（Interactive Narrative Format）とは

本サイトの作者が名付けた造語で、決まった規格があるわけではなく「こういう表現ができたら楽しい」という考え方そのものです。 文章に添える形で、作者の意図を体験として伝えるHTMLコンテンツを用意し、読者が触れながら理解を深められる場をつくります。 写真や動画が言葉を補ってくれるように、キャンバス上の操作や視覚的な反応を通じて、伝えたい構造や感情を感じ取ってもらうイメージです。

• 文章とつながるインタラクティブコンポーネントをそっと添え、読者の探索を自然に促します。
• 読者が操作を試すことで作者の意図を追体験し、文章だけでは届きづらいニュアンスに気づけます。
• 視覚・操作・物語のレイヤーを重ね合わせ、新しいコミュニケーションの姿を探ります。

この表現形式は、文章を差し替えるのではなく「補う」ことが前提です。 読者がインタラクティブ要素に触れられない環境でも大枠が伝わるよう文章で押さえつつ、体験できる環境では一歩踏み込んだ理解につながるよう導線を用意します。

抽象的な技術や感覚的なテーマも、操作・変化・反応という体験に落とし込むことで理解の段差をやわらげられるのが魅力です。 その反面、文章とインタラクティブ要素の二本立ては手間がかかるので、アクセシビリティやフォールバック、操作の導線などをまとめたガイドを用意して、狙いどおりの内容を保ちやすくすることが大切です。

「紡ぐ」- 一枚の写真が織りなす新たな世界へようこそ

WebGL、Three.js、AIなどの技術を使って、「これを実現したい」と思ったものを実験的に作っています。 作ったものや学んだことを記録として残しているのがこのサイトです。

仕事ではないので、自由に実験・探求できるのが良いところです。 失敗も含めて制作過程を共有することで、同じような技術を探求している方の参考になれば嬉しいです。 初心者の方から経験者の方まで、一緒に技術を探求していけたらと思っています。

このサイトで提供していること

• 作品展示: WebGLとThree.jsで制作した300以上の実験的プロジェクトを展示します
• 技術解説: 80件以上の詳細な記事で、作品制作に用いた技術や思想を解説します
• 3D技術習得: 3D技術習得のための実践的なチュートリアルを提供します
• AI技術の活用: ブラウザで動くAI推論、大規模言語モデルの活用方法を紹介します
• 写真表現の挑戦: 一枚の写真を情報空間に飾ることで、新たな写真表現を実現します

生成AIとの付き合い方

記事本文やサマリー、翻訳、チャットUIなどでは、Google Gemini といった生成AIを補助ツールとして活用しています。 生成AIが提案した内容は、すべて作者が検証・加筆修正し、事実関係やコードの整合性を確かめたうえで公開しています。

• 生成AIのアイデアはたたき台とし、最終的な文章やコードは作者が責任を持って編集します
• 不確かな情報は一次資料で再確認し、必要に応じて注記や更新履歴で補足します
• 生成AIを利用した旨や運用ポリシーは、利用規約・免責事項（AIセクション）で詳しく説明しています
• 誤りや改善点のご指摘には迅速に対応し、内容を更新します

🔍 ポイント：生成AIは制作を支える相棒ですが、最終的な責任は作者にあります。人間のレビューを経たコンテンツだけを掲載しています。

コンテンツの規模

新サイトでは、旧サイトで培った作品や知見を土台にインタラクティブ文章形式の記事を制作しつつ、あわせて新しいコードや実験を継続的に開発していきます。 今後は月に数本の新規コードと記事を目標に、じっくりと内容を深めていく予定です。

このサイトが役に立つかもしれない方

• WebGLやThree.jsの技術を探求したい
• ブラウザで動くAIの実装を研究している
• 3Dグラフィックスの仕組みを深く理解したい
• 実験的なプログラミングに取り組んでいる
• 技術的な挑戦を楽しみたい

同じような技術探求をしている方と交流できたら嬉しいです。

主なコンテンツ

WebGL・Three.js

ブラウザ上で動作する3Dグラフィックスの実装方法を解説します。 基礎から応用まで、実際に動作するデモとともに学べます。

• パーティクルエフェクト
• シェーダープログラミング
• 3Dモデリングと描画
• インタラクティブな3D表現

AI・機械学習

大規模言語モデル（LLM）や画像認識など、最新のAI技術の活用方法を紹介します。

• Google Gemini API：チャットボット、対話型システム、コンテンツ生成
• ブラウザAI推論：MediaPipe、TensorFlow.js、ONNX Runtime Webによるローカル処理
• 顔認識・物体検出：face-api.js、COCO-SSDによる画像分析
• 深度推定：MiDaSモデルによる3D空間認識
• ジェスチャー認識：MediaPipe Handsによる手の動き検出
• LLMファインチューニング：Gemma3モデルのLoRA学習

💡 プライバシー重視：多くのAI機能はブラウザ内で完結し、映像データは外部に送信されません。

⚠️ 外部サーバー利用について：一部のAI関連機能（LLMによるチャット、記事生成、翻訳支援など）では、計算能力を優先し、ローカル環境よりも高性能な外部サーバー（Google Gemini APIなど）を利用します。この場合、ユーザーが入力した情報（テキストデータやプロンプトなど）が外部サーバーに送信されます。詳細は利用規約の「ブラウザベース処理とプライバシー」をご確認ください。

デジタルフォトグラフィー

写真を3D空間に配置したり、特殊なエフェクトを適用したりする、 新しい写真表現の方法を探求します。

サイトの特徴

実際に動くデモと一緒に

記事には実際に動作するデモとソースコードを載せています。 文章だけじゃなく、実際に触って試せるので理解しやすいかなと思います。

自分が詰まったところも含めて

作っている時に「ここで詰まった」「こうしたらうまくいった」という経験を、 できるだけそのまま書くようにしています。綺麗にまとめすぎると、 かえって分かりにくくなることもあるので。

探求したいテーマが見つかったら更新

新しい技術や実現したい表現が見つかったら、実験して記事を書いています。 更新頻度は探求のペース次第ですが、気長にお付き合いいただけると嬉しいです。

作者について

Y.Kobayashi
個人開発者として、WebGL、Three.js、AIなどの技術を使った作品を作っています。 仕事ではなく、制作そのものが楽しいこと、そして技術の探求が目的です。

このサイトは、自分が学んだことや作ったものを記録・共有する場所です。 技術を探求する過程で得た知見が、誰かの役に立てば嬉しいです。 ソフトウェアの販売も行っていますが、メインは技術の探求と制作です。

旧サイトについて

当サイトは2025年11月に新しい形式でリニューアルしました。 旧サイトで公開していた300以上の実験的なプロジェクトは、 旧サイト（デモギャラリー）からご覧いただけます。

旧サイトの主なコンテンツ

新サイトでは、旧サイトのコンテンツを基に、より読みやすく、 わかりやすい記事形式で技術解説を行っています。実際に動作するデモと、 詳細なコード解説、制作過程の思考プロセスまで、丁寧に紹介しています。

🎯 新サイトの特徴：旧サイトは「見て楽しむデモギャラリー」、 新サイトは「学んで理解する技術ブログ」という位置づけです。

お問い合わせ

ご質問、ご意見、コラボレーションのご相談などは、 お問い合わせページからご連絡ください。

X（旧Twitter）: @leg4869

使用している技術スタック

フロントエンド基盤

• HTML5 / CSS3 / JavaScript (ES6+)：モダンな Web標準技術
• レスポンシブデザイン：PC・タブレット・スマートフォン対応
• Google Fonts：Noto Sans JP, Inter, Fira Code

3Dグラフィックス

• Three.js：WebGLベースの3Dライブラリ（主要技術）
• WebGL：低レベルグラフィックスAPI
• CSS3DRenderer：HTML要素の3D配置
• シェーダープログラミング：GLSL による高度な視覚効果

AI・機械学習

• Google Gemini API：大規模言語モデル
• MediaPipe：Google製のAI推論フレームワーク
• TensorFlow.js：ブラウザ上での機械学習
• ONNX Runtime Web：高速AI推論エンジン
• face-api.js：顔認識・年齢推定・感情認識
• COCO-SSD：物体検出モデル
• MiDaS：深度推定モデル

その他のライブラリ・ツール

• Prism.js：コードシンタックスハイライト
• kuromoji.js：日本語形態素解析
• Google翻訳：多言語対応
• Web Audio API：音声処理・可視化
• Electron：デスクトップアプリ開発

📋 ライセンス情報：各外部ライブラリは、それぞれのライセンス条項に従って使用しています。 詳細は利用規約ページをご確認ください。

使用中のフリーソフトとライセンス

上記のフリーソフト／オープンソースソフトウェアに深く感謝するとともに、作者とコミュニティの皆さまの継続的な開発・公開に敬意を表します。 当サイトではライセンス表記の遵守と、ソースコードの出典明示を心がけています。

支えてくださる皆さまへの感謝

Midori Photo Art を訪れてくださる読者の皆さま、作品づくりを応援してくださる方々、そしてオープンソースコミュニティの開発者の皆さまに心から感謝します。 日々のフィードバックや温かいメッセージが、次の表現や挑戦へとつながる大きな原動力になっています。

これからも技術と表現の探求を続け、学びとインスピレーションを共有できる場であり続けるよう努めてまいります。今後ともどうぞよろしくお願いいたします。

コンテンツの利用条件

当サイトのコンテンツは、特に記載がない限り以下の条件で提供されています：

写真・イラスト・デザイン素材

著作権は作者に帰属します。個人的な鑑賞以外の目的での使用（複製、改変、配布など）には事前の許可が必要です。

文章コンテンツ

引用の範囲を超える転載には出典の明記と事前の許可が必要です。 個人的な学習目的での利用は自由ですが、商用利用や再配布には事前の許可が必要です。

プログラムコード

当サイトのオリジナルコード（記事内のサンプルコードなど）は、MITライセンスの下で提供されています。 自由に利用、改変、頒布することができます。

使用している外部ライブラリについては、それぞれのライセンス条項に従います。 各ライブラリの利用については、提供元の公式サイトでライセンス情報をご確認ください。

商用利用をご希望の場合は、必ず事前にお問い合わせください。

アクセシビリティについて

当サイトでは、より多くの方にコンテンツをご利用いただけるよう、以下の対応を行っています：

• スマートフォンやタブレットに対応したレスポンシブデザイン
• 適切な見出し構造とセマンティックHTML
• 十分なコントラスト比を確保した配色
• Google翻訳による多言語対応

徐々に使いやすさを向上させていく予定です。ご意見やご要望がありましたら、お問い合わせよりお知らせください。

利用規約・免責事項

当サイトのご利用にあたっての注意事項、免責事項、著作権、ライセンス情報などの詳細については、 利用規約・免責事項ページをご覧ください。