TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで一定時間後に別のページにジャンプする方法を現役デザイナーが解説【初心者向け】
icon
icon
HTML

HTMLで一定時間後に別のページにジャンプする方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで一定時間後に別のページにジャンプする方法について解説しています。指定した時間後に別ページへ自動で転送することをリダイレクト処理といいます。ここではmetaタグを使ったリダイレクトの方法を説明します。サイト移転時などに利用してみましょう。

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

HTMLで一定時間後に別のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

一定時間後に別のページにジャンプする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

リダイレクト処理について

リダイレクトとは、アクセスしたページから自動的に任意のページに転送させる処理のことです。

例えばあるページが不要になったため削除したが、検索エンジンでは検索画面にページが残っているというケースが度々あります。しかしそれは検索画面からでは判断できないので、ユーザーはURLをクリックしてしまいます。そこでページが404エラーと表示されるとユーザーはすぐページを離脱してしまいます。そうならないように、削除したページに入ってきたユーザーを他のページに数秒で自動に移動できるように、リダイレクト処理をする必要があるのです。

 

活用場面

活用場面として一番多いのが、サイトを引っ越ししたときにリダイレクトさせる事かと思います。また、印刷物に記載したURLに変更があった場合にもリダイレクトは有効です。リダイレクトさせる事で、ユーザーをスムーズに誘導させることができます。

 

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

一定時間後に別のページにジャンプしてみよう

リダイレクトする方法として一番多いのがhtaccessによるリダイレクトですが、ここではmetaタグでリダイレクト処理をさせる方法をご紹介します。

下記が例として、3秒後にYahoo! Japanにリダイレクトさせる記述です。こちらをmetaに記述します。

<meta http-equiv="Refresh" content="3; url=https://www.yahoo.co.jp/">

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。
TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

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

HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

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

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

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

今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、...
HTML

HTMLでクリック開閉する多階層ツリーのリストを作る方法を現役エンジニアが解説【初心者向け】

HTMLでクリック開閉する多階層ツリーのリストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLレイアウトで左右分割する方法を現役エンジニアが解説【初心者向け】

HTMLレイアウトで左右分割する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

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

PHPのheader関数でリダイレクト処理を行う方法【初心者向け】

