こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。
今回はWebデザイナーとしてやっていくため
最低限勉強すべきことについての記事です。
この記事の目次
Webデザインを学ぶ前に
将来、Webデザインを仕事にしたいと
思っているWebデザイン初心者にとって
「勉強は何をすればいいのか分からない」
とはじめ感じる人は多いと思います。
独学・オンラインスクール・専門学校・大学
どの「勉強のスタイル」を選択するにしても、
学ぶ前にWebデザインにどんなスキルなどが
必要になるのか全体像の把握が入りますね。
把握ができていないと、せっかく学んだのに
やりたいことができない、思っていたのと違う
就職した場所では更に高いスキルがいるなどの
状況に陥る可能性がないとは限りません。
そこで、今回の記事では実践的に使える
Webデザインのスキルを習得するのに
どのようなものが必要になってくるのか
まとめてみたので確認してみてください。
Webデザインを学ぶ上で、
最適限必要な知識・スキル
実践で使えるWebデザインを習得するのに
最低限必要なのは大まかに以下の6つ。
- Webデザインの基本知識・スキル
-
Adobe Illustrator / Photoshop
- HTML・CSS
-
JavaScript・jQuery
-
レスポンシブデザイン (サイト)
絶対にこれら全て必要という訳でないですが
今、Webデザイン業界では主流のスキルです。
Webデザインをこれから仕事にしていくなら、
是非、どれも押さえておきたいですね。
では、それぞれのスキルについて
具体的に紹介・解説していきます。
① Webデザインの基本スキル・知識
まずは、ツールやプログラミングを
勉強する前に基本的なWebデザインの
知識をある程度知る必要があります。
それはツールやコードが分かりできても、
Webデザインの構造や機能が分からないと
どのようなWebサイトを作れば良いのかを
全く分からないからです。
Webデザインを制作していく上で、
デザイン全体の構造やレイアウト (ワイヤー)
画像・動画選定、フォント、色、トリミング
そういった細かい点でのスキルや知識が
必要になってきて1つずつ大切になります。
「イメージの例」
- この文字は開放感を表したいから青を使う。
-
この画像は注目を集めたいから大きく。
- レイアウトをシンプルにしたいから、
ホワイトスペース (余白) を十分に設ける。 -
Webサイトを見る読む人がボタンを
クリックしやすいようにサイズを調整する。
Webサイトの大まかな構造から細かい所まで
このように理解していくことが必要なので、
やはりWebデザインの基本的知識が入ります。
それに基本的知識がないと、
ツールやプログラミングを学ぶ目的や理由も
あまりよく分からなくなってくるでしょう。
② Adobe Illustrator/Photoshop
「Illustrator」 「Photoshop」
-
Illustrator
主にアイコン・ロゴ・図形などの
デザインにWeb業界でも扱われるツール。
-
Photoshop
Webデザイン制作の際に、
昔から今でもメインで使われる有名なツール。
サイト全体のレイアウト・装飾・画像加工
様々なデザインの制作過程で役立ってきます。
一般的にはPhotoshopでWebデザインを進め
図形やイラストはIllustratorで作ったものを
Photoshopに入れるという感じで使います。
(レスポンシブサイトはIllustrator
メインでWebデザインをすることも。)
「補足」
なお、具体的なIllustratorとPhotoshopの
違いは次の記事にまとめています。
③ HTML・CSS
-
HTML
Webデザイン (ページ) の土台になる言語。
文字や画像は、この言語で表示されます。
-
CSS
サイトの様々な部分の大きさ、
色、余白などが変更できる言語。
デザインのビジュアルを装飾していくもの。
グラフィック(ビジュアル)デザインだけなら
HTMLやCSSは基本的に必要ありませんが、
Webデザインとなるとサイト制作全体の
デザインに深く関わってくるもなので、
サイト構築や公開にHTMLやCSSが必要に。
Webサイトのデザイン職専門に就くとしても
プログラミングやコードの基本の部分は、
Webデザイナーとして押さえておきたいです。
④ JavaScript・jQuery
-
JavaScript
動きがあるものをデザインできる言語。
ページの再読み込みや動画でないものは、
大体この言語で表現されます。
-
jQuery
JavaScriptの一部を容易に
扱えるようにした技術 (ライブラリ)。
今の時代、Webサイトを見たら何かしら
動きのあるデザインがあると思いますが、
そういたものにjavaSccriptは使われます。
なので、実践的に使えるWebデザインの
学ぶならJavaScriptは必要なスキルですね。
ですが、jQueryを使うことによって、
初心者でも思っているよりも簡単に
作りたい動きのあるデザインが可能です。
つまり、理解したい大切なことは、
jQueryを使ったサイト作りになります。
⑤ レスポンシブデザイン
パソコン、タブレット、スマートフォンの
どの媒体で閲覧したとしても最適化された
Webサイトであるようにするためには、
レスポンシブデザインであることは大切。
今ではインターネットを見ている人の
半数以上がスマートフォンを通して、
Webサイトを閲覧している現状です。
なので、パソコンサイトのWebデザインのみ
勉強すれば良いという訳では全くありません。
スマートフォンサイトも意識するのは
今の時代のWebデザイン制作おいて、
必須と言っても過言ではないでしょう。
最後に
繰り返しになりますが、Webデザインで
実践的に必要なってくる最低限のスキルは
今回挙げた以下のようなものになります。
「Webの基本」「レスポンシブデザイン」
「Adobeツール(Illustrator/Photoshop)」
「HTML・CSS」「JavaScript・jQuery」
この中のどれかが全く分からないと、
Webデザインで何かしらの障害になる
可能性は大いにあるのできちんと学んで
知識やスキルを身につけていきましょう。
もし、どこかスクールに通うという人も
これらをコースやプランでチェックして、
決めたりするといいかもしれませんね。
なお、Webデザインスクールは、
次の記事にまとめています。