画像のアップロード、フォーカスの調整、無料ストックフォトの利用

概要

画像は、訪問者がブランド、製品、仕事、空間を素早く理解するのに役立ちます。Kanorioでは、鮮明なオリジナル写真をアップロードするだけで、システムがファイルをそのままの状態で保存し、訪問者のデバイスに基づいて最適なサイズと形式に自動的に変換して表示します。

画像のアップロードと選択場所

サイト上のすべての画像フィールド（ヒーローセクション、画像・テキストブロック、ギャラリー、製品表示、ロゴ、ソーシャルシェア画像など）には、以下の4つのソースから選択できる統一された画像ピッカーが備わっています。

1. コンピュータやモバイルデバイスからアップロード

• 画像がまだない場合: フィールド内の「アップロード」ボタンをクリックしてファイルを選択するか、ファイルを直接フィールドにドラッグ＆ドロップします。
• すでに画像がある場合: プレビューの下にある「画像を切り替える」をクリックして新しいファイルを選択するか、新しいファイルをプレビューにドラッグ＆ドロップして置き換えます。
• 複数画像フィールド（アルバム、カルーセル、製品画像、ブログ記事）: 一度に複数の画像を選択してアップロードできます。ブログエディタでは、2枚以上の画像（最大20枚まで）を選択すると自動的に横並びに配置され、ドラッグして順序を変更できます。

2. メディアライブラリから選択（アップロード済み画像の再利用）

画像フィールドの横にある「⋯ → メディアライブラリから選択」をクリックすると、以前にサイトにアップロードした画像を再利用できます。これにより、ファイルが複製されたり、ストレージが余分に消費されたりすることはありません。選択、一括アップロード、「新しいバージョンをアップロード」機能の詳細については、を参照してください。

3. 無料の商用ストックライブラリから選択（PexelsおよびPixabay）

自分の写真を用意できない場合は、「ライブラリ」をクリック（すでに画像が設定されている場合は「⋯ → ライブラリから選択」）して、商用利用可能な無料写真をPexelsやPixabayから検索できます。選択すると、システムが自動的にその写真をサイトのメディアライブラリに保存します。検索のヒントやライセンスについては、以下の「無料の商用ストックライブラリ」を参照してください。

4. 外部画像リンクを使用

「リンク」をクリック（すでに画像が設定されている場合は「⋯ → 画像リンクを使用」）して、https://で始まる公開画像URLを貼り付けます。

• 一般的なページモジュール: 公開URLを直接参照します。画像を使用する権利があること、およびソースサイトが公開読み込みを許可していることを確認してください。ソース側で画像が削除されたりURLが変更されたりすると、サイトに表示されなくなります。
• メールキャンペーンおよびインポートされたブログ記事: ニュースレターやサイト移行後に画像が壊れないように、システムは外部画像を自動的にダウンロードしてメディアライブラリに保存します（画像1枚につき最大8 MB。ストレージが不足している場合は、元のURLが保持され、アップグレードの案内が表示されます）。

---

サポートされている形式、サイズ制限、「オリジナルファイル保存」の原則

Kanorioは「オリジナルファイル保存」の原則に従っています。アップロードされたファイルをそのまま保存し、訪問者がページを閲覧する際に、エッジノードで読み込み速度が最も速い形式（WebPやAVIFなど）にその場で変換します。

ファイルサイズと寸法の制限

• ファイルあたり40 MBの制限: 空のファイル、破損したファイル、拡張子が一致しないファイルは拒否されます。AVIF、BMP、TIFF形式はサポートされていません。事前にJPG、PNG、またはWebPに変換してください。
• 巨大な画像の自動比例縮小: JPG、PNG、またはWebPファイルがクラウド配信の制限（10 MBを超える、総ピクセル数が1億を超える、または一辺が12,000ピクセルを超える）を超えた場合、システムは元の形式を維持したまま安全なサイズに自動的に縮小し、通知します。GIF、SVG、HEICについては、10 MB未満に抑えてください。
• アップロードレート保護: 不正利用を防ぐため、画像のアップロードは1分間に20回までに制限されています。一時的な制限通知が表示された場合は、1分待ってから再度試してください。
• ストレージ計算: アップロードされた画像やストックライブラリからインポートされた画像は、共有のの対象となります。

