TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】
HTML

静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】

初心者向けに静的HTMLの共通部分をincludeして使う方法について解説しています。サイト内の各ページで共通する部分をインクルードすることで効率的に編集、管理を行うことができます。JavaScriptなどを使ったいくつかのインクルード方法について見ていきましょう。

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

静的HTMLの共通部分をincludeして使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

静的HTMLの共通部分をincludeして使う方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

共通部分の多いHTML

1つのwebサイト内で同じようなwebページを作る場合には、そのページごとに同じコーディングの部分を記述することになります。通常、HTMLのページで似たような 複数のページを作成する場合にはヘッダーやフッターなどの共通の部分をあえて作り、同じwebサイト内にいることをユーザーに認識してもらえるような構造に作成をしていきます。
同じようなwebページのコーディングは最初に作ったページのコピペでも良いですが、繰り返して使うコードとして1つのファイルに作成しておくと汎用性があり、今後の編集や管理などもしやすくなります。

 

includeの活用方法

includeする、と言いますが、汎用性があるように作成したコードをincludeすることで一つのプログラミングファイルに共通部分のみを記述したコードを取り込んで1つのファイルとして認識をさせるようにすることが出来ます。これにより、ヘッダーなどを統一させたいサイトは全く同じweb表記をさせることが出来るようになります。
また、全てのページで使用しているヘッダーなどを一斉に変更した場合には、共通部分をincludeしていることで修正をしやすくなります。
実務的にはヘッダー、フッター、サイドバーなどが共通の部分として各ページに共通して使用されることが多いです。
それぞれヘッダーファイル、フッターファイル、サイドバーファイルなどを作成し、適宜のページでこれらのファイルをincludeすることで共通部分のコーディングを何度も記述をしなくて済むようになります。

 

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

様々なinclude方法

includeの方法としては大きく分けて3つあります。1つ目はJavaScriptを使う方法です。JavaScriptのファイル名をheader.jsファイルなどとしてヘッダー部分だけを記述したファイルを作成し、それぞれフッター、サイドバーなどのJSファイルも作成し、HTMLの適宜の場所でJSファイルの読み込みをすることで、共通部分を読み込むことができます。
2つ目としてはSSIと呼ばれるサーバーサイドでの読み込みを行う方法です。読み込ませたいhtmlファイルを自分の使用しているレンタルサーバーなどのFTPサーバにアップロードして読み込ませる方法となります。
3つ目としてはPHPやRubyなどのスクリプト言語を用いて表示する方法です。これらのプログラミング言語はその言語自体が他のファイルなどで呼び出す前提で記述をするためインクルードしやすいですが、一旦HTMLをそれぞれの言語に書き換えてからファイルを読み込ませる必要があります。
これらの他にもWordPressやDreamweaverなどではソフトの仕様としてインクルードがされた記述によって作成されています。これらをうまく活用することで管理を簡単にすることが出来るようになります。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

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

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

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

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

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

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

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

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

記事を検索

関連するキーワード

関連する記事

読みやすいサイト設計を！HTMLで段落分けを行う方法【初心者向け】

HTMLで文章を記入していると段落分けをしたい場面が出てくることがあると思います。段落分けを効果的に使用することができれば、ユーザーにとって読みやすい文章を作成...
HTML

HTMLで画像の下に文字を入れる方法を現役エンジニアが解説【初心者向け】

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

HTMLでinputタグのtype="date"で日付を入力する方法を現役エンジニアが解説【初心者向け】

HTMLでinputタグのtype="date"で日付を入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
HTML

Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】

Google Apps Script をHTMLで活用する術について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

jQueryでouterHTML属性を使う方法を現役エンジニアが解説【初心者向け】

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

HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】

HTMLでtableタグを使わないで段組みレイアウトする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

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

大学入試でプログラミング出題！再編成された大学入学共通テストとは

