コンテンツにスキップ

記事の「アイキャッチ画像(サムネイル)」を設定する方法

旧マニュアル番号: No.20

「アイキャッチ画像」とは、ブログの一覧ページやSNSでシェアされた際に表示される、その記事の「顔」となる画像のことです。サムネイル画像とも呼ばれます。魅力的的なアイキャッチ画像は、記事のクリック率を大きく向上させる重要な要素です。


1. アイキャッチ画像が表示される場所

  • ブログやお知らせの一覧ページ
  • 記事ページの冒頭
  • トップページの「最新記事」セクション
  • FacebookやX (Twitter) などでシェアされた際のプレビュー

2. アイキャッチ画像の設定欄

CMSの入力フォームの中に、画像を設定するための専用フィールドがあります。通常、「Thumbnail Image」「Main Image」「アイキャッチ画像」といった名前が付いています。

「Click to upload an image」や、雲のマークが表示されているエリアが目印です。

3. アイキャッチ画像を設定する手順

  1. 画像アップロードエリアをクリック: 入力フォーム内の、アイキャッチ画像を設定するエリアをクリックします。

  2. ファイル選択ウィンドウが開く: お使いのパソコンのファイル選択ウィンドウ(エクスプローラーやFinder)が開きます。

  3. 画像ファイルを選択: あらかじめ記事用に準備しておいた画像ファイルを選択し、「開く」ボタンをクリックします。

  4. アップロードとプレビュー確認: 画像がWebflowにアップロードされ、設定欄にプレビューが表示されます。意図した画像が正しく設定されたかを確認してください。

4. 画像を差し替える・削除する方法

  • 差し替え: 設定された画像の上にマウスカーソルを合わせると表示される「Replace」ボタンをクリックすると、再度ファイル選択ウィンドウが開き、別の画像に差し替えることができます。
  • 削除: 画像の上にマウスカーソルを合わせると表示される「ゴミ箱」アイコンをクリックすると、設定した画像を削除し、未設定の状態に戻すことができます。

5. 推奨される画像について

  • 画像サイズ(寸法): サイトのデザインによって最適な画像の縦横比(アスペクト比)や推奨サイズ(例: 横1200px × 縦630pxなど)が決められている場合があります。制作会社から指示があれば、それに従ってください。統一されたサイズの画像を使うと、一覧ページが美しく整います。
  • ファイルサイズ(容量): ページの表示速度に影響するため、ファイル容量はなるべく小さく圧縮することが推奨されます。(目安: 500KB以下)
  • 著作権: 使用する画像は、ご自身で撮影したものか、利用許諾を得たもの、あるいは商用利用可能なフリー素材など、著作権に問題がないものを必ず使用してください。

次のステップ: 記事の顔となる画像が設定できました。次は、記事を分類し、整理しやすくするための「No.21 記事の「カテゴリー」を選択する方法」です。