「DIVA」ではファーストビューの印象を強めるために、トップページコンテンツをヘッダーコンテンツとフッターカルーセルのみに限定した究極のミニマルスタイルを追求しています。

サイトを開くと目に飛び込むのはフルスクリーンで表示されるヒーローヘッダー画像のみ。シンプルでありながら強烈に突き刺さる個性がユーザーの視線を釘付けにします。

従来のTCDシリーズに触れている旧知のユーザーからすれば少しシンプルすぎるのでは?という声も聞こえてきそうですが、大胆に他のコンテンツをそぎ落とすことで、このコンテンツに一極集中することを想定しています。
これはある意味、TCDのヒーローヘッダーは単一でもメインを張れるほどの破壊力と魅力を備えるコンテンツとして完成したという見方もできるかもしれません。

動画の設定はできない仕様ですが、静止画でこれほど臨場感のある、またワクワク感を伝えられるスライダーを実装できるのにはワケがあります。

まず、グローバルメニュー部分にご注目ください。ここは通常オビとなってグローバルメニューはここですよと示すサイトの指定席のようなポジションですが、当テーマではその存在を忘れてしまうほどにヘッダー画像に溶け込んでいます。
さらに、キャッチフレーズやボタンの出現間隔にも秘密があります。各スライダーには個別にズームイン/ズームアウトのアニメーションをつけることができるのですが(OFFも可)、この動きを遮ることなく心地よいリズムを感じさせるよう表示されるのです。
見た目に気持ちいいという点はUI/UXと深くつながりがあります。そして、それらの要素をこつこつと積み重ねた上に、サイトが提供できる新たな価値を築くことができるのです。

画像スライダーは最大で3枚まで設定可能で、各スライダーコンテンツはキャッチフレーズやサブタイトルのフォントスタイル、カラー、位置、さらにはスライダー画像のオーバーレイやグラデーション効果など実に繊細な表現が可能になっています。前述のズームイン/ズームアウトのアニメーションと併用することでイキイキとしたライブ感を演出できますので、ぜひとも使っていただきたい機能です。

静止画でもダイナミックな表現ができるズームイン/ズームアウトアニメーションを搭載

さらに当テーマでは、モバイル用のヘッダーコンテンツの表示についても考慮し、設計されています。
従来のテーマではPCと同コンテンツをスマホ上でも表示する仕様でしたが、スマホの小さな画面ではキャッチフレーズや説明文がスクリーンを埋め尽くし、雑多な印象を与えることがありました。そこで、スマホでもスッキリとした見た目に仕上がるように、ロゴのみ、またはキャッチフレーズのみというように柔軟に設定ができるようになっています。当然、従来のようにPCと同じ表示にすることもできます。

関連記事