サポートスタッフ兼ウェブ担当の白波瀬です。
今回の記事はウェブ制作の小ネタ集としての第2段です。

今回も専門的な内容になるのでウェブサイト制作をしない人や興味のない人にとってはどうでもいい内容です。そういった方はスルーしてくださいね。
あ、それとフロントエンドのエンジニアの方にも「自分で書けるよ」って内容なので、スルーでお願いします。
ウェブ制作の初心者向けの内容です。（基本的に小ネタ集はウェブ制作の初心者向けです）

自分でコーディングしてしまうけど、「そんなに専門性は必要ない方」や「コーディングは初心者で」といった方に需要がある記事となっております。
ターゲットが狭くて恐縮です💦

コピペでいろいろできたら楽で嬉しくないですか？

コピペだけで結果、楽しいウェブサイト制作と見ていて楽しいウェブサイトができます。
なにやらいけないワードのように聞こえますが、そうではないです（笑

今回の内容はウェブサイトのテキストや画像、ボタンなどにアニメーション（簡単な動き）を付けるコードを公開しているサイトのご紹介です。

アニメーションといってもテレビや動画で見るようなアニメではなく、ボタンにマウスカーソルを乗せると徐々に色が変わったり、形が変わったりするようなことです。
他には、画像がスライドするような動きもアニメーションと表現したりします。
テキストが流れてきたり、チカチカしたりするのは昔のウェブサイトでもあったと思いますが、そういったものもアニメーションに含まれ、今回ご紹介するサイトでは、それの進化板とお考えください。

作っていて動くと楽しいですよね。同じように見ている人も動いていたり自分のアクションで動くと楽しいものです。
そういった体験のことをUXと言ったりもします。UXと言ってもごく一部を指すので、そのあたりはご注意ください。
いままでは、そういった動きのあるものは、製作側も閲覧側もあまり好まないという流れもあったかと思いますが、現在はインターネットが高速になっている状況やブラウザの進化と技術面の一律化も進んできているので、動きのあるウェブサイトを導入しても問題ない状況になってきていると思っています。

導入しても問題ない状況とは言えど、技術的には結構ややこしい技術になっていたりますし、専門性が高い分野になります。言語の種類もcssやjavascript、svgなどいろいろあるので、簡単には手を出しにくいとは思います。

そこで、そういった難しいことを丸っと公開してくれていて、なんだったらコードをコピペして若干のカスタマイズ（色番号や数値の変更）で導入できるサイトがいろいろあります。
ほんの一部ですが、ご紹介します。（他にもほんとにたくさんあるのでググってみてください）

動くwebデザイン アイディア帳

こちらのサイトは書籍になるほど、項目が豊富です。
目的別や機能別に分けられているので用途に合わせて選んでコピペしてカスタマイズできます。
解説や使用例もあるので、勉強にもなります。
こちらのサイト自体も動きあり、見ていて楽しいです。

animista

こちらのサイトは海外のサイトにはありますが、ソースのコピペがしやすいです。
ボタンなどを少し動かしたい。というときには便利かもしれません。
解説などがないので、カスタマイズはそれなりに知識がないとやりにくいかと思います。

今回は2つに絞ってご紹介しましたが、いろんな人や会社さんが自身のブログでさまざまなコードを公開されているので、「css アニメーション　コピペ」「javascript アニメーション コピペ」などのキーワードで検索されてみるのもいいかもしれません。

 

実はブランディングにもなるんですよ

動きのあるウェブサイトって見ていて楽しいです。
ですが、デザイナーや発信者の「楽しい」だけでアニメーションをつけるのは良くないです。
動きをつけるにはやはり表示速度の問題がつきまといます。いくら軽いソースを使っているといってもやはり動くとなると、若干表示速度が心配です。

でもそこを考慮しても動きをつけるには、理由が必要です。それはただ「楽しい」だけでは弱い。そしてそれはエゴだと捉えられかねません。

動きをつけるのはブランディングの一部だと捉えてください。
ですので、「このサイトには動きは必要ない」と思えばつける必要はないとは思います。

アニメーションをつける必要性とポイントは「らしさ」です。
サービスや事業、製品をより知ってもらい、身近に感じてもらいたい。
高級感をより持ってもらって優越感に浸りながら購入してもらいた。
などなど、ブランディングに役立つのが動きでありアニメーションだと思っているので、そのあたりはよく考慮してから導入してください。

コピペには注意が必要

最後になりましたが、注意点です！

「コピペ」「コピペ」と乱発していますが、実際はコピペでは動きません。
（すみません。期待させて💦）

ある程度、CSSやjavascriptの経験や知識がないと、どこにコピペしたらいいのか、どうカスタマイズして製作中のコードに合わせればいいのかがわからないと動きません。
そのあたりは大丈夫だとは思いますが、念の為書いておきます。

ですので、クライアントさんやコーダーさんへ発注する側に回る人たちは「コピペなんだからすぐでしょ？」とか「予算内でやってよ」、ましてや「友達価格でやってよ」「ちょちょっとやっといて」なんて言わないでくださいね。

 

あとは、コピペに慣れてきたら、ある程度はコードにも慣れてくると思うので、一から自分で書いてみるというのにチャレンジするのも成長につながると思います。

以上となります。

参考になれば幸いです。

 

次回は、低予算のウェブサイト制作時に使える「イラスト」「アイコン」「写真」のいわゆる素材のサイトをご紹介します！
（なぜイラストレーターさんやフォトグラファーさんに依頼した方がいいのかもわかるかと思います）

 

では、またの機会に〜