「ホームページを作れるようになりたい！」
「Webサイトを制作するにはどんなスキルが必要なの？」
「ホームページ作成って稼げるの？」
そんな悩みをお持ちではありませんか？
副業をする人やフリーで活動する人も増えてきた今、ホームページを必要とするのは企業だけではありません。個人からの需要も高まる今、ホームページを作れる人の価値も高まっていくでしょう。
本記事では、
- ホームページ作成に必要なスキル7つ
- ホームページ作成は稼げるのか
- ホームページ作成スキルを伸ばす方法
を実際にホームページを作る手順に従って解説します。
ぜひ、ホームページ作成で稼ぎたい方は参考にしてみてくださいね！
※なお、正確にいえば、ホームページは、Webサイトのトップページだけを指す言葉です。ただし、この記事ではWeb制作の仕事をしたいと考えている方に役立つように、サイト制作全体について説明しています。
監修者：平井 隆嗣
システム開発に加えてマーケティングまで対応し、集客や売上に貢献するエンジニア。
開発会社にて4年間の勤務をし、リーダーとして活躍したあとフリーランスとして独立。WordPress導入、デザイン、開発、アプリケーション開発などを幅広く手掛ける。
監修者：迫 佑樹
株式会社SkillHacks代表取締役。大学在学中からプログラミングスキルを身につけ、フリーランスエンジニアとして独立。
自身の経験を活かしプログラミングを教え、その知見からオンラインスクール事業Skill Hacksを運営。そのほか、実店舗ビジネスや知識プラットフォームBrainなどさまざまなビジネス経営中。
ホームページ作成に必要なスキルは7つ
ホームページ作成に必要なスキルは以下の7つに集約されます。
- Webマーケティングスキル
- Webデザインスキル
- プログラミングスキル
- Webライティングスキル
- コミュニケーションスキル
- Webの仕組みの理解
- WordPressのスキル
すぐに全てを身につけることは難しいですが、一つひとつ勉強していけば習得できないことはありません。自分の作業と前後の工程を知っておくことで、チームで働くときにも役立ちます。
以下で一つずつ詳しく解説していきます。
1. Webマーケティングスキル
ホームページを作る準備段階で、Webマーケティングスキルが必要です。
Webマーケティングとは、インターネット上で商品やサービスを売るための活動です。なかでも、ホームページはより多くの人に商品やサービスや知ってもらったり、販売を促進したりするツールになります。
具体的には以下の2種類の機能があります。
- ホームページのコンセプトや目的を定める
- ターゲット層への訴求方法を定める
以下で詳しく解説していきます。
ホームページのコンセプトや目的を定める
そもそも、なぜホームページを作る必要があるのかを洗い出しましょう。たとえば、以下のような目的が想定されます。
- 認知度を上げたい
- 信頼度を高めたい
- 店舗情報や名称、連絡先を名刺代わりに載せたい
- 商品を売りたい
- ファンを作りたい
- インターネットで集客したい など
このように、ホームページを通して実現したいことをまとめておきましょう。なぜなら、ホームページの目的によって盛り込むべきコンテンツが変わるからです。なかなか思いつかない場合は、競合のホームページが参考になるかも知れません。
ターゲットへの訴求方法を考える
目的が決まったら、ユーザーへの適切な訴求方法を検討します。たとえば、目的と手段の関係をまとめると以下のとおりです。
（例1）目的：ホームページは名刺代わり
→手段：店舗情報や連絡先などの基本情報を記載する
（例2）目的：見込み客を集めたい
→手段：コラムやお客さま事例を充実させ、お問い合わせフォームを用意する
（例3）目的：自社の価値観や考え方を広めたい
→手段：ブログや動画コンテンツで情報発信する
ユーザーへの訴求方法を間違えると、本来の目的を達成できません。ユーザーが欲しいと思っている情報を、きれいにまとめて提示することで狙った行動を促していきます。
また、Webマーケティングは打ち手の結果を数字で確認できるところが強みです。たとえば、以下の情報がわかります。
- どんなユーザーが閲覧しているのか
- ユーザーがホームページまでたどり着いた経路
- どのページがよく閲覧されるか
- 1つのページにユーザーがどれだけ滞在したか など
もし、ネット上で集客を見込むなら、SEO（検索エンジン最適化）についても見識を深めておきましょう。
2. Webデザインスキル
ホームページのコンセプトや方針が固まったら、Webデザインスキルが必要になります。ホームページの見た目や操作性を向上させて、ユーザーに満足してもらえるよう設計・実現しましょう。
デザインと言われると、クリエイターのセンス任せな仕事に思われがちです。しかし、実はどこにボタンを配置したほうが良いとか、カラーの組み合わせなどについては、ある程度確立された考え方があります。
基本的な内容はデザイナーでなくても身につけておいたほうが良いでしょう。
本章ではWebデザインスキルについて、以下4つの要素に分けて説明します。
- ホームページの構造を決める
- ホームページの外観を決める
- 画像編集ソフトで画像やロゴを作る
- グラフィックソフトでイメージを形にする
以下で詳しく解説していきます。
ホームページの構造を決める
ホームページに記載する内容を整理整頓します。たとえば、スイーツショップのホームページを作るとき、以下のような構造になるでしょう。
トップページ
┗コンセプト
┗商品メニュー：メニュー1、メニュー2…
┗店舗情報：名称、営業時間、代表者…
┗お知らせ
┗アクセス
┗お問い合わせ
一般的にホームページは、トップページ＞カテゴリ＞コンテンツの順に階層構造になっています。なるべく同系統の情報をまとめて、ユーザーの検索性を高めるようにしましょう。エクセルやスプレッドシートを用いて、サイトマップ（ディレクトリマップ）を作成するのがおすすめです。
ホームページの外観を決める
たとえば、食事を取りたいと考えたとき、以下のお店のうちどちらに入りたいですか？
- 薄暗く、古めかしい雰囲気の不衛生な飲食店
- きれいに清掃され、見た目が整った飲食店
きっと「2.きれいに清掃され、見た目が整った飲食店」を選ぶはずです。
これは、ホームページも同じです。古めかしいデザインより、新しくて洗練されたデザインにユーザーは惹かれます。
「外観が整っていない＝お客さんを呼び込む準備ができていない」なので、ユーザーにとって見やすく、操作しやすいホームページの作成を意識しましょう。
画像編集ソフトで画像やロゴを作る
美しいデザインには、整った画像やセンスのあるロゴが必要です。
そのためには、画像編集ソフトを自由に扱える必要があるでしょう。具体的には「Adobe Illustrator」「Photoshop」の知識があると重宝されます。
画像を使用する際の注意点として、著作権の侵害には気をつけましょう。インターネット上の画像を無断で使用してしまうと、違法になってしまうことがあります。自社で撮影するか、フリー画像サイトの利用を徹底してください。
おすすめは、有料会員制の画像提供サイトです。センスが良く、チープな雰囲気にならないので、積極的に利用しましょう。
グラフィックソフトで実現する
全体の方針が定まったら、ホームページを試作していきます。ソフトは以下のどちらかが扱えると良いでしょう。
- Adobe XD
- Sketch
プロトタイプ（試作モデル）はユーザー体験を検証するために必要な工程です。
近年は、PC用サイトだけでなく、スマートフォンやタブレット端末にも対応した「レスポンシブデザイン」が主流です。どの端末から閲覧しても、見やすい・操作しやすいホームページになるよう工夫が必要です。
3. プログラミングスキル
Webデザインができあがったら、コーディング作業を行います。その際、プログラミングスキルが必要です。
設計や試作品をベースに、ホームページを組み立てていくイメージです。このコーディング作業を終えると「Internet Explorer」や「Google Chrome」といったブラウザで表示する準備が整います。
特にこの作業でつまづく人が多い印象です。たくさんアルファベットが並んでいるためか、アレルギー反応が出てしまう人も少なくありません。
しかし、規則がわかってくればだれでも理解できるようになるので、諦めずに頑張りましょう。
ホームページ制作に必要な言語は以下の通り。
- HTML
- CSS
- JavaScript
- PHP・MySQL
HTML
HTMLは、ホームページを作成するために開発された言語です。これにより、閲覧しているユーザー以外にも、Googleなどの検索エンジンが動かしているプログラム（クローラー）も構造を読み取れます。どのようなサイトかを機械も読み取れるので、検索結果の表示にも役立つのがメリットです。
見出しや画像・表といった基本構造をHTMLタグで指定し、ホームページの骨格を作ります。文字に色を付けたり、強調したりと言った装飾機能もあります。
現在、インターネット上で公開されているWebページのほとんどは、HTMLで作成されています。
CSS
HTMLだけで作られたホームページは無機質な見た目になってしまいます。
そこで、ユーザーにとって見やすいサイトデザインにするために、CSSという言語を使いましょう。HTMLで指定した基本形に背景を付けたり、配置や大きさを変えたりして、見栄えを良くできます。
HTMLとセットで覚えておきたいですね。
JavaScript
ホームページ内に機能や動きをつけたい場合は、JavaScriptという言語を覚えておきましょう。
JavaScriptを記述すると、ホームページに動きをつけられます。たとえば、以下の機能が実装可能です。
- 写真をクリックで大きく表示
- 計算ツールの埋め込み
- アコーディオン型のメニューを動かす
近年のホームページのほとんどに使われている機能をつけられます。
HTMLより習得の難易度は上がりますが、重宝されるスキルのひとつです。
PHP・MySQL
PHPとMySQLを組み合わせると、ユーザーと双方向に情報をやりとりできるようになります。
たとえば、以下のように、ネットショッピングサイトにログインするときにはPHPとMySQLが欠かせません。
PHP：アカウントを新規登録するとき、入力情報の最終確認画面を表示する
MySQL：アカウント情報を記録しておき、必要な場面で引き出す
また、ブログ記事のようにユーザーが情報更新や投稿をしたい場合は、WordPressを使うと便利です。このWordPressにはPHPが使われているので、覚えておいて損はありません。
プログラミングは、難しい言語になると独学するにも限界があります。そこでおすすめなのが、当メディアの「Skill Hacks」です。初心者にもわかりやすいプログラミングのオンライン講座を開講しています。
最大のメリットは無制限に質問できること。疑問はすぐに解決できるので、挫折しづらい環境を整えています。
Webエンジニアを最短距離で目指すなら、ぜひSkill Hacksを検討してみましょう！
4. Webライティングスキル
集客や情報発信を目的としてホームページを作るとき、Webページに特化したライティングスキルを身に着けておく必要があります。
Webコンテンツを最後まで読んでもらうのは、思っているより難しいことです。なぜなら、記事は無料で読めるので、つまらないと感じるとSNSやゲームアプリなど他のコンテンツへどんどん離脱できてしまうからです。
記事に興味を持ってもらい、最後まで読んでもらうには、新聞や雑誌とは違ったスキルが求められます。
また、Googleなどの検索エンジンで上位表示を狙うためのSEOの知識も必要です。文章の内容はライターに任せることもできますが、基本だけ知っておくと重宝されます。
当メディアが運営する「Writing Hacks」では、Webライティングスキル向上に特化したオンライン講座を開講しています。現役Webライターからの添削サービス付きです。質問も自由なので上達が早まる環境といえるでしょう。
ライティングもできるプログラマー・デザイナーは重宝されますよ。
5. コミュニケーションスキル
ホームページ作成を受注するなら、コミュニケーションスキルが必須です。
クライアント（仕事の依頼主）がホームページに求めている機能をもれなくヒアリングする必要があります。また、よりよいホームページ作成に必要な要素を、適切なタイミングで提案するのも大切な役割です。
正しくクライアントの意図を汲み取れれば、修正の手間がなくなるので、自分の工数削減にもつながります。
また、チームで連携して仕事を進めることも多いので、コミュニケーションには十分留意しましょう。
6. Webの仕組みの理解
ホームページが出来上がったら、すぐにインターネットブラウザで閲覧できるわけではありません。ホームページ公開までに以下の手順を踏む必要があります。
- 独自ドメインの取得
- サーバーをレンタルする
- ファイルをアップロードする
3ステップをこなすことで、初めてインターネット上でホームページが見れるようになります。
独自ドメインの取得
ドメインとは、当メディアでいう「https://skill-hacks.co.jp/」の部分です。
インターネット空間のあいているスペースに名前を付けるようなものです。現実世界でいう「住所」にあたる概念です。
他のホームページとまったく同じドメインは使用できません。基本的に早いもの勝ちなので、欲しいドメインがあれば早めに確認しておきましょう。
サーバーをレンタルする
ホームページを公開するには、サーバーが必要です。
これは、お店を出したいときの土地・建物の賃借料に似ています。ホームページを置かせてもらうための土地をレンタルするイメージです。
価格は月額数百円〜数万円と、見込みアクセス数などにより変動します。とはいえ、実際に出店するときの賃料と比べたら、格安であることは間違いないでしょう。
ホームページをアップロードする
ドメインを取得して、レンタルしたサーバーと紐付けられたら、ホームページをネット上にアップロードします。
具体的には、コンテンツ情報が記載された「HTMLファイル」や記事に挿入された「画像ファイル」を専用ソフトでサーバーに転送します。
これらの操作を経て、ようやくホームページが全世界から閲覧できる状態になります。ここまでの工程を最低限、把握しておきましょう。
7. WordPressのスキル
最後に、CMS（コンテンツ・マネジメント・サービス）のひとつであるWordPressの知識があるといいでしょう。
近年のホームページには、WordPressが必ずと言っていいほど導入されています。WordPressを使えば、専門知識がなくてもWebサイトがつくれるからです。
WordPressをホームページへ組み込む仕事も、需要がありますよ。
ホームページ作成は稼げる
ホームページ作成には、ここまで紹介した7つのスキルが必要です。ただし、全てのスキルをパーフェクトに兼ね備えている人は稀。まずはプログラミングやWebの仕組みを理解してから、徐々に手を広げていくのがおすすめです。
なぜなら、サイト制作部分だけを請け負う仕事もたくさんあるため。ページ数や条件にもよりますが、個人の場合は10万円くらいから仕事を受けられます。
ただし、Webデザインやライティングもできれば、もちろん活動の幅は広がりますし、単価も上がります。基本だけ押さえた上で、得意な人とチームを組んだり外注するのもありです。
全体を巻き取れるほど稼げるようになるので、ぜひ少しずつ学習してみてください！
ホームページ作成スキルを伸ばす方法
プログラミングを始め、インターネットのスキルは変化が早いです。自分で最新技術を学び続けなければ、時代に取り残されてしまうでしょう。
勉強方法には以下の3つがあります。
- 本で学ぶ
- WordPressでブログを始める
- オンライン講座を受講する
一つずつ、詳しく解説していきます。
1. 本で学ぶ
ホームページ作成関連の書籍はたくさん出ています。比較的安価に勉強できる方法の一つでしょう。
ただし、本を購入するときは出版年月日を必ず確認しましょう。Web業界は特に変化が激しいので、少し前の知識は既に枯れてしまっているということもよくあります。最新の情報かどうかが大切です。
書籍は気軽に好きな時に読んで勉強できることがメリットです。一方で、つまづいた時に質問ができないデメリットもあります。
独学でコツコツ勉強して、わからないことはネットで調べることが苦ではない人におすすめと言えるでしょう。
2. WordPressでブログを始める
WordPressの操作方法を知るには、実際に手を動かしてみるのがいちばんです。
HTML・CSSを身に付けないとデザインを変えられないので、基本的なコーディングに触れるきっかけになるでしょう。
WebライティングやWebデザインなど、複数のスキルを同時に学べますよ。
3. オンライン講座を受講する
オンライン講座は、ホームページ作成の勉強にはかなり効果的です。
オンライン講座のメリットは、在宅で学べることです。教材が充実していて実際に画面を見ながら学べるものも多いので、理解しやすいのがメリットでしょう。
講座により、質問は出来ないものもあるので、内容はしっかり吟味しましょう。
当メディアが提供する「Skill Hacks」はプログラミングの基礎を学べる講座です。受講期限がなく、自分のペースで学習を進められます。また、質問が無制限にできるため、ちょっとしたエラーでつまづいても安心です。
サンプル動画も用意しているので、ぜひご覧ください！
Skill Hacksなら最速でプログラミング初心者を脱出できる
- 初心者からWebアプリケーション開発の知識を学べる
- 無期限の質問サポート付き
- 買い切り型で受講期限も無制限
▼期間限定で無料配布中▼
- 経済的自立を果たす10のステップ
- 時給10円から年商10億円に至る道のり
- 最短で0→1を立ち上げる起業術
- お金持ちになる5つのルール
- すぐに実行できる即金マニュアル
無料特典を受け取るか迷っている方は、こちらの記事「真面目」でも「頭がいい人」でもお金持ちになれないたった1つの理由」をお読みください。
