HTML

HTMLで404ページの作成方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで404ページの作成方法について解説しています。404エラーにアクセスした際の表示は自作のものを用意することが可能です。404ページに記載するべき内容とオリジナルの404ページの実装方法を覚えましょう。

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

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

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

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

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

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

404ページの作成方法について詳しく説明していくね！

お願いします！

404ページとは

404ページとは、存在しないページにユーザーが訪れた時に表示されるエラーページです。

サーバーにアクセスした際の表示が404で処理されるため、404ページと呼ばれます。

また、htaccessに必要な記述をすることで、自身で作成した404ページを表示することが可能です。

404ページに記述すべき内容

先述した通り、存在しないページに訪れている事を伝えるのが目的です。

ユーザーを誘導したいページ（トップページなど）のリンクを設置するとことで離脱防止につながります。

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

404ページの設定方法と注意点

上記を踏まえて404ページを作成していきましょう。

htaccessに下記コードを記述し、FTPを使ってサーバーにアップします。

ErrorDocument 404 /404.html

404ページを作成してみよう

404ページはまとめサイトが存在するほど個性的なページが多く存在します。

サンプルを参考に作成してみましょう。

Google

GitHub

BASE

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

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

執筆してくれたメンター

舟橋幸太郎

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

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。

過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

HTMLで404ページの作成方法がよく分かったので良かったです！

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

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

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

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

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

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

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

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

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

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

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

HTMLをリンクして新しいウィンドウで開く方法について解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方...

HTML

HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。その1つの解決策として、「レスポン...

CSS

HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLで謎の空白を消す方法を現役デザイナーが解説【初心者向け】

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

HTML

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

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

HTML

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

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

この記事は、Webページの仕組みである「HTML」とは何かを説明します。名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろうこんな疑問を持っている方は、ぜひこの記事を読んでみてください。どういう仕組みでWebページができているのか理解できますよ。目次 HTMLとは Webページの裏側を見る Hyper Text Link（ハイパーテキストリンク） HTMLの種類 HTMLファイルの作り方リンクを表示する画像を表示する段落分けを行う HTMLで覚えておきたいタグ一覧（リスト）田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLとは何かについて詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。例えば、このような情報をホームページにしたいと思います。ニュース孫が生まれて、ついにおじいちゃんになりました。この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文> これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p> HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。 [PR] Webデザインで副業する学習方法を動画で公開中Webページの裏側を見る普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。たとえば、テックアカデミーのWebページも、裏側はHTMLです。 Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。すると、英単語と記号が組み合わさった文章が出てきます。これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。 HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。 Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。 Hyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。 HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】 HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

HTML

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

Web制作の仕事をするうえでの心構えについて解説します。最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。目次404ページとは404ページに記述すべき内容404ページの設定方法と注意点404ページを作成してみよう執筆してくれたメンター 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デザイン

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 HTMLでジャンプするというのは、今見ているページから別の情報が掲載されているページに移動するという意味です。リンクが指定されている部分をクリックすることで、別のページに移動させる必要があるときに利用します。実務でもホームページを制作するWeb制作では、正しいページに正しいリンクを設定することが求められるため、ぜひ一緒に勉強しましょう。目次他ページにジャンプする方法同一ページの特定の場所にジャンプする方法実際に書いてみよう aタグ以外でページ移動をする方法 aタグを利用してボタンのような表示にする他のページにジャンプする方法他のページにジャンプするにはリンクを貼る必要があります。リンクの貼り方は以下の通りです。 <a href="#">ここをクリックすると飛びます。</a> 上記のような記述で他のページへのジャンプが可能です。「#」の部分に飛ぶ先のページを記述します。そのようにすることでジャンプを実現できます。大石ゆかり aタグ(アンカータグ)によって、別のページに移動できるんですね～。田島悠介そうだよ。自分のサイトの違うページや外部のサイトへ移動できるんだよ。また、そのページの特定の位置にも移動できるんだ。大石ゆかり同じページの中でも移動できるんですか？田島悠介できるよ。では、実際に見てみよう！ [PR] Webデザインで副業する学習方法を動画で公開中同一ページの特定の場所にジャンプする方法同一ページにジャンプする先を「アンカー」と言います。アンカーの貼り方ですが、以下のようにします。コード <a href="#index">テックアカデミー</a> <a id="index">ここはindexというidがついた場所です</a> 解説 <a href=”#index”>テックアカデミー</a>をクリックすると、<a id=”index”>ここはindexというidがついた場所です</a>の場所にジャンプします。アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。大石ゆかり hrefは飛び先のURLですよね？ #(シャープ)がついていてlinkって名前が書いてあるだけですね。田島悠介ほとんど全てのタグにid属性をつけることができるんだ。そのidにつけた値を指しているんだよ。大石ゆかり同じページ内で移動しなきゃいけないなんて、どんな時ですか？田島悠介内容が長いとページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。実際に書いてみよう実際に書いてみてWebブラウザーで見てください。今回は異なるページへのリンクがあるので、HTMLは2つ作成します。 HTML -sample.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>別pageジャンプ</h1> <p> <a href="sample2.html">sample2へ</a> </p> <h1>page内ジャンプ</h1> <p>

