最近気づいてしまったとんでもない事実に気づいたユトピです。最近気づいてしまったんですよ。僕の職業が一体なんっだったのか。僕、実はWEBデザイナーだったんですよ・・・。知らない間にWEBデザイナーになってるんですもん。王様に「WEBデザイナーとなって世界を救うのだ!」とか言われたわけでもないのに。自分の仕事がWEBデザイナーだなんて思いもしなかった・・・。いう感じでWEBデザイナーになりました(実話)。最近はIT業界を目指してる人が増えてるみたいですね。WEBデザイナーはその名前のオシャレさからなりたい人多いみたいですよ(大嘘)。デザインみたいな人間にしかできない分野の仕事は、将来的に人工知能に職を奪われてしまうこともないですし、いまホットな職業ですよ。そこで今回はWEBデザイナーになりたい人のために、最低限必要なスキルを4つにまとめて紹介していこうと思います。紹介順も僕が推奨する習得順でやっていきますので、少しでも参考になれば幸いです。まとめ0.WEBデザイナーとは?そもそもWEBデザイナーとは何者なんでしょうか?そこらへんをまとめておこうかな。WEBデザイナーとは、WEBサイトの設計やビジュアルに関するデザインがメインなお仕事。画像加工やバナー広告の作成、最近ではアプリのデザインも行っています。いっても会社によってWEBデザイナーが担当する業務はまちまちで、単純にデザインのみをする人、企画立案から関わる人、デザインもして、コードも自分で書いてサイトを作る人など様々です。僕の場合はサイト企画から関わり、要件定義、サイトの設計、デザイン、コーディング、時には運営保守まで結構多義に渡っています。この他にも画像加工やバナー広告作成、ロゴ作成もやります。カメラマンとか紙媒体の広告をやる事もありますが、専門ではないのでこの辺りは含めないです。人数のおおい企業なら細かく分業してるとこもありますが、小さい企業やフリーランスはほとんど全てに関わるなんてことざらにあります。出来ることは多いほうがいいのですが、まずはこれから紹介するスキルを身につけてから手を広げていった方が近道です。Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、サイトをつくるのに必要なマークアップ言語。Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。難しく聞こえますよねー。要するにサイトを作るためにパソコンに命令する「言葉」のこと。この言葉を使ってコードを書けば、思い通りにWEBサイトを作ることができます。次にHTMLとCSSの役割について。HTMLはサイトの骨格を作る言語、CSSは色や大きさ、位置などの装飾をする言語です。この二つを組み合わせることでWEBサイトが形になっていくわけ。試しに簡単なコードを。ある文字を大きくして、文字の色を変えてみようと思います。HTMLからXHTML<p>ニンニクマシマシヤサイカラメ</p>1<p>ニンニクマシマシヤサイカラメ</p>超短いですがこれでもHTMLです。HTMLは「タグ」というものを使ってコードを書いていきます。』がPタグといって、ここが文章の1段落だよという意味。pとは「Paragraph」の略です。HTMLだけだと文字が表示されるだけなので、これを大きくして文字色を変えるCSSを書いていきます。red;}「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で作成してるよ。スマホサイトを作成する際も使いどころが多い言語ですので、ぜひとも自分のスキルとして勉強していきましょうぜ。JavaScriptで動きのあるハイレベルなサイトを作成する。他にもPHPのような言語も習得するとなお良しですが、今回は最低限ということでここまでにしました。「やっぱり勉強すること多くていやだわ・・・」なんて考えますよねー。僕の場合はデザインスキル雑魚、JavaScriptも雑魚の状態で今の会社に入ったので、やりながれ勉強するのもありですよ。実際に手を動かしながらやれば上達も爆速なんでね。他にも勉強方法としてはWebCampが運営している1か月でマスターするWEBデザインスクールもありますし、ちょっとお金がないなって人はドットインストールというところで無料で学べることもできちゃいます。今は情報がいろんなところに充実しているので、自分からどんどん取りに行きましょ。大事なのはとにかく手を動かすこと。下手でもいいからどんどん数をこなす。すればスキルはだまっててもついてくるよ。皆さんもがんばって楽しいWEBデザインライフを送りましょう。コメントをキャンセルメールアドレスが公開されることはありません。