読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

手っ取り早くWebデザイナーになるには?現実的な方法と8つのポイント

デザイン

f:id:tsukuruiroiro:20161221124435j:plain

Webデザイナーになるにはどうしたら良いか。この記事では手っ取り早くWebデザイナーになる方法を紹介する。

 

1. Webデザイナーを目指す前に考えておきたいこと

まず、年単位でWebデザインを学ぶような専門学校に通う必要はない。Webデザインスキルはもっと低コスト・短期間で身につけることができる。あなたがまだ高校生で、Webデザイナーになりたいからという理由で専門学校に行くことを考えているなら、それはあまりおすすめしない。

それよりもWebデザインとは全く関係ない分野の大学に行き、教養を身に着け、その片手間でWebデザインを学んだ方が、よっぽど良い。スキルと知識だけに秀でるより、人のことや、世の中がどのような仕組みで動いているかについて理解し、豊かな人生経験を積んで、様々な感情の起伏をたっぷり味わっておいた方が優秀なWebデザイナーになれる。ただプログラミングができ、サイトが作れるだけのWebデザイナーの未来は暗い。

世の中の不合理な点を見つけ、それに対してWebデザインという武器を使って、解決していく。そのような能力のあるWebデザイナーこそがこれからの時代には重宝されるのだ。

 

2. 作りたいものを決めよう

f:id:tsukuruiroiro:20161221124727j:plain

『Webデザイナーになりたい』という目標を持つと、知識を入れることばかりに注力した勉強バカになってしまうかもしれない。それよりも「こういうWebサイトを作りたい」と決めよう。自分のお気に入りのサイトを見つけて「こういうサイトが作れるようになりたいなぁ」と憧れよう。その憧れをモチベーションにしてWebデザインの勉強を始めよう。

 

3. まずHTMLとCSSを学ぶ

WebデザイナーになるならHTMLとCSSは必ずマスターしなければならない。Webサイトのデザインだけでなく、Webサービスを作りたいと思うようになったときにもHTMLとCSSの知識は必要になる。

 

3-1.HTMLとは

Webデザイナーが絶対に習得しなければならないのはHTMLとCSSだ。HTMLはWebページを再現する骨格になる言語だ。HTMLコードさえ書ければ、とりあえずWebサイトは作れる。ただし、色みは一切なく、余白のバランスも悪い低質なデザインのサイトになってしまう。

 

3-2.CSSとは

そこでサイトをおしゃれなデザインにするためにCSSコードが必要になる。CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白の大きさを変えたりすることができる。

 

この2つの言語さえマスターすれば、十分におしゃれで機能的なWebサイトは作れる。そして、この2つの言語をマスターしておけば、Webデザイナーとして雇ってくれる働き口もあるだろう。

 

4. Javascriptは実践を通して身につけていく 

HTMLとCSSだけでもおしゃれなWebサイトは完成する。さらにWebサイトにおしゃれな動きをするメニューを加えたり、様々なアニメーションを加えたければ、Javascriptを身につけよう(CSSも進化していて、CSS3だけでも、十分なオシャレなアニメーションを加えることはできるが)。

※ Javascript ≠ Java

ただし、Javascriptについては基礎の基礎だけおさえてしまったら、実践を通して学ぶのが効率的だろう。必要になったときに、必要な分だけ知識を入れていく。ネットでググりながら、他の人の書いたコードを参考にしながら、自分のサイトに取り入れてみる。その方が効率的だ。ただし、最低限「Javascriptがどういうものか」「どういうような書き方をするか」という基礎の基礎は知っておいたほうが良い。Javascriptの基礎の基礎を学ぶためには、確かな力が身につくJavaScript「超」入門がおすすめだ。

 

5. 効率的にWebデザインスキルを身につけるための方法

f:id:tsukuruiroiro:20161221124746j:plain

 

5-1. ひとまずドットインストールで無料授業を受けよう

f:id:tsukuruiroiro:20161221102306j:plain

ドットインストール

ドットインストールは、動画でプログラミングを学べる素晴らしいWebサービスだ。ほとんどの講座は無料で受けられるため、気軽に勉強を始めることができる。ドットインストールで、まずHTML入門」を受け、その次に「CSS入門」を受けよう。基礎知識が身につくだけでなく、Webサイトはどうやって作られているのかをつかめるはずだ。

ただしドットインストールは進んでいくスピードが早い。焦らずに、何回も止めて、よく分からないところは何回も見直しながら進めていくのが良いだろう。

 

5-2. HTML & CSS デザインブックを読む

f:id:tsukuruiroiro:20161015141946j:plain

こちらはWebデザインを勉強するうえでの定番の参考書だ。解説がわかりやすく、親切で「これってどういうこと?」と躓くことが少ない。読みながら、一緒にコードを書きながら、Webサイトを作っていく。ドットインストールを見た後に読めば、サクサクと進むだろう。この本を一通り終えれば、簡単なウェブサイトが作れるだけのスキルは身につくだろう。

HTML5 & CSS3 レッスンブック

 

(参考)つまずいてしまったら

