極意（36）アイキャッチ講座
アイキャッチとは、ホームページの顔と言える画像表現方法のひとつです。
HAIKには、パーツと呼ばれる部品一覧の中に、そのアイキャッチ部品が搭載されております。編集画面で「パーツ」ボタンを押すと数多くある部品一覧の中で最初に表示されるのが「アイキャッチ」です。いかに重要な機能であるかが推測できます。
HAIKに限らず最近のホームページにはアイキャッチによる画面装飾が一般的な手法となっています。アイキャッチの使い方ひとつでサイトのイメージがガラッと変わるほどのインパクトがあります。
HAIKのデザインテーマの数は高々21種類です。気に入ったデザインが無いだとか、こんな少ないデザインで何ができるのかとか、その少ないデザインの数に嘆いているHAIKユーザーの声をよく耳にします。
それはご自分のスキルの低さを棚にあげてデザインのせいにして逃げているとしか筆者には思えません。アイキャッチがあるじゃないですか？
そのアイキャッチを効果的に使うことで、それらの不満は払拭できます。
今回、そのアイキャッチを効果的に使った事例紹介と、筆者にもまだまだ分からないアイキャチの奥深さを一緒に勉強して行けたらと思って当ページを公開しました。
いろいろなタイプのアイキャッチ仕様
１．ベーシック仕様
静止画に大きめのキャッチコピーと問い合わせフォーム等への誘致ボタンを配置した一番オーソドックスなアイキャッチです。
#eyecatch(背景画像){{
// 「!」を使うと、大見出し（h1タグ）が挿入されます
! キャッチコピー
ここに、簡潔な説明を書く
&button(リンク先,success,large){今すぐ、申し込む};
}}
２．背景固定
画面上下のスクロールに対して、アイキャッチ画像（背景画像）を固定する以外、基本的にはベーシック仕様と同じです。
#eyecatch(背景画像,fix){{
// 「!」を使うと、大見出し（h1タグ）が挿入されます
! キャッチコピー
ここに、簡潔な説明を書く
&button(リンク先,success,large){今すぐ、申し込む};
}}
３．動画再生ボタン
静止画の代わりにmp4等の動画再生ボタンを設置するタイプです。勿論、キャッチコピーや問い合わせボタン等の設置も可能です。前記で紹介した柏のフラダンスクラブのサイトにも動画再生ボタンが設置されています。
#eyecatch(背景画像){{
// 「!」を使うと、大見出し（h1タグ）が挿入されます
! キャッチコピー
&video(video.mp4){&icon(fa,play-circle-o,3x);};
}}
４．スライドショー
スライドショーをアイキャッチとして設置するタイプです。スライドショーの個々の画像毎にテキストタイトルが設置可能です。
#eyecatch(fit){{
#bs_carousel{{{
eyecatch01.jpg,タイトルA,サブタイトルa
eyecatch02.jpg,タイトルB,サブタイトルb
eyecatch03.jpg,タイトルC,サブタイトルc
eyecatch04.jpg,タイトルD,サブタイトルd
eyecatch05.jpg,タイトルE,サブタイトルe
eyecatch06.jpg,タイトルF,サブタイトルf
}}}
}}
５．全画面仕様
プラグイン解説を見ると、page指定（全画面）は eyecatch の高さを画面いっぱいの高さにするとあります。
#eyecatch(背景画像,page){{
// 「!」を使うと、大見出し（h1タグ）が挿入されます
! キャッチコピー
* ここに、簡潔な説明を書く
}}
６．動画背景
アイキャッチにmp4動画そのものを設置するタイプです。
#eyecatch(bgvideo=video.mp4,代替背景画像,page){{
// アイキャッチをページ全体で表示します。高さを指定したい場合は、page を 500 など高さに変更してください。
// 「!」を使うと、大見出し（h1タグ）が挿入されます
! キャッチコピー
* ここに、簡潔な説明を書く
}}
７．２段組（画像）
背景にアイキャッチを使用し、その上に２段の段組を設定し、左側にキャッチコピー等を設置、右側に画像を挿入する例です。
#eyecatch(背景画像){{{{
#cols{{{
LEFT:
! キャッチコピー
* ここに、簡潔な説明を書く
====
&show(画像ファイル);
}}}
}}}}
８．２段組（フォーム）
正直言ってよく分かりません。アイキャッチ内にメールフォームが必要あるのかと疑問に思います。HTML言語を理解していない方にはお薦めできません。
#eyecatch(背景画像){{{{
#cols(8,4){{{
LEFT:
! キャッチコピー
* ここに、簡潔な説明を書く
====
// 外部のサービスで取得したHTMLコードを指定します。
#html{{
<!-- ここにフォームのHTML -->
<div class="panel">
<div class="panel-body">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="メールアドレス">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="パスワード">
</div>
<div class="form-group">
<input type="button" class="btn btn-success" value="登録" onclick="javascript:alert('これはダミーです。自分のフォームを設置してください。');">
</div>
</form>
</div>
</div>
}}
}}}
}}}}
最後に僭越ですが、筆者が作ったアイキャッチの自信作です。