TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】
icon
icon
HTML

HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのページが重い原因を調べて読み込み速度を改善する方法について解説しています。最初に、GoogleのPageSpeed Insightsでサイトの読み込みの速度を調べる方法について説明します。次に原因となる箇所のチェック方法と改善の手順について見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのページが重い原因を調べて読み込み速度を改善する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

ページが重い原因を調べて読み込み速度を改善する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

読み込み速度を調べる方法

読み込み速度はかつては、開発者向けのブラウザとしてお馴染みだったFirefox、そのアドオンの「Firebug」「YSlow」でWebページの読み込み速度が検証されていました。

しかし、これらのアドオンが開発中止になってからは、Googleの「PageSpeed Insights」で調べることが一般的です。

このツールはWebサイトの読み込み速度を点数として、視覚的に結果を表示するためわかりやすいといえるでしょう。

 

Webサイトが重いとどうなるか

簡潔にいえば、Webサイトが重ければユーザーの離脱を招きます。

理由としては、表示に時間が掛れば掛かるほどストレスを感じるためです。

また、検索サイトの順位付けにおいても悪影響があるため、サイト設計者にとっても重いサイトは改善の必要があります。

 

[PR] Webデザインで副業する学習方法を動画で公開中

原因調査

調査の項目として具体的かつ詳細にも列挙する場合、膨大な数になるため、試しとしてテックアカデミーのトップページを調査します。

下図を参考に入力が可能なユーザーインターフェースに調査対象のURLを入力しましょう。

送信してから、しばらくして速度に対する点数が表示されます。

 

パソコンページとモバイルページのどちらも確認することが可能です。

 

上記の画像からでは、難解な項目に感じられるものの、ページが遅くなる原因は下記のようなものです。

この結果では、

  • 画像の容量や個数が肥大化していること
  • ファイルを参照するための通信の発生回数が多いこと
  • HTMLの構造が複雑になっていること

などがページの読み込み速度を低下させている原因として挙げられています。

 

改善効果をチェックしてみよう

前述で上げられていたWebサイトの読み込み速度を低下させる原因を全て取り除き、100点としてになった場合をみていきましょう。

「改善できる項目」が特にないため、ページパフォーマンスの監査の対象となっている項目をみてみましょう。

100点として計測されたWebサイトは、ブラウザがページを読み込んでから1秒未満でページを表示します。

厳しい文法の規則を厳守し、HTMLの構造を簡素にすることや各種ファイルの容量や個数を減らして通信の回数も削減することで、100点を目指すことが可能です。

なお、Googleの「PageSpeed Insights」での検査の項目は、『ハイパフォーマンスWebサイト』が全盛期だった頃の「YSlow」での検査項目と類似しています。

目標として全ファイルの容量も計200KB未満に抑えてから、1秒未満にてページをブラウザに表示しなければならないなどの理由がありましたら挑んでいきましょう。

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLのページが重い原因を調べて読み込み速度を改善する方法がよくわかったので良かったです！

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。

記事を検索

関連するキーワード

関連する記事

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、...
HTML

HTML5でcanvas要素を使ってグラフを描画する方法を現役エンジニアが解説【初心者向け】

HTML5でcanvas要素を使ってグラフを描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

HTMLのdl要素を使って説明リストを作る方法を現役エンジニアが解説【初心者向け】

HTMLのdl要素を使って説明リストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法を現役エンジニアが解説【初心者向け】

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLでアンカータグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLのアンカータグについて解説します。 アンカ...
HTML

あわせてよく読まれている記事

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

