元々グラフィックデザイナーでしたが、独学でWEBデザイナーに転職することができました。やることは全く違いましたが思ったより簡単でした。回り道なし最速でWEBデザイナーになる為の方法を詳しく解説します。
独学、最速でWEBデザイナーになる為、6ステップで1サイト作る
最速でWEBデザイナーになるには、順番が大事。回り道をしないこと。
独学、最速でWEBデザイナーになる方法は
1つサイト仕上げる
作りながら覚えることが一番の近道。それは、目的があれば、何をすれば良いのか明確だから。やるべきことが見えているだけで、そこに向かって、必要な知識を自然と見つけ、効率よく学ぶことが出来る。作ってみると難しくないので、仕組みを理解すること。
具体的な順番
- しくみを知る
- コードを知る
- コードを書いてみる
- 1サイト作ってみる
- デザインを勉強する
- サイトを整える
この順番が良い理由は、合う合わないが早い段階で分かる。デザインは楽しいけど後回し。サイトのイメージだけ良い感じになっても、コードで挫折したら無駄です。それと、仕組みを知ってからの方が適切なデザインが作れます。
WEBデザイナーは「デザイナー」といえど、グラフィックデザイナーと違って、感覚で作る要素が少ない。WEBデザインのコードは、基本的な部分は難しくないので、一度チャレンジしてみるといいと思います。コードが面白くないという人はグラフィックデザイナーの方が向いているかもしれません。
独学なら、作りながら覚えることが効率が良い
最初、何すればいいか分からないですよね。やみくもに知識入れても的外れだったり。何が重要な情報か分からなかったり。一番進めやすく身につきやすい方法は、
目的に向かって順番に学ぶ
1つサイトを作ってみる。
いきなり自由にサイトを作るのは難易度が高いので、お手本通りのサイトを作ってみる。次からは自分の作りたいサイトを作ってみる。
色んなサイトを作れば作るほど、作る過程で、自然とたくさんの知識が必要になるし、「なぜ？」「これってどうやればいいんだろう」と思うことも出てくると思います。それをひとつづつ解決していくことで、確実にスキルは上がっていきます。
では、具体的に何をすればいいか解説していきます。
独学でWEBデザイナーになる為の6ステップ
- しくみを知る
- コードを知る
- コードを書いてみる
- 1サイト作ってみる
- デザインを勉強する
- サイトを整える
まずは、一冊買わないと何も始まらない
とりあえず本を買わないと何も始まらないので、一冊買ってからはじめましょう。本を見ながら、以下のこと意識して進めていきましょう。
【 1 】 しくみを知る
WEBサイトは、サーバー内に自分の住所（～.com）にアクセスさせて表示させています。
自分のパソコンで作ったWEBサイトのデータを、WEB上のみんなが見れる公共の場所にアップする必要があります。
サイトをみんなが見れるように表示させるには
- サーバーを借りる：WEB上の自分の土地。
とりあえず月額100円程度の安い所で良いです。 - ドメインを借りる：WEBサイト名（～.com）。
年額30円程度〜（WEBサイト名によって価格はピンきり）。※誰かと同じ名前は不可。早いもの勝ち。
この2つを借りなければ、みんなが見れるようになりません。WEBサイトがつくれるようになったら借りると覚えておきましょう。
サーバーとドメインを借りるなら
初心者向けで安く一番メジャーなロリポップ！ 
が良いでしょう。ドメインが永久無料のプランもあり、一緒にドメインも取得することも可能。
【 2 】 コードを知る
WEBサイトはすべて、HTMLやCSSといった決まった文字列で表示されています。実際ウェブサイトを作るには、この文字列を書いたり、既存の文字列を一部書き換えたりしなければいけません。
基礎のコード
- HTML
構造をつくるもの：文字を表示させたり、画像を表示させたり、ブロックをつくったり。サイトの骨組みのようなもの。 - CSS
装飾するもの：文字色を変えたり、間隔を開けたり、中央揃えにしたりなど、HTMLでも同じようなことが出来ますが、CSSを使うと、より細かく設定できます。
WEBサイトはこの２つの言語を駆使して作られています。役割を理解しておきましょう。他にもサイトに特別な動きをつけたりするJavaScriptなどもありますが、最初は考えなくていいです。
【 3 】 コードを書いてみる
実際コードを書いてみて、思ったように表示されるか確認しましょう。コードを書いて表示確認するには、専用のソフト（コードエディタ）を使います。
無料で使える、メジャーなコードエディタ
- Visual Studio Code（Win / Mac）Microsoft開発
- Atom（Win / Mac）見た目をカスタマイズしやすい
このコードエディタを使って実際コードを書いてみて、動きを確認してみます。色々試してみて、実際指示した通りの変化が起こると、おもしろいですよ。
【 4 】 1サイト作ってみる
コードにある程度なれてきたら、実際サイトを作ってみましょう。といっても、最初は本に従って作るだけ。ここではデザインは一旦置いておいて、とりあえず思い通りのレイアウトが作れるようになっておきます。
まずはレイアウト。ここでは構造を作れるようになるのが目標です。
作っている中で、なぜこのコードを打つんだろう。などの説明が省かれている場合もあります、サイトづくりは「意味を理解しながら」作らないと意味がありません。もし意味が分からないコードが出てくるなどでつまづく場合は、こちらのコード辞典を一冊持っておくことをおすすめします。1冊あると、オリジナルサイトを作る時などに役立ちます。
コードの意味を調べるには、この一冊
【 5 】 デザインを勉強する
ここでようやくデザインを勉強します。
なぜこのタイミングなのか。
- コードで挫折するならWEBデザイナーは難しいから
デザイン用画像編集ソフトPhotoshopは約月額1,000円します。まずは無料のコードソフトなどで始めることで、挫折した場合の出費を抑えられる。逆に、ここまで続けられていれば見込みがあります。photoshopを契約してスキルアップしていきましょう。 - 仕組みを知ってからの方がデザインを考えやすいから
仕組みを知らないと、非常に組みにくいデザインをしてしまいます。WEBデザインは構造を考えながらデザインすることが必要なので、サイトを作れるようになってからの方が、断然効率的でデザインの無駄を省けます。
WEBデザインは、Photoshopで行うことが多いです。とりあえずPhotoshopだけでデザイン出来るようにしておきましょう。
【 6 】 サイトを整える
デザインの基礎を学んだら、構造が作れるようになったサイトの見た目にこだわっていきましょう。ここでは行間や文字の大きさや色などを美しくしていきます。
WEBサイトデザイン上達のコツ
キレイだなと思うサイトを、出来る限り同じように作ってみる。
文字色、大きさ、色、マージン、などなど
全く同じにするのはかなり難しいですが、出来る限り近づける。
ソースを見たりして、設定をコピーしたり。
真似ること、ソースを見ることで、多くの発見や、分からなことがたくさん出てきます。黒に見えてた文字は実は濃いめのグレーだった、とか、なぜ画像が設定されていないのに画像がここに表示されてるのか、など。先程紹介した「HTML&CSS全事典」でコードの意味を調べたり、ググったり。
ここが一番深く、勉強になるところかもしれません。
基本スキルを身に着けたら実務経験を積もう
ここまで出来るようになれば、WEBデザインの基礎スキルがあるといってよいでしょう。スクール卒でもだいたいこのレベルです。
基本スキルを身に付けたら、
いつまでも練習してても意味ないです。
現場に入って実務経験を積む為、就職目指してみましょう。
WEBデザイナーは、どこも基本激務なので、
激務をさける為に、転職エージェントを使うことをおすすめします。
独学、最速でWEBデザイナーになる為に、まず1サイト作る
作りながら覚えるというのが、必要な知識を自然と見つけ、効率よく学ぶことが出来る。作ってみると難しくないので、仕組みを理解すること。
最速でWEBデザイナーになる方法は
1つサイト仕上げる
その為に、まずは一冊本を買って以下の手順で手を動かしてみます。
作りながら覚えることが一番の近道。それは、目的があれば、何をすれば良いのか明確だから。やるべきことが見えているだけで、そこに向かって、必要な知識を自然と見つけ、効率よく学ぶことが出来る。作ってみると難しくないので、仕組みを理解すること。
- しくみを知る
- コードを知る
- コードを書いてみる
- 1サイト作ってみる
- デザインを勉強する
- サイトを整える
WEBデザインの基礎を網羅したおすすめ本
コードの意味を調べるには、この一冊
PICK UP !
