ANTHEMのトップページでメインコンテンツを構成している3つの要素

ANTHEMのヘッダーコンテンツ下のメインンテンツは、シンプルな3つの要素とフリースペースのみで構成されています。いかにシンプルでいて、かつ汎用性が高く、テンプレートとしての役割を満たすかという条件で仕様を考えました。

• レイヤー画像コンテンツ
• テーマ一覧
• 記事カルーセル

一番上の下記箇所は2つのフリースペースを組み合わせて制作しています。一つは見出しとリード文、その下に画面フル幅の画像をセットしています。

レイヤー画像コンテンツ

これはANTHEMの特徴的な機能ですが、汎用性が高く使いやすいコンテンツです。レイヤー画像無しの場合は、シンプルな背景画像コンテンツとしてお使いいただけますし、ボタンを表示して下層へのナビゲーションとしても活躍します。レイヤー画像をセットした場合は、テキストや画像の位置を調整できるので、全く違ったコンテンツとして表現することも可能です。

テーマ一覧

こちらはカスタム投稿タイプ「商品（テーマ）」で作成した画像と説明文を連動してトップページに表示するためのコンテンツになります。表示する商品（テーマ）の数はデバイスごとに調整できるので、スマホでは数を少なめに表示できます。

記事カルーセル

こちらは、ブログかお知らせからコンテンツを選択してカルーセル形式で表示できるコンテンツです。記事の並び順や表示する記事数も変更いただけます。記事数に合わせてカルーセルの動くスピードも見やすく調整しておきましょう。