CSSの読み込み速度が遅い原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSの読み込み速度が遅い原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 読み込み速度が遅いとどうなるか 読み込み速度を調べる方法 読み込み速度が遅い原因と対処法 読み込み速度を改善しよう まとめ   読み込み速度が遅いとどうなるか WebページはHTMLやCSS、JavaScriptなどで構成されます。CSSはWebページの見た目に影響するため、読み込みが終わってからWebページが描画されます。読み込み速度が遅いということは、Webページが表示されるまでの時間が長くなるということです。 一般的にWebページが表示されるまで3秒以上かかるとユーザーがWebページを見ずに去る確率が高くなると言われており、読み込み速度はWebページにとって重要な要素の1つです。   [PR] Webデザインで副業する学習方法を動画で公開中読み込み速度を調べる方法 読み込み速度を調べるにはブラウザChromeのデベロッパーツールのNetworkタブを使用します。Networkタブを開いたままWebページをリロードすると、ページの読み込み速度を確認することが出来ます。   読み込み速度が遅い原因と対処法 読み込み速度が遅い場合、いくつかの原因が考えられます。   不要なCSSファイルの読込 CSSファイルはheadセクションで読み込みを行います。読み込みが完了するまでWebページの描画（レンダリング）が行われないため、レンダリングブロックリソースと呼ばれています。複数のライブラリなどを使用している場合、不要なCSSファイルを読み込んでいないか、再確認しましょう。 また圧縮形式のCSSファイルの使用、CDN（Content Delivery Network。インターネット上でライブラリを共用する仕組み）の利用も検討しましょう。レンダリングブロックリソースについては以下の記事も参考にしてください。 Web Fundamentals – レンダリングブロックCSS   JavaScriptファイルの読込位置 JavaScriptファイルはbodyタグの最後で読み込むようにします。headセクションで読み込むと、Webページのレンダリング速度に影響するため注意しましょう。   重い動画や画像ファイルの使用 現在のスマートフォンのカメラの性能はとても向上しており写真のファイルサイズも大きくなっています。スマートフォンで撮影した写真をそのままWebページに組み込むと表示に支障をきたすレベルのファイルサイズです。とくにWebサイトの背景や見出しのイメージには重い動画や画像ファイルは使用しないようにしましょう。 画像ファイルはファイルサイズを小さくするか、減色処理を行うようにします。大きくても500kByteは超えないぐらいのサイズが理想的です。   読み込み速度を改善しよう 先程の例を再度確認すると、CSSの読み込みに非常に時間がかかっていることが分かります。 不要なCSSを整理した結果が以下となります。 CSSの読み込み速度が早くなったことでWebページ全体の読み込み速度も改善されたことが確認できます。   まとめ 今回の記事ではCSSの読み込み速度が遅い原因と対処法について学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

初心者におすすめ！ワードプレスが使えるレンタルサーバー（カラフルボックス編）[PR]

