Webデザインを手助けしてくれる便利なソフトウェアはいくつもありますが、そもそも 「どういったデザインが優れたデザインなんだろう？」という疑問をお持ちの方も多いかと思います。
プログラミングはある程度答えが決まっているので分かりやすいですが、デザインは何から手をつけたら良いのか悩みますよね。
そこで、ここでは 「Webデザインで必要な5つのスキル」をご紹介します。
このページを読めば、Webデザインの第一歩を踏み出すことができるようになりますよ！
目次
独学でWebデザインスキルは身に付けらるのか？
独学でWebデザインスキルを身につけることは可能です。
しかし、独学ゆえに挫折しやすいという点も否めません。
独学はなぜ挫折しやすいのか？そのポイントとして次のようなものがあります。
- 分からないところがあって、先に進めなくなる
- 学習に費やせる時間が足りなくなる
- 全体像が掴みにくい
特に一番問題なのは「分からないところが出てきても、誰にも質問できない」状況です。
Googleで検索しても答えが見つからないと、どうしても諦めてしまいがちです。
なので、 独学を始める前に「分からないところが出てきたときの対処法」を知っておくと良いです。
おすすめは MENTA というオンライン質問サイトです。
自宅からすぐにプロのWebデザイナーに質問ができるので、主にCSSやJavaScriptなどのプログラミング関連や、Webデザインツールの使い方について教えてくれる方もいますので、学習に詰まったときは活用してみてください。
Webデザインに必要な5つのスキル
Webデザインするのに必要なスキルは次の5つです。
- HTML
- CSS
- JavaScript
- デザインの基本
- 各種デザインツール(XDやIllustratorなど)
以降はここでまとめたスキルを1つずつ紹介していきます。
HTML – Webサイトの骨子を作成する言語
Webサイトの骨子（文章構造）を作る言語で、例えばタイトルや段落、表、プルダウンリスト、テキストやボタンなどのフォーム部品、リンクなどは全てHTML使って表現します。
STUDIOなどのノンプログラミングでWebページを作成できるサービスを知っている方にとっては、HTMLを覚える必要性が曖昧な方もいらっしゃると思いますが、 HTMLを理解しているとWebの基礎的な知識を覚えられ、かつ自分で思うようにWebサイトを作成できるようになる ので、HTMLを学んでおいて損はありません。
（余談ですが、HTMLはプログラミング言語ではなく「マークアップ言語」と呼ばれる言語です。マークアップ言語は主に視覚表現や文章構造を担当する言語です。）
CSS – 見栄えを良くするための言語
CSSはHTMLで作成したサイトのスタイルを決めるスタイルシート言語です。 HTMLで作った骨子にCSSで肉付けしていくようなイメージ です。
私たちが普段見ているWebページはCSSで見栄えを決めており、CSSがないとお世辞にもキレイなWebサイトとは言えないようなモノが出来上がります。
反対に CSSをしっかりと覚えることで、Adobe製品で作成したWebページのイメージをそのまま反映できる ので、WebデザインにおいてCSSはとても重要です。
HTMLだけでもWebデザインすることはできますが、推奨されていません。HTMLは文章構造、CSSはデザインと担当を分離することで、文章構造はそのままに、CSSだけを変えてWebサイトの雰囲気をガラッと変えることが可能です（ナイトモードのあるWebサイトやアプリはその良い例です）。
JavaScript – Webサイトに動きを持たせる言語
JavaScriptはGoogle Chromeなどのブラウザ側からWebサイト上の要素（プルダウンリストやボタンなど）を動かすことができるプログラミング言語です。
動きのないWebページならHTMLとCSSだけで作成できますが、よりリッチな印象を持たせるために活用できます。例えばページの一番下から一番上まで飛ぶボタンを用意したとき、JavaScriptを使うことで巻き戻しのようにすることができます。
またはクリックしたときにメニューが出てくるような表現もJavaScriptを使うことで実装できます。
現代のWebサイトでJavaScriptが使われていないサイトはほとんどありません。 当然Webデザインにも関係してくる技術なので、覚えておきましょう。
jQueryはJavaScriptを使いやすくしたライブラリ
JavaScriptの親戚にjQueryというライブラリがあります。ライブラリというと難しく感じますが、要は 「JavaScriptをとても使いやすくしたモノ」 です。
実はJavaScriptはそのままでは非常に使いにくいです、なぜならJavaScriptは元々Webページに簡単な動きをつけるためだけに作られたプログラミング言語なので、JavaScriptを使って複雑なことをするイメージはなかったからです。
しかし、JavaScriptがやらなければならないことは年々増えていき、どんどんと複雑なことをする必要が出てきてしまいました。
そこで出てきたのがjQueryです。jQueryはJavaScriptの難しい部分を簡単にしてくれるので、完全にニーズに合っています。
なので、 Webデザイン的にはJavaScriptよりもjQueryを重点的に覚える方が良いでしょう （もちろんjQueryはJavaScriptからできているので、JavaScriptのスキルも必要です）。
HTML, CSS, JavaScriptを学ぶ方法
次のスキルの解説をする前に、ここでHTML, CSS, そしてJavaScript(とjQuery)をどうやって覚えるのかをご紹介します。
これらの言語を独学で学ぶ方法は主に2つあります。
- プログラミング学習サービス
- 書籍
プログラミング学習サービス
上記の3つの言語の基礎的な使い方であれば、 ProgateやPaizaラーニングといったプログラミング学習環境を提供してくれているサービスを活用するのがおすすめ です。
Progate は親しみやすいイラストを使ったスライド形式の学習方法を採用している学習サービスです。無料でも活用できますが、月額980円（プログラミングスクールに比べたら破格）でHTML, CSS, JavaScriptを応用編まで学べます。
paizaラーニング は1本3分程度の動画でプログラミングを学べる学習サービスです。こちらはHTMLやCSS以前の「Web技術入門」というコンテンツがあるので、Web技術について詳しく知りたい方はこちらがおすすめです。
どちらの学習サービスもプログラムを動かす環境が用意されているので、初心者が最もつまづきやすいポイントを回避しているので、学習しやすいのが特徴です。
余談ですが、PythonやPHPの学習コンテンツも用意されているので、Webアプリケーションを作成したい場合にも役立てるでしょう。
また、こちらにより詳しく各サービスの情報をまとめているので、興味のある方は見てみてくださいね。
デザイン基本 – Webサイトにとらわれないデザイン基礎を覚える
デザインに関しては、Webデザインという枠にとらわれず、名刺やポスター、Power Pointでのプレゼン資料作りにも役立てられるような 「デザインそのものの基本」を覚えることが重要 です。
デザインは「天性の才能」によるところが多いと思われがちですが、基礎的なデザイン技術は論理体系が発達しているので、基礎を知るだけで誰でもデザインができるようになります。
良いデザインは「基本を知った上で少し崩している」もの です。まずは基礎をしっかりと理解した上で、後から自分の「色」を出していっても遅くはありません。
デザインの基本を学ぶ方法
デザインの基本はしっかりと体系だって整えられている書籍で学ぶのがおすすめです。
いくつか良書はありますが、良い本を1冊購入して習熟するだけでデザインレベルは一気に上がります。
デザインを学ぶ上でのおすすめの書籍をいくつか紹介します。
現在第4版まで重版されている大変人気のあるデザイン書で、初心者や非デザイナーの方から支持されている名著です。
Webデザインに限定していないデザイン全般に関することが書かれている本で、名刺やチラシ、パンフレット、広告などの実際の作例を参照しながら解説してくれています。
どの本を買うか迷うならノンデザイナーズ・デザインブックを買っておけば問題ありません。
デザイナーが普段どんなことに気をかけてデザインしているのかを極めて具体的にわかりやすくした本で、こちらもデザイン初心者の方におすすめです。
Webデザインだけでなく、本や雑誌、看板、チラシなど、ありとあらゆるコンテンツに通用するデザインの基本を教えてくれます。
ただし、先ほどのノンデザイナーズ・デザインブックと比べると解説量が少なく、軽く読みやすい反面直感的な部分が多い本だと言えます。
どちらが自分に合っているかで選ぶと良いでしょう。
こちらはWebデザインに限定し、実際に現場で働いているプロのWebデザイナーがどんなことをしているのかのイメージがわかる本です。
PhotoshopやIllustratorの使い方やHTMLやCSSでコーディングしやすいデザインデータなど、 非常に実践的な内容になっている ので上述した2つのデザイン書に比べると上級者向けですが、 プロが使っている技を学ぶことができる ので読んでおいて損はありません。
Webデザインのためのスキルを一通り覚えた後に読んでみましょう。
デザインツール – 覚えた知識を表現する
デザインの基本を理解したら、今度は覚えた知識で実際にWebサイトのデザインをしてみましょう。
参考までに、Web制作で使えるAdobeのソフトウェアには次のようなものがあります。
- Adobe XD
- Photoshop
- Illustrator
また、こちらのページにWebデザインで活用できるデザインツールをまとめていますので、ぜひご覧ください。
※「Webデザインに使える！おすすめのデザインツールまとめ」へのリンク
デザインツールを学ぶ方法
デザインツールに関しても書籍が出ているので、本で学ぶのがおすすめです。
特にAdobe製品の本はたくさん出ているので、自分に合った1冊を見つけると良いでしょう。
上述した3つの製品は「世界一わかりやすいシリーズ」で全て取り扱っているので、次の2冊をまとめて買ってしまうのも良いでしょう（タイトル通り初心者の方におすすめの内容です）。
世界一わかりやすい Illustrator ＆ Photoshop 操作とデザインの教科書
世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 世界一わかりやすい教科書
Webサイトを作ってみよう！
ここまでWebデザインするためにはどんな知識やスキルを習得する必要があるのかを解説しました。
これらの内容をある程度覚えたら、今度は自分で実際にWeb制作を通じてWebデザインを学んでいきましょう。
「聞いたことは忘れ、見たことは覚え、行ったことは理解できる」 と言います。
デザインは論理体系のある「学問」であり、「やればやるだけ上達する」スポーツやゲームのような特徴もあります。
見聞きしたものを実際にWebサイトを作って実践し、なぜそのデザインが優れているのかを「理解する」ことが、学習を進めていく上でなによりも大切なことだと言えるでしょう。
