# Softlight 使用マニュアル Softlight はブラウザ完結型の顔写真レタッチアプリです。写真をアップロードすると、肌のスムージング・トーン補正・軽度の顔の造形調整といった処理がすべて、お使いのブラウザ内で HTML5 Canvas API を使って行われます。写真がサーバーにアップロードされることは一切ありません。 このマニュアルでは、画面構成・各コントロールの機能・処理の仕組み・制限事項について説明します。 ## 1. 基本的な使い方 1. `softlight.html` を最新のデスクトップ/モバイルブラウザ(Chrome、Edge、Safari、Firefoxなど)で開きます。 2. JPGまたはPNG形式の顔写真を枠内にドラッグ&ドロップするか、**Choose Photo** をクリックしてファイルを選択します。 3. 「Analyzing image…」と表示され少し解析が行われた後、初期設定の補正がすでに適用された状態で **Before / After** 比較表示になります。 4. 中央の縦のバー(ディバイダー)を左右にドラッグすると、元の写真と補正後の写真を比較できます。 ページ読み込み時に使用しているGoogle Fontsの読み込みを除けば、以降はサインインもインターネット接続も不要です。 ## 2. フォーカス(FOCUS)オーバルについて 写真を読み込むと、点線の金色の楕円 ── **フォーカスオーバル** ── が表示されます。これはレタッチ効果を集中させる範囲を示すもので、背景や髪の毛まで肌と一緒にぼかされてしまうのを防ぐためのものです。 - **移動**: オーバルの内側をクリックしたままドラッグすると、顔の位置に合わせて中心を動かせます。 - **サイズ変更**: 右下にある小さな金色のハンドルをドラッグします。 - **自動配置**: 一部のChromium系ブラウザが実験的に対応している `FaceDetector` API が使える環境では、写真読み込み時にオーバルを自動配置しようとします。それ以外の環境では中央に初期配置されるので、手動で位置を合わせてください。 - **Apply across full frame**: 写真下のツールバーにあるこのチェックボックスをオンにすると、オーバルによる範囲指定をやめて、画像全体に均等に補正をかけます。すでに肌だけがアップで写っている写真や、楕円マスクがうまく合わない写真に便利です。 ## 3. 各コントロールについて コントロールは、実際のレタッチ作業の手順を意識して4つの「ステージ」に分かれています。 ### Stage 01 ─ Skin(肌) | コントロール | 内容 | |---|---| | **Skin Smoothing(肌のなめらかさ)** | 強くぼかしたコピーを元の写真にブレンドし、小じわ・毛穴・シミなどの見え方を軽減します。値が大きいほど強くなめらかになります。 | | **Detail Retention(質感の残し具合)** | フォーカス範囲内であっても、なめらかにしすぎないよう質感を残す度合いを調整します。「のっぺり」しすぎた場合はこの値を上げてください。 | 内部的には簡易版の**周波数分離(frequency separation)**という手法を使っています。写真をぼかし、元の写真とぼかした写真との差分(しわ・毛穴・細かい影といった「高周波成分」)を計算し、その差分を弱めてから元の画像と合成します。写真ごとに一度だけ計算されるエッジマップが、目・唇・眉・生え際といった強い輪郭線を保護するため、なめらかさの処理は平らな肌の部分に集中し、顔のパーツそのものがぼやけてしまうことはありません。 ### Stage 02 ─ Tone(トーン) | コントロール | 内容 | |---|---| | **Exposure(露出)** | 写真全体を明るく、または暗くします。 | | **Warmth(色温度)** | ホワイトバランス調整のように、色味をオレンジ寄り(プラス)またはブルー寄り(マイナス)にシフトします。 | | **Vibrance(彩度)** | 各ピクセルの明るさに応じて、色の鮮やかさを増減します。 | ### Stage 03 ─ Light(明暗) | コントロール | 内容 | |---|---| | **Highlight & Shadow Lift(ハイライト&シャドウの持ち上げ)** | 白目や歯、肌のハイライトなど明るい部分をより明るくします。また、フォーカス範囲内に限り、目の下のクマや法令線の影といった暗い部分を中間グレーに近づけて和らげます。 | ### Stage 04 ─ Sculpt(輪郭の調整) | コントロール | 内容 | |---|---| | **Eye Size(目の大きさ)** | フォーカスオーバル内で推定した左右の目の位置を中心に、外側へ膨らませるような変形(バルジ)をかけ、目をやや大きく見せます。 | | **Jaw Slimming(輪郭のスリム化)** | フォーカスオーバル下部左右の推定した顎の位置を中心に、内側へ引き込むような変形(ピンチ)をかけ、フェイスラインを細く見せます。 | 目と顎の位置は、フォーカスオーバルのサイズと位置から比例計算で推定しているだけで、顔のランドマーク検出は使用していません。この変形を自然にかけるには、フォーカスオーバルを顔の中心に合わせ、輪郭がだいたい生え際とフェイスラインに沿うようにサイズ調整してから、これら2つのスライダーを上げてください。 ### リセットと写真の変更 - **Reset Adjustments**: 写真はそのままに、すべてのスライダーとフォーカスオーバルの位置・サイズを初期値に戻します。 - **Change Photo**: ファイル選択画面を再度開き、別の写真を読み込みます。 ## 4. 生成した画像の保存方法 Softlightには「ダウンロード」ボタンはありません。これは、ホスティングされているアーティファクト環境ではスクリプトによる自動ダウンロードがブロックされているための、意図的な仕様です(機能の不足ではありません)。 補正結果を保存する手順: 1. 比較表示の右側(補正後)の写真の上で右クリック(タッチ端末では長押し)します。 2. 「名前を付けて画像を保存」(表示はブラウザによって多少異なります)を選択します。 3. 保存される画像は、下記の作業解像度に基づくものであり、元ファイルのフル解像度ではありません。 ## 5. 技術的な注意点・制限事項 - **作業解像度**: スライダーの反応を良くするため、処理前に写真の長辺が最大1000pxになるよう縮小されます。スマホの高解像度写真でも軽快に動作しますが、保存される画像もその解像度までとなります。 - **AIによる若返り生成ではありません**: Softlightは、生成AIによって若い顔を新たに作り出しているわけではありません。すべての処理は、ぼかしを利用した肌のなめらかさ補正・トーングレーディング・簡易的な幾何学変形といった、古典的な写真レタッチ技法をピクセル単位の計算で適用しているだけです。骨格そのものを変えたり、白髪を除去したり、機械学習による顔年齢変換モデルと同等の結果を出すものではなく、入力した写真をより柔らかく、明るく、わずかに輪郭を調整したバージョンにするものです。 - **顔のランドマーク検出は不使用**: Stage 04 で使用する目・顎の位置は、実際に検出した顔のパーツではなく、フォーカスオーバルに基づく幾何学的な推定値です。オーバルを実際の顔に正確に合わせるほど、仕上がりも自然になります。 - **プライバシー**: すべての処理はブラウザのメモリ内でCanvas APIを使って行われ、写真がネットワーク経由で送信されることはありません。ページを閉じたり再読み込みしたりすると写真は破棄され、Softlight側でセッション間のデータを保存することもありません。 - **対応ブラウザ**: Canvas 2D とCSSの `filter` プロパティに対応したブラウザ(主要な最新ブラウザはすべて対応)が必要です。オーバル自動配置機能はブラウザ標準ではない `FaceDetector` API を必要とし、現時点では一部のChromium系ブラウザでのみ利用できます。 ## 6. 簡易トラブルシューティング | 症状 | 想定される原因・対処法 | |---|---| | 効果が薄く感じる | Skin Smoothing・Exposure・Highlight & Shadow Lift を上げる、または「Apply across full frame」の設定でマスク範囲が意図せず制限されていないか確認してください。 | | 肌が不自然になめらかすぎる(のっぺりする) | Detail Retention を上げる、またはSkin Smoothingを少し下げてください。 | | 目や輪郭の変形が不自然・左右非対称に見える | フォーカスオーバルの位置・サイズを顔に合わせて調整し直してから、Eye Size / Jaw Slimming を再調整してください。 | | 写真をドロップしても反応しない | ファイルがJPGまたはPNG形式か確認してください。HEIC、一部ブラウザでのWebP、PDFなどはファイル選択から読み込めない場合があります。 | | 右クリックしても「画像を保存」が出ない | 一部のモバイルブラウザでは長押しが必要です。デスクトップでは、周囲のパネルではなく写真そのものを右クリックしているか確認してください。 |