詳細ページ

印刷用画面
印刷
対象製品
OB AI DS
キャッチビジュアルとヒーローヘッダーの活用方法、推奨サイズを教えてください。
キャッチビジュアルパーツとヒーローヘッダーについて

キャッチビジュアルパーツはおりこうブログDS・AI・おりこうブログにあり、
ヒーローヘッダーパーツはおりこうブログAI・おりこうブログに設置していただけます。

いずれも画像やキャッチコピーを効果的に使用してウェブサイトの第一印象を良くすることで、掲載内容に興味を持っていただくことを目的としています。

表示サイズ等異なりますので、それぞれの特徴を以下に説明いたしました。

＜目次＞
(1)各パーツの活用方法・画像サイズ
 
(2)パーツ設置方法
　

(1)各パーツの活用方法・画像サイズ
キャッチビジュアルパーツ（おりこうブログDS・AI・おりこうブログ）
サイトを訪れたときに最初に目に入るパーツです。
メイン画像（横幅1020pxもしくは1210px）の左右に画像を表示するようなレイアウト、もしくは左右に余白が生まれるようなレイアウトになります。

【サイズ】
おりこうブログDS・AIの初期値は 1020px × 400px です。
おりこうブログの初期値は 1210px × 400px です。
※おりこうブログAIにて、ご利用のデザインが1210pxの場合はおりこうブログと同様に初期値が1210px × 400pxとなります。
※縦幅を変更している場合がございますので、確認をご希望の際はカスタマーセンターへご連絡ください。
 おりこうブログDS WEBマニュアルサイトはこちら
 おりこうブログAI WEBマニュアルサイトはこちら
 おりこうブログ WEBマニュアルサイトはこちら

↑※メイン画像の左右に画像を表示している場合
　

ヒーローヘッダー（おりこうブログAI・おりこうブログ）
画面いっぱいにメインビジュアルを表示しますので、閲覧者に対し強いインパクトを残す効果が見込まれます。

【サイズ】
初期値は 16：9 の比率（初期値 1920px × 1080px ）です。

ブラウザの表示サイズによって表示幅が変動しますので、すべての閲覧環境に合わせた調整は難しい可能性がございます。極力、画像の中央に表示をご希望の文字やビジュアルを配置されることをお勧めいたします。
※縦幅を変更している場合がございますので、確認をご希望の際はカスタマーセンターへご連絡ください。
 おりこうブログAI WEBマニュアルサイトはこちら
 おりこうブログ WEBマニュアルサイトはこちら



ヒーローヘッダーとキャッチビジュアルの使い分けについて

キャッチビジュアルは、ヒーローヘッダーと比較するとより横長な表示になるため、あまり縦にスペースを使いたくない方、ページの中身をより上部に掲載されたい場合におすすめのパーツです。

ヒーローヘッダーは、キャッチビジュアルより縦の比率が長いことが多く、ディスプレイやブラウザのサイズによっては、ファーストビューで下のコンテンツが隠れてしまうことがあります。
キャッチビジュアルのようにメイン画像の左右に画像を表示しませんので、１枚の画像（参考値1920px）を閲覧者のディスプレイに応じて最大点のサイズで表示されたい場合におすすめです。


(2)パーツ設置方法
　
おりこうブログの場合（キャッチビジュアル・ヒーローヘッダー）
見たまま編集画面左上の[パーツ編集モード]をクリックします。


↓

[パーツ配置]をクリックし、[キャッチビジュアル]または[ヒーローヘッダー]をドラッグしてトップエリアの領域へ移動し、[保存]してください。


↓

最後に[パーツの変更を適用]をクリックし、操作を終了してください。


　 おりこうブログAIの場合（キャッチビジュアル・ヒーローヘッダー）

[パーツ]をクリックします。
[キャッチビジュアル]または[ヒーローヘッダー]をドラッグしてトップエリアの領域へ移動し、[適用する]をクリックしてください。

　おりこうブログDSの場合(キャッチビジュアル)
キャッチビジュアルパーツ配置
[パーツ配置]をクリックします。
[キャッチビジュアル]をトップエリアの領域へ移動、黄色背景で「ここにパーツを追加」メッセージが表示されたらドラッグを終了してください。





更新日［2026年04月23日］ No.1342