独学でPhotoshopのスキルを身につけwebデザイナーになる方法

最近、Photoshopを独学で勉強する人が増えているみたいですね。

というのは、「webデザイナー」という職種が、学歴や経歴関係なしに未経験から就職できるため、Photoshopのスキルさえ自力で身につければ、誰でも憧れのデザイナーになることが可能だからです。

また、Photoshopのスキルを身につけると、個人で稼げる力もつくため、会社に依存せず、個人で月10〜20万円といったお金を稼ぐことも可能です。

この記事を書いている僕は新卒で制作会社のwebディレクターに入社後、8ヶ月でwebデザイナーに転職。現在は本業で好きなデザインの仕事に従事しつつ、Photoshopのスキルを生かして、副業だけで月20万ほど稼いでいます。

しかし、未経験の方はこんな疑問をお持ちかもしれません。

悩んでいる人

・独学でPhotoshopは本当に習得できる？資格とか必要なの？
・どうやって独学する？どこまで勉強すればいいの？

本記事ではこういった質問に答えるために、Photoshopを独学で習得する方法をお伝えいたします。

この記事を読めば、スクールに通わずとも2ヶ月から半年という期間で、webデザイナーとして就職できるPhotoshopのスキルの身につけ方がわかります。

そもそもPhotoshopは独学で習得可能か

結論から言うと可能です。
冒頭で申したように、「webデザイナーとして就職できるレベルまでPhotoshopを使いこなすこと」は誰でも簡単に習得できます。

また、Photoshopの資格というと「Photoshopクリエイター能力認定試験」というものがございますが、webデザイナーになるために必須の資格ではありません。

ゆーし

僕や周りの未経験からwebデザイナーになった方も、資格を持っている人はいませんでした。

Photoshopの独学に必要なもの

Photoshopの独学に必要なものは、当たり前ですがPCとPhotoshopのソフトです。
ただ、Photoshopを使用するにあたってのPCとPhotoshopのソフトについては、以下の2点に注意が必要です。

PCスペック

Photoshopはかなり高性能なデザインソフトのため、PCがそれに耐えられるスペックを持っている必要があります。
といっても、それほど高度のスペックは不要です。最低限以下のスペックがあれば大丈夫です。

上記についての詳しい理由や、ノートPCがいいかデスクトップがいいかなどの個人的な会見については、別記事でまとめていますのでご覧ください。

【中古2万】webデザイナーに必要なPCのスペックはこれだけで大丈夫

ソフトは「Photoshop CC」か「Photoshop Elements」か

Photoshopには、 「Photoshop CC」と「Photoshop Elements」の２種類があります。

webデザイナーになるためのPhotoshopのスキルを身につけるなら、「Photoshop CC」を購入しましょう。
以下にざっくり違いを説明しますので、参考にしてください。

ゆーし

ちなみに、僕は制作会社、事業会社の3社経験していますが、どの会社のデザイナーもPhotoshop Elementsを使っている人は見たことありません。

Photoshop CCは月額制または年学制なので、毎回支払うのは大変ですが、Photoshopをできるだけ安く購入する方法を最後にお伝えしますので、よろしければ最後までご覧ください。

Photoshopの独学方法

では、具体的にPhotoshopの独学方法をお伝えします。
先にいっておきますが、Photoshopの独学に参考書、教材、有料スクールはいっさい不要です。

逆に、今からお伝えする手順でやらないと、無駄に参考書やスクールに時間と労力を費やしてしまい、挫折の原因にもなりますので、しっかり真似してください。

ゆーし

僕は何も考えず参考書を買ってしまい結局使わずじまいでした...

では一つずつ順を追って解説します。

ステップ❶：何を制作するかを決める

Photoshopであなたが最終的に制作したいものを決めましょう。

webデザイナーになりたいならポートフォリオに出すためのwebサイトを制作することが目標です。
未経験者の場合は、架空のクライアントを想定した架空サイトをつくることです。

ステップ❷：制作するものの設定と構成案を準備する

架空サイトと言っても、しっかりとした設定と構成案が必要です。設定とは以下のようなもの。

構成案とは、webページのどこに何を配置するかが書かれた設計図のことです。
建築の設計図と同じようなものと思ってください。

悩んでいる人

どうやって設定と構成案を考えるの？

クライアントの設定と構成案については、ネット上でwebサイト制作の依頼が見れるクラウドソーシングから簡単に引っ張ってくることが可能です。

詳しい説明は「独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】」で説明しているので要チェックです。

独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】

