スライドショースライドショースライドショー

ホームページの作り方を勉強する超おすすめの方法│プロが解説する

侍エンジニア塾ブログ編集部の山下です。

この記事を読むあなたは恐らく

ホームページが自分で作れるようになりたいんだけど
どう勉強すればいいんだろう? 仕事にもできるかな?

そんなふうに思っているのではないでしょうか。結論から言えば、ホームページを制作することは全くの初心者でも可能です。学ぶスキルは多いものの、この記事を読めば、

  • ホームページを作る方法
  • ホームページ制作に必要なスキル
  • ホームページ制作の勉強法


以上の3つがしっかりわかることでしょう。私自身の経験をもとに、初心者にもわかりやすいようにまとめましたので、ぜひ最後までお読みください。

勉強する前に確認してほしい2つのこと

ホームページの制作の勉強を始める前に確認してほしいことが2つあります。

目的をしっかり確認する

まずは、自分の目的をはっきりさせることが大事です。単純に趣味レベルでホームページを作ることができればいいのか、ホームページ制作でお金を稼いでいきたいのか。

前者であれば本格的なホームページでなくても、FacebookやTwitterなどのSNSで十分なことも多いです。後者であればクライアントの様々なニーズを形にするために、専門の知識技術が必要になることでしょう。

目的によって、学習するジャンルも方法も異なりますので、まずは「なぜ自分がホームページ制作の勉強をしたいのか?」をはっきりさせましょう。

本当に勉強する必要があるのかを確認する

もう一つ、「本当にホームページ制作の勉強する必要があるのか?」も確認しておきたいところ。

自分でホームページを制作したいと思っている場合、後述する無料のホームページ作成サービスを利用すれば深く勉強する必要はありません。外注しても5000円程度で作れる場合もあります。品質の割に価格はそれほど高価ではありません。

またホームページ制作を仕事としたい場合なら、自分は営業を担当し制作は専門の方にお願いして中間手数料をいただくやり方もあります。ホームページ制作がしたいわけではなく単純にお金を稼ぐことが目的なのであれば、こういった選択肢があることも覚えておくといいでしょう。

勉強すべき4つのスキル

ここからはホームページの制作で勉強すべきスキルについてご紹介していきます。

HTML/CSS

ホームページ制作の基本となるのがHTML/CSSです。

HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ホームページにテキストや画像などを配置するための言語です。

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLと組み合わせて、テキストや背景の色を変えたり等、装飾をするために使う言語です。この2つはセットで用いられますので、勉強は必須です。

※HTML/CSSの詳しい説明は以下の記事をお読みください。

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年7月11日

PHP

PHPはWebサイトの制作に特化しているプログラミング言語です。後述するブログ作成ソフトWordPressもPHPでできており、ホームページを制作する上では定番です。構文がシンプルでプログラミング未経験の方でもとっつきやすく覚えやすい言語と言われています。

※PHPの詳しい説明は下記の記事をお読みください。

【初心者向け】PHPとは? 言語の特徴やできること、作れるものを解説
更新日 : 2019年4月27日

Javascript/JQuery

Javascript/JQueryは、ホームページに「動き」を出すために用いられます。

前述のHTMLとCSSを使って記述するので、今や多くのホームページで使われている人気の言語で、こちらも今や必須のスキルと言えるでしょう。HTML/CSSと合わせて学習することをおすすめしたい言語です

※Javascript/JQueryの詳しい説明は下記の記事をお読みください。

【初心者向け】jQueryとは?JavaScriptとの違いや特徴・使い方の完全まとめ
更新日 : 2019年10月8日

WordPress

WordPressは世界最大のシェアを誇るブログ作成ソフトです。無料で使えて拡張性も高いので、なんと世界のWebサイトの3分の1以上はWordPressでできているほどです。

実際、以下の有名企業のホームページはWordPressで作られています。


利用する企業は続々と増えており、今やホームページ作成において欠かせない存在です。

※WordPressの詳しい説明は下記の記事をお読みください。

WordPressとは?PHPとデザイン言語で基礎からカスタマイズ攻略
更新日 : 2019年9月11日

一緒に勉強すると役立つスキル

ホームページの制作には直接影響はしませんか、以下のスキルも覚えておくと役に立ちます。

Photoshop/Illustrator

ホームページで使用する画像素材(ロゴや商品の写真など)を作成・編集するのに、PhotoshopとIllustratorの2大デザインソフトは使えるようにしておくと有利です。Photoshopは画像の編集など、ホームページで使用する画像素材の作成全般に、Illustratorはロゴやイラストの作成に用いるソフトです。

※Photoshop/Illustratorの勉強におすすめの本はそれぞれ以下の記事をどうぞ。

Photoshop学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2018年10月26日
Illustrator(イラストレーター)の学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2019年4月27日

SEO

せっかく良いホームページを作っても、集客できなければ意味がありません。

