ホームページ制作ライカーズ

ホームページには動きを加えることができます。画像や文字・オブジェクトを並べるだけがホームページ制作ではありません。

そんなホームページ制作の動きについて、実装方法と恩恵を踏まえながらお話していこうと思います。

そもそもどうやって動かすの？

ホームページは、主にHTMLとCSSという二つのプログラミング言語で構成されます。ごく簡単な動きはCSSを使用して実装することが可能ですが、少し複雑な動きはJavaScriptという別のプログラミング言語を活用する必要が出てきます。JavaScriptの記述は簡単ではありませんが、このJavaScriptを応用したシステム「jQuery」を利用することで、コピーペーストと簡単な書き換え、豊富なオプションにより比較的簡単に動きを実装することができます。

どんな動きができる？

よく使われる動きの種類をいくつか見ていこうと思います。

ホバーエフェクト

メジャーですね。主にJavaScriptは使わず、CSSのみでの実装が可能です。
動きとしては「マウスカーソルを指定の要素に乗っけたら、見た目が変わる」ような動きを実装できるもので、「ボタンにカーソルを合わせたら色が変わる」「リンクにカーソルを合わせたら吹き出しが出てくる」など、応用を利かせることもできるので一般的にはかなり多用されることが多いです。
簡単な上にホームページ視認性の向上なども期待できるためほとんどのWebサイトで利用されています。

スライド

トップページのメインビジュアルなど、数秒おきに、あるいはユーザーのスワイプ操作で違う画像に切り替えたりすることができる機能です。基本的にjQueryを利用して実装することが多いと思います。
実装は使用実績のある人ならそこまで難しくなく、動きのオプションも豊富に用意されているのでいまどきのWebサイトでも使用されている例をよく見かけます。

フェードイン・アウト

スクロール、あるいはページを切り替えた直後に、画像や文字をフワッと表示させたり、一定時間でフワッと消したりすることができる機能です。基本的にはCSSとjQueryの掛け合わせで実装されることが多い印象ですかね。
見てほしい順番でフェードインさせることができたりするので視認性の向上も期待できますし、滑らかに動かすと高級感を演出する意味でも活躍できます。利用しすぎるとホームページがぐちゃっとした印象に変わってしまうので使いすぎには注意が必要です。

モーダルウィンドウ

ボタンをクリックしても別のURLに飛ばず、今開いているページの上にオブジェクトを重ねて表示させる機能です。画像をタップorクリックしたときに画面が暗くなり、中央に改めてクリックした画像がでてくるなどの動きをCSS/jQueryで実装できます。
内包するリンク全てを配置すると極めて長くなってしまう、ごちゃついてしまう。でも個別でページを作る程でもないといったときに気軽に実装させることができるので、活用するタイミングは意外と多い機能となっています。

良く使われるものだけいくつか紹介してきましたが、実装できる動きはこれらだけではありません。
中には非常に難しい動きもありますが、そういった情報も含めてjQueryで実装できる動きなどを調べてみてはいかがでしょうか。