---

フォーカスとデバイス表示の調整：重要な詳細をフレーム内に収める

サイトの画像に関するよくある悩みは、「一度トリミングしたのに、公開したりモバイルで見たりすると顔や製品が切れてしまう。あるいは、デスクトップ版はワイドバナーなのにモバイルでは小さすぎて、修正のために再アップロードしなければならない」というものです。

Kanorioでは、レイアウト比率に適応する画像フィールド（ヒーローセクション、画像・テキストブロック、全幅画像、ギャラリーカード、カルーセルカード、マルチリンクカードを含む）は、元の画像を完全に保持するため、事前にトリミングする必要はありません。

1. デスクトップ、タブレット、モバイルごとに特定の比率を設定: 単一画像モジュール（ヒーローや画像・テキストなど）のレイアウト設定で、「画像比率」の横にあるデバイスアイコンをクリックし、デスクトップとモバイルに推奨される比率（例：デスクトップは21:9、モバイルは4:5または1:1）を選択するか、「カスタム」をクリックして独自の比率を入力します。特定の設定がないデバイスは、デフォルトの比率を自動的に使用します。
2. アップロード/選択後に「フォーカスを調整」が自動的に開く: 画面には元の画像全体が表示され、その下にデスクトップ、タブレット、モバイルでの表示プレビューが表示されます。
3. フォーカスを設定し、表示領域を調整:
   • フォーカスを設定: 元の画像上のフォーカス円をクリックまたはドラッグします（例：顔、製品、店舗など）。デスクトップでは、矢印キーで微調整できます（Shift + 矢印キーで10%移動）。
   • 表示領域を微調整（ズームイン）: 元の画像の白いフレームをドラッグして位置を変更します。角をクリックしてドラッグするとズームインできます（矢印キーでフレームを移動、Shift + 矢印キーでサイズ変更）。フレームが小さすぎてズームによって品質に影響が出る可能性がある場合は、ウィンドウに警告が表示されます。
4. いつでも再調整可能、再アップロード不要: 後でモジュールのレイアウトや画像比率を変更しても、システムはフォーカスポイントに基づいてフレームを自動的に再配置し、通知します。画像フィールドの横にある「⋯ → フォーカスを調整」をクリックするだけで、いつでも微調整できます。

シェア画像、製品画像、プロフィール写真はどうですか？

• すべてのアップロードポイントでオリジナルを保持: ページモジュール、SEOソーシャルシェア画像、製品画像、著者アバター、ファビコンなど、システムは事前のトリミングを一切要求せず、同じオリジナル画像をどこでも再利用できます。
• シェア画像と製品表示（自動検出、手動で「Contain/Cover」を切り替え可能）: システムは自動的に検出します。白背景、単色、または透明な製品画像はデフォルトで「Contain（全体表示）」になり、背景色が一致するように塗りつぶされるため、何も切れません。一般的な写真はデフォルトで「Cover（カバー）」になります。調整するには、「⋯ → 表示を調整」をクリックして、「Contain（背景色カスタマイズ可能）」と「Cover（ドラッグしてフレームに合わせる）」を切り替えます。
• プロフィール写真（円形アバター）: 元の画像全体が1:1の円形マスクで保存されます。「⋯ → フォーカスを調整」を使用して、円内の表示領域を再配置します。
• 「Contain（トリミングなし）」カードのスマート背景: ブログや製品リストで、正方形、縦長、または横長の画像に対して「Contain（トリミングなし）」を選択すると、システムがエッジの色をインテリジェントに検出します。白または単色の製品画像は背景色を拡張してシームレスにブレンドし、透明な画像はカードのベースカラーを表示し、多色の写真は柔らかいぼかしのグロー背景が適用されます。

---