ワードプレス（WordPress）はSEOにも強く、SNSとの連携も簡単で、初心者でも手軽にWebサイトを構築することができます。 しかし、実際にWebサイトを作るためには、独自ドメインとサーバーを用意する必要があり、WordPressを作成する前に「やっぱり無料ブログでいいかな。。」なんて諦めてしまう方も多いと思います。 今回は、実際に使ってみて「初心者の頃にこのサーバーと出会っていれば！」と感じた、クラウド型レンタルサーバー「カラフルボックス」を紹介したいと思います。 たった3分ほどでWordPressのインストールができる便利機能や、災害やトラブルに強い次世代のバックアップ機能を無料で搭載したおすすめのレンタルサーバーです。 導入の手順や表示速度、他のレンタルサーバーとの比較をしながら丁寧に紹介していきますので、いままでWordPressを触ったことがない初心者の方こそ、この機会にぜひ試してみてください！   目次 カラフルボックスとは　★★ カラフルボックスを使うメリット　★★★★★ 　→月額480円からのお手頃価格 　→“地域別”自動バックアップ（無料） 　→自由にプラン変更 　→無料SSLに対応 　→初心者でも安心のサポート 　→安心のセキュリティ ワードプレスへの導入手順　★★★ ワードプレスの速度を比較　★★★★ プロモーションコード ドメインも購入可能　★★ WordPress移行代行サービス　★★ 重要度を★印で表示   カラフルボックスとは カラフルボックスは、月額480円から利用することができるクラウド型のレンタルサーバーです。簡単にWordPressをインストールする機能も備わっているので、初めてWebサイトを作る人にとっても安心できます。 高機能でかつ充実したサポートがあるため初心者にも扱いやすい設計になっているサーバーです。   [PR] Webデザインで副業する学習方法を動画で公開中カラフルボックスのメリット カラフルボックスの特徴について紹介しています。 月額480円からのお手頃価格 月額480円からスタートできるので、個人でも法人でも手軽にレンタルサーバーを利用することができます。プランの変更も日ごとに行うことができます。 また、30日間のお試し期間もあるので、初めて使う人でも気軽に利用できるでしょう。   “地域別”自動バックアップ（無料） 過去14日間の自動バックアップが標準搭載されていますが、他のレンタルサーバーと違ってバックアップデータを東京と大阪の遠隔地に取得する最新機能が「無料」でついています。 この機能は一般のレンタルサーバーではかなり珍しい機能のようですね。 地震や豪雨といった自然災害が多い日本だと万が一の場合もありますので、同じ場所にバックアップデータをとるより遥かに安全に設計されています。 こういった機能があると、メインのブログや会社で使う場合もおすすめできますね。   自由にプラン変更 カラフルボックスでは、サイトのアクセス状況に応じてプランを変更することができます。 初めは低価格のプランからスタートして、アクセスが集中してきたら都度上位プランに変更するなんてこともできます。逆に本格的に運用しなくなったらプランを下げることもできるので、柔軟に対応できます。   無料SSLに対応 SEO対策やサイトを安全に運用するにおいて欠かせないSSL化についても無料で対応しています。 カラフルボックスでは、無料SSLが自動で設定されるため非常に楽です。   初心者でも安心のサポート メール・電話・ライブチャットと充実したサポートを受けることができます。 メールのみのところも多い中、電話やチャットでも柔軟に素早く対応してもらえるのは初心者にとって心強いです。   安心のセキュリティ imunify360というセキュリティソフトウェアを標準で使用できます。 imunify360は脅威を自動で検出し、ソフトウェアを実行するすべてのサーバーを保護するためのAIを備えた高度なファイアウォール。ブルートフォース攻撃、DoS攻撃、ポートスキャンに対する防御が可能です。 また、自動スキャン機能でマルウェアの感染を防ぎます。   ワードプレスをインストールする方法 ここからは、サーバーの購入から実際にWordPressをインストールしていきます。 まずはカラフルボックスの公式サイトから、ワードプレスを入れたいサーバーを申込みます。   サーバーの購入 公式サイトの右上にある「お申込み」ボタンをクリックします。 レンタルサーバーのプランが一覧で表示されます。 希望のプランにチェックを入れて、「次へ」をクリックしましょう。 お好きなサブドメイン名を入力して、「次へ」をクリックします。 プラン名を確認し、プロモーションコードがあれば入力、内容が問題なければ「お申込み内容の確認」をクリックします。 続いて、お客さま情報と支払い方法を入力します。 支払い方法は、ここでは「クレジットカード」で進めます。 利用規約を確認後「規約に同意します」にチェックし「注文を確定する」をクリックします。 ※必ず利用規約を確認しましょう。 以上でサーバー登録が完了しました。 登録メールアドレスに「サーバーアカウント設定完了通知」というタイトルのメールが届きます。 ユーザー名やパスワードなどアカウント情報が記載されたメールになるので、大切に保管しておきましょう。   コントロールパネル「cPanel」にログイン それでは、cPanelにログインします。 「サーバーアカウント設定完了通知」のメールにある「ログイン（cPanel）」に記載されているメールアドレスとパスワードを入力します。   ワードプレス（WordPress）のインストール カラフルボックスでは、自動インストール機能で簡単にワードプレスをインストールすることができます。 早速自動インストール機能を使ってWordPressをインストールしましょう。 先程ログインしたcPanelの画面下部、Web Applicationsにある「WordPress」をクリックします。 「このアプリケーションをインストール」をクリックします。 詳細設定を行います。（最低限の設定のみ説明しています。） インストールが完了しました。 1：サイトのURL 2：WordPress管理画面のURL どちらも大事なURLですので、ブックマークしておくことをおすすめします。   ワードプレスの速度を比較 カラフルボックスと2社のレンタルサーバーのページ読み込み速度を比較してみたいと思います。 当然サイトの表示速度が速ければユーザーの離脱も減りますし、SEO対策にも繋がるので、とても重要な要素です。   今回は、比較する会社をA社・B社としており、まずはそれぞれのサービスの料金やスペックを見てみましょう！ カラフルボックス A社 B社 月額 880円(36ヶ月下位プラン有) 900円/12ヶ月 880円/36ヶ月 初期費用 無し(単月契約は2,000円) 3,000円 無し 容量 60G SSD 200G SSD 50G SSD サポート メール・電話・チャット メール・電話 メール 自動バックアップ 有（手動） 有（リスト時有料） 有（手動） クラウド型 ◯ × ◯ リージョン選択 ◯ × ◯ Litespeed対応 ◯ × ◯ カラフルボックスは、サイトの運用にかかるコストも少ない中でサポート対応も充実しているのが特徴です。WordPress移行代行サービスもあるので、他のサーバーから乗り換えたい方もスムーズに行えるはずです。   以下、ワードプレスのアクセス速度を比較してみました。 （以下の表参照） 測定時間は、アクセス速度を測定したその時の時間を示しています。 他の各数値に関しては、GTmetrixという分析ツールを使って算出しています。Page Speed Scoreは、Googleによるページ読み込みスコア、YSlow Scoreは、Yahoo!によるページ読み込みスコアになります。 Fully Loaded Timeは、ページの読み込み速度（秒）を記載しています。 測定時間 Page Speed Score YSlow Score Fully Loaded Time カラフルボックス 11:41 A 90% B 81% 1.6 13:00 A 90% B 81% 1.6 17:50 A 90% B 81% 1.5 A社 9:00 B 89% C 71% 1.9 13:00 B 89% C 71% 1.8 18:00 B 89% C 71% 2.0 B社 9:08 A 91% B 81% 1.8 13:07 A 91% B 81% 1.7 15:33 A 91% B 81% 1.9 結果を見て分かる通り、カラフルボックスのスコアはGoogle/Yahooともに平均して高いのとページの読み込み速度が非常に速いです！ Googleも表示速度が遅いサイトに関しては、検索順位にも悪い方向に影響が出るだろうと発表しているので、SEO対策においてもページの読み込み速度はとても重要です。 すでにWebサイトを持っている方は一度チェックしてみると良いかもしれませんね。   以上、カラフルボックスのサーバーについて紹介しました。 ワードプレスを使ってサイトを作ってみたいという方、ワードプレスのサイトは持っているものの表示速度を上げたい、別のサーバーに切り替えたいと考えている方は、ぜひ試してみてください。 プランも容易に変更できるので、状況に応じて柔軟に運用することができるはずです。 カラフルボックスのサービスを見てみる   プロモーションコード 無料から有料への変更時に10%割引のクーポンがあるようです。 マイページにログインし、登録サービスを選択後、「アップグレード/ダウングレード」をクリックします。 ご希望のプランを選択します。 選択すると合計金額、プロモーションコード、お支払方法の確認ができます。 プロモーションコードの欄に下記のクーポンコードを入力して、コードの検証をクリックします。 「DYHVL4E8」 ※10%割引（アカウント毎に1回限り） 10%割引が反映されているのが分かるかと思います。   ドメインも購入可能 カラフルボックスではドメインも購入可能なので、サーバーと同時に購入すれば、更新時の支払いの管理もラクに行うことが出来ます。 ドメインの取得 まずは、マイページにログインしましょう。 続いて、「ドメイン」から「新しいドメインを登録する」をクリックします。 作成するサイトのドメイン名を検索します。 希望のドメイン名を検索すると、そのドメイン名が取得可能かどうか確認することができます。 利用したいドメインの「追加」をクリックすると「購入」に変わるので、購入ボタンをクリックしましょう。 次に各項目を設定します。 1. whois情報公開代行 個人情報を公開したくない場合にチェックを入れましょう。カラフルボックス名義のwhois情報になります。 2. ネームサーバー 初期値のまま設定ください。 3. 入力が完了したら「次へ」をクリックしましょう。 内容の確認と支払い方法を入力すると、ドメインの取得は完了となります。   WordPress移行代行サービス カラフルボックスを使ってみたいけど、すでにWordPressを持っている方もいると思いますが、そんな方にピッタリのサービスがあります。 それが、「WordPress移行代行サービス」です！ WordPress移行代行サービス サーバー移行はWebの知識がない人がやってしまうと、予期せぬエラーで何日もつまずいてしまいます。 特に難しいのがワードプレスでも使う「データベース」の移行作業で、慎重に作業をしてもエラーが出て失敗することも。 最悪の場合、データが消えてしまうこともあるので、移行作業に慣れていな方は、こういったお役立ちサービスを使う方が、かえって時間の短縮になったりします。 通常、移転の専門業者に頼んだりすると、10万近くする場合もありますが、カラフルボックスでは、1サイトにつき12,800円、5営業日以内で作業を代行してくれるので、かなり良心的です。 安心して移行作業を行いたい場合は、ぜひ利用してみてください。   全体のまとめ いかがだったでしょうか。 WordPressの自動インストールの手順から、ドメインの取得、移行代行サービスの紹介までをお伝えしてきました。 はじめて触る方は、「思っていたよりも、ずっと簡単だった！」と感じるはずです。 お手頃な料金設定やサイトスピードも申し分なく、なんといっても最新の自動バックアップ機能の安心感が段違いです。 ブログ初心者からサイト運営のプロまで、非常に満足度の高いサービスになっているのが特徴です。 カラフルボックス公式サイトへ
トピックス

