Studio
ブラウザで動く非破壊RAWパイプライン。最大の制約は色でした。
- 年
- 2026
- 制作期間
- 12週間
- 技術スタック
- Next.js · React · TypeScript · Tailwind · Vercel
- プロダクトデザイン
- UIデザイン
- 開発
- 画像処理
Kayzen Webが開発・運営する製品です。正式なドメインに移行するまで、Vercelのプレビュー用アドレスで公開しています。
- エンドツーエンドのカラーパイプライン
- ICC
- Lighthouseアクセシビリティ
- 97/100
- Lighthouseベストプラクティスこの項目での私たちの最低スコアです。ブラウザ内でのRAW処理はLighthouseが指摘するAPIに依存しています。機能を削るのではなくスコアをそのまま公開しており、見直しを予定しています。
- 73/100
解決すべき課題。
背景
Studioは、オンラインで使える写真現像アプリケーションです。RAWの読み込み、非破壊編集、エンドツーエンドのICCカラーマネジメント、複数形式での書き出しに対応しています。
制約
写真家は、快適さのためにツールを乗り換えたりはしません。障壁は2つありました。ひとつは色の忠実性です。色かぶりの生じたファイルは使いものになりません。もうひとつは非破壊性、つまり6か月後でもどの調整にも戻れることです。
解決策
インターフェースよりも先に色を扱いました。カメラの入力プロファイル、リニアな作業色空間、書き出し時に選ぶ出力プロファイル。このカラーパイプラインは明示され、ユーザーに表示されます。調整は操作のリストとして保存され、元のファイルに適用されることは決してありません。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
ニュートラルなダークインターフェース
画像のまわりは、色かぶりのない厳密なニュートラルグレーです。色味のあるインターフェースはホワイトバランスの知覚を狂わせます。これはレタッチソフトの第一原則であり、あらゆる美的な配慮に優先します。
常に表示されるヒストグラム
調整パネルの上部に固定し、白飛び・黒つぶれの警告を備えています。これは写真家の計測器です。タブの奥に隠すのは、水準器を工具箱にしまい込むようなものです。
業界標準のキーボードショートカット
ショートカットは定番のソフトウェアのものを踏襲しています。熟練ユーザーに新しい操作体系を強いるのは、身につけたことを忘れろと言うのと同じです。乗り換えのコストが得られるメリットを上回ってしまいます。
プロジェクトのカラーパレット
ニュートラルグレー900
#18181B
作業スペースの背景
ニュートラルグレー700
#3F3F46
パネル
モーブ
#A78BFA
アクセント、選択
クリッピングレッド
#EF4444
ハイライトの白飛び警告
タイポグラフィ体系
見出し用書体
Inter 600
本文用書体
Inter 400
数値は等幅にしています。値が変わるたびに幅が跳ねるスライダーは、不正確に感じられるからです。
その裏側にある技術。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
WebAssemblyによるRAWデコード
独自形式（CR3、NEF、ARW）のデコードは、ワーカー内のWebAssemblyで実行されます。メインスレッドは空いたままなので、6,000万画素のファイルをデコードしている間もスライダーが反応します。
WebGLによるGPUレンダリング
補正はグラフィックカード上のシェーダーで適用されます。CPUで処理していたら、この解像度ではプレビューが使いものにならなかったでしょう。
ピクセルではなく操作の履歴
各調整は、シリアライズ可能な操作スタックの1エントリです。元に戻す、一連の写真に同じ処理を複製する、プリセットを書き出す。すべてこの構造から生まれています。
検索で見つけてもらうための仕組み。
製品ではなく集客のためのSEO
アプリケーション自体はインデックスできず、その必要もありません。SEOの対象は、発見が生まれる紹介ページと比較ページです。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
プロ向けインターフェースでも97/100
各スライダーは、ラベル、読み上げられる値、キーボードでの刻み幅を備えたネイティブのinputです。ほとんどのレタッチ用インターフェースはこれを省いていますが、そうする技術的な理由は何もありませんでした。
納品したもの。
- 製品紹介
- レタッチアプリケーション
- 対応形式と互換性
- 料金
プロジェクトの流れ。
カラーパイプライン
入力プロファイル、作業色空間、出力プロファイル。
デコード
WebAssembly、ワーカー、高速プレビュー。
レンダリング
WebGLシェーダー、ヒストグラム、クリッピング表示。
インターフェース
パネル、ショートカット、履歴。