画像の表示（ライトボックス）と自動高速化

• クリックして拡大（ライトボックス）: ギャラリー、カード、ブログ記事では、訪問者が画像をクリックすると全画面表示が開き、ピンチズーム、マウスホイールズーム、スワイプ操作、ダウンロード/共有が可能です。ダウンロードボタンの無効化、右クリック保存の禁止、透かしの追加については、を参照してください。
• 画面サイズによる自動高速化: モバイル訪問者のために画像を縮小する必要はありません。システムは異なる幅の画像リストを自動的に生成し、デスクトップには高解像度版を、モバイルには小さいバージョンを読み込みます。また、読み込み中のレイアウトシフトを防ぐために画像の高さを確保します（を参照）。

画像のALTテキストとAI自動補完

ALTテキスト（代替テキスト）は、画像の短い説明です。画像が読み込めない場合にコンテキストを提供し、視覚障害のある訪問者のためにスクリーンリーダーで読み上げられ、Googleなどの検索エンジンが画像の内容を理解するのに役立ちます。

良いALTテキストの書き方

「主要な視覚要素」を具体的に説明してください。ファイル名を使用したり、キーワードを詰め込んだりしないでください。

公開後のAI自動補完

ALTテキストの入力を忘れた場合、サイトの公開、投稿、または製品の保存後に、システムがバックグラウンドで空の画像フィールドの説明を自動的に入力します（手動で入力したテキストを上書きすることはありません）。サイトのALTテキストの品質を確認したり、AIで一括処理したりするには、を参照してください。

無料の商用ストックライブラリ（PexelsおよびPixabay）

レイアウトを検討中でまだ実際の写真がない場合は、画像ピッカーの「ライブラリ」をクリックして、無料写真を検索して適用できます。

• 2つのライブラリを同時に検索: キーワードを入力する（または検索ボックスの下にある推奨キーワードカプセルをクリックする）と、システムがPexelsとPixabayの両方の写真を同時にリストアップします。
• 自動オリエンテーションマッチング: 横長のフィールド（ヒーローカバーなど）は横長写真を優先し、縦長または正方形のフィールドは一致する比率を優先します。
• 複数選択とワンクリック取り消し: アルバム、カルーセル、または製品フィールドで、複数の写真をクリック（選択順序が右上に表示されます）し、「追加」をクリックして一度に挿入します。間違えた場合は、通知の「取り消し」をクリックして即座に元に戻せます。
• 自動入力されるALTテキスト: ストック写真に英語または中国語の説明があり、フィールドのALTテキストが空の場合、システムが自動的に事前入力します。サイトのコンテキストに合わせて微調整することをお勧めします。

ライセンスと使用上の注意

PexelsライセンスおよびPixabayコンテンツライセンスに基づき、両方のライブラリの写真は個人および商用サイトで無料で使用できます。追加の支払いは不要で、クレジット表記も必須ではありません（ただし、Kanorioは利便性のため、ピッカー内に写真家情報とソースリンクを表示しています）。

3つの境界線に注意してください：

1. 商標として使用したり、元のファイルを再販したりしない: ストック写真をブランドロゴとして商標登録に使用したり、未加工のストック写真をデジタル製品として再販したりしないでください。
2. 繊細な商用利用における肖像権と商標権の確認: 写真に認識可能な顔、有名なブランドロゴ、私有の建物、または芸術作品が含まれている場合は、主要な広告や製品ヒーロー画像に使用する前に、追加の同意が必要かどうかを確認してください。
3. 可能な限り実際の写真に置き換える: レストランの料理、実際の店舗、チームメンバー、事例紹介などでは、一般的なストック画像よりも、自分の写真を使用する方がはるかに信頼を築けます。

---

ソーシャルシェア画像（OG画像）と一般的な画像の違い

誰かがLINE、Facebook、X（Twitter）、またはLinkedInでページリンクを共有すると、プレビューサムネイルが表示されます。これを「シェア画像（OG画像）」と呼びます。これはページモジュール画像とは別に設定されます。[