デザインを学びたいけどお金がない！
いきなりスクールや商材に高額料金を払って無駄になるより、まずは低予算で自分がどこまでできるか試したい。
そんな人のためになるべく独学でお金をかけずにWebデザインを学ぶ方法、そして未経験独学者の学習の流れについてまとめてみました。
何から手をつけて良いかわからない人の参考になれば幸いです。
この記事はWebデザイナー歴18年のフリーランスが書いています
デザインソフトは何を選ぶ？
無料で使えて圧倒的人気のFigma（フィグマ）
Webデザインを行うには、デザインソフトが欠かせません。
デザインソフトには数種類あり、それぞれ得意分野が違っています。
プロであれば全部を揃えている人が多いですが、まず最初はひとつのソフトから始めるといいです。
一番におすすめなのは、Figmaです。
Figmaは無料で使えるWebデザイン用のソフトです。しかもブラウザで動かせるのでパソコンの容量も圧迫しません。
無料だけど圧倒的な使いやすさや機能のパワフルさで、多くのプロも愛用しています。私もFigma使っています。
Figmaの画面イメージはこんな感じです。このサイトのサムネイルもFigmaでほとんど作っています。
Figmaの使い方やFigmaを使ってWebデザインをする方法については、YouTubeでもたくさんアップされていますよ。
Figmaと同時に学びたいのはPhotoshop
PhotoshopはプロシェアNo.1のグラフィックソフトです。
こちらがPhotoshopの画面イメージです。
Photoshopはこのように写真の加工をする時に一番使うソフトです。
デザイナーの仕事には、写真の加工が欠かせません（レタッチともいいます）
例えば、人物の肌をきれいにしたり、色を変えたり、余計なものを消したり、写真のトーンを変えたり、切り抜いて組み合わせたり、それらの加工にはPhotoshopというソフトが必須です。
Photoshop以外のデザインソフトでは高レベルの写真加工を行うことができないので、デザイナーとしてもPhotoshopは必要不可欠なものなんですね。
さらにいうと、他のソフトが得意としている、例えばWebサイトのレイアウトデザイン等もPhotoshopでもできてしまいます。
写真加工だけでなくWebデザインに必要な基本的なことがPhotoshopひとつあればできてしまうわけです。
Webデザインスクールでも、まず最初に学ぶのはPhotoshopのところが多いですね
Photoshopは7日間の体験期間があるので、まずは体験で無料で試してみてください。
体験後の料金はサブスクになり、月2,380円から利用可能です。
| Photoshop単体 | フォトプラン （Photoshop＋Lightroom) | |
|---|---|---|
| 月額プラン | 4,980円/月(税込) | なし |
| 年間プラン（月払い） | 3,280円/月(税込) | 2,380円/月(税込) |
| 年間プラン（一括払い） | 34,680円/月(税込) 1ヶ月あたり2,890円 | 28,480円/月(税込) 1ヶ月あたり2,370円 |
価格表を見ての通り、Photoshopだけ欲しい人は単体プランよりフォトプランというプランの方がお得です。
ただしフォトプランは月々の契約ができなく年間縛りとなります。ちょっとだけ使用したいのであれば、単体購入の方がおすすめ。
最近の主流は、Photoshop＋Figmaの人が多いですね。
必要なパソコンはどうする？
パソコンだけはなんとか頑張ってお金をかけてください。スマホやタブレットでデザインできる時代は、まだきていません。
以下の記事では、Webデザイン業務に必要なマシンスペック、Windowsとmacのそれぞれおすすめのマシンを紹介しています（2023年現在のおすすめです）
上の記事ではいずれプロになった時に複数のデザインソフトをインストールするイメージで選んでいますが、PhotoshopやFigmaだけのインストールであればもう少し低いスペックでもいいかもしれません。
費用を抑えるためには、すでに持っているパソコンがあればまずはそれにPhotoshopの体験無料版をインストールしてみて！それで動作に重さを感じなければそのパソコンを使い続けてOKです
どうやって勉強する？
独学でデザインを学ぶ流れは以下になります。
ソフトの使い方を学ぶ
デザインの基礎を学ぶ
実際にあるデザインを模写（トレース）する
自分でバナー制作をしてみる
自分でWebサイトデザインを起こす
具体的な学習方法は、以下にまとめてありますが、独学の場合は基本的に動画や書籍で学ぶことになると思います。
まずはデザインソフトの使い方を学ぶ。レクチャー動画を参考に、実際に手を動かしてみましょう。
その後、デザインの基礎を学ぶ。デザインの基礎とは、デザインの造る上での原則やフォント、余白の作り方等についてです。商業デザインはセンスのようでいて、実はルールが明確に決まっています。初心者はまずこのルールを徹底的に学びましょう。
学習の際に必ず覚えてほしいのが、上達のコツは実際に手を動かすこと。
動画を眺めているだけでは絶対にスキルはつきません。
何度も繰り返し手を動かして、練習してみましょう。
動画で学ぶ
無料ならYouTube
費用がかからないのは、言うまでもなくYoutube。たくさんの素晴らしいレクチャー動画が上がっています。「Webデザイン」「Figma」「Photoshop」「Webデザイン」等で検索すると、使い方やデザインの方法があがってきますよ。
Youtubeの欠点は体系立てた学びができないということなんですが、それでも無料で学びたいのであれば1番の選択肢になります。
PhotoshopならAdobeの公式レクチャー動画もある
https://www.youtube.com/@adobecreativestation
Adobeの公式Youtubeでは、初めての方向けにわかりやすく解説したチュートリアル動画を公開しています
誰でも無料で見れます。
Photoshopの基本的な使い方はもちろんのこと、いろいろなTipsがあります。
プロ講師から学べるSchoo
もう少し専門的な学習や本格的にしっかりと勉強がしたいと言うことであれば（しかも安く）、Schoo（スクー）という動画学習サイトがおすすめです。
Schooでは、業界の最前線で活躍するデザイナーが講師となり、無料会員でもLIVE授業（生放送）への参加や、過去のアーカイブの視聴も一部が可能。さらに月額980円でプレミアムサービスに入ると、8,500本以上の授業が見放題となります。
プロデザイナーによるデザイン講義の動画やWeb業界や最新スキルについての動画等、見応えある講義を配信しているので、まずは無料登録の範囲だけでもおすすめです。
書籍で学ぶ
Kindle Unlimitedで学ぶ
AmazonのKindle Unlimited（キンドルアンリミテッド）では、月額980円で書籍が読み放題。初回3ヶ月無料キャンペーンもあります。
Kindle Unlimitedとは
- Amazonが運営している電子書籍のサブスク
- 月額980円で対象の本が全て読み放題
- 初回3ヶ月間無料キャンペーン中！
単品で買うと2,000円以上するWebデザイン関連の書籍も、結構な数が読み放題の対象になっています。
初心者であれば、まずはKindle Unlimitedの書籍で十分学習できます。
＼初回登録で無料体験が可能 ／
Kindle Unlimited対象本でWebデザイン関係の本はこまめにまとめ直しているので、よかったら以下の記事も参考にしてください。
オンラインサイトで学ぶ
HTMLコーディングを無料で学べるオンラインサイトがあります。途中からは有料になりますが、それでも月1000円程度なのでかなり良心的な価格です。
オンライン上でコードを打つだけなので、余計なアプリ等は必要ありません。
どちらも昔からあるサイトで、HTML初心者の強い味方。
Webデザイン独学者のスタートは、まずこの2つのサイトからという人が多いです。基礎力はかなりつくと思いますよ。
詳しくはこちらの記事で解説しています！
デザインするのに使う素材はどうする？
デザインをする時には、イラストや写真が必要になりますよね。イラストなんてプロのデザイナーでも自分で書いている人は少ないです。
無料の素材サイトを利用しよう
デザインの勉強にぴったりなのは、無料の素材サイトです。
なかでもおすすめは、写真ACとイラストAC。運用元は同じなので、一回ユーザー登録するとどちらも素材も使えます。
無料だけど使いやすい素材が揃っていますよ。特にイラストACはこのサイトでもたくさん使用しています。
無料会員だと1日9点までしかダウンロードできないのですが、有料のプレミアム会員であればダウンロードし放題です。
有料会員は、2024年の時点では月額1,338円です。
他にも、有料・無料問わず私がよく使う素材サイトのまとめ記事も書いていますのでよかったら参考にしてください。
フォントはGoogle Fontsを利用しよう
デザインにはフォントも必要です。
フォントにも無料フォントと有料フォントがありますが、学習用であれば無料でOKです。
フォントは、パソコンにインストールして使います。フォントに関しては後々デザインの仕事をすることになることを考えて、商用可のフォントを使うようにしておきましょう。
おすすめは、Webフォントの「Google Fonts」です。
プロも使っているフォントで、デザインに使いやすいフォントが全て無料で使えます。
Webデザイナーであれば、Webフォントを中心にインストールしておくといいでしょう。
フォントについては、以下の記事にもまとめてあります。
効果的な学習方法
一番大事なことは、とにかく時間があれば手を動かすことです。
デザインは手を動かさなければいつまで経っても上手くなりません。良いデザインを見ているだけでは絶対に上手くなりません。
初めて数ヶ月の自分のデザインが情けなくなるほど下手でも、皆そんなものです。
オリジナルのデザインが書けなかったら、模写でもいいです。模写も回数を重ねていくうちに自分のスキルになっていきます。
Photoshopで最初に極めたいスキルは「写真加工」
Photoshopは多様なデザイン作業ができる多機能で超優秀なソフトですが、なかでも一番得意とする作業は、写真の加工・編集作業です。
これは他のデザインソフトではできない作業です。
そして、Webデザインは写真の加工作業からは切っても切り離せません。
特に、
・肌や色の補正・変更
・複数の画像の合成
・いらないものを消す
・画像の切り抜き
・トーンを変える
・風景を変える
これらのスキルは、Webデザイン実務には欠かせないものなのでぜひマスターして欲しいです。
最新のPhotoshopでは、AIの進化もあり、これ等の作業がとても楽に行うことができました。
Photoshopの操作に慣れながら、いろいろな写真の加工方法を覚えましょう。
デザインの基礎力を学ぶ
PhotoshopやFigmaの使い方を学ぶだけでは、残念ながらWebデザインスキルは向上しません。
なるべく早い段階に、「デザインの基礎」を勉強しましょう。
デザインには明確なルールがあります。デザインはビジュアルアートではなく、ある程度のフォーマットや見やすさ、読みやすさが求められるものだということを忘れないでください。
そしてそれらのルールは、デザインの基礎的な知識として書籍なりにまとまっています。
まずはデザインを知ること、ルールを知ること。それだけでも、制作物のクオリティは変わってきます。
デザイナーを目指すなら必ず知識として入れておきたいし、早めに勉強した方が無駄がありません。
デザイン基礎の学習におすすめなのは、こちらの本です。
なるべく安い範囲で、Kindle Unlimited
で読み放題対象となっている本からピックアップしてみました。
デザインの鉄則: Webデザインの基本中の基本
＼初回登録で無料体験が可能 ／
実際のWebサイトを模写（トレース）する
一通りデザインソフトに慣れたら、実際にデザインをする訓練に入りましょう！
単純だけど最もお金がかからず、しかもすごく効果的な方法は、デザインの模写です。模写は無料でできる。
模写とは、見本を見て、その通りに自分でデザインを真似してデザインカンプを起こすことです。
イラストレーターや漫画家も自分の好きな作家さんの絵を模写するところから始めると言いますよね。Webデザイナーも同じです。
模写は費用ゼロでできる、最高のデザイントレーニングです。
デザインには一定のパターンやテイストがあります。模写は、その引き出しを増やすのに最適な訓練なんですね。
私がデザイナーになったばかりのころも、時間が余ったら模写をやってと言われていました。
今でも時間があったらちょこちょこやってます。模写は楽しい
いきなりWebサイトの模写は大変なので、まずはWebバナーの模写がおすすめです。
バナーデザインのギャラリーサイトの中から適当に選んで、PhotoshopやFigmaで自分の力で同じようなデザインを作ります。
バナー以外にも、youtubeのサムネイル、Twitterやブログのヘッダー画像の模写もおすすめです。
BANNER LIBRARY：https://design-library.jp/
バナーのデザインまとめ
SAMUNE : https://thumbnail-gallery.net/
Youtubeのサムネイルまとめ
模写をするのに必要な、フォント・写真・イラスト・アイコンといった素材は、上で紹介した素材サイトから似たようなものをダウンロードしてきましょう。同じでなくて構わないです。
もしくは、AdobeStockといった有料素材サイトからサンプルのカンプをダウンロードしてもOKです。ロゴ付きですが、自分で練習用に使う分にはいくら使ってしてもかまいません。
模写する原本と全く同じ素材やフォントを探し出すのは大変です。
探す作業に時間を取られるより、似たような素材を探すセンスを身につけた方が、自然とデザインセンスが上がってきますよ。
模写については以下の記事にまとめています。
模写については、この書籍もおすすめです。
模写の後は、オリジナルデザインを作ってみよう
模写にある程度慣れたら、オリジナルのバナーデザインも練習してみましょう。
Web広告バナーというのは、広告ターゲットと訴求内容がしっかりと設定されています。
例えば、
・30〜40代女性向け。ファッションブランド。ナチュラル系。夏Saleのバナー。
・中学生向け。塾の夏期講習用のバナー。
といったお題を設定して作ってみるといいですよ。
SNS上でお題があがることもあるので、参加してみるのもいいと思います。
バナーデザインの数をこなせばこなすほど、全体的なデザインレベルもあがっていきます。
また、副業として活躍しているバナー職人も多く、バナーやサムネイルの作成の仕事のみで稼いでいる人もいます。
PhotoshopやFigmaが使えれば、あとはバナーデザインの引き出しを増やして、デザインのお仕事を受注することができます。
バナーに慣れたら今度はWebデザインとステップアップしていきましょう。
ChatGPTにレビューしてもらう
なんと今はChatGPTがあなたのデザインをレビューしてくれます。自分でデザインしたファイルをアップすることで、それに対していろいろなアドバイスをしてくれるんです。
AIなので、個人の感想というよりは、余白が少ないとか、画像に統一感がない、とか先ほどいったデザインルールにのっとったアドバイスなので、初心者がやるとなかなか有用です。
Webデザインの上達で欠かせないのが自分の作品へのレビューなのですが、始めたてだと聞ける人がなかなかいないのですよね。AIなら遠慮なく聞けますね！
また、ChatGPTは、デザイン制作前のアドバイスもしてくれるので、例えば「高級アパレルのSNS用の広告バナーのデザインを考えてください」といったら画像まで考えてくれましたw
返答は
高級婦人服のSNS広告バナーのデザインコンセプトです。ソフトなパステルトーンと滑らかなセリフフォントを備えたミニマリストの美学が使用されており、洗練さと優雅さの感覚を生み出すのに役立ちます。バナーには、高級な雰囲気のスタイリッシュなドレスと高級ハンドバッグが含まれており、独占的な感覚を呼び起こします。ゴールドのアクセントと目立つ CTA (Call-to-Action) ボタンにより、ショッピングに重点が置かれ、クリックスルー率が向上します。 デザインは高級感と透明感のバランスを目指しており、クリーンで魅力的な外観を維持しながら製品に注目を集めます。どう思いますか？
だそうです。アイデアが思いつかない時はいいかもしれないですね。
さらにスキルをレベルアップしたい人は
AdobeCCの契約でハイレベルなオンライン講座を受講できる
さらに高度な学習を進めたいとなった場合、Adobeでは、AdobeCCを契約した人限定の無料オンライン講座を公開しています。
最初のとっかかりとしてはお金をかけずにPhotoshopだけでいいと思うのですが、もっとスキルをあげたい人は、AdobeCCというPhotoshop以外にも複数のソフトがセットになったプランを購入することをおすすめします。
このAdobeCC契約者限定の無料オンライン講座は、「アドビことはじめクリエイティブカレッジ」と言います。
独学者にとって素晴らしい講座なので、さらに学習を進めたいと思った場合は、AdobeCCの契約も視野にいれてみてください。
詳しくはこちらの記事にも書いています。
まとめ
以上、なるべく安くWebデザインを勉強する方法と、未経験からの独学の流れを簡単に解説してみました。
もちろんどんな勉強方法でも良いのですが、一例として参考にしてみてくださいね。
まずはお金をかけずにWebデザインに触れてみたいという方、ぜひぜひWebデザインを楽しんでください！