画像の追加方法

Webflow サイトに画像を追加するには、次の手順に従います：

• 追加パネル
• アセットパネル
• Quick find
• Your computer

重要：アセットパネルに画像をアップロードすると、Webflow はレスポンシブな画像のバリアントを作成します。ただし、Webflow にアップロードする前に画像を最適化することをお勧めします。

ウェブで使用される最も一般的な画像ファイルタイプについて詳しく説明します。

The Add panel

追加パネルから画像要素を追加するには

1. Add panelを開く
2. 画像要素をクリックし、Webflow キャンバス上にドラッグします。

プレースホルダーを自分の画像ファイルで置き換える：

1. キャンバス上の画像要素を選択します。
2. Element settings panelを開く
3. Choose imageをクリック
4. 以前にアップロードした画像を選択するか、"雲 "アイコンをクリックして、assets panelに新しい画像をアップロードします。

アセットパネル

アセットパネルに画像をアップロードしたら、キャンバスに画像をドラッグできます。

アセットパネルに画像をアップロードするには、3つの方法があります：

1. アセットパネルの "雲 "アイコンをクリックし、コンピュータからアップロードしたい画像を選択します。
2. 画像をコンピュータからアセットパネルにドラッグ＆ドロップします。
3. 画像をキャンバスに直接ドラッグ＆ドロップ

Quick find

Quick find(クイック検索)は、Webflow Designer に組み込まれた強力な検索バーです。Command + E（Mac の場合）または Control + E（Windows の場合）でクイック検索を起動し、アセットパネルにアップロードした画像を名前で検索できます。

コンピューターから

コンピュータからキャンバスに直接画像をドラッグできます。

画像アップロードのトラブルシューティング

画像をアップロードしようとして「upload faild(アップロードに失敗しました)」というアラートが表示された場合は、以下を確認してください：

• 画像ファイル： 画像ファイルが破損していないこと、サポートされている正しいファイル拡張子があること、4MBを超えないことを確認
• インターネット接続を確認してください： 低速のインターネット接続（最低5mbps）でも画像をアップロードできるはずです。インターネットの速度に問題がないことを確認するには、インターネット接続を再確認し、信号強度を確認。 インターネット接続のトラブルシューティング方法については、こちらをご覧ください。
• ブラウザの拡張機能を確認してください： ブラウザの拡張機能によっては、Webflow Designer に画像をアップロードする際に問題が発生する場合があります。インコグニートまたはプライベートブラウジングウィンドウから画像をアップロードしてみるか、ブラウザ拡張機能のトラブルシューティング方法をご覧ください。

画像設定の編集方法

画像設定にアクセスするには4つの方法があります。まず、キャンバス上で画像要素を選択します：

1. 画像要素をダブルクリック
2. キーボードのEnter/Returnを押す
3. 画像要素ラベルの横にある「歯車」アイコンをクリックします。
4. Dボタンを押すか、エレメント設定パネルに進む

画像設定では、以下のことができます：

• 画像の選択 - プレースホルダーをAssets panelから任意の画像に置き換えることができます。画像要素をダブルクリックし、Image settingsモーダルからChoose imageをクリックします。
• 画像サイズの変更 - 画像の幅または高さにピクセル値を指定できます。これにより、すべてのブレークポイントの画像サイズが設定されますが、各ブレークポイントのElement settings panelで幅と高さを設定することで、これらの値を上書きすることができます。また、画像の角をつかんでドラッグすることで、サイズを変更することもできます。画像のサイズを変更しても、親要素より大きくなることはありません。
• 画像をHiDPIにする - このボックスをチェックすると、画像のピクセル幅が半分に設定されます。つまり、幅600pxの画像は300pxで表示されます。このピクセル密度は、HiDPIディスプレイを持つほとんどのモバイルデバイスで画像が美しく見えることを保証します。
• 読み込み動作の設定 - 画像の読み込み方法を変更できます。「Lazy "はページ読み込み時に折りたたみより上に画像を読み込み、サイト訪問者がスクロールしたら折りたたみより下に画像を読み込みます。"Eager "はサイトページが読み込まれたらすぐにページ上のすべての画像を読み込みます。

画像の置き換え方法

キャンバスに画像を追加した後は、いつでも差し替えることができます。画像を置き換えるには

1. キャンバス上の画像を選択する
2. Element settings panel > Image settings
3. Replace image をクリックしてAsset panelを開く
4. 既存の画像を選択するか、新しい画像をアップロードする

画像のスタイリング方法

スタイルパネルを使って画像をスタイル設定できます。背景スタイルのように、画像には適用されないスタイリング・オプションもあることに注意してください。画像でオーバーレイを使用するには、代わりに背景画像を使用できます。

画像をスタイリングするためにクラスを使うことができます。複数の画像にクラスを適用できるので、非常に時間の節約になります。複数の画像にクラスを適用できるため、非常に時間の節約になります。これは、要素設定パネルではなく、スタイルパネルでサイズを指定する場合に特に便利です。クラスを使えば、各画像のサイズを手動で指定する必要がなくなります。

ここでは、画像に個性を与えるために使用できるスタイルプロパティの例をいくつか紹介します：

• Radius： つまたは複数のコーナーに丸みを設定できます。半径を設定するには、Style panel > Border > Radiusに進みます。
• Drop shadow: 画像をページから飛び出したように見せることができます。ドロップシャドウを設定するには Style panel > Effects > Box shadows.
• Filters: ぼかし、グレースケール、セピアなど、さまざまなフィルターを使用できる。フィルターを設定するには Style panel > Effects > Filters.

altテキストの追加方法

Altテキストは、画像の「中に」隠されている（キャプションのようにサイトページには表示されない）画像の簡単な説明で、画像を表示または閲覧できない場合に、その画像の意味を理解できるようにします。これにより、目の不自由な方や視覚障害をお持ちの方にも画像の内容を理解してもらったり、画像ファイルが読み込まれていない場合やユーザーが画像を表示しないことを選択した場合に、画像の代わりに表示したりすることができます。検索エンジンはaltテキストを使用して、画像が何を示しているかを判断します。

画像にaltテキストを追加するには

1. キャンバス上の画像を選択する
2. Element settings panel > Image settings
3. Alt textでCustom descriptionを選択
4. ドロップダウンの下のフィールドにaltテキストを記入

画像が装飾的な場合（その画像が意味のある情報を提供しない場合）、altテキストのドロップダウンから「decorative」を選択することもできます。

また、アセットパネルでaltテキストを設定し、アセットパネルからサイトに画像を追加するたびに、画像にaltテキストが表示されるようにすることもできます。

ダイナミックaltテキストの追加方法

画像要素は、ダイナミックコレクションリストとコレクションテンプレートページで使用できます。

これらの画像にダイナミックなaltテキストを追加する：

1. 画像を選択
2. Element settings panel > Image settings
3. altテキストを取得する
4. 画像のaltテキストを含むフィールドを選択する（例："Name")