ひとりでウェブデザインを習得しようとすると、つまずいてしまうことがよくある。Webデザインの勉強で厄介なことは、つまずいた部分を飛ばしていると、次でもつまずき…と負の連鎖に入ってしまいかねないことだ。そのため、つまずいてしまった部分はすぐに解決していきたい。では、どうやってつまずいてしまった部分を解決するのか。逐一ググっても良いが、それではエネルギーを消耗し、挫折しかねない。

なるべく分からないことがあったときに、聞ける相手を見つけよう。Webデザインができる仲の良い友人がいるなら、ごはんを奢る代わりに教えてもらうのが良いかもしれない。

また、投資ができるなら(&東京に住んでいるなら)Webキャンプのようなオフラインの短期集中学習の講座を受けるのが得策だ。疑問点が出ても直接聞いてすぐに解決できるし、 Webデザイン習得の1番のハードルである"モチベーション"の維持にもつながる。

 

6. 作りたいサイトを作り出そう or 憧れのWebサイトを真似てみよう

ここまででHTMLとCSSの基本的な知識を入れたら、もう知識を入れるための勉強は終わりにしよう。作りたいものを決めて、それを作るのに必要な知識をその都度入れていくのが良い。その方がスキルがしっかりと身につくのだ。

作りたいWebサイトのイメージがあるのであれば、それを作り始める。作りたいWebサイトが曖昧なのであれば、はじめに憧れていたWebデザインを真似て作ってみよう。アニメーションだらけのサイトでなければ、たいてい時間と労力をかければ作れるはずだ。

※ユーザーの動作に反応するようなWebサービスを作りたいというなら、残念ながらHTMLとCSSの知識だけでは全く足りない。PHPやRubyなどのプログラミング言語を本格的に学ぶ必要があり、道程はけっこう長くなる。

 

WordpressでブログやWebメディアを作るなら

自由にカスタマイズできるオシャレなブログを作りたければ、Wordpressを使うのが良いだろう。Wordpressとは、ブログの記事の投稿やカスタマイズを比較的簡単にできるようサポートしてくれるソフトウェアだ。

はてなブログやLivedoorブログと比べるとプログラミング知識は必要になるが、その分自分の好きなようにWebサイトをアレンジできる。多くのオシャレなWebマガジンやブログがこのWordpressで作られている。

※ちなみに Is It WordPress? にWebサイトのURLを入れれば、そのサイトがWordpressが判定してくれる。

 

まずはオシャレなデザインのテンプレートをインストールしよう

Wordpressが素晴らしいところは、ネットを探せば数多くのオシャレなテンプレートが上がっており、それを自分のWordpressサイトにインストールするだけでほとんどプログラミング知識が無くともすぐにオシャレなWebサイトが作れてしまうことだ。

※ 例)無料でシンプルでオシャレ!Wordpressのブログ向けテンプレート10選|ferret

はじめは、自分が作りたいブログやWebメディアに最も近いテンプレートを見つけ、それをカスタマイズしていくのが良い。これならWebデザイン初心者でも取り掛かりやすい。

※ Wordpressでデザインをカスタマイズしていくと「PHP」というプログラミング言語が登場するが、これはネットでググればPHPの知識が無くとも対応できる。現にWordpressを使ってブログ運営者のほとんどは、PHPが書けないだろう。

Wordpressは独特のクセみたいなものがあるのでWordpressレッスンブックを使いながらWordpressの使い方やカスタマイズ方法を覚えていっても良いだろう。

 

7. Webデザインを学ぶときは必ず手を動かす

プログラミングを習得するための基本は「実際に手を動かして作ってみること」これに尽きる。本から学ぶときも、動画から学ぶときも、講師から学ぶときも実際にコードを書き、身体で覚えていくことが重要だ。

 

8. 10年先でも市場価値のあるWebデザイナーになるために

f:id:tsukuruiroiro:20161221125236j:plain

今後、プログラミングはますます身近になり簡易化されていく。そんな中、プログラミングスキルしか取り柄のないWebデザイナーの市場価値は低くなる一方だ。

プログラミングスキルだけのあるWebデザイナーにならないように、デザインセンスUI/UXのセンスを身に着けよう。「Webサイトを見る人がどうしたら快適に感じられるか」「どうしたら読みやすく、内容を理解してもらいやすくなるのか」を的確に把握し、それをWebサイトに反映できるようなWebデザイナーになれば、時代が変わっても市場価値は下がらないだろう(仕事の形は変わるかもしれないが)。

そのためには、ノンデザイナーズ・デザインブックのような本を読んで、見やすく綺麗なデザインをするための基本原則は身につけておくべきだし

誰のためのデザイン?のような本を読んで「ユーザーを迷わせないためのデザインの考え方」を知っておくべきだ。

そして日々ネットサーフィンをするときであっても、Twitterを見るときであってもオシャレなデザイン探しを怠らないべきだし、オシャレなデザインの本や雑誌、製品がでたら飛びつくべきだ。そうやって、良質なデザインを大量にインプットすることにより、自然とデザインセンスやUI/UXのセンスは身についていく。それらのセンスとWebデザインスキル両者があってこそ、本当にユーザーにとって価値のあるWebサイトが作れるようになるのだ。