人気ブログランキング
人気ブログランキング
WEBサイト関係 PR

迷う必要はありません!WEBデザイン独学法の紹介

WEBデザインの独学法
記事内に商品プロモーションを含む場合があります

結論:まずはHTMLとCSSを学ぶことから始めること。

本ブログの主旨から外れますが、WEBデザインとは何かを考える

webデザインナーは独学で2、3ヶ月学習すれば誰だってなれます。

まず、“プログラミングなんてやりたくない”という感情は捨てて下さい。webデザインで扱う言語であるHTMLや CSSは、マークアップ言語と呼ばれ、世間一般で言われているコンピュータ言語の中でも簡単な言語の1つであるので安心して下さい。

そもそもwebデザインって何のスキルが必要?という疑問から説明します。

WEBデザインのスキルは大きく分けると3つです。

  • 「コーディングスキル」・・・HTMLやCSS、PHP、Javascriptを使ってWEBサイトの構成と配置を行うスキル。
  • 「画像編集スキル」・・・webサイトに載せる、興味を引くための画像を編集(作成)するスキル。
  • 「ライティングスキル」・・・ホームページを見た人の心を掴む文章を書くスキル

この3つのスキルは、絶対に避けては通れません。

この中で一番取り組みやすく、成果が分かりやすいスキルこそがコーディング(プログラミング)です。初心者はまずコーディングから始めるのがベストです。

私のおすすめするWEBデザインの独学の勉強法を、各ステップに合わせて説明します。

  1. HTMLとCSSを理解する-学習法を解説
    • スクールを利用する
    • 月額980円の学習ツールprogateに登録し、HTMLとCSSを学ぶ
    • 参考用書籍を購入して、学習する(PC初心者にはハードルが高い)
  2. 自身のサイトを立ち上げることにより、ホームページ制作の実績を作る
  3. 企業やお店のページの模写を行う

まずはTHMLとCSSを理解する

web用の言語として有名なコンピュータ言語はさまざまあります。代表的なものをかなりざっくりと簡単に紹介します。

  1. HTML
    • webの最も基本言語でありまずこれを理解する事が始まる。
    • web上の文字や画像などのコンテンツを画面に表示する為の言語
  2. CSS
    • HTMLで表示するコンテンツを着飾る為の言語であり、コンテンツの配置や配色をコントロールする。
    • まず HTMLファイルとCSSファイルは常にセットで存在する。
  3. JavaScript
    • webサイトの動きを細かく制御したい時に使う言語。
    • 演算したり違うファイルに書き込みをしたり出来る。
  4. jquery
    • 言語自体はJavaScriptであるが、webデザインに特化したプログラムをパッケージ化して使う言語
    • JavaScriptは学ぶ範囲が広い為、WEBデザイン初心者はjqueryを学ぶのが一般的
  5. PHP
    • サーバー側でコンテンツを制御するための言語。web制作会社で働く為にはこの言語は必須です。
  6. Ruby
    • 日本人が作った言語
    • web制作会社ではマイナーな言語であるが、webアプリ開発ではたびたび登場してくる。
  7. python
    • 機械学習や情報収集のツールとしての利用が得意。

どうやって学習すればよいか?

先に1番ダメな方法を言います。

お金を全くかけずに情報サイトやYouTubeだけで学習をしようとする事は絶対に避けて下さい。必ず挫折します。

HTMLと CSSを始める学習法は下のどれかにして下さい。おススメ順に紹介します。

学習法その1:Progate(プロゲート)をする

プログラミングを始めてする人向けに作っているアプリでweb版とスマホアプリがあるので好きな時に学習できます。もはや最強のツールです。

月額は980円ですがその価値はすごいの一言です。普段パソコンを使わない人でも説明しながらゲーム感覚で勉強できるのでこれに勝るツールは無いです。まずは無料会員からスタートしてください。

PC向けプロゲートホームページはこちらからアクセス https://prog-8.com/

スマホ用アプリ:(android)Googleplay:https://play.google.com/store/apps/details?id=com.progate&hl=ja&gl=US

学習法その2:書籍を購入して学習する

従来の鉄板独学法ですが、本屋に行けば沢山の「HTML&CSSの✖️✖️✖️」と書かれた本があるはずです。書籍はネットで買うという人はIT関係図書が多く、PDF版が購入可能なSEshopで購入する事をおススメします。Amazonでも売っていないマニアックな本まで揃っているので、おススメです。

SEshopのリンク先を貼っておきます。

おススメの本を紹介↓

作りながら学ぶHTML/CSSデザインの教科書/高橋朋代/森智佳子【1000円以上送料無料】

価格:3,080円
(2020/12/16 23:45時点)
感想(0件)

