Treeのヘッダーコンテンツは、全画面に表示される背景のタイプを3種類から選択できる仕様です。通常の画像、MP4動画、YouTube動画から選択いただけます。
画像を選択した場合、スライダーとして最大3枚まで設定できる仕様になります。MP4動画、YouTube動画では動画を一本セットできる仕様です。それぞれのコンテンツ上に表示するキャッチフレーズのタイプを画像かテキストから選択できます。もっとも特徴的なのは、キャッチフレーズのタイプを画像にした場合、その画像の背景にTreeのデザインにマッチした正方形の背景を表示できる点です。
これは下層ページのヘッダーデザインとの整合性を保つ機能でもあり、サイト全体で統一性が生まれます。下層ページのキャッチフレーズのタイプについては、こちらの記事で確認できます。
デモサイトの中央のオレンジ色の正方形は、「キャッチフレーズ画像の背景の設定」という項目で設定できます。サイト全体で違和感をなくすために正方形のサイズは決め打ちですが、背景の色や透明度は自在に調節可能です。そこに重ねるロゴ等の画像サイズも任意に拡大・縮小が可能な上に、プレビューでリアルタイムに変化を確認できるので、重要なトップページのアイコン作りがスムーズかつ、確実に行えるというわけです。
また、コンテンツ(テキスト・画像問わず)の表示位置は、左右か中央に簡単に変更できます。画像やキャッチフレーズの長さによって最適な位置に調整してみましょう。ユーザーがサイトを開いて最初に目に入るコンテンツなので、背景コンテンツとのバランスを考えて的確な位置に設定しておいた方がいいですね。