Press "Enter" to skip to content

独学でWEBデザイン・制作を勉強する方法【入門編】保存版

IT関連の仕事はリモートワークやノマド的なライフスタイルができるのが一番の魅力です。そして、報酬も専門的になるにつれ高くなります。

かれこれ10年以上携わってきているWeb制作。その勉強方法をまとめました。参考になると嬉しいです。

 

Web制作の概要を知る

わたしは、Webデザインを完全独学で勉強してきました。最初のきっかけは、Flashというアニメーションのソフトをもらったことでした。

そのマニュアル用に買った本が初心者にわかりやすくまんがで書かれた本でした。アニメーションができ、動きのあるホームページが作れたのです。今ではJavaScriptなどで動きをだしますが、その当時は画期的でした。

◎この記事はこんな人におすすめ

  • 独学でweb制作を勉強したい
  • もうすでに勉強しているけれど、他のやり方も知りたい
  • おすすめの教材などを知りたい
  • コツコツ自分のペースで進めるのが好き

独学は、孤独な作業になりますが、コツコツと何かを作ったりするのが好きという人には適しています。話題を共有できる友も、そのうちみつかります。あきらめずに頑張りましょう。

さて、まずは、Web制作という概略を知りましょう。全くの初心者は、最初から動画や本を片手にというよりは、無料体験などを利用して、どうやってWebができているのかなどの概略を知ってからのほうが効率がいいでしょう。

 

Webスクールの無料体験などをかしこく利用しよう!

自宅にいながら独学でプログラミングを勉強できるスクールTechAcademyでは、無料体験を実施しています。プログラミングの基礎を学習し、簡単なWebアプリケーションを作成します。この段階で自分にむいているかどうかがわまります。そして、基礎が勉強できます。こういうサービスは利用価値ありです。それ以上に学びたい意欲がでてくるなら、さらに高度なプログラムも用意されています。

TechAcademy無料動画説明会

CONTENTS

1 Webサイトの基礎・しくみを知る[HTML/CSS]

  • 1-1 本で学ぶ
  • 1-2 ドットインストールを利用する
  • 1-3 Adobeのチュートリアルを利用する
  • 1-4 Web制作のソフトの紹介

2 WEBフレームワークを学ぶ

  • 2-1 Bootstrap

3 Webサイトを制作する

  • 3-1 自分でまず制作をしてみる

4 WordPressでサイトを作る

  • 4-1 WordPressを学ぶ
  • 4-2 テンプレートを利用する
  • [キャンペーン] Xserver申し込みでドメインずっと0円!2020/4/30まで

5 Webサイトに動きをつける

  • 5-1 Javascript

6 思い通りのサイトをつくる

  • 6-1 PHP

7 つくったサイトを見てもらうための施策

  • 7-1 SEO対策
  • 7-2 広告を出してみる

8 収益化を目指す

9 まとめ

  • 9-1 スクール紹介

1 Webサイトの基礎・しくみを知る[HTML/CSS]

独学で学ぶ方法を3つご紹介。もし英語が得意であれば、英語で検索してみることをおすすめします。IT業界の最先端は、英語圏ですので、英語で検索すると日本以上に多くの情報が見つかります。今回は、日本語で勉強する方法をご紹介しています。

1-1 本で学ぶ

初心者に非常にわかりやすく書かれた本です。著者は、Manaさんという女性の方。サンプルデザインもすてきで、シンプルで洗練された構成になっています。

・今、一番売れているHTML本! Web制作に必要な知識がすべて身につく!


1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

1-2 ドットインストールを利用する

動画で勉強する。導入となる初級動画のほとんどはすべて無料!何度でも見放題なので、プログラミングの基礎を固めたい方は是非ご利用ください。

ドットインストール はじめてのHTML

ドットインストール はじめてのCSS

 

1-3 Adobeのチュートリアルを利用する

HTMLコード記述ができるなら、テキストエディタさえあればいいのですが、初心者にはなかなかハードルが高いです。制作する際には、ソフトを利用することをおすすめします。

クリエイティブ関連ソフトとして主流は、Adobeです。Dremwerver, XDがウェブ制作のソフトになります。

他社からもウェブ制作用のソフトがでてきていますが、Adobe Creative Cloudをサブスクリプションすると、Dremwerver, XDの他に写真編集のPhotoshopやイラストなどが書けるIllustrator、動画編集ソフトなど多くのソフトの最新バージョンがすべて利用できます!

