背景

Mokujiroのポートフォリオに写真のセクションがあるのは、仕事に必要だからです。写真はスタジオのビジュアルアイデンティティの中心にあります。どこかで調達したストック画像ではなく、そのために作ったシステムで撮影し、現像し、公開する自分の作品です。

OM System OM-3は意図して選びました。フルサイズより小さく軽いマイクロフォーサーズのボディに、現代の電子レンズと1970年代のOlympus OM Zuikoのヴィンテージレンズを組み合わせています。ヴィンテージレンズはマニュアルフォーカス、マニュアル絞りで、アダプターで現代のマウントに付けます。現代の光学系では再現できない個性、つまり低めのコントラスト、やわらかなフレア、数十年前の光学設計ならではの描写が得られます。

撮影は始まりにすぎません。問題はその後に来るすべてでした。RAWファイルの現像、メタデータの生成、タイトルと説明の執筆、CDNへのアップロード、CMSとの同期、そして作品にふさわしいギャラリーでの表示。どの工程も手作業で、互いにつながっておらず、時間がかかりました。MokuPhotoはそれを解決するために作りました。

パイプライン

カメラからギャラリーへ

MokuPhotoはTypeScriptで書いたCLIツールで、Lightroomからの書き出し以降の後工程をすべて担います。処理は二つのコマンドで進みます。

npm run generate

書き出したJPEGを読み込み、exifrでEXIFメタデータを抽出し、Claude Haikuのビジョン分析で各写真のタイトル、説明、代替テキスト、キーワード、テーマ分類を生成して、写真ごとのJSONサイドカーファイルに書き出します。シリーズ全体を要約する説明文も同時に生成します。

npm run publish

写真をCloudflare R2にアップロードし、ギャラリーコンポーネントが実行時に読むシリーズJSONを組み立て、CMS連携用の同期マニフェストを書き出します。書き出したJPEGのフォルダから公開ギャラリーページまで、15枚から20枚の典型的なシリーズなら1分かかりません。

AIによるメタデータ生成

ポートフォリオのすべての写真は、タイトル、説明、代替テキストをClaude Haikuのビジョンモデルが書いています。プロンプトはファインアート写真向けに調整してあり、タイトルは詩的で短く（3語から6語）、説明はギャラリーの鑑賞者に向けて書き、代替テキストはアクセシビリティのために平明で事実に即したものにしています。

AIには画像とともにEXIFの文脈（カメラ、レンズ、絞り値、シャッター速度、ISO、撮影地）を渡します。これが分析の土台になり、暗い場所でf/1.7で撮った写真と、強い日差しの下でf/11で撮った写真は違う言葉で描写されます。

個々の写真を分析した後、二回目のAI呼び出しで、すべての写真の説明から2文のシリーズ説明を生成し、シリーズページにまとまりのある物語を与えます。

状態の管理

パイプラインは、ファイルのハッシュを記録するローカルの状態ファイルで公開済みの内容を追跡します。シリーズの公開を再実行すると、変更のない写真はスキップし、新規または変更されたファイルだけをアップロードします。そのため公開のやり直しが速く、メタデータのサイドカーを編集して再公開しても、送るのは更新後のシリーズJSONだけで済みます。

公開済みデータへの後付け

AI絞り推定のような新しい分析機能をパイプラインに加えたとき、生成処理を丸ごとやり直さずに公開済みのシリーズへ適用できます。専用の--aperture-onlyフラグで既存のメタデータに新しい分析だけを実行し、続いて--series-onlyで写真を再アップロードせずに更新後のJSONだけを送ります。

この型があるので、パイプラインは過去の仕事を壊さずに進化していけます。

SeriesViewerコンポーネント

ギャラリーを描画するのは、このポートフォリオのために作ったFramerのReactコードコンポーネントSeriesViewerです。実行時にR2からJSONファイルを取得し、写真鑑賞の体験をまるごと描画します。

レイアウト

メイン画像は3:2のアスペクト比でobject-fit containで表示し、写真を決して切り抜きません。その下には、ドラッグでスクロールでき、現在の写真がハイライトされる横並びのサムネイルがあり、シリーズ内を移動できます。メタデータのパネルはデスクトップでは画像の横、モバイルでは下に置き、二つのタブを持ちます。概要（撮影地、カメラ、レンズ、日付、キーワード）と撮影データ（絞り値、シャッター速度、ISO、露出モード、フォーカス、測光、手ぶれ補正）です。

全画面表示

全画面表示はFullscreen APIを使い、対応していないブラウザではCSSでフォールバックします。Androidのモバイル端末では、没入して鑑賞できるよう横向きの固定を要求します。移動はタッチのスワイプ、キーボードの矢印、円形の矢印ボタンで行えます。

レスポンシブデザイン

コンポーネントはResizeObserverで、ブラウザのビューポートではなく自身のコンテナの幅を検出します。そのためFramerのブレークポイントのフレーム内でも正しく反応します。600px未満ではレイアウトが1カラムに畳まれ、サムネイルは小さく、操作はタッチ向けに最適化されます。

CMSとの統合

写真のセクションは二つのFramer CMSコレクションを使います。Seriesコレクションにはシリーズ名、カバー画像、データURL（R2上のJSONを指す）を保存します。一覧ページはこのコレクションからシリーズカードのグリッドを描画し、各カードは詳細ページにリンクします。詳細ページはデータURLをSeriesViewerに渡し、SeriesViewerが実行時にシリーズ全体を取得して描画します。

この構成なら、新しいシリーズを追加してもFramerでページを作る手間がありません。R2のURLを持つCMS項目を1件足すだけで、ページはコレクションから自動的に生成されます。

使用機材

写真はOM System OM-3で、三本のレンズを使って撮影しています。

Panasonic Leica DG Summilux 15mm f/1.7：暗い場所とストリートでの主力レンズ。明るくシャープで、カメラボディと電子的に連動します。マイクロフォーサーズで30mm相当。

Olympus OM Zuiko 28mm f/3.5：ヴィンテージのマニュアル単焦点。受動的なアダプターでマイクロフォーサーズに装着します。電子通信はなく、絞り、フォーカス、焦点距離はすべて手動。低めのコントラスト、独特のフレア、1970年代の光学設計ならではの描写が得られます。56mm相当。

RAWファイルはLightroom Classicで最小限の処理で現像します。露出の補正、ホワイトバランス、部分的なトーン調整だけです。デジタルの美学を押し付けるのではなく、レンズが捉えたものを尊重することが目的です。

成果

MokuPhotoは現在、日本とオーストラリアの6都市にまたがる七つのシリーズを公開しています。東京（3シリーズ）、大阪、京都、香川、メルボルン。ポートフォリオには118枚の写真があり、それぞれにAIが生成したタイトル、説明、代替テキスト、キーワード、そしてヴィンテージレンズの画像には推定絞り値が付いています。

パイプラインはLightroom以降の工程すべてを二つのコマンドで処理します。新しいシリーズを公開サイトに加えるのに、最初の書き出しからギャラリーページの公開まで5分かかりません。SeriesViewerコンポーネントはFramerでのページ作成なしにすべてのシリーズページを描画し、構造全体をCMSが動かしています。

このシステムは成長するように設計しました。AI絞り推定、撮影データの表示、メタデータの補完といった新しい機能は、以前のものを壊さずに既存のパイプラインへ組み込まれます。作品はあくまで写真です。パイプラインの役目は、写真にふさわしいメタデータを添えてポートフォリオに届けることです。

写真アーカイブを見る →