素人がWebデザイナーになるために"最低限"必要な4つのスキル

 

どうも。最近気づいてしまったとんでもない事実に気づいたユトピです。
最近気づいてしまったんですよ。僕の職業が一体なんっだったのか。
 
 
 
 
僕、実はWEBデザイナーだったんですよ・・・。
 
 
 

 
こわいですよねー。
知らない間にWEBデザイナーになってるんですもん。
 
王様に「WEBデザイナーとなって世界を救うのだ！」とか言われたわけでもないのに。
自分の仕事がWEBデザイナーだなんて思いもしなかった・・・。

 

 

 
 
という感じでWEBデザイナーになりました(実話)。
 
最近はIT業界を目指してる人が増えてるみたいですね。
特にWEBデザイナーはその名前のオシャレさからなりたい人多いみたいですよ(大嘘)。
 
でもデザインみたいな人間にしかできない分野の仕事は、将来的に人工知能に職を奪われてしまうこともないですし、いまホットな職業ですよ。

 

 
そこで今回はWEBデザイナーになりたい人のために、最低限必要なスキルを4つにまとめて紹介していこうと思います。
紹介順も僕が推奨する習得順でやっていきますので、少しでも参考になれば幸いです。

 

0.WEBデザイナーとは？

 
そもそもWEBデザイナーとは何者なんでしょうか？
そこらへんをまとめておこうかな。
 
WEBデザイナーとは、WEBサイトの設計やビジュアルに関するデザインがメインなお仕事。
画像加工やバナー広告の作成、最近ではアプリのデザインも行っています。
 
 
と、いっても会社によってWEBデザイナーが担当する業務はまちまちで、単純にデザインのみをする人、企画立案から関わる人、デザインもして、コードも自分で書いてサイトを作る人など様々です。
 
 
僕の場合はサイト企画から関わり、要件定義、サイトの設計、デザイン、コーディング、時には運営保守まで結構多義に渡っています。
この他にも画像加工やバナー広告作成、ロゴ作成もやります。
たまにカメラマンとか紙媒体の広告をやる事もありますが、専門ではないのでこの辺りは含めないです。
 
 
人数のおおい企業なら細かく分業してるとこもありますが、小さい企業やフリーランスはほとんど全てに関わるなんてことざらにあります。
出来ることは多いほうがいいのですが、まずはこれから紹介するスキルを身につけてから手を広げていった方が近道です。

 

スキル1：WEBサイトを構成しているHTMLとCSS

 
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、サイトをつくるのに必要なマークアップ言語。
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。
 
 
難しく聞こえますよねー。
要するにサイトを作るためにパソコンに命令する「言葉」のこと。
 
この言葉を使ってコードを書けば、思い通りにWEBサイトを作ることができます。

 

 
次にHTMLとCSSの役割について。
HTMLはサイトの骨格を作る言語、CSSは色や大きさ、位置などの装飾をする言語です。
 
この二つを組み合わせることでWEBサイトが形になっていくわけ。
 

 
試しに簡単なコードを。
 
ある文字を大きくして、文字の色を変えてみようと思います。
まずはHTMLから
 

 
超短いですがこれでもHTMLです。
 
HTMLは「タグ」というものを使ってコードを書いていきます。
具体的には『

』がPタグといって、ここが文章の1段落だよという意味。pとは「Paragraph」の略です。
 
 
ただHTMLだけだと文字が表示されるだけなので、これを大きくして文字色を変えるCSSを書いていきます。

 
「HTMLの『pタグ』で囲われた文字を、『font-size＝文字の大きさ』15pxで、『color＝文字色』赤にしてね。」とCSSで命令しています。
{}内で指定した内容をHTMLのタグに反映させています。
 
 
そしてその結果が以下です。
 
 
 

ニンニクマシマシヤサイカラメ

 
 
 
こんな感じのもの書いてWEBサイトを作り上げていくわけです。
 
最初はとっつきにくいかもしれませんが、一度理解しちゃえばあっという間に上達します。
計算とかもあまりしないので、プログラミングよりも簡単に習得できちゃうのが魅力。
 
WEBデザイナーにとってHTMLとCSSはサイトを作るのに絶対必要なスキル。できるようになれば自分ひとりでもサイトを作ることができますので、どんどん勉強しちゃってください。
 
 
ちなみに、パソコンなら他のサイトのHTMLとCSSを見ることが可能ですよ。
やり方はIE、FireFox、chromeの場合はパソコンの「F12」キーを押せばコードをみることができます。Safariは右クリックで「要素の粗油債を表示」で確認可能です。
 

 
こちらはYahooのトップページのHTMLとCSSです。たくさんにコードが書かれていますね。
こういったプロが作ったサイトを参考にするのもHTML・CSS上達のコツです。

 