PHPプログラムのheader関数で別のページに移動させる方法やリダイレクトの使い方について解説します。 会員機能などがあるサービスでは、よくあるページにリダイレクトされるのを目にすることがあると思いますが、実際の開発でも役立つ知識なので、ぜひ覚えておきましょう。 目次 PHPのheader関数で別ページにリダイレクトする 別ページへ移動するリダイレクトの使い方 リダイレクト時に発生するエラーの対処方法 おわりに   PHPのheader関数で別ページにリダイレクトする header関数自体は、HTTPヘッダを送信する、という機能です。 簡単に言うと、ブラウザでアクセスしてくれた人に、情報を送ることができます。 echoやprintなどの標準出力関数も似てますね。   echo("おはよう"); 上記とした場合、おはようが出力されると思いますが、PHPはサーバサイドで実行されるプログラミング言語です。 ブラウザでアクセスした先のコンピュータ上で実行されて、ブラウザがあるコンピュータ側に、おはようと送信されます。 header関数だけが、HTTPヘッダを送信するわけではなく、PHPプログラミングがあれば、加工されてからHTTPヘッダとして送信されます。   サンプルコード <?php 　 header('Location: https://techacademy.jp/'); 解説 1行目の<?php では、このプログラムがPHPプログラムであることを意味します。 2行目のheader('Location: https://techacademy.jp/'); では、header関数を利用して、techacademy.jpという位置をLocationと指定して、移動する処理を実装しています。 この際、httpから始まる絶対パスでも、.から始まる相対パスでもOKです。 今回は、アクセスした瞬間に「https://techacademy.jp」へ移動します。     大石ゆかり 田島メンター！リダイレクトでは、外部のサイトでも自分のサイトの別のページでも移動させることができるんですか？ 田島悠介 そうだよ。別のサイトやページに移動させることができるんだ。 大石ゆかり どういう時に使うんでしょうか？アクセスした途端に、別のURLに飛ばされたら嫌ですね。 田島悠介 PHPによるリダイレクトなので、PHPに関わりがあるところが良いかな。実際の使用例を見てみよう！   [PR] Webデザインで副業する学習方法を動画で公開中別ページへ移動するリダイレクトの使い方 ページにアクセスすると、別のページへ移動させる方法なんてHTMLでもJavaScriptでもあるのに、PHPのheader関数は必要なの？と思うかもしれません。 どんな時に使用されるのか見ていきましょう。 ログイン時 アフィリエイトIDなどを隠したい場合   1. ログイン時 ログインが必要なページにアクセスした場合、未ログインならば、IDとパスワードの入力を促されるページにリダイレクトするなどで使用します。 PHPの中で、条件にしたがって使用するリダイレクトです。   サンプルコード <?php $user=''; if(!$user){   header('Location: https://techacademy.jp/'); }   解説 1行目の<?phpでは、このプログラムがPHPプログラムであることを意味します。 2行目の$user='';では今回サンプルプログラムを動作させるために、ユーザーがログインしていない状態を想定して、変数$userを空っぽの状態にしています。 3行目のif(!$user){では、変数$userに値が入っていなければという条件式を実装しています。 変数の前に!を記載しているのは否定演算子です。 つまり、変数$userを否定することで、変数$userの値がない場合という条件を作成しています。 PHPのif文に関しては次の記事を参考にしてみてください。 PHPで条件分岐（if文）を使う方法【初心者向け】 | TechAcademyマガジン 4行目のheader('Location: https://techacademy.jp/');では、header関数を利用して、ユーザーがログインしていない場合にこのページが表示された瞬間、Locationで指定したhttps://techacademy.jp/に移動する処理を実装しています。   2. アフィリエイトIDなどを隠したい場合 アフィリエイトIDなどを隠したい場合に使用します。 専用のリダイレクトページを用意して、header関数でリダイレクトさせることによって、アフィリエイトIDを表示させずに移動してもらうことができます。 例えば、自分のURL上に、r.phpを用意しておきます。 専用のリダイレクトプログラムです。   また、別のページにある広告のリンク先を自分のURL/r.php?id=1などとしておきます。 広告のリンクの飛び先を、リダイレクトページに指定しておいて、リダイレクトページにて実際に飛ばしたいページへ移動させます。   サンプルコード <?php $redirect[1] = "http://affiliate-test.com?my_affiliate_id=33"; if( isset($_GET['id']) ){
PHP

Laravelでredirect（リダイレクト）させる方法【初心者向け】

Laravelでredirect（リダイレクト）させる方法について解説します。 どのようなシーンで使われる処理なのかも含めて使い方を理解しておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでredirectさせる方法について詳しく説明していくね！ 大石ゆかり お願いします！   リダイレクトとは 簡単に言うとURL転送です。リクエストされたURLとは別のURLに直ちに再リクエストさせます。 Webアプリケーションでは次のようなシーンで使われます。 ユーザー登録に成功したら、homeページにリダイレクト 未認証ユーザーが要認証ページにアクセスしようとしたら、ログインページにリダイレクト 認証に成功したら、アクセスしようとしていたページまたはhomeページにリダイレクト 認証済ユーザーがログインページにアクセスしようとしたら、homeページにリダイレクト フォーム処理でバリデーションエラーが発生したら、フォームのページにリダイレクト リソースの作成/更新/削除が成功したら、リソースの一覧ページにリダイレクト 多くの場合、ユーザーにはただのページ遷移に見えますが、普通のページ表示と異なる点は、一旦レスポンスが返るためブラウザからのリクエストが2回になることです。 リダイレクトの動作原理は次のようなものです。 Webサーバーがリダイレクトという特別なレスポンスを返す ブラウザはそのレスポンスを受信すると直ちに移動先のURLにリクエストする リダイレクトのレスポンスには以下のような情報が含まれ、ブラウザはその情報をもとにリダイレクトと判断します。 – 300番台のHTTPステータスコード（302, 303, …） – Locationヘッダで示される移動先のURL   Laravelのリダイレクトの書き方 アクションから、RedirectResponseのインスタンスを生成して返します。 RedirectResponseのインスタンスを生成するには様々な方法があります。 // redirect関数にパスを指定する方法 return redirect($to = null, $status = 302, $headers = [], $secure = null); // redirect関数で取得したリダイレクタインスタンスにパスを指定する方法 return redirect()->to($path, $status = 302, $headers = [], $secure = null); // redirect関数で取得したリダイレクタインスタンスにルートを指定する方法 return redirect()->route($route, $parameters = [], $status = 302, $headers = []); // redirect関数で取得したリダイレクタインスタンスにアクションを指定する方法 return redirect()->action($action, $parameters = [], $status = 302, $headers = []); // redirect関数で取得したリダイレクタインスタンスに外部ドメインを指定する方法 return redirect()->away($path, $status =
PHP

