ほとんどのユーザーは初めて訪れるホームページの場合、一蹴見た瞬間でそのページを判断し、見た目の悪いサイトからは瞬間的に離脱されてしまいます。

ホームページをデザインする上で、大きな要素は3ッツです。
１全体の構成とはヘッダやフッタを置くか置かないか、サイドバーを設置するのかしないのか、どこにメニューバーを設置するのかなど

２のナビゲーションとは、どんなメニューを設置するのか、どんなページ構成とするのかなど

３のアイキャッチとは全体の配色やヘッダのデザイン、ホームページを開いて最初に飛び込んでくるデザインのことで、中でもトップページ中央付近やヘッダにある画像などがそれにあたります。

このページは、1や2の構成やナビゲーションに気を配りつつも、如何に効果的なアイキャッチを作るかについて考察します。

アイキャッチの効果


画像を使ったアイキャッチ
大きく目立つ画像と使用したアイキャッチです。
訪れたユーザーの驚きと興味を誘うには十分なインパクトです。


動画を使ったアイキャッチ

まずは具体的なアイキャッチの例をいくつか紹介します。
下はアメブロのトップ画面ですが、アイキャッチに動画を使用しています。

動画にもいくつかの種類があるが,下のアメブロは自社のCMをそのままアイキャッチとして使用しています。


FLASH動画を使ったアイキャッチ


続いてのサンプルはスズキ自動車。
このサイトではFLASH動画を使ってアイキャッチを作成しています。
※WEBページのアイキャッチとしてFLASHは非常によく使われる手法です。
写真をベースとして動画が制作で、てがるによく目立つアイキャッチの作成ができます。
また、FLASH動画の場合リンクボタンなどの複雑なシステムをを踏め込むことが可能となります。

ただし、FLASH動画を再生するためには「プラグイン」と呼ばれる再生専用のスクリプトをパソコン内にインストールしていることが必要となります。
現状デスクトップパソコンやノートパソコンなどでのFLASH再生用のプラグインの普及率は98％以上となっおり、ほぼすべてのパソコンでアイキャッチの再生が可能ですが、急速に普及しているスマートフォンやタブレットでは、appleのiphoneやipadがFLASHをサポートしていない（今後もする予定がない）という現状から今後は新規格のHTML5に移行していくことが予想されます。