WEBデザイン初心者が簡単なHPを作成できるまでの時間

WEBデザインをしたことがない方にとっては、まったくの未経験者がどのくらい勉強をしたら簡単なホームページを作成できるレベルになるのか見当もつかないですよね。

実際、コリスケも初めて勉強をするときは片手間に始めて習得できるものなのかと不安になりながら何度もググったりしてみましたけど、今思えばさっさと手を動かしてみるべきだったなと思います。


結論から言うと、簡単なホームページを作れるようになるレベルまでは想像していたよりも非常に簡単でした!


1日1~2時間ほどの勉強時間
仕事しながら勉強する方なら3ヶ月~半年くらい


1日5~7時間ほどの勉強時間
がっつり勉強できる時間がある人なら1ヶ月~3ヶ月くらい

これくらいの勉強時間で簡単なホームページ制作ができるようになるかと思います!
もちろん個人のレベルの差もありますし、個人差もあるでしょうから責任は負いかねます(^^;)

ちなみにコリスケが言う簡単なホームページとはこんな感じのものです(^^;)
まずはこのサイトを作れるように練習しよう

今は、昔とは違いインターネットでわからないところをダイレクトで検索したら何でも教えてくれる人たちがたくさんいるし、動画の学習サイトなども充実しているので、WEBデザイン初心者の学習環境としては非常に整っているのではないかと思います。

具体的にどんな勉強をしたらいいのか、コリスケの実体験を踏まえながら紹介していきます。


まず大前提として、WEBデザイン初心者といってもピンキリで、本当にパソコンを触ることすらままならない人から、学校の授業で習ったし簡単なことならできちゃうよ。という方もいるかもしれません。

今回は本当にWEBデザインってなんぞや?というような方向けに勉強方法を紹介していくので、ある程度できる人は適当に読み流しちゃってください(^^)/

ブラインドタッチを習得しよう

早起きとブラインドタッチは三文の徳

まずはブラインドタッチですね!これは必須ではないんですが、できる方とできない方では作業スピードが3倍~5倍くらい変わってくるんじゃないかと思います。また、作業スピードだけではなく、実際に文字を見ながらタイピングができるので、タイプミスが圧倒的に減ります。

コーディングをしていく上で、タグの文字を一文字間違えるだけでそのタグは機能しません。”float”というタグを使おうと思って”froat”と打ってしまうともちろんそのタグは動きませんし、そのタイプミスを探すためにせっせと探すハメになるのです。蓄積するととんでもない時間のロスになります。

なので、ブラインドタッチはWEBデザインを学習する上で必須です。少し厳しいことを言うと、ブラインドタッチを習得することすら躊躇するようでは、WEBデザインをするのに向いていないと思います。いきなりプロのような高速ブラインドタッチができるようにならなければいけないわけではなく、最初は遅くてもコーディングをしていく中でちょっとずつ習得していけばいいのです!

目標を決める

あのサイトに向かってダッシュだ!!

次に習得したWEBデザイン技術で何をしたいのか、しっかりと目標を決めましょう。意外と闇雲に「WEBデザインができるようになりたいんです」という方がいますが、実際に何をしたいのかと問うと「後から考えます」という方が多いです。もちろん技術を習得するに従って、「次はこれができるようになりたい。次はこれ・・・」と目標が出来てくることがありますが、最初にスタートを切るときにある程度の目標がないと走り出せません!100メートル走を走ろうとクラウチングの構えをとってみたものの、ゴールがどの方向にあるのかわかっていないようなものです。

おすすめなのは、誰かが作ったサイトを見て、「このサイトを自分の力で作れるようになりたい!」とか、「このシステムを自分の力で作れるようになりたい!」って感じで目標を決めるのがいいと思います(^^) 最初に高過ぎる目標を決めてしまうとモチベーションが続かない恐れがあるので、最初は簡単なものから始めましょう(^^;)

ゆくゆくは「WEB業界で働いてみたい」「WEBを使った副業ができるようになりたい」という方は、WEB制作を始めるならまず何の肩書を目指すか決めようの記事も参考にしてみてください。一口にWEB業界と言っても肩書によってやることや出来る事は様々なので、まずはどの肩書を目指すのかを決めることが大切です。

実際にコーディングをしてみる

目標も決まれば、実際にコーディングをしていきましょう!必要となるのはパソコンさえあれば始められます(^^) まずはHTMLとCSSという言語を学んでいくのですが、以下はおすすめのツールです。

Sublime Text

sublimetext
https://www.sublimetext.com/

こちらはコードを書いていくためのエディタです。エディタとはコードを書くためのツールで、入力者の補助を行ってくれます。実際にはwindowsのメモ帳ツールなどでもコーディングをできるですが、エディタの補助機能はないので実際にメモ帳を使ってコーディングをするということはまずあり得ません。それくらいエディタの入力補助はコーディングを行う上で大きな役割を果たします。

このSublime Textは、自分の好きなエディタにカスタマイズするという機能があります。自分がよく必要になる機能をインストールして、自分だけのエディタを作り上げることができるという優れもの。さらに高機能の割にサクサク動きます!無料で利用できるだけに時折広告のようなものが表示されますが、この機能面を考慮すれば全く気になりません。

ドットインストール

ドットインストール
https://dotinstall.com/

こちらは約3分の動画でプログラマーさんが実際にコーディングやプログラミングしているのを解説しながら学習できるサイトです。簡単なコーディングの入門から実践的な内容まで幅広く用意してくれているので、WEBデザイン初心者の方は大変参考になるのではないかと思います。初心者向けの内容は無料で視聴できるのでまずはこちらから始めてみるのがいいかもしれません。

Progate

Progate
https://prog-8.com/

Progateは各プログラミング言語をセクションごとにスライドショーで解説し、実際にコードを書いて覚えるプログラミング学習サイトです。丁寧な説明でビジュアルも綺麗に整っており、プログラミング初心者の方が学習を始める第一歩として使ってみることをオススメします。

ドットインストールとProgateのどちらから使ってみるか迷ったときは、[初心者向け]ドットインストールとProgateを徹底比較の記事も参考にしてみてください。

Canva

canva
Canva

CanvaはWEB系のツールではなく画像加工ツールなのですが、WEB業界で仕事をするにあたって画像を加工したりデザインをする機会はたくさんあります。このCanvaというツールは無料でたくさんのテンプレート素材を使った画像加工ができるので、PhotoshopやIllustratorを使えない方でもイケてる画像加工ができてしまいます。画像加工ツールはCanvaがおすすめ!無料でここまで出来る!?の記事でCanvaの詳しい説明や使い方を解説しているので参考にしてください。

まとめ

いかがでしたでしょうか?どんな勉強方法を取り入れるかも大切かもしれませんが、最も大切なことは実際にコードを書いてWEBデザインに慣れることです。マークアップ言語といわれるようにHTMLやCSSも言語なので、英語を勉強するのと同じように机に向かって単語を覚えるだけでは決して喋れるようになれません。最初はよくわからなくてもとにかく手を動かして少しずつできることを増やしていくことでWEBデザインの楽しさを実感でき、勉強が楽しくなってくると思います!

コメントを残す

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