さらに、Adobeチュートリルで学習することが可能です。ソフトさえあれば、独学可能なんです!

私は、Adobe Creative Cloudをサブスクリプションしていますが、まだ使った事がないソフトがいっぱいあります。クリエーターにとっては、天国。想像力をかき立てられます!

Creative Cloudは、使用するソフトだけを単体で利用することもできるので、最初は単体で利用することも可能です。

1-4 Web制作のソフトの紹介

あらゆる画面サイズで美しく表示されるレスポンシブなHTML webサイトを作成、コーディング、編集、管理できます。

共同作業促進するパワフル使いやすいプラットフォーム。webサイトモバイルアプリ、音声インターフェイス、ゲームなどデザイン制作チーム全体スムーズおこなうことができます。

Adobeソフト購読

 

Adobeチュートリアルで勉強

Dreamweaver チュートリアル

XD チュートリアル

2 Webフレームを学ぶ

ホームページやWebシステム作成は、1からコードを書いていくことが当たり前でしたが、現在は構築を便利に進めるための無料サービスが提供されています。

Webフレームワークとは、ボタンやテーブル等のホームページを構築する上で必要となる機能の枠組みのことです。例えば、Webフレームワークを使えば、わざわざボタンを表示させるためのコードを書く必要がなくなるなど、効率的に開発を進めることができます。

2-1 Bootstrap

Bootstrapとは、Twitter社が開発した、WebサイトやWebページを効率よく開発するためのWebフレームワークです。既に出来上がっている雛形を自分のコードでカスタマイズできるものを「Webフレームワーク」といいます。

既にCSSファイルやjavascriptファイルが作成されているため、Webデザインや、Webページの土台となるHTML、CSSの知識がない初心者であっても簡単に扱えるように設計されているので、勉強しておいて損はありません。

 

 

3 Webサイトを制作する

3-1 まず自分で制作してみる

HTMLとCSSがわかれば、最小限のことはできるようになります。簡単なものを制作していきましょう。実践が実力になっていきます。

・プロを目指すならこの本。きっちり説明されています。

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉

 

4 Wordpressでサイトを作る

インターネットの30%以上で利用されているオープンソースのCMSです。下記有名サイト以外にも多くのサイトがこのシステムを利用しています。

・本家本元ウォルトディズニー!

▶THE WALT DISNEY COMPANY

・ローリングストーン公式サイト!

▶Rolling Stones Official Site

・スターウォーズ公式サイト!

▶Star Wars

 

4-1 Wordpressを学ぶ

今時のWordpressサイトをぜひ、勉強しましょう。学ぶ順番としては、HTML&CSS→Wordpressが王道です。HTML&CSSを理解してないと、Wordpressdでつまづきが多いです。

▶ドットインストール WordPress入門

・この本一冊あれば、WordPressのことはほぼ理解できる! ぜひ手元に置いておきたい


[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)

・ビジネスサイトを作りたいならこちらがおすすめ


ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版

4-2 テンプレートを利用する

ワードプレスを設置しただけで、無料で使えるテンプレートがすでに内装されています。それをそのまま使うことも可能です。また、何かに特化したサイトをつくるためのテンプレートもたくさん用意されています。無料から有料までメリット・デメリットがありますが、わからなくなった時にサポートしてくれるのは、有料テンプレートの一番の魅力です。

ブロガー専用WordPressテーマ「OPENCAGE」

 \キャンペーン/ 

『2020年4月30日までサーバー申し込みでドメインがずっと0円!』

WordPressのサーバーといえば、業界では誰もが知る『Xserver』! 私もお世話になっています。Xserverのおすすめは、利用者が多いので、困った時にググると問題解決しやすいことと、Wordpressがボタンひとつでインストールできる簡単さ。

通常だと年間1000円ほどかかるドメインがずっと無料はとてもお得!ドメイン目的で申し込んでもいいくらいです。少しでも安くブログを作りたいという人!見逃せないキャンペーンです。

エックスサーバー

 

5 Webサイトに動きをつける

上記までマスターすると、基本的なWebサイト制作は出来るようになっています。さらに一歩踏み込みたいのは、サイトをもっと魅力的にしたいということではないでしょうか?動きをだして、スマートにかっこ良く見せるようなサイトです。

5-1 JavaScriptを学ぶ

そこで必要となる知識がJavaScriptです。最近は、本当によい教材が沢山あるので、ぜひ手にとってみてください。ここまでマスターしている方なら、すんなりと入ってくるはず!