HTML

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次404ページとは404ページに記述すべき内容404ページの設定方法と注意点404ページを作成してみよう執筆してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] Webデザインで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

JavaScript

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

本稿は、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デザイン

在宅でできる副業おすすめ職種20選【月5万円稼ぐ方法】

「スキマ時間で稼げる副業はないかな…？」「どうせなら在宅でできる副業はないかな…？」「スキルを身につけながら稼ぐことはできないかな…？」この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。今の会社の収入だけでは満足できていない人会社に出勤するのが無駄だと思っている人そんな人に向けて書きました。この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。目次404ページとは404ページに記述すべき内容404ページの設定方法と注意点404ページを作成してみよう執筆してくれたメンター副業で特におすすめなのはIT系の副業です。習得に時間と労力はかかるが、しっかり力をつければ安定して稼ぐことができます。プログラミングは今後必要とされるスキルですので、副業を機会に始めてみるとよいでしょう。難しい印象がありますが、意外と楽しく感じる人も多いので、まずはIT系の副業について勉強してみるのがおすすめです。プログラマー Webサイト制作 Webデザインプログラミングで副業したい人向けに、未経験から副業プログラミングで稼ぐ方法を解説した記事もあります。ぜひご覧ください。 1 在宅でできる副業20選在宅でできる副業にはどのようなものがあるのでしょうか。現在人気の副業を中心に、それぞれの特徴をまとめました。また、スキマ時間で毎月一定収入を稼ぎたいと考えている方向けに、「現実的に副業の範囲で5万円稼げるのか」という点についても説明しています。 1.1 Webライティング Webライティングは、クライアントが指定した内容やテーマに沿って、記事を執筆する仕事です。 Webメディアをはじめとする、様々な媒体でニーズがあり、ブログや商品紹介ページの作成、最近ではYouTubeの台本などの仕事もあります。 Webでの検索は今後も増加していく一方ですので、圧倒的に将来性がある副業だと言えるでしょう。また、時間の確保さえできれば、毎月5万円を安定的に稼ぐことが可能です。長期間継続し、文字単価を上げることができればより少ない時間で収入を得られるようになります。向いている人継続的にスキルアップし、専門性を高めていける人記事を書くために多くのWebサイトや資料を読み込むため、情報収集が苦にならない人様々な分野に興味を持つことができる人タイピングに自信がある人報酬体系文字単価に、納品した記事の文字数を掛け合わせて計算する 1文字0.5円〜3円、1件あたり2000文字〜10000文字が相場成果報酬型のため、案件を多く受けることができればその分収入アップにつながるクラウドソーシングなどのサイトを利用すれば、案件を受注し納品することで即収入が発生メリット日本語の読み書きができれば、特別なスキルがいらない本業にも通じる文章作成能力が身につくデメリットライバルが多く、案件が取りづらい可能性がある案件が取れたとしても最初のうちは低単価で受注することも多くなる 1.2 ブログ自分自身で開設したブログから収益を得る仕事です。ただし、記事を更新するだけでは収益が発生しません。主に記事に外部企業の商品広告を貼り、そこから商品を購入したユーザーがいる場合に手数料が受け取れる「アフィエイト」と、Googleのバナー広告を掲載し記事がクリックされると報酬が発生する「Google アドセンス」という2つの方法があります。 Web広告の市場規模は年々拡大しているため、今後もニーズが増え続けていくでしょう。しかし、ブログアフィリエイターの30％以上が、ブログからの収入を得られていません。月5万円を稼ぐとなると、上位20％に入る必要があるため、安定的に稼ぐためのハードルはかなり高いと言えるでしょう。参考：特定非営利活動法人　アフィリエイトマーケティング協会　「アフィリエイトに関する市場調査　2020年向いている人収益化するまで記事更新を継続できる人「これだけは他の人に負けない」といった特定の分野に精通している人報酬体系アフリエイトの場合、広告を通して商品を1つ購入した場合に、商品価格の数％または一定額が支払われる報酬額は商品ごとに異なり、1件あたり100円〜数千円アドセンスの場合、1クリック30〜40円、PV数次第で収益が変わる記事作成後、検索に反映されるまで3ヶ月ほどかかることがほとんどのため、収益化までは少し時間がかかるメリット P V数を増やす過程で、記事のライティングスキルや集客スキルが身につく一度稼げるブログを作ってしまえば、何もしなくても広告収入が発生するため不労所得を得ることができるデメリット競争が激しく収益化するまでに時間がかかる 1.3 プログラマープログラミング言語を用いて、様々なシステムやアプリケーションを作成したり、動かしたりする仕事です。基幹システムのサーバー構築や、既存システムの開発やテストといった業務内容があります。2018年の時点で、プログラマーのようなIT人材は約20万人以上不足となっており、2025年ではIT人材は36万人の不足と試算されています。金融や家電、自動車など様々な分野においてI Tの活用が推進されていることも追い風になっており、かなり将来性がある職業だといえるでしょう。参考：経済産業省　2019年　I T人材需給に関する調査 1案件あたりの単価が高く、スキルが身につけば短い時間で納品まで完了できますので毎月5万を安定して稼ぐことは可能でしょう。場合によっては1案件で数十万円稼ぐこともできるのがプログラマーの特徴です。ただし、高額な案件を獲得するには、それなりの経験が求められます。企業で3年以上の実務経験と向上心が必要になりますが、満たしていれば時給4,000円以上も視野に入るでしょう。向いている人プログラミングに必要な知識は日々アップデートされているため、常に新しいことを学んで行ける人向上心があり、前向きに取り組める人本業でプログラミングに携わっている人報酬体系プロジェクトごとに異なり、1案件あたりの単価は5〜10万円以上になることが多い高い技術が必要とされるアプリケーション作成の場合には30万円以上となることもある知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットプログラミング言語は一度覚えてしまえば様々な分野に応用可能なため、手に職をつけることができるニーズが高く、案件に困ることがない一般的にスキル習得難易度が高いと思われているが地道に継続すれば未経験からも習得できるデメリット知識を取得するまでには一定時間を確保する必要がある案件を獲得するには企業で数年の就業経験が必要関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.4 Webサイト制作ホームページやLP（ランディングページ）などのWebサイト制作をする仕事です。主にプログラミング言語を用いてコーディングをすることがメインの業務となります。現在、企業活動を行うにあたってホームページの設置は必須といえます。ホームページからの集客を重視している企業も多くなってきていますので、今後も必要とされ続ける職種です。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。後述するWebデザインとのスキルのかけ算で単価を上げることも可能です。案件獲得の競争が激しいという一面はありますが、ポートフォリオ作る、低単価でも実績を積み重ねる、などの工夫をすれば月5万の収益を達成できるでしょう。向いている人必要な知識が日々アップデートされていくため、常に新しいことを学ぶことができる人報酬体系クラウドソーシングから受注する場合は、1ページあたり5000円〜が相場 Word Pressのテーマ制作やコーポレートサイト全体の設計などをする場合は10万円以上になる場合も多い知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットアプリケーション制作やシステム構築を行う場合と比べてWeb制作に必要なプログラミング知識は少なくなっているため、学習を始めて収益化するまでのハードルはやや低い YouTubeの無料教材を利用したり、プログラミングスクールを利用したりすることで効率よく学べる環境があるデメリットクラウドソーシングなどのサイトでは案件数に対して応募者が多く、競争が激しくなる可能性が高い関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.5 Webデザイン Web上に表示されるページの見た目に関する制作を行う仕事です。 Webサービスや広告用LP（ランディングページ）の作成など業務は幅広く、クライアントの依頼を受けて、使い勝手の良い魅力あるページ構成やデザインを考えることがメインの業務となります。自社の魅力を世間によりよく発信するために、Webサイトにデザイン性を重視する企業が増えているため需要は高まってきているといえるでしょう。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。ポートフォリオを作る、低単価でも実績を積み重ねるなどの工夫をすれば月5万の収益を達成できます。先述したWebサイト制作とのスキルのかけ算で単価を上げることも可能です。向いている人新しい技術を吸収することに喜びを見出せる人デザイン以外の幅広い業務をすることに抵抗がない人報酬体系クライアントにより異なり、1案件数千円〜数万円と幅広い企業向けの場合単価が高く10万円以上の案件も多くなる知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリット Web制作に必要なスキル全般が身につくデザインに関して顧客との折衝・調整を行うことも多く、コミュニケーション能力が身につくプログラミングやUI・UXデザインに関するスキルも身につくため、副業から本業へのシフトチェンジも視野に入れつつ、仕事に取り組むことができるデメリット仕事の依頼を受けることができるレベルに達するまで、一定の学習時間を必要とする関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.6 イラスト制作ロゴ、名刺、アイコン、キャラクターなどのデザインをする仕事です。クライアントからコンセプトや完成イメージの指示を受け、デザインをしていきます。LINEスタンプやキャラクターデザイン、図解やTwitterのアイコンなど、様々な分野でイラストが必要とされており、今後もニーズは拡大していくでしょう。初心者でスキルやセンスがない場合、案件が獲得できず1ヶ月の売り上げが数千円で終わってしまうことも多いでしょう。スキルがあっても案件が単発で終わってしまうことも多いため、常に営業・集客をしていかなければ継続して収益を上げることは難しいのではないでしょうか。向いている人自分のデザインスキルやセンスに自信がある人趣味として絵を描いたりデザインすることが好きな人報酬体系 1案件数百円〜数千円とクライアントにより稼げる金額は幅広い企業向け案件の場合単価が高くなるスキルさえあればすぐに稼ぐことができるが、1から始める場合やセンスがあまりないと感じる場合、収益発生までは数ヶ月〜1年以上かかるメリット案件が多数あるため、自分にあった案件を見つけやすいデメリット案件が獲得できるかどうかが各個人のスキルやセンスに左右されやすい良い品質で納品するために、専用のソフトウェアや機器を用意する等、初期投資にある程度の費用がかかる 1.7 ネットショップネット上に店舗を開き、商品を販売する仕事です。ネットショッピングの市場規模は年々拡大しており、将来性は高いといえます。参考：経済産業省　　電子商取引に関する市場調査の結果継続して売り上げをあげるためには、商品ラインナップや価格など、他の店舗と比べた優位性をアピールすることが必要になってきますが、大手と比べた場合、仕入れの面で不利になることも多いため、差別化をし選んでもらうショップにするためにはかなりの努力が必要です。全くの未経験から始めた場合、月5万というのはかなり高いハードルとなるでしょう。向いている人普段からネットショッピングをよく利用している人好きな商品ジャンルがある人 SNSのフォロワーがすでに多い人報酬体系商品の売り上げから仕入れにかかった費用を差し引いた分が利益となる安く仕入れることができる先を確保できていれば、利益を出しやすい商品がすぐに売れるとは限らないため、最低3ヶ月は売り上げが入ってこない可能性があるメリット実店舗と異なり、人件費を極力抑えて物品の販売をすることができるプログラミングの知識がなくても店舗ページを開くことができるプラットフォームも充実しているハンドメイド作品を販売し固定のファンを獲得することができれば継続した売り上げを見込めるデメリット数ある他のショップと差別化をすることが難しく、SNSなども使って集客を行わなければ売り上げが見込めない 1.8 カスタマーサポート企業へのお客様からの問い合わせに対して、メールやチャット、電話で対応をする仕事です。稼働時間の確保さえできれば、安定した金額を毎月稼ぐことができるといえるでしょう。向いている人丁寧な顧客対応が求められるため、飲食店などの接客業やコールセンターでの勤務経験がある人報酬体系時給制となることが多く、1時間あたり1,000円〜1,500円が相場働いた分だけ稼げるので、比較的早く収入を得ることができるメリットマニュアルに沿って対応をする形になるため、特別なスキルがなくても始めることができるデメリット契約上毎週一定時間働くことが求められるクレーム対応をする場合、ストレスが溜まりやすい 1.9 データ入力・文字起こしエクセルやワードにデータを入力したり、動画や音声の内容を聞き会話内容を文字にして書き起こす仕事です。企業内で使用する顧客リスト作成やプレゼン資料の作成、YouTubeの字幕作成といった作業があります。 1件あたりの単価が低いため月5万を稼ごうとすると、相当な時間を費やす必要が出てきます。初心者でも手が出しやすい分、スキルアップが案件の獲得や単価アップに繋がりにくいため、副業として取り組む場合一定金額で頭打ちとなる可能性が高いです。月5万稼ぐのはなかなか難しいといえるでしょう。向いている人淡々と作業をするのが好きな人タイピングのスピードに自信のある人事務職での勤務経験がある人報酬体系 1件あたり数百円〜数千円クラウドソーシングサイトでよく用いられる「タスク形式」の場合、1件入力するごとに数十円入力件数や文字数が多くなればなるほど、稼げる金額は増える作業をした分だけ収益に反映するため、比較的早く収入を得ることができるメリット特別なスキルが不要で、仕事を始めるハードルが低いデメリット 1件あたりの単価が低く、時給換算した収入が少なくなりやすい 1.10 コンサルティング自分が詳しい専門の分野で顧客の相談や指導をする仕事です。主な業務としてはクライアントの悩みを解決することになります。人の数だけ悩みがあると言われますので、需要は無くならない仕事だといえます。コンサルタントとしての実力があればリピーターを獲得できるため、月5万円を稼ぐことは容易です。しかし、スキルに自信がない場合や中途半端なスキルしか持っていない場合、顧客獲得に苦労する可能性が高いため、安定して稼ぐことは難しいでしょう。向いている人既に本業を通じて専門的な知見を持っている人結果にコミットするプロ意識の高い人報酬体系相談時間やコンサルティング後の業績など結果に対して、自身で設定した報酬を受け取るメリット初期費用が不要で、今までの経験や知識を生かすことができる単価が高い可能性があるデメリット本業を通じた人脈形成やSNS・ブログなどを用いた集客、ブランディングができなければ案件が獲得できない 1.11 Webマーケティング Webサービスを用いて企業の業務支援や売り上げアップのコンサルティングをする仕事です。SNSの運用代行や広告・メルマガ配信代行、SEO対策などがメインの業務となります。実力次第で稼げる金額が変わるため、人によって月5万円を稼ぐ難易度は異なりますが、これからWebマーケティングの勉強を始める人にとってはかなりハードルが高いといえるでしょう。向いている人自身でブログを運営し集客に成功している人本業でWeb広告営業に携わっている人本業でWebマーケティングに携わっている人報酬体系クライアントとの契約条件により異なる一般的には成果報酬・月額支払い・一括支払いのいずれかで契約するメリット Webサービスを使って稼ぐスキルを磨くことができるデメリット基本的に結果にコミットできる実力が必要となるため、案件を獲得するまでのハードルが高い 1.12 動画編集あらかじめ撮影された動画を見やすくするために、カット作業やテロップ挿入をする仕事です。企業のプロモーション動画やYouTube、ウェディングムービーなど様々な分野で動画編集のニーズは高まっています。高いスキルは必要とされないため、月5万円程度であれば比較的短期間で稼げる可能性は高いです。ただし、その分ライバルも多く今後案件が獲得しづらくなる可能性は高いでしょう。向いている人細かい作業をするのが苦にならない人報酬体系 1件あたり5,000円〜数万円で、企業向け案件の場合単価が高くなるクラウドソーシングサイトでの募集が多いため、即収入につながりやすいメリット自分自身でYouTubeやプレゼン動画を作る際に身につけたスキルが応用できる一定レベルのスキル取得までにプログラミングなどと比べて時間がかからないデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要 1.13 広告動画制作映像・写真・イラストといった素材を加工・効果付けをして動画を作る仕事です。動画クリエイターと言われることもあります。企業向けの動画広告作成については市場が拡大しており、将来性がある分野となっています。参考：サイバーエージェント　2020年国内動画広告の市場調査動画制作の経験があれば、広告運用等も合わせて依頼されることもあるため、1件あたりの単価も高くなりやすく、月5万円は達成可能といえます。ただし、スキルがない状態では案件獲得が難しく収益化しづらいでしょう。向いている人動画制作に携わったことがある人動画編集で一定の売り上げを上げている人報酬体系 1件あたり数万円〜数十万円企業向けの案件については単価が高い傾向にあるメリット汎用性の高い、本格的な動画制作のスキルを身につけることができるデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要スキルを身につけるまでに時間がかかる 1.14 写真撮影写真販売は、自分で撮影した写真を、ネットショップやストックフォトサービスで売って収入を得る仕事です。プロのカメラマンであれば別ですが、素人が副業として行う場合、売れ行きの良い写真を狙って撮るのはかなり難しく、安定的な収入を得ることは期待できないでしょう。向いている人カメラが趣味の人日頃からよく写真を撮る人報酬体系 1枚数百円〜数千円で販売するのが一般的ストックフォトサービスを使うと、販売価格から40～60％ほどの手数料が差し引かれるメリット趣味を仕事にできる始めるためのコストがほとんどかからないデメリット売れる写真を撮るためには専門的な学習とセンスが必要とされる 1.15 ナレーション企業の広告やアプリゲームに使用されるナレーションを提供する仕事です。 1件あたりの単価が低いだけではなく、募集されている案件の数も多いとはいえないため、月5万円を稼ぐことはなかなか難しいでしょう。向いている人声に自信がある人声優系の学校に通っていた、声優の仕事経験がある人報酬体系 1件あたり数百円〜数千円主にクラウドソーシングサイトやスキル販売サイトで募集しているメリット趣味を仕事にできるデメリット 1件あたりの単価が低い編集や録音をするための機材などの初期投資が必要 1.16 オンラインの家庭教師英語やダイエット、ビジネスなど自分の得意なことをオンラインで教える仕事です。副業として行う場合使える時間が限られてきますので、時間単価を上げることが必須になります。スキルがあれば時間あたりの単価を高く設定することも可能です。しかし、人気や実力がなければ顧客数に影響してしまうため、単価を上げることが容易ではなく、月5万まで稼ぐのは難しいといえます。また、参入障壁が低いのでライバルも多いでしょう。向いている人人に教えることが好きな人報酬体系スキル販売サイトで、1時間当たりの料金を設定し募集することが多い 1時間500円〜数千円程度メリット販売できるプラットフォームが多いデメリット時間を切り売りするのでスケジュール調整が難しい参入障壁が低くライバルが多い 1.17 Twitterの懸賞 Twitter懸賞とは、Twitterのアカウントを利用して応募できる懸賞・キャンペーンのことです。後日当選が発表される形式の懸賞の場合、フォロワー数やツイート・プロフィール内容に注意を払うことで当選確率を上げることができます。しかし通常の懸賞と同様、運の要素が強いため月5万を安定的に稼ぐことは期待できないでしょう。向いている人毎日Twitterを使っている人報酬体系 1回の抽選ごとに商品または現金が当たるメリット主催者が発信したツイートをリツイートするだけなので、ごく短時間で参加できるデメリット転用可能なスキルが全く身につかない見返りの有無が確率に左右される 1.18 フリマアプリフリマアプリで不用品を販売して収入を得る方法です。メルカリをはじめとするフリマアプリは多数リリースされており、ユーザー数も多いため、売るものがあれば即収入につながります。特にブランド品などは高く売れやすいため月5万円を稼ぐことは可能です。しかし、売るものがなくなった時点で出品ができませんので継続的に収入を得ることができないでしょう。向いている人自宅に物がたくさんある人報酬体系アプリを使用する場合、商品売上金額から、1商品販売するごとにかかる10％程度の手数料を差し引いた金額が収益となる即金性が高いメリット既に自宅にあるものを売るためコストがかからず収益を上げやすいデメリット一時的にしか稼ぐことができない転用可能なスキルが全く身につかない 1.19 せどり・転売ネットショップやリサイクルショップから安く商品を仕入れて、仕入れ額よりも高く販売することで差額を利益として得る仕事です。せどりには様々な方法があり、楽天ポイントを利用したり海外から輸入したりする方法などがあります。仕入れ商品のリサーチから梱包、販売まで全て一人で行うため仕組み化することができれば短時間で月5万円を稼ぐことはできます。ただし、価格差が取れる商品を見つけ出すまで時間がかかることも多く、競争相手も多いため、軌道に乗せるまでは時間がかかるでしょう。向いている人特定分野の商品に詳しい人流行に敏感な人報酬体系仕入額と販売価格の差が利益となる出品手数料や送料を考慮して価格設定をする必要があるメリット仕組みがシンプルな商売なので、安く仕入れることができれば特別なスキルがなくても始めることができるデメリットプラットフォームごとの転売規制によって売れる商品が変わる可能性があるブランド品の偽物販売に関わってしまうリスクがある 1.20 ポイントサイトサイト内の特定の広告をクリックして商品購入や会員登録をすることで、報酬を得ることができます。副収入がある男性会社員の22.3%の収入源は、「ポイント・アンケートサイト」で58.1%と最多となっており人気の仕事です。参考：新生銀行　2019年サラリーマンのお小遣い調査月5万円を稼ぐことは十分可能ですが、一度きりの案件も多いため継続して稼ぐことはできないでしょう。向いている人コツコツと単純作業に取り組める人様々な企業に個人情報を提供することに抵抗がない人報酬体系広告ごとに決められた達成条件を満たすと収益発生ポイントが貯まったら電子マネーや現金に交換可能なため即金性が高いメリットクレジットカード作成や口座開設などの高額案件に取り組めば、短期間で一定の金額を稼ぐことができる特別なスキルがなくても始めることができるデメリット誰でもできる仕事のためスキルが全く身につかない 2 在宅でできる副業のメリット・デメリット在宅でできる副業にはメリットだけではなくデメリットもあります。事前に理解しておくことで、自分に合った副業を見つけることができるでしょう。 2.1 メリット在宅でできる副業のメリットは3つあります。それぞれ詳しく説明します。 2.1.1 メリット1　仕事内容や付き合う人を選べる副業で稼ぐためには、自分自身の得意分野を生かして仕事をすることが重要です。苦手なことには時間をかけず、得意なことに集中することで限られた短い時間の中で成果を上げられます。会社で働く場合と異なり、取り組む仕事については自ら取捨選択する姿勢が大切です。また付き合う人を選ぶことができますので、人間関係で余計なストレスを抱えることも少なくて済みます。 2.1.2 メリット2　本業以外のスキルが身につく副業に取り組む過程で、本業以外の実用的なスキルを身につけることができます。副業にもよりますが、成果報酬として1件あたりの対価が設定されていることがほとんどのため、必然的にスキルを身につけることになります。対価をもらいながら学ぶことができますので、学習のアウトプットの場としても最適です。会社に頼らず自力で稼ぐ力を身につけたい、独立しても通用するスキルが欲しい、という人にとって副業は有効な手段となるでしょう。 2.1.3 メリット3　時間と場所に縛られず仕事ができるスマホやPCが1台あれば、基本的に時間や場所に関係なく作業ができます。通勤時間がないのは、精神的にも体力的にも楽だと感じる人は多いのではないでしょうか。また、通勤時間がなくなることで空いた時間やスキマ時間で作業を進めることもできるためより効率的に稼ぐことが可能です。 2.2 デメリット在宅でできる副業のデメリットは3つあります。 2.2.1 デメリット1　自己管理力が必要体調や納期管理、営業や案件の管理など基本的には全ての作業を一人で行う必要があります。無理をして体調を崩してしまったり、急なトラブルが発生して納期に間に合わないという事態が発生した場合、各方面に迷惑をかけることになります。基本的に余裕を持ってスケジュールを組み、仕事に取り組むことが重要です。 2.2.2 デメリット2　孤独感を感じることが多い仕事の性質上、一人で作業する時間が多いため、孤独感を感じることが多くなるでしょう。一人で作業をするのが苦手で、和気あいあいと仕事をしたい人にとっては厳しいかもしれません。 2.2.3 デメリット3　トラブルに巻き込まれる可能性がある仕事の選び方次第では、トラブルに巻き込まれてしまう可能性があります。副業はあくまで自己責任で行うため、万が一トラブルが発生した場合も自分自身で全て対処する必要があります。特に、「簡単・高収入」を謳った副業詐欺には注意しましょう。稼ぐどころか、高額な教材を買わされてしまったり、気付かない間に犯罪に加担してしまう可能性もあります。仕事を受ける場合には依頼先の情報や業務内容を慎重に確認し、問題ないか見極める力が必要です。 [PR] Webデザインで副業する学習方法を動画で公開中3 在宅でできる副業の選び方数ある副業の中でどの副業を選ぶのが良いのか、選び方についてまとめました。 3.1 目的に合わせて選ぶなぜ副業をするのか、副業に対して何を求めているのかを明確にして取り組むことで効率よく稼ぐことができます。以下のように目的に合わせて選ぶことが有効です。「短期間で一定金額を稼ぎたい」：即金性の高いもの「無理なく空いた時間を有効活用したい」：作業負担が少なく手軽にできるもの「本業で足りない生活費の確保」：1ヶ月に稼げる金額が明確なもの「将来の独立・起業のためスキルアップしたい」：汎用性の高いスキルが身につくもの 3.2 最初はリスクの小さい副業を選ぶ副業を始める際、元手がかからないものを選ぶことは重要です。特に本業と異なる分野の仕事に取り組む場合、自分にあった仕事かどうかはスタートしてみるまでわからないことが多いです。もし自分に合わないと判断した時に、コストをかけず始めていればすぐにやめて違う仕事をするという選択ができます。初期投資の額が大きいと、投資額を回収できなくなる可能性も高いです。稼ぐために始めた副業で収益を上げられなかったり、負債を抱えてしまったりすると、精神的な負担が大きくなり本業にも悪影響が出てしまいます。プログラマーやWeb制作、WebデザイナーといったIT系の副業であれば、いずれも初期費用を抑えて低コストで始めることができます。 3.3 自分スキルになるものはおすすめどの副業が良いか迷った時には、自分自身にスキルが身につく副業を選ぶのがおすすめです。時給で働く場合やスキルが身につかない副業を続けると、時間の切り売りをするばかりで、一時的には稼げるかもしれませんが、将来的な収入アップは望めません。副業でスキルアップができると、より高単価の案件を受注することで収入を上げていくことができます。また、副業に取り組む中で自分の可能性に気づき、本業での成果につながったり、転職をするきっかけとなったりすることもあります。スキルを身につけることができる副業としては、プログラマーやWeb制作、WebデザイナーといったIT系の副業がおすすめです。今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。

副業・フリーランス

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLで404ページの作成方法を現役エンジニアが解説【初心者向け】

404ページとは

404ページに記述すべき内容

404ページの設定方法と注意点