実はこの作業が最も重要なのにも関わらず、実践している人が少ないため、Photoshopの独学で挫折する人が多いです。

逆にこれらをしっかり考えておくと、次の「webサイトのトレースをする」で必要なスキルだけを集中的に身に付けることができるので、焦らず構成案まで準備しましょう。

ステップ❸：webサイトのトレースをする

さて、ようやくPhotoshopの出番です。
独学でPhotoshopの使い方を学ぶのに最適なのは、トレースです。

webデザイナーを目指す方は、webサイトのデザインをトレースをしましょう。

なぜトレースがいいのか

単純明快で、仕事で使う機能・スキルだけを学べるからです。

Photoshopには無数の機能があり、全てを覚えることは不可能です。
プロのデザイナーでも、Photoshopの全てを理解している人なんてほとんどいないでしょう。

特に、webデザイナーが仕事で使う機能はほんのわずかです。

その氷山の一角をピンポイントで学ぶには、制作物そのものをトレースするのが一番近道ということです。

具体的にどんなwebサイトをトレースするのか

ステップ❶、ステップ❷で考えた架空サイトに近いイメージのwebサイトをトレースしましょう。

トレースするwebサイトはギャラリーサイトを使って見つけられます。
以下におすすめのギャラリーサイトを4つまとめていますので、全部ブックワークしてください。

【20サイトを徹底比較】実務でwebデザインの参考に役立つギャラリーサイト4選

さて、ステップ❶、ステップ❷の重要性にお気づきでしょう。

ギャラリーサイトを見れば分かる通り、webサイトといってもたくさんの種類があります。かっこいい、かわいいといったデザインイメージの違いやECサイト、コーポレートサイトのようなページの種類などなど。

クライアントの設定が明確に決まってないと、トレースすべきものが何かわからないので、独学が迷走してしまいます。

逆に、クライアントの設定が明確だと、ギャラリーサイトから業種やイメージを絞り込んで、架空サイトの参考になりそうなものだけをピックアップしてトレースができるのです。

webサイトのトレースの仕方

まずはPhotoshopの使い方に慣れるために、トレース元をキャプチャしたものを下に置いて、上からトーレスするだけでもいいです。

トレースの個数は多ければいいに越したことはありませんが、webサイトのTOPページ1枚をしっかりトレースするだけで、だいたい使い方は理解できるのではないでしょうか。

今ではスマホでwebサイトを見る人が多いので、スマホデバイス用のデザインもトレースしましょう。
スマホのデザインを見たい時は、「ブラウザ上で右クリック→検証→左上のアイコン（toggle device toolbar）をクリック」すると、スマホのデバイスを選択できます。

デバイスはどれでもいいですが、スマホのデザインの特徴を理解するには、タブレット以外のデバイスが望ましいです。

操作に慣れてきたら、トレース元を目視で模写すると、余白や要素のバランスなどのデザインスキルも身につくのでおすすめです。

トレースでデザインスキルも一緒に磨きたい！という方は、以下の記事を参考にしてください。

webデザインスキルを効率よくあげるトレースのやり方

ステップ❹：わからないところを局所的に調べる

トレースをしながら、疑問に思ったことを調べましょう。調べ方は以下の2通りあります。

google検索エンジンで調べる

Photoshopの基本的な使い方や機能に関しては、参考書などは買わずもネット上にたくさん情報があります。

もし検索の仕方がわからない場合は、膨大な量の無料講座や基礎知識をまとめたサイトから、自分がやりたいことが叶いそうなページだけを探しましょう。

以下に初心者向けのPhotoshopの使い方をまとめたサイトを紹介します。

上記の無料講座には、webデザインのスキルに不要なものも多いので、Photoshopで何をやりたいのかを明確にして探すようにしましょう。

SNSで聞く

Twitterには、未経験からwebデザイナーを目指している方からプロの方まで、たくさんの界隈の人間がいます。
webデザイナー用アカウントをつくって、駆け出しのwebデザイナーの方々をフォローしましょう。

なぜ駆け出しのwebデザイナーかというと、彼らは未経験者にやさしく、初歩的な技術を教えるのを積極的に行ってくれるからです。そういった方々をフォローしてPhotoshopに関する疑問や不安などをつぶやきましょう。

ちなみに僕のアカウントも独学でwebデザイナーを目指す方を応援しているので、FF外からでもジャンジャン質問してください。

https://twitter.com/miiichan_design/status/1260921234394505217

また、これだけデザインではInstagramでも相談承ってますのでお気軽に質問どうぞ！

ステップ❺：自分の作品を制作する