HTMLでmetaタグを使って自動的に他のページにジャンプする方法を現役デザイナーが解説【初心者向け】

HTMLでmetaタグを使って自動的に他のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 metaタグを使って自動的に他のページにジャンプする方法について詳しく説明していくね！ 大石ゆかり お願いします！   活用場面 ネットでとあるページを開いてみると「このページは30秒後に自動的に別のURLにリンクします。」なんて表示が出てきて、別のURLに飛ばされた、なんて経験をしている方は結構多いと思います。 このような別のサイトに自動的に飛ばされることを「リダイレクト処理」といい、HTMLによるリダイレクト処理を使う場面としてはサイトのドメインやページのアドレスなど、URLを変更したときや、サイトをhttps化したときなどに使用します。 古いサイトやページのURLに訪れた人に対して「アドレスが変わりました」ということを教える役割があります   自動的に他のページにジャンプする方法 使い方としては、HTMLに専用のタグ「meta refresh」を埋め込むためhtmlによるリダイレクトと呼ばれることがあります。使いかたはいたってシンプルです。HTMLファイルの＜head＞～＜/head＞内に <meta http-equiv="refresh"content="0;URL=https://hoge.com"> と記述するだけです。ページによっては、「本サイトは移転しました。5秒後にジャンプします」といった表示が出た後、自動的に転送されるのを見たことがあるかもしれません。 そうすると、記述は下記のようになります。 <meta http-equiv="refresh" content="5;URL=https://hoge.com"> SEOの効果を期待するならば、転送までの時間は0秒を指定しておくことをお勧めします。 「meta refresh」タグでのリダイレクトは、SEO効果を最大限に発揮できないという可能性はあるものの、移転先のURLをインデックスさせ、評価をある程度引き継ぐことが可能です。 ただし、Googleは「meta refresh」によるリダイレクトをサポートこそしているけれど決して推奨しているわけではないので、.htaccessやphpなどを利用したサーバーサイドでのリダイレクト（301/302リダイレクト）ができない場合に利用することがおすすめです。   [PR] Webデザインで副業する学習方法を動画で公開中metaタグを使って自動的に他のページにジャンプしてみよう meta refreshは初心者でも簡単にリダイレクト処理ができるとても便利なタグです。確かにGoogleの推奨ではありませんが、簡単でお手軽というのが最大の利点であると思います。 また、「meta refresh」タグを設置した場合はリダイレクト処理が正常に行われているかどうかチェックできるツールもありますので、そちらも利用してきちんと正常なリダイレクト処理が行われるチェックすることも併せてお勧めしておきます。   監修してくれたメンター メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

