Webデザインはスクールに通わないと本当に身につかないスキルなのでしょうか…？
「まずは、雰囲気を掴むためにもスクールに通わずに、独学で勉強をスタートしてみたい…」と思っている方は意外と多いはず。
かくいう筆者もそのうちの一人で、全て独学で勉強しました。
最初は、難しそうに感じてしまうWebデザインの勉強もちょっとしたコツや工夫次第で楽しく勉強を続けることができます。
今回の記事がこれから独学で勉強を始める方の入り口、またロードマップの参考として活用していただけると幸いです。
目次
一般的に必要とされるスキル・知識
HTMLとCSSによるコーディング
Webデザイナーと聞いて、デザインのイメージを強く持たれて方にとっては、コーディングという言葉は聞き慣れない用語だと思います。
HTMLとCSSは、「マークアップ言語」と呼ばれており、それぞれWebサイトを構成する上で欠かせない言語です。
一般的にどんなサイトでもHTMLとCSSをベースに作られています。
オンライン学習ツールでHTMLとCSSに慣れる
デザインを主にやっていきたい人にとって、黒い画面に並んだコードたちと睨めっこする時間は苦痛そのものかもしれません。
しかし、そんなコーディングもそれぞれのコードの持つ意味や関係性、仕組みや成り立ちを理解すると意外と楽しいものです。
Webデザイナーの中には、デザインを専門としていて、コーディングはほとんど行わない人も多くいらっしゃることでしょう。しかし、スラスラ書けたり、コーディングだけを極める必要はなくとも、知識は知っておいて損はないスキルだと言えます。
HTMLとCSSでコーディングを勉強する際は、下記のサイトものがおすすめです。
どちらも無料のコースからはじめられます。
▶︎プロゲート
イラスト中心のスライドでプログラミングを学べる学習サイトです。
音声動画ではなく静的なサイトで自分のペースで学習したい人におすすめです。
▶︎ドットインストール
音声動画サイトのドットインストールは、1本あたり3分という短さでプログラミングを学ぶことができるサイトです。初心者に寄り添った解説がとても丁寧なので、とても分かりやすいです。注意点としては、動画を見る際は、必ず一緒に手も動かしましょう。動画を流し見していると「なんとなく理解した気分」になったりしますが、実際に手を動かすとなると手が止まってしまったりするものです。おすすめは、1回目の視聴は、見るに徹する、2回目以降は一緒に手を動かしてコードを書く、などルールを決めて取り組むといいかと思います。
Webデザインの知識を書籍で網羅的に身に付ける
先述したオンライン学習サイトは、どちらもとても効率よく学べるサイトとしておすすめですが、
用語や細かいルールの整理をするためにも、書籍を1冊手元に置いておくと学習でつまづく度に本が辞書的に使えるのでおすすめです。
書籍の良いところは、なんと言っても必要なことが網羅的に1冊に凝縮されている点だと思います。
▶︎初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉
WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説されています。
初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。
NoCodeツールの登場で、プログラミングは不要になる？
以前から主流のWordPressに代表されるローコード（＝比較的少ないコードや全くコードを書かなくても簡単にWebサイトを作れる）や最近話題のNoCodeが登場したことにより、プログラミングは不要になるのでは？と思ってらっしゃる方も多いと思います。
しかし、コードを書く作業としてのプログラミングは減っていくことはあっても、プログラミング的思考と呼ばれる考え方の部分はなくならないと言われています。楽なツールが登場しても、そのツールをどのような考え方で使うのか、そもそも基礎はどうなっているのかという根本的な部分を理解しておかないとNoCodeツールも使いこなせないというのが実際にNoCodeツールを使ってみて感じた筆者の体感です。
言語の基礎の部分が分かっているからこそ、実際のコードを見たときに直感的に何をやろうとしているのか、また発展的に実現できることの幅が広がっていくと思っています。Webサイトのデザインを制作する時にも、コーディング作業をイメージしながらデザインを作ることによって、実装しやすいデザインを作ることができたり、使いやすいデザインが作りやすくなるなど、様々なメリットがあります。
デザインの基礎を学ぶ
デザインの基礎を学ぶうえでおすすめの書籍を3冊ご紹介します。
▶︎なるほどデザイン
「デザイン＝楽しい」を実感できる新しいデザイン書籍です。
デザインする上で必要な基礎、概念、ルール、プロセスを図解やイラスト、写真などのビジュアルで解説されています。
この本の良いところは、見た目だけ美しいデザインではなく、なぜこのデザインにするのか、ロジックの部分に焦点を当てて、具体的な言葉で解説されており、実際に読んでいて心の中で何度もつい「なるほど」と言ってしまうところではないかと思います。
楽しみながらデザインのあれこれがわかる「なるほど！」と思える内容が盛りだくさんです！
本を読み終わった前と後とでは、見えている世界が変わる、というのもあながち大袈裟な表現ではないと筆者は思います。
▶︎ノンデザイナーズ・デザインブック
デザイナーでなくとも、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい、そんな人のために、デザインの「4つの基本原則」近接、整列、反復、コントラスト…などについて詳しく解説された、ロングセラー本。
▶︎けっきょく、よはく
しゅっとした、洗練された、オシャレなデザインは読みやすく情報が整理され、余白をうまく使いこなしています。
余白を上手に使ったレイアウトは洗練された印象を与えます。
「余白を作ること」を意識すれば誰でも今より一歩垢抜けた、オシャレなデザインができる！
そんな余白に注目したデザインレイアウトの本です。
デザインソフト操作スキル
▶︎Illustrator
”イラレ”の愛称でお馴染みIllustratorは、ロゴやイラスト制作に向いているAdobe社のデザインツールです。
名刺、パッケージ、パンフレットなどの印刷物まで、幅広い分野で使われており、印刷やWebサイト制作における必須ツールのひとつです。
おすすめの学習方法は、Adobe社が提供している公式サイトのIllustratorチュートリアルに倣って実際に作品を作りながら手を動かしてみることです。
▶︎Photoshop
”フォトショ”の愛称でお馴染みPhotoshopは、写真の加工や写真同士の合成、写真の詳細な色調整などを主にするソフトです。
こちらもおすすめの学習方法は、Adobe社が提供している公式サイトのPhotoshopチュートリアルに倣って写真加工などの操作を体感で覚えていくことです。
1本あたりの動画が数分〜と短いものもあるため、まずは飽きずに見ることができるものからはじめてみてはいかがでしょうか？
まとめ
今回は、初心者が独学でWebデザインを勉強するための入り口となる学習ガイドをご紹介しました。
一口にWebデザインといえど、範囲が広いため当然のことながら、全てのことには触れられておりません。
Webデザイン業界も年々、新しい情報やツールがアップデートしていくため、本質的には学習に終わりはないでしょう。しかし、新しいトレンドや技術をキャッチアップしていくこと、それ事態を楽しいと思える人こそ、Webデザインの勉強に向いていると言えるのではないでしょうか？
スキルを身に付けることと同時に、実際に仕事を通してWebデザインに触れることが総合的に何よりの成長につながっていくと思います。
長期的な視点を持ちながらも、成果が目に見えて分かりやすい短期的に取り組めるスキルを身につけていくことのバランスを保ち、少しずつ出来ることを増やしていきましょう。