トレースでPhotoshopの使い方やwebサイトの規則性を掴めてきたら、いよいよステップ❶、ステップ❷で考えた架空サイトの制作にとりかりましょう。

架空サイトの作り方については、「デザインカンプの作り方とコツ」にて詳しく説明しておりますのでご覧ください。

【見本あり】デザインカンプの作り方とコツを現役webデザイナーが解説

ちなみに、制作したオリジナルサイトを評価してほしい！という方は、これだけデザインで「1 on 1デザイン添削」というサービスを行ってます。

現役webデザイナーの僕がつきっきりでフィードバックいたしますので、ぜひ使ってみてください。

【プロへの近道はフィードバック】1on1デザインレビュー始めます

Photoshopの独学に必要な期間

期間を断定するのは難しいですが、上記の独学方法を「2ヶ月間」集中して繰り返し、最低でも3つの架空サイトを作れば、Photoshopを不自由なく使えるレベルにはなるでしょう。

冒頭でも話しましたが、僕自身webディレクターになって半年間web制作に関する知識を学んだ後、2ヶ月の独学でwebデザイナーに転職しました。
業界未経験ではありませんが、実務でデザイン制作することはなかったので、Photoshopに関しては完全に独学です。

しかし、問題はPhotoshopが使いこなせるかではなく、完成物のクオリティです。

トレースはやるだけデザイン力が身につきますし、架空サイトもたくさん作るほどポートフォリオとして優れたものになります。自分が納得できるレベルの完成物ができるまでアウトプットしましょう。

そのころにはPhotoshopの使い方なんて気にならないほどになっているはずです。

webデザイナーになるために他に必要なソフトは？

webデザイナーを目指している方は、Photoshopの他に「Illustrator」というソフトが必要です。

PhotoshopとIllustratorの違いやIllustratorの必要なスキルに関しては、以下の記事で紹介していますので、興味があれば覗いてみてください。

【現場でわかった】webデザイナーになるために覚えるべき主流のソフト

おまけ：Photoshopを安く購入する方法

Photoshopで勉強したいけどあまりお金をかけたくない...という方に。
できるだけ最低限の費用でPhotoshopを購入できるプランを紹介します。

Photoshopだけ使いたい人向けのお得なプラン

PhotoshopとLightroom（簡単な写真加工ソフト）がセットのプランです。

クラウドストレージ（オンライン上にデータを保存できるスペース）が小さい分、Photoshop単体よりも安くなってます。Photoshopのデータはローカルに保存すれば問題ないので、クラウドストレージの小ささは気にないで大丈夫です。

Adobe Creative Cloudフォトプラン

Photoshop＋Illustratorを使いたい人向けのお得なプラン

公式ではPhotoshopとIllustratorだけのプランというのがないので、PhotoshopとIllustratorを単体で購入することになります。

コンプリートプランでは、Photoshop、Illustrator以外にもたくさんのソフトが入っておりますが、PhotoshopとIllustratorを単体で購入するより安く購入できるのでおすすめです。

ちなみに年間プラン（月々払い）と月々プランの違いは、年間プランだと1年以内に解約をすると解約金が発生するというものです。

Adobe Creative Cloudコンプリートプラン

学生の方はかなりお得

学生の方は、学割プランというのがあり、コンプリートプランがかなりお安く購入できます。

こちらのプランは年間プランしかないですが、かなりお得なので学生の方は今のうちに購入しちゃいましょう。

セールスでお得に購入

不定期ではありますが、家電オンラインストアやAmazonで安く購入できることもあるようです。
詳しい内容は以下の記事がわかりやすいですよ。

【激安価格】で手に入れろ！Photoshopを安価で購入する５個の方法

まとめ

Photoshopの独学は、本から入ると、覚えなければいけないことがたくさんあると思い込んでしまい、かたっぱしから機能や専門用語を覚えようとして挫折するパターンが多いです。

Photoshopのスキルはあくまで手段であり、webデザイナーになりたいと思っている人は、webサイトを作ることが目的であることを忘れないでください。

採用担当は未経験者に対し、どんな機能を使って作ったか、どれくらい時間がかかったかなどの制作過程はほとんど気にしません。極端な話、完成物がwebサイトとしてしっかりデザインされているものであれば、Photoshopでつくったかどうかもどうでもいいのです。

これからPhotoshopを独学で学ぼうと思っている方が、僕のように無駄にお金と時間を費やしてしまわないように楽しく勉強してほしいという思いから、この記事を書かせていただきました。

ご覧いただきありがとうございました。