令和7年より大学入学共通テストが再編成され、プログラミングを含む「情報」科目が新設されます。 つまり令和7年以降に大学受験を控える子どもたちは、受験勉強としてプログラミングを学習する必要が出てきます。 本記事では、この度再編成された大学入学共通テストの内容や新設される「情報」のサンプル問題を紹介しています。 対象年以降に大学受験を控える高校生や親御さんにぜび、ご一読いただきたい記事です。 目次 大学入学共通テスト再編成で「情報」が新設 「情報」新設に至った背景 プログラミングを含む「情報」のサンプル問題を公開 大学入学共通テスト「情報」対策ならテックアカデミージュニア 大学で本格的にプログラミングを学ぶなら しっかり対策して大学入試に備えよう！ 大学入学共通テスト再編成で「情報」が新設 大学入試センターは2021年3月24日の発表で、令和7年度（2025年1月）から刷新される大学共通入学テストでの新科目としてプログラミングを含む「情報」を出題すると発表しました。 新学習指導要領に対応し，令和４年４月から高等学校等において実施される教科に関し，令和７年度大学入学共通テストからは，普通科，専門学科及び総合学科に共通する各教科のうち，国語，地理歴史，公民，数学，理科，外国語及び情報の７教科を出題の対象とし，それぞれの教科の必履修科目及び選択科目の中から出題する。大学入試センター「平成 30 年告示高等学校学習指導要領に対応した 令和７年度大学入学共通テストからの出題教科・科目について」より 出題科目は「情報」の1科目で「情報Ⅰ」の内容が出題範囲となり、情報で一つの試験時間帯となる見込みです。 今後は2021年3月24日に大学入試センターから公表された方針を踏まえ、文部科学省において高校や大学関係者等の協議が行われ最終決定する流れとなっています。 [PR] Webデザインで副業する学習方法を動画で公開中「情報」新設に至った背景 高等学校の新学習指導要領では「情報Ⅰ」「情報Ⅱ」の2科目が設定され、そのうち「情報 Ⅰ」が必履修科目とされています。 この平成30年3月に告示された高等学校学習指導要領に対応するために、大学入試センターは令和7年度大学入学共通テストの出題教科・科目の再編案として、令和4年度から必履修科目となる「情報I」に伴う「情報」教科を新たに追加し、6教科30科目から7教科21科目へと変更するという一定の結論を出しました。 また、政府が掲げる未来投資戦略2018で次のように述べられていることから必履修科目「情報Ⅰ」の内容を『情報』として出題するに至ったとしています。 「義務教育終了段階での高い理数能力を、文系・理系を 問わず、大学入学以降も伸ばしていけるよう、大学入学共通テストにおいて、国語、数学、 英語のような基礎的な科目として必履修科目『情報I』（コンピューターの仕組み、プログラミング等）を追加する」未来投資戦略 2018 ―「Society5.0」「データ駆動型社会」への変革― （平成30年6月15日 閣議決定）」より CBT試験の検討 「情報」はパソコンやタブレットを使って実施すべきだとの意見があり、CBT（Computer-based Testing：コンピュータ等で実施する試験）が検討されましたが、令和7年度大学入学共通テストでは今まで通り、PBT（Paper-based Testing：紙で実施する試験）で行うことに決定しました。 CBT試験について引き続き調査研究が進められことになりますが、全国的に均質で質の高い受験環境（パソコン、ネットワーク等）の確保やトラブルが生じた場合の対応、新しい試験のあり方に対する社会全体の理解など、細やかな検討が必要となりそうです。 プログラミングを含む「情報」のサンプル問題を公開 大学入試センターより、令和7年より新設が検討されている「情報」のサンプル問題が公開されました。 これは具体的なイメージを共有するために作成・公表されたもので、現段階では試験時間等は考慮されていないため、令和7年度大学入学共通テストから「情報」が出題される際に適切な分量と難易度のもとで問題セットが作成されることになります。 また、「情報Ⅰ」の一部を出題範囲として作成しているため、「情報 Ⅰ」全ての内容を網羅しているものではありません。「情報Ⅰ」の教科書の検定中に作成した問題のため、今回紹介するサンプル問題は教科書と照合したものではないことをご了承ください。 それではこの度公開されたサンプル問題をもとに「情報」の出題傾向をみていきましょう。 本記事では大問ごとに一部の問題を抜粋して紹介しています。 「情報」サンプル問題 第１問 情報のサンプル問題、大問1では情報に関する知識が問われています。 問１はインターネットについての問題です。 この問題ア・イを解くには「回路交換方式」や「パケット」が鍵となりそうです。 ウを解くには「情報格差」、エを解くには「クラウド」について理解している必要があります。 ▶︎正解はこちら 「情報」サンプル問題 第２問 情報のサンプル問題、大問2ではプログラミングについて問われています。 第２問は比例代表区の選挙におけるドント方式のプログラミングについての問題です。 プログラミング問題は、はじめの問題の意図を読み取れないと、全問不正解となることも考えられるため、ソースコードの意図を読み取れるようにはじめの問題から丁寧に取り組む必要があります。 ▶︎正解はこちら 「情報」サンプル問題 第３問 情報のサンプル問題、大問3ではデータ分析の手法が問われています。 第２問を解くにはいくつもの複雑な表を組み合わせて、意図を読み取る必要があります。 加えて、「数学Ⅰ」の知識が必要となる問題もあります。 ▶︎正解はこちら コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
高校生プログラミング

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。 そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。 本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり 田島メンター！！GitHubってなんですか〜？ 田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。 大石ゆかり もう少し詳しく教えてもらえますか〜？   GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。 ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。 また、GitHubを使ってソースコードの管理を行っている企業も多数あります。   GitHubが人気な理由と類似サービスとの違い GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。 それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。 理由1：無料のプライベートリポジトリ ソースコードを管理する単位をリポジトリと呼びます。 リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。 ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。 しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。 これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。   理由2：オープンソースコミュニティに育まれたSNS機能 オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。 また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。 このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。 コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度） 開発メンバーの知見を共有する機能（Wiki、GitHub Pages） ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動） 単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。 しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。   理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。 このような環境の中から、以下のような先進的な機能が次々と誕生しています。 世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」 オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能 ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」 これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。   GitHubのアカウント登録 それではさっそくGitHubに登録してみましょう。 まずは、GitHubのトップページにアクセスします。 ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。   次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。 下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。 クイズになっており渦巻状の銀河の絵を数回選択します。 なお、このクイズは定期的に変わるようです。   決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。 ボタンを押して次に進みましょう。   このような画面になります。   登録したメールアドレスに認証のメールが届きます。 メールの内容に従いユーザー認証を行ってください。 以上でGitHubのアカウント登録は完了です。   大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？ 田島悠介 その前にいくつか知っておいたほうがいいことがあるから、教えておくね。 大石ゆかり はい、お願いします♪   [PR] Webデザインで副業する学習方法を動画で公開中GitHubを使う上で知っておきたい事前知識 早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。 ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。 事前知識1：ローカルリポジトリとリモートリポジトリ 事前知識2：コミットとプッシュとは 事前知識3：ブランチ（branch）とは 事前知識4：インデックス（index）とは   事前知識1：ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの状態を保存する場所です。 変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。 基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。   事前知識2：コミットとプッシュとは 最低限この2つは知っておきましょう。 コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存すること プッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作   事前知識3：ブランチ（branch）とは ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。 このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。 ブランチは履歴の流れを分岐して記録していくものです。 分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。   事前知識4：インデックス（index）とは リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。 そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。 逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。 忘れないようにしましょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
Git

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。   UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。 この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。   Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。 その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。 上：Sketch  下：Figma   これが恐らくFigmaが最初の段階から一線を画す理由の1つです。 すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。 私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。 勝者：Figma 理由：プラットフォームに依存しないため   ユーザビリティ（特徴的機能とユーザーインターフェース） 基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。 もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。   Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。 しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。 勝者：引き分け 理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。   価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。 その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。 この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）   当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。 きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。） 勝者：引き分け 理由：Figmaの価格に関する発表はまだない為   [PR] Webデザインで副業する学習方法を動画で公開中コラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。   Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。 なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。 勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為   ファイル共有とスペック リアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。 このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。   これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。 しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。   更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。 あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。 左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。   もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。 勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ
アプリデザイン

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

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

「スキマ時間で稼げる副業はないかな…？」 「どうせなら在宅でできる副業はないかな…？」 「スキルを身につけながら稼ぐことはできないかな…？」   この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。 今の会社の収入だけでは満足できていない人 会社に出勤するのが無駄だと思っている人 そんな人に向けて書きました。   この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。   目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター 副業で特におすすめなのは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系の副業がおすすめです。 今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
副業・フリーランス

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】