レンダリングブロッキングリソースとして扱われるCSSを現役エンジニアが解説【初心者向け】

レンダリングブロッキングリソースとして扱われるCSSについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 レンダリングブロッキングリソースとして扱われるCSSについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 レンダリングブロックリソースとは ページの表示速度を診断してみよう ページの表示速度改善方法について 速度改善の前後を比較しよう まとめ   レンダリングブロックリソースとは WebページはHTMLとCSSやJavaScriptで構成されます。ブラウザにWebページが表示するまでの流れは以下のようになっています。 HTMLを読み込む headセクションに書かれてあるCSSやJavaScriptなどの外部ファイルを読み込む bodyセクションに書かれてあるHTMLを順番に解釈しながら画面に描画していく。 Webページを読み込んで画面に描画することを「レンダリング」と呼びます。CSSはWebページの見た目に影響するためheadセクションに読み込む記述を書いておいて、bodyセクションがレンダリングされる前に読み込んでおけるようにします。すなわちCSSの読み込みが終わらないとレンダリングが開始できない、ということになります。 このようなレンダリングを待たせる（ブロックする）要因となる外部ファイルなどを「レンダリングブロックリソース」と呼びます。 headセクションに書いてあるCSSの他、容量の大きい画像ファイルなどもレンダリングをブロックするリソースになります。一般的にWebページの読み込みが３秒以内に終わらないとユーザーはWebページから去ってしまうと言われています。レンダリングブロックリソースを減らすことはWebページの閲覧数を増やす上で非常に重要な要素となっています。   [PR] Webデザインで副業する学習方法を動画で公開中ページの表示速度を診断してみよう ページの表示速度はブラウザChromeのデベロッパーツールで確認できます。デベロッパーツールのNetworkタブを開きながらページを読み込んでみましょう。どのリソースにどのぐらい読み込み時間がかかっているのか、詳細に確認できます。   ページの表示速度改善方法について ページの表示速度を改善するには以下のような手法があります。 JavaScriptファイルの読み込みはbodyセクションの最後にする 不要なCSSは読み込まない 外部ライブラリであれば、圧縮（min）形式のファイルを使用する CDN（Content Delivery Network）を使う CDNとはライブラリをインターネット上で引用できるよう公開しているサービスです。この他の手法などについて、詳しくは以下の記事も参考にしてください MDN – プログレッシブ読み込み   速度改善の前後を比較しよう 今回のサンプルプログラムでは圧縮していないCSSと、圧縮形式のCSSとの読み込み速度を比較します。ソースコードはBootstrap4のサイトの雛形ソースコードを参考にしています。 Bootstrap4 – はじめに index.html <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <p><span class="badge badge-primary">重要</span> 新着メッセージです！</p> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="./bootstrap.js"></script> </body> </html> 実行結果は以下のとおりです。圧縮形式のbootstrap.min.cssは読み込みに平均7msかかりました。 次に圧縮していない形式のbootstrap.cssに変えて試してみましょう。実行結果は以下のとおりです。平均10msと、約1.5倍程度の時間がかかるようになりました。 デベロッパーツールを使うとレンダリングブロックリソースを特定することができます。改善する手法も様々ですのでぜひWebページの読み込み速度改善にチャレンジしてみましょう。   まとめ 今回の記事ではレンダリングブロッキングリソースとして扱われるCSSについて学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次読み込み速度を調べる方法Webサイトが重いとどうなるか原因調査改善効果をチェックしてみよう執筆してくれたメンター   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はCSVファイルをPHPで読み込む方法をやっていくよ。 大石ゆかり 田島メンター！その前にちょっといいですか？ 「CSV」って何ですか？ 田島悠介 じゃあ、CSVとは何かを教えるね。 ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？ 大石ゆかり それならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。 田島悠介 もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？ 大石ゆかり データを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？ 田島悠介 たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。 大石ゆかり そうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？ 田島悠介 その通り！さすがゆかりちゃん、理解が早い。 そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。 大石ゆかり なるほどぉ。 今Google スプレッドシートでCSVの形式にエクスポートしてみました。 カンマ付きのシンプルな文字だけになるんですね。   Googleスプレッドシートの画面   名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身 田島悠介 そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。 ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。 ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。 大石ゆかり CSVについてはよく分かりました！ 今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！ 田島悠介 そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！ 大石ゆかり お願いしまーす！！   CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。   ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。   CSVファイルを1行ずつ配列で読み込む「fgetcsv」 ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler);   読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。 たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。 名前,年齢,血液型 太郎,21,O ・ ・ ・   実際に書いてみよう では実際にプログラムを書いてみましょう。 事前に、以下のように書いた「test.csv」ファイルを作成しておきます。 名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B   それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。 最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。 読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。   以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。   まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。 そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。   タブ文字で区切られたファイル 大石ゆかり 田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・ 田島悠介 それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。 大石ゆかり そうなんですね。よく見るとファイルの拡張子が.tsvになっていました。 田島悠介 そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。 タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。 大石ゆかり タブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降)   まとめ タブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。   [PR] Webデザインで副業する学習方法を動画で公開中空行がある場合 大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。 田島悠介 それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。 配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。   空行判定のコード例 配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){
PHP

最先端をおさえておきたい！フラットデザインとは【初心者向け】

近年Webやアプリデザインで話題の「フラットデザイン」。 フラットデザインを採用したアプリやWebサービスも増えているためデザイナーでも習得を目指している人が多くいます。 今回は、初心者の方でも分かるように過去の歴史から比較して、フラットデザインとはどういった特徴があるのか説明していこうと思います。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   目次 フラットデザインとは フラットデザインの事例と特徴 メリット デメリット フラットデザインのコツ フラットデザインの勉強法   フラットデザインとは フラットデザインとは、できるだけ影やグラデーションなどの装飾を使わずに表現したシンプルで平面的なデザインのことです。 代表的な例はiPhoneやiPadで使われているアイコンです。 iOS7から飾り気や立体感がほとんどない非常にシンプルなものに変更されました。   例1 iOS7のインターフェース 以前のアイコンでは、影やグラデーションなどを用いた装飾性の高い「リッチデザイン」が使われるのが一般的でした。 「リッチデザイン」は立体感がある分、現実のものとそっくりに見え、一目で何をするためのものかが分かりやすかったためです。   例2 iOS6のインターフェース しかし、パソコンが普及し、一般の人たちがパソコンの操作に慣れてくると、現実のものに似せる必要がそれほどなくなってきました。 また、スマートフォンやタブレットが普及したことで、パソコンと比べて画面が小さい端末でも見やすく、押しやすいボタンが求められるようになってきました。   そこで注目されたのが、「フラットデザイン」です。 フラットデザインでは、できるだけ装飾性を抑えたシンプルなデザインなため、スマートフォンやタブレットの画面でも非常に見やすく、ボタンも押しやすいというメリットがあります。 そのため、最近ではウェブサイトやアプリなど、さまざまな場面で「フラットデザイン」が用いられるようになっています。   [PR] Webデザインで副業する学習方法を動画で公開中フラットデザインの事例と特徴 今度はウェブサイト上で使われているフラットデザインを見ていきましょう。 こちらが、最新のApple公式サイトです。 例3 　Appleの公式サイト そしてこちらが、以前のApple公式サイトです。   例4　以前のApple公式サイト 見比べてみると、最新のものはメニューバーが平坦で立体的になっていないことがわかりますね。ボタンも分かりやすく、押しやすい感じがします。 例5　メニューバー 次に、文字に注目してみると、文字数が少なく、短い言葉で表現されていることが分かります。使用するテキストが最小限になっているのもフラットデザインの特徴です。   例6　文字 中央では画像が使われていますが、左右に十分な余白があり、何の広告なのかが瞬時に分かるようになっています。 スマートフォンで見た場合も非常にシンプルで見やすくなっています。   例7　スマートフォンで見た場合 こうして見てみると、フラットデザインとはたんに見た目がシンプルなだけではなく、ユーザーにとって使いやすいデザインになっていることが分かります。 特にスマートフォンやタブレットなど、パソコンよりも画面が小さい端末でも快適に使えるように考えられているところに特徴があると言えます。   フラットデザインのメリット フラットデザインのメリットをまとめると、次のようになります。   スマートフォンやタブレットなど画面の小さめな端末でも見やすく、クリックしやすい フラットなデザインにすることで、スマートフォンやタブレットなど異なる画面サイズでも快適に使えるようになります。 異なる画面サイズでも自動的に見やすく調整されるレスポンシブデザインとも相性がいいと言えます。 シンプルなデザインのために制作するのがぐっと楽になる メニューバーやアイコンなどに影やグラデーションをつけないので、その分制作するのが楽になります。 また、シンプルなレイアウトが多いので、その分制作するのがぐっと楽になります。 ブラウザの読み込み速度が速くなる シンプルなデザインなので、ブラウザの読み込み速度が速くなります。 読み込み速度が向上すれば、検索でヒットされやすくなり、SEO的にもメリットがあります。   フラットデザインのデメリット フラットデザインにはデメリットもあります。 主なデメリットをまとめると、次のようになります。   ボタンやリンクが認識しづらくなる フラットデザインでは、アイコンなどに影やグラデーションをつけないために現実のものとは異なる形で表現されます。 そのため、パソコン操作に不慣れな人にとっては、少々分かりづらいものになってしまいます。   個性的でなくなる シンプルなデザインのために、デザインがワンパターンになりがちな傾向があります。 使用する色やレイアウトを工夫しなければ、ありがちなデザインになってしまうので注意が必要です。   情報量の多いサイトには不向き フラットデザインでは十分な余白をとり、できるだけシンプルにすることが前提です。 そのため、情報量の多いサイトではフラットデザインにすることができません。   フラットデザインのコツ レイアウトに関して レイアウトは複雑にならないようにできるだけシンプルなものにします。 シンプルにするために見えない線（グリッド）に沿ってデザインするのもいいでしょう。 グリッドにすることで、レスポンシブにも対応しやすくなります。 また、あらかじめ十分な余白を設けて、何を強調するのかを明確にしておくことも大切です。 サイト全体で統一されたデザインになるように心がけましょう。   文字に関して 使用するテキストは最小限にしぼりこみ、瞬時に相手に伝わるようにします。 また、文字に複数の色を使ったり、下線などの飾り罫を使ったりすることは避けます。 書体は読みやすくてモダンな書体を（ゴシック系で汎用性の高いHelveticaなどの書体）を選んだ方が無難です。 日本語の書体では、ヒラギノなど細めのウェイトと相性がいいようです。   色に関して 影やグラデーションなどは使わずに、できるだけ原色に近い単色を使って塗りつぶすようにします。 色は彩度を少し落としたくすんだ中間色を選んだ方が見やすく、文字も目立ちやすくなります。 ビビットな色合いは目を惹きますが、長時間見続けるには不向きなので注意が必要です。 また、背景色をうまく利用して境界線を設けるようにすると、画面全体にメリハリが出てきます。   フラットデザインの勉強法 フラットデザインについての書籍を読む フラットデザインの概略をつかんだ後は書籍を読んでさらに理解を深めましょう。 おすすめ書籍は次の2冊です。 フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。 フラットデザインで考える　新しいUIデザインのセオリー   お手本になる作品を見る また、フラットデザインについて学びながら、お手本になるようなデザインも数多く見ておくようにするといいでしょう。 すぐれた作品にはレイアウトや配色、文字の使い方など、学ぶべき点が数多くあります。   参考サイト 20 Great Examples of the Flat Trend in Web Design Examples of ‘Flat’ in Web Design Webデザインの参考にしたい今流行りのフラットデザインサイト15選 フラットデザインを採用するかはターゲット次第?!事例10選まとめとフラットデザインが適しているパターンを考察   自分で作ってみる フラットデザインについて十分に学んだ後は、実際に自分でデザインしてみましょう。 最近ではフラットデザインを作成するための便利なサイトやツールがたくさん用意されています。 以下はその一部です。フラットデザインを作成する際に利用してみてください。   配色 Flat UI Colors   アイコン作成 2.5dButton Flat UI Elements   CSS フレーム Flat UI   UIデザイン FLAT UI DESIGN   以上、「フラットデザイン」とはどういったものなのか説明してきました。 アプリやWebサービスを使ってもらうためにデザインの重要性は日々高まっています。数年後には新しいデザインのトレンドが来ているかもしれませんが、こういった新しいデザインを習得しておくとデザイナーとして十分活躍できるはずです！ [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました。   縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。 無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。 ロングスクロールには次のような利点があります。 ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。 モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。 しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。 この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。   どのようなときにロングスクロールを利用するか ロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。 ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいとき   どのようにロングスクロールを実装するか 次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促す ページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。 訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。 良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます)   2. ナビゲーションオプションを常に保持する ロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。 ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。 こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。 モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。 ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。 以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。   3.「戻る」ボタンが適切に動作することを確認する ロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。 そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。 フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。   4. スクロール位置に基づいてURLを変更する ロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。   5. ページ内ジャンプ機能を使用する ロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。 「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。 例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。 ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。 ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。   6. コンテンツを読み込むときに、視覚的なフィードバックを表示する ヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。 適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。 進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。 読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。   7. スクロールハイジャックを行わない スクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。 この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。 このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。   8. ページの読み込み時間を最適化する ロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。 実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。 ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。   9. リソース消費を考慮する ロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。 ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。 そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。   10. ユーザーの行動を考える ロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。 例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。   [PR] Webデザインで副業する学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。 ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。 ナビゲーションとフィルタをスティッキーに フィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。   それぞれのアイテムをブックマークできるようにする 後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。   条件に一致したアイテムの数を表示する 利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。   フッターにアクセスできるようにする ユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。 しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。 この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。   ロングスクロールと視差効果 インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。 視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。   パララックススクロールをどんなときに使うか 視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。 パララックススクロールは、ガイド付きの物語形式で効果を発揮します。 ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。   パララックススクロールを使うべきではないケース 多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。   パララックスとページパフォーマンス 視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。 すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。 ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。 大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。 一度にたくさんのものをアニメートしないようにしましょう。   パララックスとアクセシビリティ 前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。 ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。   最後に ロングスクロールによって、没入感のあるブラウジングを生み出すことができます。 ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】