wordpressマルチヒーローヘッダープラグイン
- Digital2,000 JPY
デモサイトはこちらです https://tabetendo.com/plugins/
WordPressのファーストビューを、もっと自由に、もっと美しく。
画像、文字、ボタン、アニメーション、レスポンシブ調整まで。 印象的なヒーローヘッダーを、ブロックエディターだけで作成できるWordPressプラグインです。 複数画像スライダーにも、1枚画像の美しいヒーローバナーにも対応。 コードを書かずに、サイトの第一印象を大きく変えることができます。
サイトの第一印象で、こんなお悩みはありませんか？
・トップページの見た目が普通で、印象に残りにくい ・画像スライダーを入れたいけれど、設定が難しい ・文字やボタンを画像の上に自由に配置したい ・フェードやズームなどの動きを細かく設定したい ・テーマ標準のヒーローエリアでは自由度が足りない ・複数のスライダープラグインを使い分けるのが面倒 その悩みを解決するのが、Unified Hero Header Suite です。 Unified Hero Header Suiteは、用途の異なる2種類のヒーローヘッダーを1つのプラグインで作成できます。
異なる2つのヒーローヘッダー
1. 自由配置ヒーロースライダー 複数画像を使ったダイナミックなファーストビューを作成できます。 背景画像を切り替えながら、前面に文字・画像・ボタンを自由に重ねられます。 企業サイト、地域活動サイト、キャンペーンページ、政策紹介ページなど、視覚的に訴求したいページに最適です。 2. ヒーローバナー 1枚の背景画像を使って、シンプルで印象的なヒーローエリアを作成できます。 キャッチコピー、説明文、ボタン、オーバーレイ画像を配置し、フェードやズームなどの演出を加えられます。 サービス紹介ページ、店舗サイト、ランディングページにおすすめです。 ブロックエディターで直感的に編集 Unified Hero Header Suiteは、WordPressのブロックエディターに対応しています。 専用ブロックを追加し、サイドバーから画像・文字・ボタン・アニメーション・端末別設定を調整できます。 HTMLやCSSを書かなくても、見た目を確認しながらヒーローヘッダーを作成できます。 主な機能 複数画像スライダー 複数の背景画像やパネルを配置し、スライドやフェードなどで切り替えられます。 複数画像の登録 パネル型レイアウト スライド切り替え フェード切り替え ズーム切り替え ぼかし解除演出 自動再生 切り替え速度の調整 前面レイヤー配置 背景画像の上に、文字・画像・ボタンを自由に配置できます。 文字レイヤー 画像レイヤー ボタンレイヤー レイヤーごとの位置調整 レイヤーごとのサイズ調整 レイヤーごとの文字サイズ調整 ボタンリンク設定 複数レイヤー配置 ポスターやチラシのようなビジュアルを、WordPress上で再現しやすくなります。 切り替え効果・画像エフェクト 画像の切り替えだけでなく、表示中の画像そのものにも動きを加えられます。 切り替え効果 フェード スライド ズーム ぼかし解除 なし 表示画像エフェクト ズームイン ズームアウト Ken Burns風 左右パン ぼかし モノクロ解除 なし イージング設定 動きの印象を決めるイージングも選択できます。 linear ease ease-in ease-out ease-in-out なめらか スナップ バウンス ゆっくり自然に動かす、メリハリをつける、印象的に見せるなど、サイトの雰囲気に合わせた演出が可能です。 フォント設定 前面レイヤーの文字やボタンは、フォントを個別に設定できます。 キャッチコピー用フォント 説明文用フォント ボタン用フォント レイヤーごとのフォント指定 サイトのブランドイメージに合わせて、力強く、上品に、親しみやすくなど、文字の印象を調整できます。 PC・タブレット・スマートフォンで個別調整 ヒーローヘッダーは、PCではきれいに見えても、スマートフォンでは文字が大きすぎたり、画像の位置がずれたりしがちです。 Unified Hero Header Suiteでは、PC・タブレット・スマートフォンごとに個別設定できます。 端末別に調整できる項目 ヒーローエリアの高さ 背景画像の表示位置 レイヤーの横位置 レイヤーの縦位置 レイヤーの幅 見出し文字サイズ 説明文文字サイズ ボタン文字サイズ 余白 オーバーレイ画像のサイズ テキストの配置 編集画面で端末別の見え方を確認しながら調整でき、公開ページでも編集時に近い表示を目指せます。
こんなサイトにおすすめ
コーポレートサイト 企業理念、サービス、実績、採用情報などを印象的に伝えられます。 店舗サイト 店舗写真、メニュー、キャンペーン、予約導線を美しく配置できます。 自治体・団体・地域活動サイト 活動内容、メッセージ、地域の魅力をビジュアルで伝えられます。 ランディングページ 商品・サービスの魅力を、ファーストビューで強く訴求できます。 個人ブランドサイト プロフィール写真、キャッチコピー、活動紹介を印象的に見せられます。
このプラグインででできること
・トップページの印象を大きく変える ・ファーストビューに動きとデザイン性を加えることで、サイト全体の印象を高めます。 ・画像と文字を自由に組み合わせる ・背景画像、キャッチコピー、ボタン、人物画像などを重ね、オリジナル性の高いデザインを作れます。 ・スマホ表示まで細かく調整する ・PCだけでなく、タブレット・スマートフォンでも見やすい表示に調整できます。 ・複数の演出を使い分ける ・フェード、スライド、ズーム、Ken Burns風など、ページの雰囲気に合わせた動きを設定できます。 ・コードを書かずに編集する ・WordPressのブロックエディター上で設定できるため、専門的なコーディング知識がなくても扱えます。
導入メリット
制作時間を短縮 ヒーローヘッダー制作に必要な画像配置、文字設定、アニメーション、レスポンシブ調整を1つのブロックで行えます。 デザインの自由度が高い 画像・文字・ボタン・レイヤーを組み合わせ、テーマ標準機能では難しい表現が可能になります。 サイトの訴求力を高める 訪問者が最初に見るエリアを魅力的にすることで、サービスや活動内容を印象づけやすくなります。 複数用途に使える 企業サイト、店舗サイト、団体サイト、LP、キャンペーンページなど、幅広い用途で活用できます。 使用イメージ 企業サイトのトップページに 大きな背景画像に企業メッセージとお問い合わせボタンを配置。 信頼感のあるファーストビューを作成できます。 地域活動・政治活動サイトに 人物写真、活動風景、キャッチコピーを組み合わせ、想いや政策を視覚的に伝えられます。 店舗サイトに 店舗外観、商品写真、キャンペーン画像をスライド表示し、来店や予約につなげられます。 商品・サービスLPに メインコピー、補足説明、CTAボタンを配置し、問い合わせや購入への導線を強化できます。 機能一覧 機能 内容 複数画像スライダー 複数画像を切り替えて表示 1枚画像バナー シンプルなヒーローバナーを作成 文字レイヤー 画像上に文字を配置 画像レイヤー 人物画像やロゴなどを重ねて配置 ボタンレイヤー CTAボタンを配置 切り替え効果 フェード、スライド、ズームなど 画像エフェクト Ken Burns、ズーム、パン、ぼかしなど イージング 動きの加速感を選択 フォント設定 要素ごとにフォントを選択 レスポンシブ設定 PC・タブレット・スマホ別に調整 ブロック対応 Gutenbergエディターで編集可能 こんな方におすすめです WordPressで印象的なトップページを作りたい方 画像スライダーとヒーローバナーを使い分けたい方 コーディングなしでデザインを整えたい方 スマートフォン表示まで細かく調整したい方 サイト制作を効率化したいWeb制作者 クライアント向けサイトに使いやすいヒーローブロックを探している方 企業・店舗・団体サイトの見栄えを改善したい方
よくある質問
Q. コードの知識は必要ですか？ いいえ。基本的な設定はWordPressのブロックエディター上で行えます。 Q. スマートフォン表示にも対応していますか？ はい。PC・タブレット・スマートフォンごとに高さ、文字サイズ、配置などを個別に調整できます。 Q. 画像を複数枚使えますか？ はい。自由配置ヒーロースライダーでは複数画像を設定できます。1枚画像で見せたい場合はヒーローバナーを使用できます。 Q. ボタンを配置できますか？ はい。画像上にボタンを配置し、任意のリンクを設定できます。 Q. フォントは変更できますか？ はい。文字やボタンのフォントを個別に設定できます。 Q. テーマに依存しますか？ 基本的にはブロックエディター対応テーマで利用できます。ただし、テーマ側のCSSやレイアウト設定により表示が影響を受ける場合があります。 サイトの顔を、もっと魅力的に。 トップページのファーストビューは、訪問者に最初の印象を与える重要な場所です。 Unified Hero Header Suiteなら、画像、文字、ボタン、動き、レスポンシブ表示をまとめて調整でき、伝えたいメッセージをより印象的に届けられます。 WordPressで、もっと自由に、もっと美しいヒーローヘッダーを。