Redirectionの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を紹介する記事です。 サイトが移転した時や別のサイトに移動させたい時に便利なプラグイン、Redirectionの使い方について解説していきます。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター、あるお客様がWordPressのサイトを移転したんですけど、移転先にリダイレクトさせたいんです。どうしたらいいでしょうか？ 田島悠介 「Redirection」っていうプラグインでなんとかなりそうだね。教えてあげるね。 大石ゆかり はい、お願いします〜♪   Redirectionとは WordPressのプラグイン「Redirection」を使用すると、指定したURLから他のURLへと転送を行うことができます。サイトが移転した時などに設定しておくと便利なプラグインです。   新規リダイレクトを追加する このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。   有効化したら、左メニューの「ツール」→「リディレクション」を選択します。 ※Redirectionは日本語対応プラグインです。   新しいリダイレクトを追加する際は下の「新しい転送ルールを追加」から行います。 ソースURL：転送元のURLを入力します。 ターゲットURL：転送先のURLを入力します。 入力が完了したら下の「新しい転送ルールを追加」をクリックします。 今回は「wp_test」という名前のサイトにリダイレクト用の記事を作成し、そこから転送先の「wp_test_2」というサイトに転送処理を行うように設定してみました。 (パーマリンクの設定は「基本」にしています) 該当の記事をクリックします。 転送先のページが自動で表示されました。   [PR] Webデザインで副業する学習方法を動画で公開中リダイレクトの編集・削除を行う 一度作成したリダイレクトは、「ツール」→「リディレクション」の管理画面で一覧表示されます。 項目にマウスポインタを合わせると編集・削除・無効化のメニューが表示されるので、そこから各種の処理を行うことができます。 編集：項目のURLを再編集することができます。 削除：設定したリダイレクトを削除します。 無効化：リダイレクトを一時的に無効にします。再びメニューから「有効化」をクリックすることで元に戻ります。 ※リダイレクトを削除しても設定が戻らず、該当のページに転送されることがあります。 その場合はブラウザのキャッシュをクリアすることで元の状態に戻すことができます。 また、ステータスコードは初期では301に設定されていますが、管理画面の「編集」からこのアイコンをクリックすることで302か307に変更することができます。(サイトの引っ越しなど恒久的に転送させる場合は301のままで構いません)     以上でRedirectionの使い方の解説は終わりです。 設定も簡単ですので、今必要なくても覚えておくと便利でしょう。 ぜひ、WordPressの使い方を覚えましょう！   大石ゆかり 転送元と転送先を指定するだけでリダイレクトを作ってくれるんですね。 田島悠介 うん、そうだね。サイトの移転以外にも更新記事を書いた場合だとか、活用できる場面がありそうだね。 大石ゆかり そうですね！！！   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

