TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでブラウザのリロードを判定する方法について現役エンジニアが解説しています。リロードとは再読み込みのことでF5キーやブラウザの更新ボタンなどのことです。リロードを判定するには、window.performance.navigation.typeの値を確認する方法があります。

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

JavaScriptでブラウザのリロードを判定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでブラウザのリロードを判定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

リロードとは

再読み込みのことです。

ブラウザの画面を更新すると、Webサイトを読み込み直しします。この動作をリロードと呼びます。
 

[PR] コーディングで副業する方法とは

window.performance.navigation.typeとは

PerformanceNavigationオブジェクトのプロパティとしてtypeがあります。ここには、表示しているWebサイトがどのように表示されたかを表す値が格納されています。

格納される値は4種類あり、それぞれ下記の表のような意味があります。

0 リンクやブックマーク、または、URLの直接入力でアクセス
1 画面更新ボタンなどのリロード（再読み込み）でアクセス
2 履歴からのアクセス
255 その他のアクセス

 

window.performance.navigation.typeの使い方

windowオブジェクトは記述の省略が可能なので、performance.navigation.typeと記述するだけで使えます。

performanceオブジェクトはJavaScriptに標準で含まれているのでnewなどで生成する必要もありません。performance.navigation.typeには画面のアクセス方法を表す値が格納されています。

この値で処理を分岐すればアクセス方法によって、表示内容を変更できます。
 

ブラウザのリロードを判定する方法

performance.navigation.typeの値を確認します。値が1ならばリロードでの表示ということになります。
 

実際に書いてみよう

アクセスした方法によって変わるPerformanceNavigationオブジェクトのtypeプロパティの値を確認するだけなので

記述も下記の1行だけです。

performance.navigation.type

何かのサイトを表示して、コンソールで上記のコードを実行してみます。

結果は実行するタイミングで変わります。

サイトをリンクやURL入力で表示した時に実行すると、リンクやURLの直接入力などによるアクセスを意味する0が表示されます。画面をリロードしてもう一度上記のコードを実行すると、リロードによるアクセスを意味する1が表示されます。
 

まとめ

使い方は簡単ではあるものの、PerformanceNavigationはすでに非推奨の機能です。PerformanceNavigationTimingという機能に置き換わりつつあります。

使用する際はブラウザの対応状況に注意してください。
 

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

JavaScriptのMathオブジェクトのceil()関数について現役エンジニアが解説【初心者向け】

JavaScriptのMathオブジェクトのceil()関数について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

JavaScriptとデータベースの操作を現役エンジニアが解説【初心者向け】

Webサイトを作っていると、様々な情報を保存したい場合がありますよね。 ニックネームや文章、写真などを保存して表示すれば、様々な機能を実現できます。 ...
JavaScript

JavaScriptで再帰処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで再帰処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav...
JavaScript

JavaScriptでヒアドキュメントを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでヒアドキュメントを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
JavaScript

JavaScriptでsprintfを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでsprintfを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでMathオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つ、Mathオブジェクトを使って数値計算...
JavaScript

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

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次リロードとはwindow.performance.navigation.typeとはwindow.performance.navigation.typeの使い方ブラウザのリロードを判定する方法実際に書いてみようまとめ筆者プロフィール そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] コーディングで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

Pythonでモジュールをリロードする方法【初心者向け】

