Utopiaでサイトを立ち上げたとき、トップページに何を並べるか迷ったことはないでしょうか。
ヒーロー画像、サービスの特徴、料金表、新着記事。これらを一つずつページビルダーや追加プラグインで組み上げるのは、意外と手間がかかる作業です。
デザインの知識がないと、セクションの順番を変えるだけでもレイアウトが崩れてしまうこともあります。
Utopiaには、この悩みに応える「フロントページ設定」という管理画面が標準で用意されています。
管理画面の「Utopia」メニューから開けるこの一画面だけで、トップページの構成をまとめて管理できます。
9つのセクションをドラッグで並べ替えられる
フロントページ設定には「セクション並び順」という項目があります。
ここでは、以下の9つのセクションをドラッグ操作だけで自由に並べ替えられます。
ヒーローセクション、固定ページのコンテンツ、ライブデモセクション、プラグイン不要の強み、カスタムコンテンツ、特徴セクション、料金セクション、新着記事セクション、CTAバナーセクションです。
コードを書いたり、固定ページのブロックを一つずつ移動させたりする必要はありません。
この並び順が、そのままトップページの表示順になります。
なお「固定ページのコンテンツを使用」を有効にすれば、下記の各セクションの代わりに、フロントページ用の固定ページで作った内容を表示することもできます。
すでに固定ページでトップページを作り込んでいる場合は、この切り替えだけで対応できます。
主要セクションでできること
ヒーローセクションでは、見出し（strong・em・brタグに対応）とサブテキスト、メイン・サブの2つのボタン、背景画像、そして文字を読みやすくするグラデーションオーバーレイまで設定できます。
背景画像はメディアライブラリから選ぶだけなので、コーディングの知識は必要ありません。
特徴セクションは最大10件まで登録可能です。
それぞれの項目に、絵文字アイコン・タイトル・説明文を入力する仕組みになっています。
料金セクションでは、PersonalプランとAgencyプランの2枚のカードを表示できます。
ボタンのリンク先をPayPalの購入ページに設定するといった使い方が想定されています。
新着記事セクションは、タイトルと表示件数を指定するだけで、投稿一覧を自動的に反映してくれます。
CTAバナーセクションは見出し・サブテキスト・ボタンをまとめて設定でき、トップページの締めくくりとして使えます。
ヒーローと特徴セクションの間には「カスタムコンテンツ」という枠もあり、任意のテキストやHTMLを差し込めます。
導入実績やお客様の声など、既定のセクションに当てはまらない内容を追加したいときに使える場所です。
ほかにも、Corporate・Blog・LPといったデモへのリンクを並べる「ライブデモセクション」や、WebPやサイトマップなど内蔵機能の強みを紹介する「プラグイン不要の強み」セクションも用意されています。
日本語と英語を項目ごとに個別入力できる
Polylangが有効な環境では、ヒーローの見出しから特徴セクションの説明文まで、ほとんどの項目が「日本語」と「English」に分かれて表示されます。
一つの設定画面の中で言語ごとに文言を書き分けられるため、翻訳のたびに別の場所を探したり、翻訳専用の別プラグインを併用したりする必要がありません。
多言語サイトのトップページを整えたいときも、迷う場所が少なくて済みます。
まとめ
Utopiaの「フロントページ設定」を使えば、ページビルダーを別途インストールしなくても、ヒーローから料金表、新着記事まで、トップページに必要な要素を一つの画面でまとめて組み立てられます。
セクションの並び順もドラッグ操作だけで変えられるため、公開後に構成を見直したくなったときも気軽に試せます。
まずは管理画面の「Utopia」から「フロントページ設定」を開き、9つのセクションの並び順を確認するところから始めてみてください。
