何から始めたら良いかわからない人のために
Webデザインに興味があるけど、どう学べばいいかわからない。デザイン専門スクールは高額すぎる。
いきなりスクールや商材に高額料金を払って無駄になるより、まずは低予算で自分がどこまでできるか試したい。
そういう方に向けて、独学で、なるべく低予算で学ぶWebデザインをテーマに記事を書きました。
ちなみに「なるべく」と書いてある通り、初期費用ゼロではWebデザインは学べませんので、そこはすみません。
Webデザインに興味がある方、またWebデザインでの副業を考えている方、とにかく何から手をつけて良いかわからない方の参考になれば幸いです。
この記事を書いているのは、Webデザイナー歴18年になる現役フリーランスデザイナーです
独学でのWebデザイン、まず何から学ぶか考える
Webデザインの学び方を検索すると、たくさんのソフト名やHTML言語やらサーバーの知識も必要とか色々出てくるのですが、とりあえず全て削ぎ落とします。必要があれば、後で学べばOK。色々手を出すより、スキルを絞って学習した方が仕事は取りやすくなります。
まずは「デザインソフトを使って自分の思うデザインを起こせる」というところを目指します。
デザインンソフトは、デザイナーが仕事で使う絶対に欠かせないソフトです。これがなくては仕事ができません。
まずはデザインソフトを購入してパソコンにインストールする、そして使い方を覚える、次にソフトを使って画像の加工ができるようになる、そして最終的にはデザインを作れるようになることを目指します。
【低予算なら】Webデザイナーにおすすめなデザインソフトは「Photoshop」
この記事でおすすめするデザインソフトは、「Photoshop（フォトショップ）」というグラフィックソフトです。通称フォトショと言います。
こちらがPhotoshopの画面イメージです。
Webデザイナーが使うデザインソフトは何種類かあり、全てを揃えようとするとその分お金がかかります。
最初はお金をかけたくない場合は、PhotoShopを選んでください。他のソフトではダメです。
なぜならWebデザイナーに求められている仕事は、Photoshopひとつあれば一通りできるからです。
Photoshopとは画像加工のソフトです。特に写真加工を得意としていて、逆に言うと他のソフトではPhotoshopのような高レベルの写真加工を行うことができません。
一方、Webデザイナーが他に好んで使う「AdobeXD」や「Illustraotr」というデザインソフトがありますが、これらソフトでは写真加工を行うことができないのです。
そのため、Photoshopで加工した写真を、XDで読み込みレイアウトする、といった作業をおこなっています。
一方、Photoshopは単体でひとつあれば、写真加工はもちろん、レイアウトや、イラスト作成や、Webデザインに必要な基本的なことができます。
他のソフトにできてPhotoshopにできないことはないけど、Photoshopだけができる加工はあります。
※なぜPhotoshopが有能なのにプロのWebデザイナーは他のソフトを使うかというと、XDは軽くレイアウトのための機能が揃っていて非常に便利だからです。
なので、ほとんどのプロのWebデザイナーは複数のデザインソフトを使い分けていますが、この記事では学習費用を安く抑えることを目的とした場合は、Photoshop単品での契約をおすすめします。
また、Photoshopは現役Webデザイナーにとって必ず通ってきた道です。多くのデザイナーの最初の一歩がPhotoshopだったのではないでしょうか。
<strong>Photoshop</strong>はデザイナーには欠かせないソフト。フォトショのスキルを学ぶことは、デザイナーへの第一歩です
デザインソフトとパソコンを用意する
Photoshopの購入方法
Adobe公式サイトでダウンロード購入できます。
Photoshopは単品だと、月額で2,728 円/月ですが、「Lightroom」というソフトと合わせたフォトプランを契約すると2,178 円/月と価格が安くなります。
Photoshopの性能は変わらないので、フォトプランにした方がお得です。
なお、単品でもフォトプランでも、7日間無料でお試し可能です。
Webデザインに必要なパソコンを用意する
また、Webデザインを独学で学ぶ場合は、パソコンも必要です。パソコンだけはなんとか頑張ってお金をかけてください。スマホやタブレットでデザインできる時代は、まだきていません。
以下の記事では、Webデザイン業務に必要なマシンスペック、Windowsとmacのそれぞれおすすめのマシンを紹介しています（2023年現在のおすすめです）
上の記事ではAdobeCCという複数のデザインソフトをインストールするイメージでパソコンを選んでいますが、Photoshop単体のみのインストールであればもう少し低いスペックでもいいかもしれません。
費用を抑えるためには、すでに持っているパソコンがあればまずはそれにPhotoshopの体験無料版をインストールしてみて！それで動作が持ったりしないようであればそのパソコンを使い続けてOKです
低予算でWebデザインを学習する基本的な流れ
独学かつ低予算でWebデザインを学習・上達させたいのであれば、以下の流れになります。
オンライン講座や書籍でPhotoshopの使い方を学ぶ
デザインの基礎を学ぶ
実際にあるデザインを模写（トレース）する
自分でバナー制作をしてみる
自分でWebサイトデザインを起こす
一番大事なことは、とにかく時間があれば手を動かすことです。
デザインは手を動かさなければいつまで経っても上手くなりません。良いデザインを見ているだけでは絶対に上手くなりません。
初めて数ヶ月の自分のデザインが情けなくなるほど下手でも皆そんなものです。
オリジナルのデザインが書けなかったら、模写でもいいです。模写も回数を重ねていくうちに自分のスキルになっていきます。
独学でPhotoshopの使い方を学ぶ方法
Photoshopの使い方を学べる動画や書籍を紹介します。上達のコツは、必ず実際に手を動かすこと。
隙間時間に動画をみるだけでは絶対にスキルはつきません。
必ず何度も手を動かして、練習してください
Adobeの公式動画で学ぶ（無料）
Adobeの公式Youtubeでは、初めての方向けにわかりやすく解説したチュートリアル動画を公開しています。誰でも無料で見れます。
Photoshopの基本的な使い方はもちろんのこと、いろいろなTipsがあります。
YouTubeで学ぶ（無料）
Adobeの公式動画以外にも、たくさんのプロ・アマの人が、YoutubeでPhotoshopの使い方やデザインについて動画をアップしています。「PhotoShop」や「Webデザイン」で検索してみてくださいね。
chot.designで学ぶ(1,100円/月）
chot.designは、ブラウザ上で、デザインが学べる学習サイトです。
Photoshopに限らず、Webデザインに関する多種多様なレッスンが500以上あり、月額1,100円で全ての講座を学ぶことができます。
フォトショップの使い方だけでなく、デザインの基礎講座もあります。
何から学べば良いかわからないという方は、まずはこのサイトから始めてみるのをおすすめします。
基礎的なスキルの網羅にぴったりです
Udemyの学習動画を探す（セール時なら安い）
Udemy
は、オンライン上で学べる動画学習サイトです。サブスクではなく、ひとつの動画を買い切り型のタイプ。
普段は少しお高めですが、セール時はぐっと安くなって2,000円以下で優良な動画を購入することがえきます。買い切りなので、後で何度も見直すこともできます。
また、一度購入して思っていたのと違っていた場合は、30日間返金保証あり。
WebデザインやPhotoshopの使い方に関する動画も揃っています。
Udemyのおすすめ動画は、以下の記事にまとめてありますので、参考にしてください。
書籍で学ぶ
動画ではなく書籍で学びたい方におすすめの書籍です。
こちらの書籍は、Adobe公式の講師も努めている作者で、独学で学びたい初心者に寄り添った内容になっています。
書籍は気になった時に何度でも見直せるのが便利ですよね
Kindle Unlimitedで学ぶ
月額980円のKindle Unlimitedでは、毎月たくさんの本が無料で読み放題となっています。
Webデザインに関する本も、読み放題の対象になっています。結構数が多いので、980円で読めるのであれば非常にコスパがよろしい。
Kindle Unlimitedで読み放題対象となっている本をまとめた記事があるので、ぜひ参考にしてください。
Photoshopで最初に極めたいスキルは「写真加工スキル」
Photoshopは多様なデザイン作業ができる多機能で超優秀なソフトですが、なかでも一番得意とする作業は、写真の加工・編集作業です。
これは他のAdobeのデザインソフトではできない作業です。
Webデザインは、写真の加工作業（レタッチ作業）は切っても切り離せません。
特に、人物の肌や色の補正、複数の画像の合成、いらないものを消す、画像の切り抜き、全体のトーンを変える、といったスキルは、Webデザイン実務には欠かせないものなのでぜひマスターして欲しいです。
デザインの基礎力を身につける
Photoshopの使い方を学ぶだけでは、残念ながらWebデザインスキルは向上しません
デザイナーにとって大切な、デザインの基礎について学ぶのも大切なことです。
商業デザインには全てにルールがあり、そのルールに則ってデザインは作られています。
そのルールを知るだけでも、素人っぽさが抜けたデザインに近づきます。
デザイン基礎の学習におすすめの書籍を何冊か紹介します。
Webデザインの基礎学習におすすめの本
いちばんよくわかるWebデザインの基本きちんと入門
Webデザインの基本的なこと、配色やレイアウト、フォントについてなど、Webデザイン初心者が必ず抑えてほしいポイントがまとまっています。
デザインの鉄則: Webデザインの基本中の基本
デザインの基本原則についての本です。
Kindle Unlimited 会員なら、読み放題対象となっており0円で読めます。（初回限定30日無料対象です）
＼ 30日間の無料体験が可能 ／
あたらしい、あしらい。あしらいに着目したデザインレイアウトの本
自分のデザインの素人っぽさが抜けない人には、こちらの本がおすすめです。
素人っぽいデザインしか作れない「いまいちさん」のデザインを、先輩の「しゅっと先輩」が今風にセンス良く作り直します。
今風のあしらいを学ぶのにぴったりの本です。模写するだけでもとても勉強になると思いますよ。
こちらはシリーズ化されているので、どの書籍もおすすめです！
また、Photoshopの学習方法でもおすすめした「chot.desigon」さんでも、初心者向けに、デザインの基本原則について学べる講座が用意してあります。
Photoshopの使い方やデザインの基本原則について学んだら、次は実際にデザインをする訓練に入りましょう！
実際のWebサイトを模写（トレース）でデザインしてみる
模写とは、見本を見て、その通りに自分でデザインを真似して起こすことです。
イラストレーターや漫画家も自分の好きな作家さんの絵を模写するところから始めると言いますよね。Webデザイナーも同じです。
模写は費用ゼロでできる、最高のデザイントレーニングです。
私がデザイナーになったばかりの15年前でも、時間が余ったら模写をやってと言われていました。
今でも時間があったらちょこちょこやってます。模写は楽しい
いきなりWebサイトの模写は大変なので、まずはWebバナーの模写がおすすめです。
バナーデザインのギャラリーサイトの中から適当に選んで、Photoshopで同じように自分の力で作ってみます。
また、バナー以外にも、youtubeのサムネイル、Twitterやブログのヘッダー画像の模写もおすすめです。
BANNER LIBRARY：https://design-library.jp/
バナーのデザインまとめ
SAMUNE : https://thumbnail-gallery.net/
Youtubeのサムネイルまとめ
模写をするには、フォント・写真・イラスト・アイコンといった素材が必要になりますので、これらは、素材サイトやフォントのサイトからダウンロードしてきます。
練習用なので、無料サイトの素材を使ったり、有料のものでもカンプの状態で使えばOKです。
おすすめの素材サイトは
等です。
デザインにはフォントも必要です。
フォントは、パソコンにインストールして使います。フォントに関しては後々デザインの仕事をすることになると思うので、「商用可」のフォントをログインしましょう。
フォントにも無料と有料のものがありますが、学習時点であれば無料のものでOKです。
おすすめは、Webフォントの「googleフォント」です。プロも使っているフォントで、使いやすいフォントが全て無料で使えます。
Webデザイナーであれば、Webフォントを中心にインストールしておくといいでしょう。
模写するものと全く同じ素材やフォントを探し出すのは大変です。
探す作業に時間を取られるより、似たような素材を探すセンスを身につけた方が、自然とデザインセンスが上がってきますよ。
模写については、この書籍もおすすめです。
バナーにしろYoutubeのサムネイルにしろ、デザインにはある一定のパターンやテイストがあります。
模写は、その引き出しを増やすのに最適な訓練なんですね。
模写の後は、オリジナルデザインを作ってみよう
模写を続けながら、完全オリジナルのWebバナーのデザインも練習してみましょう。
バナーのデザイン力をあげたいなら、こちらも書籍がおすすめです。
Web広告バナーというのは、広告ターゲットと訴求内容がしっかりと設定されています。
例えば、
・30〜40代女性向け。ファッションブランド。ナチュラル系。夏のSale用バナー。
・中学生向け。塾の夏期講習用のバナー。
といったお題を設定して作ってみるといいですよ。
SNS上でお題があがることもするので、参加してみるのもいいと思います。
バナーデザインは数をこなせばこなすほどトータルデザインもレベルがあがっていきます。
また、副業として活躍しているバナー職人も多く、バナーやサムネイルの作成の仕事のみで稼いでいる人もいます。
Photoshopさえ使えれば、あとはデザインの引き出しを増やして、デザインのお仕事を受注することができます。
また、Webサイトも同様です。何サイトか模写をしたら、応用としてオリジナルのWebデザインを作ってみましょう。
さらにスキルをレベルアップしたい人のために
AdobeCCの契約でさらに高度なオンライン講座を受講できる
先ほど紹介したAdobeの無料講座もいいのですが、さらに高度な学習を進めたいとなった場合、Adobeでは、AdobeCCを契約した人限定でさらに高度な無料オンライン講座を公開しています。
AdobeCCとは、PhotoshopだけでなくWebデザイナーに必要なデザインソフトが全部つまったセットプランのことで、本格的にWebデザイナーを目指したいとなると、いずれ必要になるソフトです。
AdobeCC契約者限定の無料オンライン講座は、独学の初心者にとって素晴らしい動画なので、さらに学習を進めたいと思った場合は、AdobeCCの契約も視野にいれてみてくださいね。
詳しくはこちらの記事にも書いています。
デザインスキルの次はHTMLコーディングの学習も
Webデザイナーを目指すのであれば、デザイン学習の次は、HTMLコーディングにも挑戦して欲しいです。
HTMLはコードを書くのにテキストエディタというソフトウェアが必要ですが、これは無料ですのでコストはかかりません。
先ほど紹介したchot.designにもHTML講座がありますし、他にも独学でHTMLを学べるオンラインサイトがあります。
HTML学習オンラインサイトで有名なのは、「ドットインストール」と「progate」というオンライン学習サイトです。
以下の記事で紹介していますので、参考にしてください。
HTMLの独学のロードマップについては、以下の記事で詳しくまとめてあります。
HTMLコーディングはそこまで難しい学習ではなく、終わりがないデザイン学習よりは学びやすい分野となっています。1日の学習時間にもよりますが、3ヶ月くらいで基礎的な内容は覚えることができます。
HTMLを学ぶと仕事の幅が広がる＆ソフト代等のお金もかかりません。なるべく安く独学を考えているのであれば、HTMLはぜひお勧めしたいです。
まとめ
独学で学びたい人向けに、なるべくお金をかけずに独学でWebデザインを学ぶ方法をまとめてみました。
まずはPhotoshopに慣れることが一番です。Photoshopで「デザインをする」ことを覚えたら、他のデザインソフトでも応用が効くようになってきます。
Photoshopからデザインの世界はひろがります。