ケイジャニストやまだこんにちは!最近はまったくケイジャン(Cajon、打楽器カホンのこと)に触れていない、ゴリラ転生組のフロンドエンドエンジニア、ケイジャニストやまだです!「早く人間になりたい!」というわけで今回はホームページを「おしゃれ」にするエフェクトの導入方法と、その注意点を、【ホームページ制作初心者向け】にご紹介していこうと思います(といってもたくさんありすぎるので時短意識でプラグイン実装でのご紹介です)!企業様や個人事業主様、また、その他趣味でホームページを運営されている方など、いまや業種や形態を問わず、何らかの形でホームページ(webサイト)をすでにお持ちの方はたくさんいらっしゃるかと思います。俗に言うホームページ制作(web制作、webサイト制作など)と呼ばれるジャンルでは、技術の変遷がとにかく早いです。「日進月歩」という言葉が示しているというか「秒進分歩」だろ!と叫びたくなるくらい、気がつくと新しい技術が出現し、彼方へと消えていきます。「ホームぺージ制作・Webサイト制作の見積もり【決定版】」https://grow-group.jp/archives/2191/「ホームページも作りたいけど、カタログやパンフ、ノベルティとか印刷広告したい」という方は、こちらの記事に印刷広告の活用方法について詳しく解説しておりますので、こちらの記事をご一読下さい。「企業様必見!DTP広告の活用方法!」https://grow-group.jp/archives/2063/あくまでホームページ制作にまつわるエフェクト導入方法のご紹介ということで、いくつかコードのお話が入ってまいりますが、そこは「これについて知っとくといいのかー」くらいで見てもらえればと思います。まとめおしゃれなホームページを作る為に覚えておきたい言語/知識なんといっても基本の「キ」!htmlとcssまずはおしゃれステップ1ということで、htmlとcssを覚えましょう。千里の道も一歩から!おしゃれホームページは1日にしてならず!htmlはホームページを表現する上でもっとも基本的な言語です!htmlとcssを覚えるには書籍を読むのが一番確実ですが、手っ取り早く覚えるのには動画学習サイトで学ぶと良いと思われます。一歩進んでJavaScriptここから少しハードルが上がりますが、おしゃれステップ3!htmlとcssを覚えたなら、すでに普通のホームページを作る準備はOKです!っていうかできます!ここまで来たら、次にJavaScriptという言語を覚えましょう!こちらは前述のhtmlとcssとは違い、プログラミング言語となります。ハードルが上がってしまうのは否めませんし、言語を深掘りしていくと、難しくなってきますが、おしゃれエフェクトは基本的にJavaScriptのイベントハンドラを使い、イベントをキャッチしてそれキッカケで起動することが多いので、このイベントハンドラの取り扱いと基本の処理や書き方を覚えておくだけでも割と大丈夫です!こちらも既出のドットインストールさん内、「ホームページを作れるようになろう」で学ぶことができます!二歩進んでjQueryもう少しです!おしゃれステップ4!次はjQueryです!むかーしむかし、ブラウザ戦争という様々なブラウザが独自仕様を勧めた結果、各ブラウザごとにJavaScriptの記述を書き分けねばとても実装できないようなJavaScript暗黒時代がありました。最後に、ここで紹介するsvgとcanvasについては操作が高度になってきますので、読み飛ばしていただいても構いません!さらに「おしゃれ度」を追求される方はぜひ!svgsvgはweb上で使えるベクター画像形式の画像です。やり方にもよりますが、通常、画像といえば画像全体を操作するしかありません。svgはコードとしてhtmlに埋め込むことができます。svgであれば画像の一部にアニメーションをかけるといった操作が可能になります。最近とてもよく使われるので学んでおくと良いでしょう!canvascanvasとはhtml5で導入された図形などを描画するために使用するものです。こちらもJavaScriptと併せて使うことにより、アニメーションを作成したり、グラフを描いたりと様々なことが可能になります!用途別!使用率高めエフェクトをプラグインで実装しよう!さて、ここまでで「おしゃれ」なホームページを作成するための基礎知識は出揃いました。それらのエフェクトを実装するのに一からコーディングするのも大変ですので、簡単に実装してくれるプラグインを何点かご紹介します!おしゃれ感だしていきましょー!ボタンにマウスを乗せた時に反応するアニメーション以前はJavaScriptを使わないと実装できなかったものも、現在はcssを使って実装できます。PopupRemodalおしゃれエフェクト導入時の見落としポイントおしゃれホームページはブラウザに左右されるホームページのおしゃれエフェクトはブラウザに左右されます。おしゃれエフェクトはブラウザとの戦いの歴史と言っても過言ではありません。おしゃれエフェクト導入時は必ずターゲットブラウザの範囲を決めてから実装していきましょう!特にIEのバージョンが旧式(大まか10以下)になってきますと、一般的に使われるブラウザとは違ってIEだけの特別実装になってきます!要注意です!プラグインを使っての実装の場合は多くの場合、チュートリアルが何かしらの形で用意されているはずですので、そちらを読んでから使うようにしましょう!※既出ですが、もちろんライセンスも読んでね!気づかないうちに実はバグってる実装が完了したら、必ずチェックしましょう!見た目は大丈夫でも、思わぬところでバグっていたりします。F12キーで起動バグが見つかると、consoleタブの中で赤字でエラーを教えてくれます!おしゃれエフェクト導入時は該当箇所、ひいてはホームページ全体を、必ず確認するようにしましょう!スマートフォン閲覧時は不要なおしゃれエフェクトを控えるホームページに彩りを加えてくれる「おしゃれエフェクト」群ですが、あまり過度に入れすぎると、表示速度に影響が出てしまいます。エフェクトを入れまくると干渉する可能性も高くなってきますし、「ここを見て欲しい!」と思って入れているところで、他のエフェクトが目立ってしまい、「効果的に表現できずに伝わらない」なんて本末転倒な自体に陥ってしまう恐れがあるので併せて注意しましょう!とはいえ秒進分歩のこの業界。「表示速度とエフェクトの意味を考えた上で」導入することが肝要かと思います!おしゃれなだけでなく、ホームページを作る為に考えること訪れる人はどんな人で、どんな環境で見ているか?見落としポイントでもご紹介しましたが、とにかく凝ったエフェクトや演出を行う時、そればかりに目が行ってしまって結果「肝心なところが見てもらえteない」「直帰率があがった」など本末転倒になってしまうケースがあります。実はこれ、制作している人ほどクオリティを上げたり、ミスのないように集中しているためについ見落としてしまう「制作あるある」だったりします。制作会社の場合はその辺のバランスをディレクターがとってくれますが、一人で作っているだけだと、訪問者のニーズにあわず、先述の「本末転倒の事態になってしまう」といったことも十分起こり得るのです。それはそうですよね?本来「訪れる人とコミュニケーションをとる一つのツールがホームページ」なわけですから、いくらイメージがよく、未来的で革新的なおしゃれホームページであっても、訪れる人のことを考えていなければ意味がありません。これはどのジャンルでも言えることなのかもしれませんが。「おじいちゃんにしゅんしゅんするエフェクトのホームページを表示しても、意図を伝える」ってのはやはり無理があります。おしゃれエフェクトを導入するときは「訪れる人がどんな人で、どんな環境で作ったホームページを見ているか?」を具体的に想定しておくのが大事だと思います。その「おしゃれ」技術は適正に実装/使われているか?これも見落としポイントで紹介した部分につながりますし、すべてで言えることですが、ホームページ上で使う技術は適正に使われることが望ましいです。適正といってもホームページを作成する上でのベストプラクティスは状況によって変わっていくので提示が難しいんですが。最低限、バグ取りはしっかりしておきたいところです。ケイジャニストやまだこの記事が気に入ったら「いいね!」ブログを購読する更新時にプッシュ通知にてお知らせします。ケイジャニストやまだこんにちは。ゴリラから人間に転職しました。フロントエンドエンジニア、コーダー、マークアップエンジニア受け持つあたりを主な守備範囲としながら、デザイン業務も兼任(最近めっきり)しております。コミックイラストも得意です。