書籍は短期集中で実力をつけるのにもってこいです。書籍(教科書)は最低1冊は購入しておいてください。ウェブで情報はなんでもそろうからと言って購入しないのはもったいないです。その理由は、

  • 書籍は内容を精査し、ある程度厳しく編集された文章で書かれている。
  • 専門知識を持った人が書いている。
  • 書籍の始まりと終わりの方を見ることで本の難易度が分かりやすい。

これはWEB関係に限ったことではないですが、WEBサービスやオンラインスクールに通ったとしても、「執筆者(講師)の実力が保証され、内容も客観的に問題解決につながるかどうか」については、書籍が圧倒的に保障されていると個人的に感じています。

学習法3:スクールを利用する

過去に挫折した経験がある方はこの1択しかないと思ってください。どの学習法より出費が大きく、初めてプログラミングを独学でやろうと思っている人にとっては選択しづらいかもしれません。冒頭にも書いたように、WEBデザイナーは独学でも本気で勉強すれば2,3か月で実力はつきますが、この2,3か月を孤独に独学できる人は結構少ないのが現状です。また、毎日忙しく一日1時間程度しか学習時間が取れない人では、6カ月くらいは覚悟しないといけません。個人的には、6カ月かかっても独学で頑張っているのであれば全く問題ない(むしろ応援します)と思っています。

ただ、本業の合間に効率的に学習して、その先のビジネスでお金を稼ぎたい人は、プログラミングスクールは非常に有効です。早ければ1カ月~2カ月で習得できる一番確実な手段であり、将来の転職や副業に有効である為、かなり賢い選択と言えます。まずは、自身がどれくらい月に出費できるかを考えてスクールを選択してください。

プログラミングスクールを選ぶ際に重要なことは

  • 無料体験があること
  • 金額設定が高すぎない事(自分が余裕で出費できる月額か)
  • 現役に相談し放題かどうか
  • javaやPHPなどの言語の受講可能か(追加ではなく)
  • 転職サポートがあるか

おススメするスクールについては以下のリンクをはっておきますのでそちらからご確認ください。

最新プログラミングスクール11校を厳選!特徴と徹底比較を紹介! プログラミングを独学でする!と意気込んでみても、パソコンの設定やアプリの設定などつまづくポイントが多数あります。そのポイントで足踏みし...

自身のサイトを立ち上げ、ホームページ制作の実績を作る

学ぶべきはテクニックではなく、「WEBサイトの立ち上げ方法」です。

自分のホームページ(ブログサイト)を持つことは、実際にWEBページを1から立ち上げることになる為、かなりのノウハウが身に付きます。これはプログラミングスクールなどでは必ずカリキュラムに含まれているはずです。

まずは「レンタルサーバー」「ドメイン」の契約をしてください。

レンタルサーバーとは、簡単に説明するとWEB上に表示する「あなたが発信したいサイト情報を記録・展開するためのサーバー」です。まずはレンタルサーバー管理会社のプランを選択し、オンラインで登録(契約)をして下さい。

ドメインとは、サイトのURLを指します。たとえば、デンブログでは”denblog.info”です。このURLを発行できる会社は限られており、この最後の.infoはサイトの属性を示しています。ちなみにメジャーな.jpや.comなどは使用料は高くなります。

どのようにレンタルサーバーを使ってWEBサイトを立ち上げればいいのでしょうか?答えは簡単!レンタルサーバーの所定の位置(WWWフォルダー等)に自信のパソコンで作ったHTMLやCSSをすべてアップロードすればよいです。では、ファイルのアップロード方法を2通り紹介します。

1、契約したレンタルサーバーの専用ページでファイルのアップロードを行う

 ある程度有名なサーバーであれば自身専用の管理画面にアップロード機能が備わっているはずです。

2,FTP(ファイル転送)ソフトを利用する

サーバーにデーターをアップロードするためのファイル転送ソフトを利用してください。ちなみに私は「FileZilla」というFTPを使用しています。

「FileZillaの公式ページ」https://filezilla-project.org/

企業やお店のページの模写を行う

基礎の学習が終わり、自分でHTMLやCSSを書けるようになったらぜひ企業HPやお店のホームページを模写してみてください。自身の実績にもなります。最低3つのWEBサイトを模写してくだい。

いろいろなジャンルで作成することで自分のホームページにポートフォリオを掲載し、仕事を受注しやすくしておくことができます。

模写に使いやすいサイト

ABOUT ME
den
完全独学でWEBデザインを無謀にも挑戦している中年男。 工場勤務の会社員で3児の父。 チャレンジを忘れず、妻に怒られても心はおれず。 有益な情報を発信し、これを見ている人の為になればと思っています。
関連記事一覧