そのため、Web集客の鉄板である「SEO(検索結果の上位表示)」の最低限の知識はつけておくといいでしょう。検索で上位が確保できれば安定的なアクセスが得られますよ。

SNS

SEOと並行して、FacebookやTwitterなどのSNSの運用もしておくといいでしょう。

SNSでの知名度を高めておくことは、SEO以上の集客源にもなる可能性があります。また、Googleの検索アルゴリズムの変化に伴って順位が低下してしまうリスクにも備えられます。

アクセス解析

Google Analyticsなどのアクセス解析ツールを使い、ホームページのアクセス数や滞在時間、離脱率などの数字を把握しておくことも大切です。

ホームページは作って終わりではなく、運用して改善していくものです。そのため、ホームページのどこに課題がありどう解決したらいいのかがわかるアクセス解析のスキルもまた重要といえます。

おすすめ独学勉強法3ステップ

では上記のようなホームページの制作スキルを身につけるには、どのように学習を進めていけばいいのでしょうか?私の経験上、最良の方法はとにかく手を動かすことです。そんな経験を踏まえた独学の学習法を書いていきます。

ステップ1:無料ブログでHTMLやCSSの概念に触れる

まずはホームページの基本となるHTMLやCSSを覚えるのが第一です。

おすすめの方法は、アメブロやライブドアブログなどの無料ブログサービスでブログを作成し、それを独自にカスタマイズすることです。すでにある程度デザインが固まったものをいじるのが、手軽でわかりやすいからです。

文字のフォントや大きさ、ブログの背景などを変えてみたり自分好みにカスタマイズしてみましょう。最近は無料ブログでも、それなりに広い範囲でカスタマイズが可能です。

カスタマイズ情報は「アメブロ css カスタマイズ」などでGoogleで検索すれば、多くの情報が出てきますので、まずはこれらを参考にHTMLとCSSの概念を覚えましょう。

ステップ2:WordPressでホームページを作ってみる

無料ブログでのカスタマイズに慣れたら、次はWordPressを使って簡単なブログを作成しましょう。より本格的なカスタマイズが可能です。

WordPressには、前述したPHPとJavaScript/jQueryが使われていますので、これらの概念を把握するのにぴったりのツールです。Wordpress自体は無料ですし、レンタルサーバーも無料のサーバーがいくつかありますので、費用をかけずに本格的にホームページで使われる言語の勉強ができます。

ここでも「ステップ1」のときと同じく検索し、自分の欲しい情報を見つけて慣れていくといいでしょう。

ステップ3:学習サイトや書籍を使って学ぶ

ここまでやれば、ステップ1〜2で紹介した「ホームページの制作に必要なスキル」は一通り触れたことになります。。

正直ここまで慣れれば、自分のホームページをある程度自由に作ることも可能です。ごく簡単なホームページの制作の仕事を受けることもできます。

しかし、

  • より本格的なホームページの制作がしたい
  • 企業を相手にしてホームページ制作の仕事が取りたい


というのであれば、 実力をより確かなものにするために、各スキル別に無料学習サイトや書籍を使って勉強を進めていくことをおすすめします。

おすすめのサイト・書籍

最後に、ホームページ制作の勉強におすすめのサイト・書籍をそれぞれご紹介します。

おすすめのプログラミング学習サイト

まずはプログラミング学習サイトですが、以下の4つが初心者におすすめです。

これらはどれも無料でプログラミングを学習できるサイトです。ゲーム感覚でスライド式で学習することができたり、動画を見ながら空き時間でサクッと勉強できたり、それぞれ特色があります。

まずは4つのサイトを全部を見てみて、自分に合ったものを選んで学習を進めましょう。

これらのサイトの詳細やより高度なレベルの勉強をしたいという方は、以下の記事もご覧ください。

初心者必見!プログラミング無料学習サイトを効率的に使う方法
更新日 : 2019年4月2日

おすすめの書籍

続いて書籍ですが、それぞれスキル別に以下の本がおすすめです。

    • HTML/CSS:1日で基本が身に付く!HTML&CSS超入門|Amazon
    • PHP:いきなりはじめるPHP~ワクワク・ドキドキの入門教室~|Amazon
    • Javascript:スラスラわかるJavaScript|Amazon
    • jQuery:最高の教科書|Amazon
    • WordPress:はじめての簡単WordPress入門[決定版]|Amazon

なお、それぞれスキル別のおすすめの本は以下の記事にまとめていますので、気になる方はどうぞ。

まとめ

ホームページの制作スキルを身につけるのは簡単なことではありません。でも自分に合った勉強法を見つければ楽しみつつ学ぶことができるはずです。

この記事をご参考に、ぜひあなたに合った勉強法が見つかりますように!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ヤマシタ

エンジニア歴10年のフリーランスエンジニア。ITに関わるさまざまなコンテンツの企画・制作も行っています。
ITに関してはノウハウ系、ライフハック系、トレンド系など、200本以上の執筆経験があります。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説