ドットインストール JavaScript入門

ドットインストール jQuery入門

・JavaScriptの基礎力がつく!さらに楽しい!

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

 

6 もっと思い通りのサイトをつくる

6-1 PHPを学ぶ

次におすすめしたいのが、PHPです。基本だけわかればいいというなら、PHPは必要ありませんが、もう一歩さらに勉強を進めることでより自由度の高いウェブサイト/サービスをつくることができるようになります。また、Wordpressに関しても自分でクリエイトしたものが作れるようになります。

ドットインストール PHP入門

・子供でもわかりそうなひらがな説明

スラスラ読める PHPふりがなプログラミング (ふりがなプログラミングシリーズ)

・イラストで理解しやすい超入門シリーズ


確かな力が身につくPHP「超」入門 (Informatics & IDEA)

 

7 つくったサイトを見てもらう

7-1 SEO対策

ウェブサイトを制作したら、見てもらわなければ意味がありません。SEO対策を勉強して検索サイトで上位表示をめざしましょう!

昨今では、SEOのためのライティング技術も必須になってきます。ウェブを制作する前段階で、SEOのためのライティングを念頭にいれて制作しましょう。

・漫画でわかりやすい初心者向けSEO本 漫画が好きという方には受け入れやすい


沈黙のWebライティング —Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉

・もっと踏み込んで勉強したいという方は、現場から学びましょう。

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

また、SEOに関しては、Googleの検索上位決定の仕組みに多いに左右されます。Googleの動向には、最新の注意を払う必要があります。今までにも何度か、その仕組みについての変更がありました。それによって、検索上位に表示されていたのが表示されなくなるということもありました。

▶SEO対策(検索エンジン最適化)とは?【2020年版 最新実践方法】

 

7-2 広告を出す

SEO対策をしてもなかなか検索上位にあがってこない、訪問者がのびないという時の最終手段として、広告を出すということが考えられます。短期戦略で上位を狙うなら、こちらも検討してみましょう。

Googleアドワーズ

Twitter広告

Facebook/Instagram連動広告

 

8 収益化を目指す

Webサイトを利用して収益化をめざしたいという人もいるはずです。広告を出して宣伝するのとは逆で、広告を貼ることで、収益が発生します。

それには、条件があります。下記のようなもの

1. 訪問者が広告をクリックする(1クリックで○円など)
2. 訪問者がクリックした広告のリンク先で商品購入やサービスを利用する(購入額の○%、登録されたら○円)等

それらを掲載するには、代表として下記のようなものがあります。どれも登録は無料です。Googleは審査が厳しいと言われています。

Amazonアソシエイト

A8.net

Googleアドセンス

バリューコマース

もしもアフィリエイト

 

9 まとめ

独学の方法は、本、通信スクール、YouTube、Google検索などいろいろあります。できるだけ初心者に役立ちそうなものをピックアップしています。それでも実際に実行していくにつれて、解決法がわからなくて、壁にぶち当たり、そこから進む事ができないことは何度もでてきます。わたしも解決法がわからずに途中で放り出してしまった事が何度もあります。

やっぱり挫折しそうだと思ったら、わからないことが聞けるスクールやメンターに聞くなどのサービスを利用して教えを請いましょう。自分にあった勉強の仕方を探してみてください。

そして、これはほんの入門編です。まだまだ高度なプログラミング技術があり、日々進歩しています。もっと勉強してみたい、興味が湧いた!という方は、ぜひ、他のプログラミングも学んでプロフェッショナルな道をおすすみください!

▼スクール紹介

世界最大級のオンライン学習サイトUdemy
米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォームで学ぶ

【TECH::CAMP(エンジニアスクール)】
プログラミングスキルを最短で学ぶ

TechAcademy 無料体験
自宅にいながら独学でプログラミングを勉強できるスクールで学ぶ

フロントエンドコース【.pro】
現役フリーランサーが講師、少人数制の完全対面式で学ぶ

Weekly IT CAMP
短期決戦最短2週間留学で学ぶ


MENTA
プログラミングの質問し放題。メンターから学ぶ。

最後までお読みいただきありがとうございました。この記事を読んだ方の中から素敵なクリエーターが生まれることを願っています♡

 人気記事 

【保存版】働き方改革の最前線!リモートワーク求人サイト10選。

 

Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Mission News Theme by Compete Themes.