Last updated on 2023年1月28日
IT関連の仕事はリモートワークやノマド的なライフスタイルができるのが一番の魅力です。そして、報酬も専門的になるにつれ高くなります。
かれこれ10年以上携わってきているWeb制作。その勉強方法をまとめました。参考になると嬉しいです。
Web制作の概要を知る
わたしは、Webデザインを完全独学で勉強してきました。最初のきっかけは、Flashというアニメーションのソフトをもらったことでした。
そのマニュアル用に買った本が初心者にわかりやすくまんがで書かれた本でした。アニメーションができ、動きのあるホームページが作れたのです。今ではJavaScriptなどで動きをだしますが、その当時は画期的でした。
◎この記事はこんな人におすすめ
- 独学でweb制作を勉強したい
- もうすでに勉強しているけれど、他のやり方も知りたい
- おすすめの教材などを知りたい
- コツコツ自分のペースで進めるのが好き
独学は、孤独な作業になりますが、コツコツと何かを作ったりするのが好きという人には適しています。話題を共有できる友も、そのうちみつかります。あきらめずに頑張りましょう。
さて、まずは、Web制作という概略を知りましょう。全くの初心者は、最初から動画や本を片手にというよりは、無料体験などを利用して、どうやってWebができているのかなどの概略を知ってからのほうが効率がいいでしょう。
Webスクールの無料体験などをかしこく利用しよう！
自宅にいながら独学でプログラミングを勉強できるスクールTechAcademyでは、無料体験を実施しています。プログラミングの基礎を学習し、簡単なWebアプリケーションを作成します。この段階で自分にむいているかどうかがわまります。そして、基礎が勉強できます。こういうサービスは利用価値ありです。それ以上に学びたい意欲がでてくるなら、さらに高度なプログラムも用意されています。
CONTENTS
|
1 Webサイトの基礎・しくみを知る[HTML/CSS]
独学で学ぶ方法を3つご紹介。もし英語が得意であれば、英語で検索してみることをおすすめします。IT業界の最先端は、英語圏ですので、英語で検索すると日本以上に多くの情報が見つかります。今回は、日本語で勉強する方法をご紹介しています。
1-1 本で学ぶ
初心者に非常にわかりやすく書かれた本です。著者は、Manaさんという女性の方。サンプルデザインもすてきで、シンプルで洗練された構成になっています。
・今、一番売れているHTML本! Web制作に必要な知識がすべて身につく!
  1冊ですべて身につくHTML & CSSとWebデザイン入門講座 |
1-2 ドットインストールを利用する
動画で勉強する。導入となる初級動画のほとんどはすべて無料！何度でも見放題なので、プログラミングの基礎を固めたい方は是非ご利用ください。
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チュートリアルで勉強 |
2 Webフレームを学ぶ
ホームページやWebシステム作成は、１からコードを書いていくことが当たり前でしたが、現在は構築を便利に進めるための無料サービスが提供されています。
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 5.x対応版] (Webデザイナー養成講座) |
・ビジネスサイトを作りたいならこちらがおすすめ
  ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版 |
4-2 テンプレートを利用する
ワードプレスを設置しただけで、無料で使えるテンプレートがすでに内装されています。それをそのまま使うことも可能です。また、何かに特化したサイトをつくるためのテンプレートもたくさん用意されています。無料から有料までメリット・デメリットがありますが、わからなくなった時にサポートしてくれるのは、有料テンプレートの一番の魅力です。
|
\キャンペーン/
『2020年4月30日までサーバー申し込みでドメインがずっと0円！』 WordPressのサーバーといえば、業界では誰もが知る『Xserver』! 私もお世話になっています。Xserverのおすすめは、利用者が多いので、困った時にググると問題解決しやすいことと、Wordpressがボタンひとつでインストールできる簡単さ。 通常だと年間1000円ほどかかるドメインがずっと無料はとてもお得！ドメイン目的で申し込んでもいいくらいです。少しでも安くブログを作りたいという人！見逃せないキャンペーンです。 |
５ Webサイトに動きをつける
上記までマスターすると、基本的なWebサイト制作は出来るようになっています。さらに一歩踏み込みたいのは、サイトをもっと魅力的にしたいということではないでしょうか？動きをだして、スマートにかっこ良く見せるようなサイトです。
5-1 JavaScriptを学ぶ
そこで必要となる知識がJavaScriptです。最近は、本当によい教材が沢山あるので、ぜひ手にとってみてください。ここまでマスターしている方なら、すんなりと入ってくるはず！
・JavaScriptの基礎力がつく！さらに楽しい！
|
|
6 もっと思い通りのサイトをつくる
6-1 PHPを学ぶ
次におすすめしたいのが、PHPです。基本だけわかればいいというなら、PHPは必要ありませんが、もう一歩さらに勉強を進めることでより自由度の高いウェブサイト／サービスをつくることができるようになります。また、Wordpressに関しても自分でクリエイトしたものが作れるようになります。
・子供でもわかりそうなひらがな説明
  スラスラ読める 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対策をしてもなかなか検索上位にあがってこない、訪問者がのびないという時の最終手段として、広告を出すということが考えられます。短期戦略で上位を狙うなら、こちらも検討してみましょう。
8 収益化を目指す
Webサイトを利用して収益化をめざしたいという人もいるはずです。広告を出して宣伝するのとは逆で、広告を貼ることで、収益が発生します。
それには、条件があります。下記のようなもの
1. 訪問者が広告をクリックする（1クリックで○円など）
2. 訪問者がクリックした広告のリンク先で商品購入やサービスを利用する（購入額の○%、登録されたら○円）等
それらを掲載するには、代表として下記のようなものがあります。どれも登録は無料です。Googleは審査が厳しいと言われています。
9 まとめ
独学の方法は、本、通信スクール、YouTube、Google検索などいろいろあります。できるだけ初心者に役立ちそうなものをピックアップしています。それでも実際に実行していくにつれて、解決法がわからなくて、壁にぶち当たり、そこから進む事ができないことは何度もでてきます。わたしも解決法がわからずに途中で放り出してしまった事が何度もあります。
やっぱり挫折しそうだと思ったら、わからないことが聞けるスクールやメンターに聞くなどのサービスを利用して教えを請いましょう。自分にあった勉強の仕方を探してみてください。
そして、これはほんの入門編です。まだまだ高度なプログラミング技術があり、日々進歩しています。もっと勉強してみたい、興味が湧いた！という方は、ぜひ、他のプログラミングも学んでプロフェッショナルな道をおすすみください！
▼スクール紹介
| ▶世界最大級のオンライン学習サイトUdemy 米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォームで学ぶ 
▶【TECH::CAMP（エンジニアスクール）】 ▶フロントエンドコース【.pro】 ▶Weekly IT CAMP
|
最後までお読みいただきありがとうございました。この記事を読んだ方の中から素敵なクリエーターが生まれることを願っています♡
人気記事
Be First to Comment