TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】
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の構造が複雑になっていること
1時間でできる無料体験！

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

 

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

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

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

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

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

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

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

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

HTMLの要素を操作する方法を現役デザイナーが解説【初心者向け】

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

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコードを表示する方法について、テックアカデミー...
HTML

HTMLの特殊文字でスペースを入力する方法を現役デザイナーが解説【初心者向け】

HTMLの特殊文字でスペースを入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
HTML

HTMLコーダーなら知っておこう。パソコンでスマホ表示する方法を現役エンジニアが解説【初心者向け】

HTMLコーダーなら知っておきたいパソコンでスマホ表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
HTML

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

HTMLのspan要素はご存じでしょうか。 一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。 この記事では、HTMLでspan...
HTML

HTMLエラーチェッカーの使い方を現役デザイナーが解説【初心者向け】

HTMLエラーチェッカーの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
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

初心者におすすめ！ワードプレスが使えるレンタルサーバー（カラフルボックス編）[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ですので、ブックマークしておくことをおすすめします。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
トピックス

レンダリングブロッキングリソースとして扱われる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

簡単に変換できる！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的にもメリットがあります。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
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サイトでも使用できるトグルスイッチのプロトタイプを開発しました。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
Webデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】