ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【参考サイト】フリースタイルエンターテイメント

面白いサイトがないかリサーチしていると、ふと、「お!」と目を引かれるサイトがありました。

▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。

イケてるサイト、フリースタイルエンターテイメント

www.freestyle-entertainment.co.jp

 

フリースタイルエンターテイメントさんは、数多くの制作事例があり、リクナビ新卒採用の業界エリア部門4年連続1位を誇る人気企業。

そのフリースタイルエンターテイメントさんのコーポレートサイトがつい先日リニューアルしたということで見てみたのですが、、、

続きを読む

【検証・解説】Youtube埋め込みはサイト評価を下げる恐れ有り!要一工夫、読み込み遅延。

サイトへYoutube動画埋め込み時のページ読み込み速度改善方法

Web上での動画埋め込みといえばYoutube

色々なサイトに埋め込まれて利用されてると思います。

ただ、こちら実はGoogleの提供している速度測定ツールよるとページ表示速度の評価を下げるという事実があります。

Youtube動画を2つと見出し・画像を埋め込んだページの測定結果。

Youtube動画を埋め込んだサイトのページ速度測定結果

Youtube動画無し、見出し複数と・画像を埋め込んだページの測定結果。

Youtube動画を埋め込まなかった時のページ速度測定結果

Google公式のページ速度評価測定ツール

PageSpeed Insights

 

結果は一目瞭然で、動画を2つ埋め込んだだけでPageSpeedInsightsのスコアは激減します。

 

そもそも当ブログは読み込み速度をさほど気にせず運営していますし、あくまでページの表示速度の問題なので、どこまでSEOに影響するかは微妙なところではあります。

とはいえ、ページの表示が遅いせいでのユーザーの離脱など、少なからず影響は考えられるので、本来はSEO対策として気にした方がいい部分でしょう。

 

そこで今回Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説したいと思います。

ページの速度改善に取り組まれてる方のお役に立てれば幸いです。

 

ではやっていきましょう。

続きを読む

Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

WordpressやLaravelなどでJavaScariptやjQueryが動かない時の対処

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン

ウェブのフロントエンド制作においては必須クラスに重宝すると思います。

今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら

「あれ?動かない、、、」

 

コンソールを見てちょいちょい出てるエラーに対処しても動かず。

表題の通り、小一時間必死に調べて無駄に過ごしました。。

解説記事とか書いていた手前でお恥ずかしい。

 

原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

続きを読む

【JavaScript】要素をコピーするボタンの作り方

JSでテキストコピーボタンを実装してみた

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。

「これをコピペしてください。ボタンを押すとコピー出来ます」的な。

」こういうアイコンと一緒に表示されてたりもしますね。

 

通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。

 

実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。

続きを読む

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1-2.「AOS編 スクロール連動カスタムイベント」

前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ

AOS (Animate On Scroll)」

について導入、実装について解説しました。

webabc.hatenablog.jp

 

AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回はその表示、または非表示になるタイミングにJavaScriptのイベントリスナを使用して、通常とは別の新しいカスタムイベント処理を追加する方法を解説します。

続きを読む

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」

jQuery不要で超簡単、スクロールに合わせてふわっと表示させられるAOS

サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。

ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。

 

こんな感じにふわっと表示

↑今回ご紹介するのはこの動きの実装方法です。

 

ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。

そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。

 

続きを読む