強烈なインパクトでユーザーの視線を鷲掴みにするWordPressテーマ【MAXX】のトップページについて

2017

1.26

自社メディアでの集客、企業ブランディング、収益化するためのマーケティング動線を確保するためのコーポレートサイトをWordPressブログで構築したい。」そんな事業者や経営者の意慾を実現するためにWordPressテーマ【MAXX】は生まれました。

MAXXはトレーニングジムやスポーツ洋品店などのホームページをイメージし、これまでに無い強烈なインパクトでユーザーの視線を鷲掴みにするファーストビューを実現していますので、ぜひデモサイトをご覧ください↓

maxx_980_400

強烈なインパクトでユーザーの視線を鷲掴みにするトップページ

maxx01

maxx09

MAXXデモサイトのトップページでは、正方形(1×1)・縦長(2×1)・横長(1×2)を判別して自動でレイアウトされる【グリッド】を選択しています。また、左右対称的(シンメトリー)な画像を採用し、読者の視線を中央に集めコンテンツに引き込む視覚的な流れを作ることで強烈なインパクトを残しています

また、MAXXのトップページに表示(非表示)するコンテンツは、【グリッド】【スライダー】【動画(MP4)】【Youtube動画】から選択することができます。

maxx05

動画をヘッダーコンテンツに設定した場合のイメージ

スライダーをヘッダーコンテンツに設定した場合のイメージ

スマートフォン表示でも強烈なインパクトを実現したMAXX

maxx-s

このように、”ホームページに訪れた読者の視線の流れを意識して画像をレイアウトする”ことで、ブランディングを重視する企業のコーポレートサイトや、個人の趣味や特技を発信していくブログとして活用しても、影響力のあるオウンドメディアを育てていくことができます。

ここでは、【MAXX】の最大の特徴でもある、グリッドなトップページコンテンツを最大限に活かすためのバリエーションイメージを作りましたので参考にしてください

1枚の画像をフルスクリーン表示することで印象を与える

MAXX00002

MAXXのトップページにMP4の動画やYoutube動画を表示すればフルスクリーンのヒーローヘッダーが完成しますが、あえて【グリッド】を選択し、元々1枚の画像を分割して設定することで、1枚の画像をフルスクリーン表示して魅せることも可能です。

MAXX07

各コンテンツ画像ごとに、リンクやキャッチフレーズ、ボタンを設定することができますので、ホームページ内を回遊させる仕掛けを作ることができます。

maxx-30

パソコンだけではなく、スマートフォン表示でも1枚の画像をフルスクリーン表示したい場合には、WordPress管理画面にあるTCDテーマオプションからいつでも【レスポンシブデザインを利用しない】に切り替えることができます。

maxx22

ホームページのロゴも、テーマオプションから簡単に設定することができます。

maxx20

 

サイト全体のメインカラーを統一することでコンセプトを伝える

MAXX000004

読者の記憶に残るようなホームページを完成させるためには、「適当にインパクトのある画像を配置すれば良い」というわけではありません。逆にそれぞれの印象が強くさまざまな色の画像を設定してしまうと、ホームページ全体がチグハグな印象になってしまいます

そのため、ホームページのコンセプトと合致した1つのメインカラーを設定して、各画像を厳選するようにしましょう。MAXXではメニューバーや見出しなどのカラー変更も自身でカスタマイズする必要なく、テーマオプションからカラーピッカーを使った直観的な操作で変更することができます。

maxx21

また、グリッドヘッダーコンテンツは最大8分割まで表示することができるため、多彩なレイアウトが可能な仕様になっています。(↓は6枚の画像を登録した際のイメージです。)

MAXX40

 

中央にメイン画像を配置して視線を四方へ散らす

MAXX00003

例えばスタジオミュージシャンであれば、上部中央にメインの画像を配置して視点を集め、強すぎない補足的な画像を周囲へ配置することで、視線を四方へ散らし各コンテンツに誘導することができます

また、5人組(8人まで可能)のロックバンドであれば、メインボーカル、ギター、ベース、ドラム、キーボードなど、各パートごとのメンバープロフィールページを作り、トップページからリンクするような工夫をしてみても面白いですね。

 

グーテンベルクのZの流れでコンテンツに引き込む

MAXX00001

活版印刷術の発明者と言われているドイツのグーテンベルクは、人間の視覚の流れがアルファベットのZのように移動することを唱え、その技術は現在でも印刷物やWEBデザインなど媒体を問わず幅広く使用されています。

maxx0003

人はデザインされたものを見る時、視線は左上から右下に流れていくように習慣づけられているので、画像のカラーや構図を適切に配置していくことで、視覚的な動線を作りコンテンツに引き込みましょう。

 

プロダクトの各パーツを魅力的に配置して訴求する

MAXX00005

MAXXは、デザイナーズ家具などのプロダクトを訴求するホームページとしての活用にも最適です。

ただ、ハンドルやタイヤ、メーターなど”丸い似通った造形のものが並べて表示”されると、その流れに沿って視線も流れていってしまい訴求力も半減してしまいますので、常にホームページ全体の印象と読者の視線の流れを留意しながら、プロダクトの各パーツを魅力的に配置するようにしましょう

maxx0007

↓は【400 × 800px】【400 × 800px】【800 × 800px】3枚の画像を登録した際のイメージです。

このように、MAXX最大の特徴でもあるグリッドコンテンツは、画像をレイアウトする際のポイントを押さえて効果的に配置することで、強烈なインパクトでユーザーの視線を鷲掴みにすることができますので、ぜひトレーニングジムやスポーツ洋品店に限らず、ブランディングを重視する企業やロックバンド、個人のブログなどで活用頂き、影響力のあるオウンドメディアを育ててください。

「MAXX (tcd043)」のデモサイトはこちら

関連記事 : WEBデザイナーでない方でも、訴求力のあるトップページを作るためのWordPressテーマ【MAXX】専用のPhotoshopテンプレートをご用意しましたのでご活用ください。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