WEBデザインができるようになりたい！と思う方は少なくないはず。
PCを使う仕事なら在宅ワークが可能な場合もあるし、
なによりも自分で何かを作り出すことに魅力を感じるのではないでしょうか。
私も10年程前、ブログのデザインカスタマイズに憧れ、
WEBデザインの勉強をし、今ではデザインの仕事ができるようになったので
その経緯や、WEBデザインの勉強法についてお話します。
WEBデザインの勉強法
独学、PC教室と勉強法は2通りあります。
私の場合、最初は独学をしようと本を買ったりしたのですが、
WEBデザインと言っても幅が広く、
何から学んで良いのかチンプンカンプンでした＾＾；
■画像・写真加工がしたいのなら＝photshop
■バナーや、デザイン画像を作るなら＝Illustrator
■ホームページを作成するのなら＝HTML・CSS
■インタラクティブな機能を作るなら＝Javascript
■高度な機能が豊富なWEBページを作るなら＝PHP
と、デザインといってもどこまでするのかによって
学ぶものは違ってきます。
私の場合、
Photoshop、Illustrator、HTML、CSSを勉強し
現在WEBデザインの仕事をさせてもらっています。
Javascriptは部分的に使用する場合
ソースを検索して使用する程度で
PHPは少しだけ編集が出来る程度です。
ですのでプログラミングは全く。。。という具合ですが、
考えてみると、プログラマーとWEBデザイナーの境目がわからなくなりますね＾＾；
PC教室でWEBデザインの基礎を学ぶ
このように、幅広いので独学をしようにもサッパリだったわけです。
なので、私はPC教室に通いました。
金額は半年間で３０万円程度だったと思います。
アドビソフトの使い方から、
HTML、CSSの勉強、実際にサイトを作成してみるところまで教わりました。
ただし教室で学ぶことは基礎です。
実際に仕事として活用するものがどういうものかは、
就職する先や、クライアントさんによって違ってくるはずです。
やってみて思ったことは、
教室の中で勉強するだけでは上達しないということです。
実際に作りたいサイトを１から作ってみる。
タダでも良いから、知り合いから仕事をもらうなど
何でもいいので数をこなしてデザインすることが一番の上達法です。
本当に身につけるため、
上達させるために実際に作りまくる
私はPC教室で学んだ後、その教室で講師のバイトをしました。
交通費は出ないし、時給も低かったですが、
これが一番、身につくきっかけになりました。
誰かに教えるということは自分が理解していないとできないことです。
１度学んだことでも教えようと思うと
きちんと理解できていなかった部分もわかってくるし、
使用するソフトがどんな時に使われるのか、
言語がどのように使用されるのか真剣に考えられるようになります。
その為には自分が１からサイトを作る必要があります。
それは趣味のサイトでもいいですし、
友人や家族のしごと関係のサイトでも何でもかまいません。
わからないなりにも、作ってみることで沢山のことが理解できますし、
たいていのことはネットで検索すれば載っています。
ヘタでも何でもいいのでとにかくつくってみることです。
何度も作成する内に、
いろんなワザが身につきますし、必ず上達します。
未だに新しいデザインを作成する度に
新しい発見があり、新しいワザが身についています。
教材や、本を読むだけではなくて
必ず手を動かすことが何よりも重要です。
HTMLとCSS
WEBページを作成するためにはHTMLとCSSが必要です。
HTMLとは
HTMLとはHyperText Markup Language
（ハイパーテキストマークアップランゲージ）の略です。
WEBサイトで右クリックをして「ソースを表示する」を押してみてください。
このようなコードが出てくるはずです。
※当サイトは右クリック不可にしています。
実は、サイトを作成する為に、このようなコードを書いて表示させているのです。
コンピューターは人間のように、視覚的にページを作ることが出来ません。
１つ１つ、コンピューターにわかる言葉で、
この文字は大きくする、この部分で文章を改行させる、など
伝えなくてはいけません。
その為に使用するのがHTMLなのです。
HTMLにはタグというものが使われます。
＜ｐ＞ ＜ｂｒ＞ ＜ｈ１＞ など＜＞で囲まれたタグを使用します。
※実際には半角で使用します。
タグは数多くありますが、使用していく内に
使うタグはある程度決まってきます。
＜div id=””＞ ＜div class=””＞ という部分で
はじめの内は少々戸惑うかもしれませんが大丈夫です。
何度も作成する内にスグに慣れるはずです。
CSSとは
CSSはCascading Style Sheets
（カスケーディング・スタイル・シート）の略です。
スタイルシートと呼ばれるものです。
その名の通り、WEBページのデザイン部分を指示するコードです。
HTMLはあくまでもテキストで、デザイン（装飾）するものではありません。
デザインは全てCSSで行います。
それは、テキストのカラーから、WEBページの構成まで行えます。
HTMLと組み合わせて使用することで、
この部分は背景を黄色に、この部分は左寄せにする
など、細かく構成を指定することができるのです。
CSSも幅広いので、何を使えばどのような効果を与えられるのか
覚えるのは大変ですが、使っていけば主に使用するものはある程度決まってきます。
また、何か装飾したい時にわからない場合でも
ネットで検索すれば大体出てきますので、それを参考にすればそう難しくはありません。
WEBデザインで使用するソフト
使用するAdobeソフト
デザインをするならAdobeソフトは必要です。
AdobeソフトにはPhotoshop、Illustrator以外にも
アニメーションを作成するFlashや、HTMLなどをコーディングするDreamweaver
動画を作成するPremiere Proなどがあります。
何を作成するかによって使用するソフトは違いますが、
私が仕事で使用しているソフトは
Photoshop・Illustrator・Dreamweaverです。
デザインをするには欠かせない便利なソフトです。
画像・写真加工をするならPhotoshop
Photoshop（フォトショップ）はAdobeソフトの１つです。
写真や画像の加工をしたり、写真の切り抜きをしたりするのに必要です。
例えば、人物写真でシミやシワを消すこともできるし、
明るくすることや、色合いを変えることもできます。
様々なツールがあるので
効果を組み合わせることで数えきれない程いろいろなことができますが
最も使うものは切り抜きです。
他の画像に重ねるために
背景から人物や、特定のものだけを切り抜きます。
切り抜いた画像をIllustratorを使って重ねて
フォントと組み合わせ一つの画像を作成したりします。
Illustratorでもそれなりの加工が可能ですが
Photoshopの方が細かい様々な加工が可能なので、
Photoshopで加工した素材をIllustratorで使用する流れが多くなるでしょう。
またアニメーションGIF画像の作成も可能です。
バナーや、デザイン画像を作るならIllustrator
Illustrator（イラストレーター）もフォトショップと同様Adobeソフトの１つです。
Photoshopの様な加工もそこそこ行えますが、
基本的には、文字ツールを使ってフォントを使うことが多いです。
またベクトル画像を作成したり、
ベクトル素材を使用し、１つの画像
（ポスターやWEB上に掲載する画像）を作成します。
ベクトルはここでの説明は割合させていただきますが、
簡単に言えば、いくら拡大しても綺麗な曲線、直線で、
選択ツールを使って変形させたり、色の変更が可能なデータです。
恐らくPhotoshopよりもIllustratorの方が使用頻度は多くなるでしょう。
WEBデザインをするなら
PhotoshopとIllustratorは両方使うことになるはずです。
コーディングに便利なDreamweaver
WEBサイトを作成する際には、最低限HTMLとCSSを理解する必要があります。
それらの言語を理解した上でコーディングし、
１つのWEBページを作成していくわけですが、
そこで便利なソフトがDreamweaverです。
プログラマーさんなら手打ちの方が速いからソフトは使用しないと言う方も多いですが、
私はDreamweaverを使用しています。
ソフトを使用するとしても、
コードは理解しておく必要がありますが、
自動的に色分けされたり、予測でコードが自動的に打てたりするので
私としては作業が速まります。
まとめ
かなり長くなってきたので今回はここでまとめたいと思います。
WEBデザインはやればどこまででも出来てしまうので
どこまで勉強するべきかは人によりますが、
初歩的なことは以上ではないかと思います。
また、サイトを作成するならWordPressを使用するのもオススメです。
（当サイトもWordPressを使用しています）
WordPressであればそこまでHTMLやCSSがわからなくても
それなりのサイト作成が可能です。
ただ、WordPressもカスタマイズすれば自分好みのサイトが作成できるので
是非、HTMLやCSSを勉強してみてはいかがでしょうか。
思うようなものが作成できるととても楽しいはずです(*^_^*)
コメント