Pythonでモジュールをリロードする方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 モジュールをリロードする方法について詳しく説明していくね！ 大石ゆかり お願いします！   モジュールのリロードとは Python では import 命令を使い、別のファイルのモジュールを取り込むことができます。これをモジュールをロードするといいます。 import モジュール名 一度ロードしたモジュールは、プログラムが実行中はメモリ上に保持されます。よってもとのファイルが変更された場合、モジュールを再度取り込む必要があります。それがリロードです。 Python でモジュールのリロードを行うには importlib.reload 関数を使用します。 リロードを必要とする場面としては、公式ドキュメントにも紹介されていますが、モジュールのソースファイルを外部エディタで編集していて Python インタープリタから離れることなく新しいバージョンを試したい時、などが挙げられます。詳細は公式ドキュメントを参考にしてください。 https://docs.python.org/3.6/library/importlib.html#importlib.reload 日本語版も用意されています。 https://docs.python.jp/3/library/importlib.html#importlib.reload   モジュールをリロードする方法 モジュールをリロードするには以下のように記述します。 import importlib importlib.reload(モジュール名)   [PR] コーディングで副業する方法とは実際に書いてみよう 今回は簡単なモジュールを作成して、リロードによる動作を確認します。まずは以下のプログラムを作成し、module1.pyという名前で保存してください。 def hello():     print("Hello") 以下は Python インタプリタで実行します。 >>> import module1 >>> module1.hello() 実行結果は以下のようになります。 Hello ここで、Python インタプリタを開いたまま、外部のエディタでmodule1.pyの内容を以下のように変更して保存します。 def hello():     print("こんにちは") Pythonインタプリタに戻り、以下を実行します。 >>> module1.hello() 実行結果は以下のようになります。モジュールがメモリ上にロードされているため、もとのファイルを変更しても変更結果が反映されません。 Hello それでは、モジュールをリロードします。 >>> import importlib >>> importlib.reload(module1) 実行結果は以下のようになります。ディレクトリ階層は環境によって異なります。 <module 'module1' from '/Users/user1/temp/module1.py'> 再度 hello() メソッドを実行してみましょう。 >>> module1.hello() 実行結果は以下のようになります。モジュールがリロードされ、変更結果が反映されていることが確認できました。 こんにちは   この記事を監修してくれた方 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

XcodeでUINavigationBarを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。 今回は、XcodeでUINavigationBar（ナビゲーションバー）を追加する方法を初心者向けに解説します。   なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。   UINavigationBarとは iOSアプリでは画面遷移をするものが多々あります。通常、この遷移は一方向ではなくて、前の画面に戻れるようになっています。 そんなときに前の画面に戻るといった遷移をさせるために使うのがUINavigationBarです。     UINavigationBarの使い方 他のUIパーツと同様に、ストーリーボードからドラッグ&ドロップで設置が可能です。 ただし、どの画面に遷移させるかを設定する必要があるので、このやり方は非効率です。   そこで改めて、Navigation Controllerを配置します。 追加すると2つの画面が表示されます。   この時、画面右側のViewが「Root View Controller」となっていることに注目してください。左側の「Navigation Controller」ではコードを書く必要はありません。 また、デフォルトではRoot View ContollerはUITableViewになっていますが、これを削除してView Controllerにすることもできます。   やり方は、Navigation Controllerから右ドラッグでView Controllerへ線を引き、表示されるオプションからRoot View Controllerを選択するだけです。 この結果として、ViewContorllerにNavigatioin Barが付き、Segueもrootになりました。     [PR] コーディングで副業する方法とはクラスの指定 追加したUIViewControllerにはクラスが割り当てられています。 これでは処理を記述できないので、元々プロジェクトを生成した時にUIViewControllerのクラスとして生成されたViewControllerを利用します。ただし、この後もSegueで画面が繋がることを想定してrootViewContorllerという名前にしておきます。   まず、ViewContoroller.hを選択し表示されるソースの @interface ViewController : UIViewController のViewControllerを選択します。 さらに、メニューから「Edit」→「Refactor…」→「Rename」と選択します。     このような入力画面が表示されますので、名前をrootViewContorllerにします。   すると、@interfaceのみならず、ファイル名や.mファイルの#importや@interface、@implementationまで修正されています。   さらにStoryboardでviewControllerを選択し、CustomClassにrootViewControllerを指定します。     第2の画面の生成 第2の画面はTableViewとして生成します。StoryboardでTableView Controllerを配置してください。   この状態ではTableViewContollerにクラスが割り当てられていませんので、SecondViewControllerという名称のクラスを生成して、割り当ててみます。 まずは、File→New→Fileと進みます。 表示されるダイアログで、Objective-C classを選択します。 Nextをクリックするとクラス名とスーパークラスの入力を求められます。クラス名はSecondViewControllerで、スーパークラスはUITableViewControllerになります。 さらにNextをクリックするとファイルの保存場所を尋ねるダイアログが表示されます。 ここでは他のファイルと同じ場所を選択してください。 最後にCreateボタンを押すとSecondViewController.hとSecondViewController.mが生成されます。SecondViewControllerのコーディングは基本的に通常のUITableViewControllerと同じです。     Navigation Itemの追加 Navigation Barにタイトルやボタンを設定するために、RootViewControllerのNavigationBarにNavigation Itemを追加します。   ここでは、RootViewControllerのNavigation ItemにSecondViewControllerに遷移するためのBarButton Itemを追加します。 デフォルトで表示される文言が「Item」ですので、インスペクタを使ってTitleを「Next」にします。   このボタンからSecondViewControllerへ向けて右ドラッグで線を引きます。   ここで表示されるポップアップからpushを選択してください。 これでRootViewControllerからSecondViewControllerへのpushのSegueが接続されました。     実行する 最後に実行して確認してみましょう。 まずは何もないViewが表示されます。   ここでNextをタップすると作成したTableViewに遷移します。 この時、TableViewには何もしていないのに「Title」と書かれたボタンが表示されています。これをbackBarButtonItemと呼びます。 ボタンのTitleとは「RootViewControllerのNavigation ItemのTitle」ですので、必要に応じて変えてください。   今回の記事は以上です。 ぜひ参考にしてみてください。   他のUIパーツも使いたい場合は、XcodeでUISearchBarを追加する方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
iPhoneアプリ開発