スキル2：photshopやillustratorなどのデザインツールのスキル

 
読み方はphotshop(フォトショップ)とillustrator(イラストレーター)です。
フォトショップの方はなんとなく聞いたことがあるって人も多いんじゃないでしょうか。そうです。アイドル写真の加工でよく使われるね。
 
この二つはWEBデザインの業界でもっとも使われているツールです。
 
 
二つのソフトはAdobe社が開発したツール。
 
photoshop(フォトショップ)は画像の加工がメインで、サイトデザインの設計図を制作する際に使います。
 
illustrator(イラストレーター)はその名の通りイラストを描ける。サイトではアイコンやボタンなどを制作する際に使う。イラレでサイトのデザインイメージを作成することもあります。イラストを描けなくても使うことができます。

 
 
どちらも少しくせのあるソフトではありますが、使いこなせれば表現の幅が広がるので、勉強して損はなし。
フォトショ使えるようになったら、自撮り写真の加工もできますよ。

 

スキル3：デザインスキル

 
次にデザインスキル。
 
先に言っときますが、デザインはセンスじゃないよ。
 
 
よくセンスがなきゃいけない、絵が描けないといけないみたいなイメージを持っている人多そうですが、全然そんなことなし。
僕はWEBデザイナー始めたころまったくもってセンスはなかったですが、昔の作品と今の作品を比べると明らかにレベルが違います。
 
センスというのは磨くもの。先天的にでしか手に入らないわけではないんです。

 

 
もしセンスを磨きたいと考えるなら、たくさんのデザインを観察してください。
WEBデザイナーだからと言ってWEBサイトに限らず、広告や絵画、写真などを見ること。それらからデザインとはまた違うかもですが、映画や音楽からもインスピレーションを受けてください。
意外と音楽聞いてたらアイディアが浮かんだとかありますよ！
 
 
たくさんのデザインを観察したら次は表現。
ここは恥ずかしがらずに表現してみること。始めのうちは下手なの当たり前です。
 
下手なのが嫌ならひたすら良いものを真似してください。
良いものの良いところを参考にして、自分の引き出しを増やせば、より一層レベルの高いデザインをすることができます。
 
WEBサイトなら、良いサイトがあったらそのまま同じサイトを作ってみることです。
真似ることがデザインスキルのレベルアップにもなり、ついでにHTMLやCSSの勉強にもなっちゃいます。
 
 
デザインは数です。駄作が9割でもいいから作り続けていけば必ず上達します。

 

スキル4：動きを付けるためのJavaScript

 

最後にWEBサイトに動きをつけるために必要なプログラミング言語「JavaScript(以下、JS)」です。読み方は「ジャバスクリプト」。
 
余談ですが似た名前のプログラミング言語に「Java」というものがありますが、これはまったく目的が違うものなので注意してください。
例えるならスペイン語とフランス語ぐらい違います。
 
 
JSは未経験の人が学ぶには少々敷居の高い。
HTMLやCSSよりも難しいですし、概念を理解したり、計算することも多いので習得に時間がかかります。また動きの演出を考える際にもデザインスキルが必要になってきます。
 
だから今回の記事の習得順でいうと4番目なのです。

 

 
しかし使えるようになると非常にレベルの高いサイトを作成することが可能。
さまざまな動きの演出を入れることができますし、HTMLやCSSをもっと簡単に書けるような処理もつくることができます。
 
当ブログだと、スマホで表示した際のメニューの開閉はJSで作成してるよ。
 
スマホサイトを作成する際も使いどころが多い言語ですので、ぜひとも自分のスキルとして勉強していきましょうぜ。

 

まとめ

 
流れをまとめると、最初にHTML・CSSを勉強 → デザインツールを使えるようにする → デザインスキルを上げる → JavaScriptで動きのあるハイレベルなサイトを作成する。といった感じ。
 
他にもPHPのような言語も習得するとなお良しですが、今回は最低限ということでここまでにしました。
 
 
「やっぱり勉強すること多くていやだわ・・・」
 
なんて考えますよねー。
 
でも僕の場合はデザインスキル雑魚、JavaScriptも雑魚の状態で今の会社に入ったので、やりながれ勉強するのもありですよ。
実際に手を動かしながらやれば上達も爆速なんでね。
 
 
他にも勉強方法としてはWebCampが運営している1か月でマスターするWEBデザインスクールもありますし、ちょっとお金がないなって人はドットインストールというところで無料で学べることもできちゃいます。
 
今は情報がいろんなところに充実しているので、自分からどんどん取りに行きましょ。
 
 
一番大事なのはとにかく手を動かすこと。下手でもいいからどんどん数をこなす。これが大事マンです。
 
そうすればスキルはだまっててもついてくるよ。
 
皆さんもがんばって楽しいWEBデザインライフを送りましょう。