ヒーローブロックの使い方ガイド

配置から入力までの流れ

ヒーローブロックは、ページを開いた瞬間に目に入る「顔」の部分です。画像とテキストの組み合わせだけで第一印象がほぼ決まるため、他のどのブロックよりも時間をかける価値があります。とはいえ操作自体は難しくありません。慣れれば3分ほどで整います。

まずはブロックを配置するところから始めましょう。

手順1 ブロックを配置する

「/hero」と入力するか、ブロック一覧からEngawaヒーローを選ぶと、ヒーローブロックが配置されます。

候補には「EW: ヒーローセクション」と「EW: 分割ヒーロー」の2つが表示されます。写真1枚を大きく見せたいときは前者、画像とテキストを左右に分けて情報量を出したいときは後者を選んでください。迷ったらまずはヒーローセクションで問題ありません。

手順2 テキストを直接編集する

配置されたプレビュー画面には仮のタイトルや説明文が表示されているので、そのままクリックして書き換えます。

上から順に、小さなアイキャッチコピー・大きな見出し・その下の説明文という3段構成です。すべてを埋める必要はありません。使わない欄を空のままにしておけば、その行ごと表示されないので、余計な余白が残ることもありません。

手順3 画像を選ぶ

「クリックで画像を選択」からメディアライブラリの画像を選びます。使いたい画像がない場合は、その場で新規アップロードできます。

画像は横幅1600px以上のものを用意してください。Engawaはこのサイズをそのままシェア用画像（OGP）にも使うため、小さい画像を入れるとSNSに貼ったときにぼやけてしまいます。逆に極端に大きい画像（10MB以上など）はアップロードに時間がかかるため、あらかじめリサイズしてからのアップロードをおすすめします。

またヒーローは横長に切り取られる仕様です。縦長で撮った写真をそのまま入れると人物の顔が切れてしまうことがあるので、横位置の写真を選ぶか、あらかじめトリミングしてからアップロードすると安全です。

なお投稿でヒーローブロックに画像を入れると、アイキャッチ画像が未設定の場合にかぎり、自動的にその画像がアイキャッチとして設定されます。すでに設定済みの場合は上書きしません。一覧ページ用にあらためて画像を選び直す手間が省ける仕組みです。

手順4 コンテンツ位置を調整する

画像を入れたら、右側の「コンテンツ位置」でテキストの縦位置・横位置・文字揃えを設定します。基準は見た目のバランスだけでなく、画像の主題とテキストが重ならないようにすることです。

判断に迷ったときは、写真の中で一番見せたいものがどこにあるかを先に決めてください。人物の顔、料理、店内の抜け感などです。それが決まったら、テキストは反対側に寄せます。人物が右にいるなら文字は左下、料理が中央にあるなら文字は上、といった具合に置いていくと自然にまとまります。

実際の使用例として、Engawa開発元が運営する写真館サイト「スマイリングスタジオ」のトップページをご覧ください。人物が右寄りに立っている写真に対して、テキストを左下に配置しています。ここで説明した判断を実際のページでどう適用しているかが確認できます。

調整が終わったら、必ずスマートフォン表示でも確認してください。パソコンでは余白にきれいに収まっていた文字が、スマホでは画像の中央に重なってしまうことがよくあります。エディター上部のプレビューからモバイル表示に切り替えられます。

ボタンと実績バッジ、見出しの調整

ボタンの設定

ボタンは最大2個まで配置できます。片方だけ使いたい場合は、そのボタンのラベルとリンク先を両方とも空欄にしてください。どちらか一方だけを空にすると、行き先のないボタンが残ってしまうことがあります。

2個使う場合は、役割を分けると効果的です。1つ目は最も進んでほしい行き先（予約・お問い合わせなど）、2つ目はまだ迷っている方向けの行き先（料金を見る・実績を見るなど）にすると、どちらの読み手も次の行動に移れます。

実績バッジの使いどころ

一般の方が見て違和感のない自然な数字がある場合は、積極的に使うのがおすすめです。「創業20年」「撮影実績1,200組」のように、聞いた人がそのまま受け取れる数字が向いています。

逆に、根拠を説明しづらい数字は避けてください。たとえば「満足度98%」は、どうやって測ったのかを聞かれたときに答えられないなら使わない方が安全です。ページの内容と関係のない数字も同じで、読み手が「これは何の数字だろう」と引っかかった時点で、ページ全体の信頼が下がってしまいます。使える数字が見つからなければ、バッジは空のままで構いません。

見出しが長いときの調整

プロンプトビルダーで一気にページを作ると、見出し(h1)が長くなりバランスが崩れることがあります。読みやすさを優先したいときは改行、区切りの位置のバランスが悪いときは文字サイズの変更で調整します。

目安は全角15〜20文字以内、改行するとしても2行までです。3行になるとスマートフォンで画像がほとんど隠れてしまい、写真を大きく見せるというヒーローブロック本来の役割が失われます。改行を入れる位置は、文の意味の切れ目に合わせると自然に見えます。