JavaScriptでリロード（更新）する方法を現役エンジニアが解説【初心者向け】

JavaScriptでリロード（更新）する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでリロード（更新）する方法について詳しく説明していくね！ 大石ゆかり お願いします！   リロード（更新）の原理 Webページを再読込することをリロードといいます。 リロードするとWebサーバーからページを再読込します(ブラウザのキャッシュを使用する場合もあります)。Webページ内の更新内容やJavaScriptの変数の値などは、全て初期状態に戻ります。   locationオブジェクトのreloadメソッドの使い方 JavaScriptからリロードを行うにはlocationオブジェクトのreloadメソッドを使用します。   document.location.reload() locationオブジェクトについて、詳しくは以下の記事を参考にしてください。 mozilla-Location   [PR] コーディングで副業する方法とは実際に書いてみよう 今回のサンプルプログラムでは、locationオブジェクトのreloadメソッドを使用し、Webページがリロードされることを確認します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> </head> <body> <div id="div1"></div> <button onclick="func1()">リロード</button> <script language="javascript" type="text/javascript"> var dt = new Date(); var str = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate()
JavaScript

サイト運営に必須！無料で使えるアクセス解析ツール10選

Webサイトを運営していく中で欠かせないのがアクセス解析。 どれだけ良いサイトを作っても人が来ないと意味がありません。どうやったらもっと人が来るか、どのページが一番見られているかなど分析することで改善に繋がります。 今回はサイトのアクセス解析ができるツールをまとめて紹介しています。知らないツールがあればぜひ試してみてください。   なお本記事は、TechAcademyのWebマーケティングオンラインブートキャンプのカリキュラムをもとに執筆しています。   Googleアナリティクス Webのアクセス解析ツールと言えばこれでしょう、逆にこれ以外を思い浮かべる方が難しいです。題名の通りGoogleがサービスも元です。 広告の投資収益率の測定や、Flash、動画、ソーシャル ネットワーク（facebook/twitterなど）のサイトやアプリケーションのトラッキング、売り上げやコンバージョン数に加え、ユーザーの行動や訪問経路の解析までなんでもカバーします。 さらにインターフェイスも見やすいのでまさに無敵です。とりあえず悩んだらこれを選んで間違いはないでしょう。 Googleアナリティクス   忍者アクセス解析 こちらもかなり有名で使われている方も多いと思います。何より設置が簡単ですね。特に無料ブログである忍者ブログとの親和性も高いのでそのコンボはオススメです。 無料版は広告が出てしまうのですが、有料版にすると広告を非表示にできます。ログは4ヶ月間保存できます。アクセス解析初心者から業務までまで幅広く使えるのが人気の理由でしょう。 忍者アクセス解析   [PR] コーディングで副業する方法とはYahoo!アクセス解析 これもまた超有名検索サイトYahooのアクセス解析です。Googleのほど有名ではありませんが、原則無料で使え、ユーザー属性分析、リアルタイム分析、組織分析、広告・コンバージョン分析など機能的には引けを取りません。 直感的に使えるグラフィカルなインターフェースもみやすく初心者でも楽しいです。各種基本的数値のリアルタイム解析やリアルタイム足あとなど、リアルタイム分析に重点を置いている点、訪問組織分析やユーザー追跡など、個別の分析が可能な点は他とは一線を画すため重宝されている。 最初に紹介したGoogleアナリティクスと併用して使っている方も多くいて、それがベストな選択肢なのかもしれません。 Yahoo!アクセス解析   Ptengine 登録アカウント数55,000アカウント以上になり最近注目が集まってきているアクセス解析ツールです。グッドデザイン賞も取得したことからセンスのよさが伺えます。なのでユーザーのサイト内での行動をサーモグラフィーで可視化するヒートマップ機能などのグラフィカルな特徴が印象的で使っていてとても楽しいツールといえるでしょう。 リアルタイム解析もうれしいです。カスタムイベントトラッキング機能というのもあり、それは計測したいリンクを管理画 面上で選択すると、そのリンクに対するクリックが計測される機能 です。 WordPressと親和性も高く、専用プラグインがあり、すぐに導入できる点もありがたいですね。 Ptengine   アクセス解析研究所 アクセス解析研究所は、水準が非常に高く独特の機能で人気を集めるアクセス解析ツールです。他社にはない新機能が利用てきるのが特徴で、GPSで誰かの居場所を解析したり、相互リンクの損得バランスのサイトごと分析と面白いことができそうですね。 広告が表示されないので、デザイン的にも美しいです。もちろん無料です。 アクセス解析研究所   FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策 ご存知FC2のアクセス解析ツールです。検索キーワードチェック、リンク元解析、携帯対応、120ページ解析、など他さまざまな機能が搭載されてます。もちろん無料ブログサービスのFC2ブログを利用している人は連携がとてもいいのでぜひ使うべきでしょう。 リアルタイム解析でもあるのもうれしいですね。ごちゃごちゃしてないシンプルなインターフェイスで、すっきり見やすい、管理画面が特徴的です。 FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策   USER LOCAL（ユーザーローカル） USER LOCALは最近良く話題になる無料アクセス解析ツールです。Yahoo!アクセス解析と似ていますが、Yahoo!アクセス解析よりは面倒臭くなく、その点で導入しやすく、より初心者向けといえるでしょう。性別や年齢などのユーザー属性情報を自動で取得できるのも非常に便利です。 USER LOCAL（ユーザーローカル）   ace analyzer　（エースアナライザー） まだ最近できたばかりの比較的新しい解析ツールで、機能も充実していて注目が集まってきています。 アクセス解析用のタグをWEBサイトに設置することが簡単ですし、月・日・時間・曜日別が最初から閲覧できるのは楽で、使いやすいです。 ace analyzer　（エースアナライザー）   アクセス解析 [AccessAnalyzer.com] アクセスログ、アクセス統計、アクセス元統計、システム統計、訪問者統計が解析できます。 アナログな昔ながらのインターフェイスで、数値のみを重視してチェックしたい方におすすめです。 アクセス解析 [AccessAnalyzer.com]   i2i.jp（アイツーアイドットジェイピー） 3G携帯サイト対応なので、3G携帯用ブログページも解析可能で高性能生ログ検索や訪問者のルートが追える足あと追跡機能が搭載されています。 i2i.jp（アイツーアイドットジェイピー）   以上、サイトのアクセス解析ができるツールを集めてみました。 多くの企業がGoogle Analyticsを利用しているかと思いますが、他にも解析ツールはたくさんあります。ツールによって使える機能はそれぞれ違うので、自分たちの運営しているサービスに合わせて選びましょう。 まだこういったツールを導入していないという人は、今回紹介したツールは基本無料で使えるので、ぜひ試してみてください。 [お知らせ]TechAcademyでは初心者でもWebマーケターになれるWebマーケティングオンラインブートキャンプを開催しています。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] コーディングで副業する方法とは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制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】