JavaScriptでリダイレクトを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでリダイレクトを実装する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでリダイレクトを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   リダイレクトとは リダイレクトとは、あるページから別のページに転送することを指します。別名、URLリダイレクトともいいます。 Webサイトのドメイン変更や引っ越しの場合に、旧サイトから新サイトへ転送する場合やメンテナンス画面やエラー画面への転送、モバイルサイトとPCサイト間の転送などで使用されます。   JavaScriptでリダイレクトを実装する方法 JavaScriptでリダイレクトを実装するには、location.hrefを使用します。 使い方は以下の通りです。   location.href = "url"   location.hrefにURLを渡すことで、そのURLに転送できます。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう それでは実際に書いてみましょう。 GoogleのURLを入力して、Googleのホームページにリダイレクトしてみましょう。 以下のコードを書いて実行します。   location.href="https://www.google.com/";   実行すると”https://www.google.com/”のページに移動します。   筆者プロフィール この記事を監修してくれた方 メンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。 最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。 ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。 また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。 目次リダイレクト処理について活用場面一定時間後に別のページにジャンプしてみよう監修してくれたメンター   1 制作前と制作中の注意点 1.1 ヒアリングの際に注意すべき事 在宅でできる副業としてWeb制作の仕事をする場合、Webディレクションからデザイン、コーディングまでの一連の作業を一人で行なうことがあり、効率よく進めることが納期を達成する鍵になります。 顧客からヒアリングを行ない、仕様をまとめワイヤーフレーム、デザインカンプを作成し、コーディングを行なって、公開となります。その際、制作の根底にある、以下のようなサイト制作の目的を顧客と共有します。 なんのためにサイトを作るのか サイトを作ったことで何を達成したいのか その目的にあったデザイン・システムの提案と設計、導線設計、SNSやWeb広告などの戦略やユーザビリティも加味した仕様書・ワイヤーフレーム・デザインカンプの作成を進めていきましょう。 顧客ともワンチームということで認識を合わせ、同業他社のページや実際にあるサイトのページを見ながら打ち合わせを行なうなど、イメージを共有しながら進めるとズレがなくスムーズに進行します。 あとになって、大幅な仕様追加などの要求が出ないように小まめに情報や目的を共有するためにコミュニケーションを取りましょう。 1.2 制作中に注意すべき事 いざ、仕様が決まりワイヤーフレーム、デザインカンプ作成からコーディングを行なう際の注意点として、顧客とFIXした仕様書のとおりにデザインを作成し、コーディングを行なっているかが大前提となります。 以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。 デザインが崩れている プログラムが動作しない フォントの種類がデザインカンプと異なる 異なるブラウザやデバイスによる見え方の調整を行なっていない etc… また、無事納品は終えたとしても、目標達成のためのデータ解析や分析タグの設定などの対策を怠ると、せっかく受注して仕事をしても今回きりで後々のお付き合いにはつながらない可能性があります。 ページ管理やリニューアル等でも末長いお付き合いを続けるためには、目的を達成するためのツールとしてお金をいただいてホームページを作成するという意識を忘れず、ユーザや顧客に自分を置き換えて、他者目線も意識した、快適に目的を達することができるサイト作成をしましょう。   2 制作後、納品前の注意点 2.1 デザイン関連のチェック項目 2.1.1 表記チェック デザインカンプと仕様書の条件を確認し、顧客の指定の表記方法に基づいているか、スペルミスや表記ゆれも同時にチェックします。 ページ内のテキストチェックツール　difff(デュフフ) https://difff.jp/ 2.1.2 デザインチェック デザインカンプと比較し、レイアウト配置や色、余白、文字（フォントの種類、サイズ・太さ・文字間隔・ジャンプ率）などデザインを忠実に再現しているか確認します。 2.1.3 ダミーチェック 提案時にダミーで入れたテキストや画像をそのままにしていないか、画像・動画の表示有無やサイズ、容量が適切かも最終チェックします。 2.1.4 faviconの設定 Webページに設置するシンボルマークのことです。設定は必須ではありませんが、タブ内にページの象徴するアイコン（例：会社ロゴ等）があることにより、ユーザはサイトを認識しやすくなりリピートに繋げることができる重要なアイコンです。 WebブラウザではURLの左横またはタブに表示され、お気に入りに登録するとブックマークアイコンとして表示されます。 ファビコン favicon.icoを作ろう！ https://ao-system.net/favicon/ 設定した後は、しっかり表示されるかどうかを必ず確認しましょう。 2.1.5 著作物、使用写真等流用掲載についての確認 一般的に、写真や音源、動画などには著作権が設定されており、他者の著作物をWebページで掲載する場合は、権利元が設定している利用規約を確認する必要があります。著作物によっては、権利元に承諾を得てから掲載することが求められます。 著作物をダウンロードするときだけでなく、Webページの公開前にも再度、利用規約を確認しましょう。 2.2 コーディング関連のチェック項目 2.2.1 ブラウザチェック レスポンシブサイトの場合は、Google Chromeのデベロッパーツールに付属のエミュレーターでのチェックの他、WindowsやMacといったPCでFirefox・Safari・Edgeでのブラウザチェック、スマートフォン（iPhone/Android）の実機を使ったチェックを行ないます。 各種ブラウザでチェックを行ない、レイアウトの崩れがないか確認しましょう。 2.2.2 HTML/CSS記述チェック 制作したホームページのHTMLやCSSが要求仕様に即した正しい記述をしているかを以下のチェックツールで確認し、エラーがあれば修正しましょう。 The W3C Markup Validation Service https://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 2.2.3 jQuery・JavaScript・PHP等で作成したコンテンツ jQuery・JavaScript・PHPなどのコンテンツについて、以下のような内容の動作チェックを行ないます。 正常に動作するかどうか 読み込み速度は遅くないか 画像容量は重くないか 各種ブラウザに対応しているか etc… また、商用利用や改変は可能か、使用可能であっても著作権の表示などの条件はないか、などを公開前にあらためて確認しておきましょう。 海外のサイトからのオープンソースを流用した場合は、翻訳機能を使用するなどして、しっかりと確認してから使用しましょう。 PageSpeed Insights https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ https://qiita.com/tukiyo3/items/58b8b3f51e9dc8e96886 2.2.4 リンクチェック リンク切れしていないかをチェックします。パンくずリストのリンクもチェックします。ヘッダーやフッターなどの共通部分についても、リンク切れがないか確認しましょう。 リンク切れチェックツール　Dead-link-checker.com http://dead-link-checker.com/ja/ 2.2.5 404ページ サーバに接続できたものの、該当するページが移動または削除されたことでページがない場合に表示させるページを「404ページ」といいます。 サイトの品質維持のためにも、あらかじめオリジナルページとして作成しておきます。このページが正しく表示されるか確認しましょう。 2.2.6 301リダイレクト設定 あるページへのアクセスを別のページに転送させることを「301リダイレクト」といいます。 たとえばサイトをリニューアルしてURLが変わった場合は、301リダイレクトの設定に漏れがないか、新旧サイトの各コンテンツ（ページ）の設定が1対1になっているか確認しましょう。 301リダイレクトは、ドメインやサーバに変更がある場合、必須となる設定です。301リダイレクトの設定をすることにより、検索順位が下がるリスクを軽減します。 2.3フォーム関連のチェック 2.3.1 入力された内容のチェックに関する動作確認 フォームの各項目の入力内容に対し、「必須項目なのに入力されていない」「半角英数のみ受けつけるルールなのに全角文字が入力されている」などがあった場合にエラーメッセージを返しているか確認しましょう。 2.3.2 ページ遷移の確認 入力画面→確認画面→完了画面にページが正しく遷移するかどうかを確認しましょう。 2.3.3 自動返信メールの確認 送信完了の画面が表示された際、ユーザのアドレスと管理者のアドレスにそれぞれメールが届いているかを確認します。 サンクスメールの文面やアクセスページなどへのリンクを設けた場合は、リンク切れのチェックも行いましょう。 2.4 タグ関連のチェック（SEO関連設定チェックも含む） Googleの検索エンジンのロボット（クローラー）のページ理解を上げる対策が、ページの管理や整理にもなり、結果としてサイトの検索順位の向上やページの質の向上につながります。そのため、作成後のチェックだけで終わらせず、ページを運用する際にもこれらの作業は日々継続して行なうとよいでしょう。 2.4.1 metaタグの設定チェック Googleの検索エンジンの進化とともに、以下のようなWebページが検索上位に表示される傾向となってきました。 – コンテンツとページ内容をしっかりと作成している – 内容に準じた適切なmetaタグを設定している 各ページに適したタイトル・ディスクリプションが、適正な文字数で、なおかつページに即した内容で設定されているかを確認しましょう。 また、キーワードは重要視されなくなりましたが、ページ内容に準じて設定しているかどうかも、合わせて確認しておきましょう。 META SEO inspector サイト作成後のチェックだけでなく、運用の際のサイトメンテナンスとしてGoogle Chromeのアプリとして設定して使用できる便利なツールです。 https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef WordPressでページを作成した場合は、プラグインを使います。 All in One SEO metaタグ作成の他、後述の「サイトマップXML」の作成もできます。 https://ja.wordpress.org/plugins/all-in-one-seo-pack/ 2.5 OGPの設定 OGP（Open Graph Protocol）は、SNSでシェアされた際に、そのページのタイトルや概要・URL・アイキャッチ画像を表示させるためのhtml要素です。 OGPを設定しておくと、ユーザに対してページの内容を正しく伝えることができます。設定していない場合、SNS側で勝手に説明文や画像を抽出して表示してしまい、サイトオーナーの意図していない内容がSNSに表示されてしまいます。 また、Facebookでは、OGPを設定することにより、分析や解析ツールである「ページインサイト」の機能を利用できます。 以下のサイトで、設定したOGPがSNSでシェアされた際にどのような見え方なのかを確認できます。 OGP確認 https://rakko.tools/tools/9/ 2.6 hタグ（見出し）の設定 h1からh6の見出しタグが適切に設定されているかどうかを確認します。数字が小さいほど重要度は上がります。クローラーがページを理解するための大切な要素です。 hタグの使用には順番のルールがあります。数字が小さい順（重要度の大きい順）に並べます。マトリョーシカ人形と同じイメージで、たとえば、h3より重要度の大きなh2をh3の中に入れるような並べ方は推奨されません。 クローラーにコンテンツの構造を正確に伝えるためには順番を守って使用するようにしましょう。 2.7 alt属性 alt属性には、各画像の説明を入力します。alt属性を設定することで、万が一、画像が表示されていない場合に、画像の説明が表示されるようになります。 入力内容については、SEO対策にもなるように、画像の内容に即した内容を入力します。検索順位向上のためには、画像の内容説明はページ内容をクローラーに認識させる大事な要素ですので、漏れがないように登録しましょう。 2.8 サイトマップXML クローラーにページの構造を理解してもらうために使います。以下のようなツールを使って簡単に作成できます。作成後は、サーバに設定することでクローラーがサイトを認識します。 サイトマップを作成-自動生成ツール sitemap.xml Editor 1,000ページまでのサイトであれば無料で作成できます。 http://www.sitemapxml.jp/ ページの新規追加やリニューアル等でページ構成が変わった際には、サイトマップも合わせて同期しておきましょう。 新ページだけでなく旧ページもアップしておく場合など、内容の重複するページが存在する場合は、「悪質なコピーコンテンツではない」ということや、「重要なページである」ということをクローラーに知らせる必要があります。本記事では説明を省略しますが、「canonical」の設定や、「.htaccess」によるURLの正規化設定も、必要に応じて行なうようにしましょう。 また、サイトのリニューアルの場合は、ページの統合やURLの変更が多々ありますので、古いURLから新しいURLに自動的にページを転送する「リダイレクト」の設定も合わせて行ないましょう。 2.9 Web解析、計測タグ　チェック 2.9.1 解析ツールタグ・コンバージョン計測タグ・リマーケティングタグの設定 顧客とFIXしたサイト仕様書に応じて、GoogleAnalyticsやGoogle Adwords、Yahoo!プロモーション広告、タグマネージャーの設定内容と設置場所を確認します。 申し込み数・資料請求数などをコンバージョンとして設定し、計測する場合は、行動につながる導線設計が適切か正しく設定されていて、データが計測されているかも確認しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中3.まとめ Web制作の仕事は、Webサイトなどの成果物に対して対価をいただく仕事です。 完成した成果物をチェックしてエラーや不具合がないことが必須となります。上記のチェック事項を参考にして、作業の区切りで確認、修正を経て品質の高いサイトを作成して納品するようにしましょう。 ひとつひとつの正確で丁寧な作業が、信頼を築き、新たな受注につながります。トライ＆エラーを繰り返しながら技術を身につけ、サイト制作を重ねていくことにより成長していきましょう。 Web業界でキャリアを重ねていくには、継続的な技術習得と努力と柔軟な対応力が必要です。習得した技術を活かせる制作業務を楽しみととらえ、日々前進しましょう。   Web制作の仕事を確実にしたいなら Web制作はスキル習得の難易度が低いため、競合となる働き手が多いです。 もちろん、企業で実務経験を積んだハイレベル人材とも案件を取り合うことになります。 そのため、未経験からだとなかなか案件を獲得できないことも。 テックアカデミーのはじめての副業コースでは、Web制作の案件紹介をしているので、確実に仕事を受けられます。 ※フリーランスを目指す方にもおすすめです。 ※コース終了後の審査に合格し、案件に応募された方には1ヶ月以内の案件紹介を確約しています。 その他、案件サポート対象コースはこちら Webデザインコース フロントエンドコース フロントエンド副業コース（審査の合格までサポート） また、このようなお悩みを持ったことはありませんか？ 「スキルは習得したけど、自分の実力でこなせる自信がなく、案件への応募に躊躇してしまった」 このあるあるを解決すべく、現役エンジニア/Webデザイナー講師が案件の進行や、技術的なわからない点のサポートを無料で行います。 お仕事紹介 プロのサポート この2つのサービスがあるので、安心してお仕事に取り組めます。 Web制作に必要なスキルを体系的に学んで、確実にお仕事を手にしませんか？ まずは無料体験からお試しください。
Webデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで一定時間後に別のページにジャンプする方法を現役デザイナーが解説【初心者向け】