新卒でweb制作会社のディレクターとして入社し、8ヶ月でwebデザイナーへ転職。
webデザイナー歴3年目
2020年1月からWebデザインの副業を始め、1年で300万円達成。
・Photoshopなどを勉強しなきゃいけないのはなんとなくわかるけど、具体的にどう行動すべきかわからない
・誰も教えてくれる人がいない...（絶望）
安心してください。僕が就活生の頃、同じように思ってました。
頼れる先輩0＆貧乏だった僕は、ネットでWebデザインの独学法を調べまくりました。
それで分かったのは…
- Photoshopの参考書はこれがおすすめ！500ページドン！
- pcのスペックはこれだけあったらいい！20万！
- イケてるポートフォリオつくろうぜ！ギミックゴリゴリ！
ふむふむ、なるほどなるほどね。よし！
…で、結局何すればいいの？
- 参考書全部読めばWebデザイナーになれるとでもいうのか！？
- webデザイナーになるのってどんだけお金かかるんだよ！
- ポートフォリオクオリティ高すぎ...こんなの作れねーよ...
てな感じでやるべきことがわからず、まったく行動に移せませんでした。
結局そのまま、Webデザイナー志望の会社に尽く落とされ、最後の会社で｢Webディレクターとして入ってくれ｣と言われ、半ば諦めで就職することに。
やがてwebデザイナーになりたい！と言う思いがより一層強まり、就職して半年後、2ヶ月の独学を経てWebデザイナーに転職成功しました。
現在はwebデザイナー2年目で、これからデザインだけでなくディレクションやサイト運用にも携わる予定です。僕の経歴についてはこちらをご覧ください。
さて、webディレクター時代の僕が独学を成功させた理由、それはやるべきことが明確だったからです。
もし僕が就活生の時に、webデザイナーになるために本当にやるべきことを学べたら、ディレクターを介さずともwebデザイナーになれたかもしれません。
webデザイナーになりたいけど、行動できずにもやもやしている方。僕がwebディレクター時代に行っていた独学法を全てお伝えします。
僕の独学法では、以下の必要はありません。
これらは必要ない！
・やみくもに参考書を読みあさる必要はない！
・ツールに巨額のお金を費やす必要はない！
・ポートフォリオ制作にこだわる必要はない！
この記事を読めば、あなたがwebデザイナーになるために本当にやるべきことが明確になります。
未経験からwebデザイナーになることは意外と難しくない？
実は、未経験からwebデザイナーになった方は、それほど少なくありません。
2020年8月に独自で実施したLancersのアンケート調査において、会社員webデザイナー21人のうち、半数が会社員のwebデザイナーであり、その42.8%が業界未経験からwebデザイナーになったという結果が出ています。
業界経験者だがデザイン業未経験の人がwebデザイナーになった割合も含めると、57%が未経験者出身です。
募集媒体によるモニター特性の偏りはありますが、会社員webデザイナーの半数以上が未経験者なわけですから、特別な才能がなくてもwebデザイナーになれる可能性は十分にあります。
さて、未経験でも独学でwebデザイナーになれるんだ！とモチベーションがあがったところで、これから具体的にどう勉強していくかを細かく説明していきますね！
独学の目標を決める
webデザイナーにかかわらず、独学で最も大事なのは、目標を立てることです。目標を明確にして、逆算してやるべきことを考えていきましょう。webデザイナーになると言っても、その働き方は様々です。
webデザイナーの働き方
今回僕がメインに話すのは、「正社員のwebデザイナーになること」を目標とした独学の方法です。個人的におすすめしています。理由としては以下の2点です。
おすすめする理由
- 単純に自分がそうだから
- スキルアップ、キャリアアップしやすい
スキルアップ、キャリアアップしやすいについては、プロからアドバイスをもらえる、つまり勉強しながら実績を積めるという意味です。
こんなに素晴らしい環境はないでしょう。
また正社員であれば、裁量権も広いので将来的にアートディレクターなどにもキャリアアップできるでしょう。
一応デメリットとしては、裁量労働制の会社が多いため、残業代が出ない場合が多いということでしょうか。
独学未経験であれば、給料も250〜300万とあまり高くないです。勉強しながら給与がもらえるわけですので、未経験のうちはあまり給与にこだわるべきではないでしょう。
webデザイナーのお給料事情について詳しく知りたい方はこちらをご覧ください。
その他の働き方についてですが、メリット・デメリットを紹介しておきます。
派遣のwebデザイナー
メリット
自分の好きな時間帯で働ける。残業代が出る。（正社員より給与が高くなる場合も...）
デメリット
・即戦力を求めているので、多少の実務経験があっても厳しい。
・スキル以上のことを求められないため、キャリアアップしにくい。
インターンでwebデザイナー
メリット
独学の必要がほとんどなしに働ける。学生の人はおすすめです。
デメリット
社会人には時間的にも金銭的にも難しい。
フリーランスwebデザイナー
メリット
好きな場所で働ける。
デメリット
デザインを評価してくれるプロがいないため、スキルアップが難しい。
「フリーランスwebデザイナー」については、最終的な目標としては良いと思います。
ただ、未経験・実務経験なしの人はおすすめしません。
デメリットをもう少し詳しく説明すると、フリーランスのwebデザイナーは、クライアントと一対一でお仕事をすることが多くなります。つまりあなたが作ったデザインを評価するのは、デザインに関して素人のクライアントである場合が多いです。
したがって、デザインを評価してくれるプロがいないため、スキルアップが難しいとなるわけです。
小耳に挟んだ話ではありますが、実際フリーランスのwebデザイナーで、会社員経験しておけばよかったと言う人もちらほらいます。
ではこれから、独学の目標を、「正社員のwebデザイナーになること」として、具体的にやるべきことを考えていきましょう。
Webデザイナーの役割と実際に制作するものを知る
正社員としてwebデザイナーになるには、「ポートフォリオ」を作り、採用担当にそれを認められる必要があります。
ポートフォリオとは、簡単にいうと「あなたの実績やスキルを証明するもの」をまとめたものです。
実績・スキルとは、webデザイナーとしての制作物です。
それくらい分かっとるわ！と思うでしょう。では質問します。
「webデザイナーとしての制作物」ってなんでしょう？
...webサイト？バナー？
おそらく独学でポートフォリオを作ろうと思ってもなかなか行動できないのは、webデザイナーが実際にどんな案件を任されているのかが曖昧だからではないでしょうか。
逆に言えば、それをしっかり理解できれば、あなたが独学で具体的に作るべきものも、何を意識して作るべきかも明確になるでしょう。
僕が独学で入社できた会社を例に、webデザイナーがどんな仕事をしているのかをみてみましょう。
僕が在籍していた会社の特徴
web制作の流れ
まずはwebサイトがどのように作られるのかを知りましょう。
webサイトを作るのには必ずつくる目的があリます。
商品を認知させたい、ブランドイメージを変えたのでサイトもリニューアルしたい、キャンペーンを実施するので特設ページを作りたいなどなど...
それらの目的や完成イメージをクライアントからヒアリングし、構成案をディレクターが作成します。
建築で言えば鉛筆と定規で書かれたモノクロの設計図みたいなものです。
webデザイナーの役目は、クライアントの要望や構成案に書かれた訴求をどのように表現するかを考え、デザインとしてアウトプットすることです。
ヒアリングシート・構成案に沿ったデザインをするということですね。
その後、デザインをコーダーがコーディングして、公開・運用するといった流れです。
僕がいたような分業がされていない会社では、webデザイナーがコーディングも行う場合があります。
このような流れで、webデザイナーが実際に作るwebサイトの種類には以下のようなものがあります。
webデザイナーが実際に作るwebサイトの種類
webデザイナーの仕事は会社によって様々なので、一概にこれとはいえません。
クライアントがいない会社（自社開発）もありますし、ECサイトやポータルサイトを制作する会社もあります。
どのような会社を選べばいいのかは、後半のいざ、就職活動へで述べていますので、よろしければご覧ください。
つまり、webデザイナーのお仕事をまとめると、
webデザイナーのお仕事
- クライアントの要望やサイト制作の目的を達成するための構成案を元に
- コーポレートサイト、採用サイト、サービスページ、キャンペーンページ、LP、バナーを作る
ここまで理解できれば、あなたがポートフォリオの実績・スキルとして作るべきもの、何を意識して作るべきかが見えてきたのではないでしょうか。
独学で制作するものを具体的に決める
独学では、架空のお店・会社のWebサイトを制作しましょう。
実際のwebデザイナーのお仕事では、前提にクライアントの依頼があります。
当然のことながら、webデザイナーでないあなたに依頼してくるクライアントはいないので、スキルを証明するために架空サイトを制作するのです。
では、具体的にどんな架空サイトを制作するべきか、以下の2点から説明します。
- サイトの種類
- 制作範囲・制作数
サイトの種類
これは、webデザイナーの仕事でも説明いたしましたので、ご理解いただけると思います。
- コーポレートサイト
- 採用サイト
- サービスページ
- キャンペーンページ
- LP（ランディングページ）
- バナー
ただし、上記のサイトを全部作る必要ございません。
独学で最低限作るべき架空サイトは以下の2つくらいでしょう。
制作する架空サイトの種類
- コーポレートサイト
- LP（ランディングページ）
理由としては、実務で一番制作頻度が多い、題材として作りやすいからです。
題材として作りやすい、というのは「②Webデザイナーの役割と実際に制作するものを知る」でも話した通り、webデザイナーは、クライアントの要望や、ディレクターが作成した構成案を元にデザインを制作します。
独学で架空サイトを制作するときは、このクライアントの要望、ディレクターが作成した構成案を自分で準備する必要があります。
上記で選んだコーポレートサイト、LPはこの準備がしやすいということでです。
より詳しい内容は独学で架空サイトを制作するで説明させていただきます。
制作範囲・制作数
制作範囲・制作数
- 制作範囲：PC・スマホのTOPページデザインだけ
- 制作数：気合の入ったやつを3つ
webサイトは数ページのものから数千ページに及ぶものまでありますが、架空として制作するのはTOPページだけでいいです。
また、現在はスマホ版に対応しているサイトがほとんどなので、スマホ用のデザインも作りましょう。
どのくらいの数制作すればいいのかについては、たくさん制作することにこしたことはありません。
時間がない人は、気合の入ったやつを3つ作れば十分でしょう。独学で僕が作ったのは2つだけです。
では、次の章で具体的にどのように制作するのかを紹介いたします。
独学で架空サイトを制作する
さあ、ようやくですが、実際に架空サイトを制作していきましょう。
文章だけではイメージしにくいので、僕が未経験時代に作った架空サイトを見ながら、どのように制作していくのかを解説していきます。
見栄えは...今見ると酷いですね。
本当は黒歴史にしたかったくらいですが、逆に言えば、このレベルでもいいんです。
クライアントを決める
前章で、独学で架空サイトを制作するときは、クライアントの要望、ディレクターが作成した構成案を自分で準備する必要がある、と話しました。
僕の架空サイトでは、以下のようにクライアントを設定しました。
クライアント設定
ここでまた疑問が出ると思います。
実際のクライアントの要望なんて、未経験の方にとっては全く想像できないと思います。
しかし、クライアントの要望の設定はクラウドソーシングを使うことで簡単にヒントを探すことができます。
クラウドソーシングの意味を知っている方もいると思いますが、簡単に言うと、ネット上でお仕事を依頼したり受託できるサービスです。
これらのサービスにはwebサイト制作依頼もたくさんあります。
クラウドソーシングは日本最大級の「クラウドワークス」
ランサーズ | 日本最大級のクラウドソーシング仕事依頼サイト
ランサーズ | 日本最大級のクラウドソーシング仕事依頼サイト
この2つは、フリーランスwebデザイナーや独学でwebデザイナーになった人は必ずといっていいほど登録しているサイトです。
CrowdWorksは、日本最大級のクラウドソーシングを唱っていますが、Webデザイン関係の案件数に関しては、ランサーズとさほど変わりません。
どちらか一方しか登録できないわけではないので、迷わずどっちも登録しましょう。
ココナラ - みんなの得意を売り買い スキルマーケット
SKIMA（スキマ） | 公式
この2つのサービスに関しては、案件は少ないものの、Webデザインの依頼もちらほらありますので、登録しておくとよいでしょう。
つまり、クラウドソーシングから実際に存在するwebデザインの依頼を探し、そのクライアントの要望をもとにデザインを制作するというわけです。
依頼に応募するつもりでデザインを制作する感じになります。
ここではランサーズを例に見てみましょう。
TOPページから「仕事を受けたい」→「Web制作・Webデザイン」まで進むと、具体的な案件の一覧が確認できます。
どれか一つの詳細を見てみると...
- 依頼側の会社やサービスの概要・特徴
- 参考URL
- 希望する色
などなど、制作会社ではディレクターがヒアリングしてくる内容をネット上で細かく閲覧することができます。
この情報を架空サイトのベースにしましょう。
そのまま使うのはもちろんダメなので、依頼者が特定されるような情報（会社名、サービス名など）を架空のものに変えましょう。
案件を選ぶポイントとしては、プロジェクトではなくコンペの案件で絞り込むことです。
プロジェクトでの募集は、応募者の実績やスキルのみを判断するので、案件の具体的な内容や依頼が書かれていないことが多いです。
一方、コンペでの募集は、応募者の提出したデザインの良し悪しで判断するので、事前に具体的な依頼内容や構成案、素材まで提供してくれる場合があるからです。
要望が細かいほど、制作するものが明確になりますからね。
コーポレートサイト、LPは題材が作りやすいと前章で話しましたが、その理由は、クラウドソーシング上に多くの案件があるからという意味だったのです。
さて、架空サイトのクライアントが明確になりました。
次は、構成案を考えましょう。（まだデザインせんのかい！）
構成案を作る
独学で架空サイトを制作するときは、クライアントの要望、ディレクターが作成した構成案を自分で準備する必要があると話しましたね。
構成案とは何でしょう？
構成案とは webページのどこに何を配置するかが書かれた設計図。web制作現場ではワイヤーフレームということが多い。
構成案を作るためには、ある程度webサイト制作のセオリーを知っておく必要があり、独学の方はここがわからずに何を作ればいいか立ち止まってしまう人が多いと思います。
独学で、構成案を0から考えるのはかなり難しいです。
しかし、心配は入りません。
webデザイナーが、しかも独学の段階で構成案をがっつり評価されることはありません。
ある程度セオリーに沿った形ができていれば大丈夫です。
ある程度セオリーに沿った構成案を作るのは簡単です。以下の手順を参考にしましょう。
構成案作成の流れ
- クライアントの競合となるサイトをgoogleで調べる
- 上位表示10社のサイトを見る
- 共通しているレイアウト、コンテンツ、原稿を真似する
上位表示されているサイトの構成を真似しちゃいましょう。
一概には言えませんが、上位表示されている＝サイトが優れているということなので、上記を手順で制作するだけで、独学でも的外れな構成を作ることはないでしょう。
競合サイトの調べ方は、「業界名 地域」や、「業界名 強みのサービス」など、クライアントの強みやターゲットに沿ったキーワードで検索してみるとよいでしょう。
これを実務でやると大問題ですが、架空サイトなので問題ないです。大事なのはある程度セオリーに沿っているということ。
もし余裕があれば、競合を真似るだけでなくクライアントの要望を叶えるには、どのようなコンテンツがあればいいか、どういう構成にすればいいだろうかを考えてみてください。
僕の架空サイトの構成案はポートフォリオには載せないので、もし独学で制作するとなると、こういった感じになるでしょう。
誰かに見せるものでもないので、構成案を作成する際のコツは不要かと思いますが、注意点としては、会社名、ロゴ、住所など、クライアントの個人情報がちゃんと書き換えられているかだけはチェックしておきましょう。
紙のポートフォリオで面接時に見せるだけでなら問題ないですが、サーバーにアップする場合は要注意です。
ツールを決める
ここでやっとwebデザインで必要な道具を考えます。
「webデザイナー 独学」で調べたら腐る程出てくると思うので、正直ここは省略してもいいかと思ったのですが、一応僕の個人的な意見として、使用すべきツールをお伝えします。
デザインソフト
僕がおすすめするのは、AdobeのPhotoshop一択。
Illustratorは使っても使わなくてもOKです。XDは不要、sketch、affinity、figmaは論外です。
理由については、詳しく述べた記事を作りましたので、興味のある方はご覧ください。
とまあ言ってはいますが、正直ツールは何でもいいです。webデザイナーの仕事は、根拠のあるデザインを作ることです。
どのツールを使うかなんて悩む時間は捨てて、アウトプットの時間に割きましょう。
PCスペック
webデザイナーに必要なPCのスペックは、以下の2点だけ気をつければよいでしょう。
- メモリ : 16GB以上
- ハードディスク : 500GB以上
- CPU : インテル Core i5以上
- OS：Windows or macともに最新
Photoshopくらいなら8GBでも大丈夫！という記事も見かけますが、デザインソフトはバージョンアップとともに機能が豊富になり、その分重くなってしまう傾向にあります。
僕はmacbookの32GBを使ってますが、それでもデザインデータによってはPhotoshopがカクカクだったりするので、最低でも16GBはほしいところです。
画面サイズに関しては、大きければ大きいほどいろんなブラウザサイズでデザインチェックができるというだけです。
お金に余裕がある人かつ選び方がわからない人は、迷わずMacbookProを買ってください。ここも悩む時間は必要ないです。
僕は上記の条件だけを満たしている、中古2万で買ったダイナブックでがんばりました。
どれくらい費用をかけるべき？とか、MacとWindowsどっちがいいの？とかなどについては、別記事でまとめてますので、よろしければご覧ください。
制作する
作るものとツールが決まったので、ここからデザインに入ります。
独学でWebデザインを制作する際の手順は以下の通りです。
デザイン制作の流れ
- イメージに近いサイトを探す
- 設定を意識しながら制作する
- 自分に足りないスキルを独学で身につける
一つひとつ見ていきましょう。
イメージに近いサイトを探す
実務では、全くの0からデザインを作れということはありません。
クライアントがこんなサイトみたいにしてほしいといって具体的なサイトをURLで指定してきたり、ディレクターがクライアントの意図をくみとって参考サイトを選んでくれることもあります。
クリエイター魂として「俺は他のデザインを参考にするのは許せない！」
と思うことは素晴らしいですが、独学のうちは、素直に既存のデザインを参考にしましょう。
架空サイトでは、「⒈クライアントを決める」で決めたクライアントからの要望を参考に、イメージに近いサイトを探しましょう。
例えば、僕の架空サイトでのクライアントの要望は、
- 地域医療に力を入れているので親しみやすさを出したい
- 老若男女どの年代の方にも雰囲気を出したい
なので、それに近いサイトを探せばいいということです。
では具体的どのように探せばいいのでしょうか。方法としては2点です。
クライアントの競合サイトを検索して探す
手っ取り早いのは、競合サイトをみることです。
同じようなサービスの会社であれば、作ってほしいサイトの雰囲気も似通ってくるものです。
競合サイトの調べ方は構成案を作るときと同じで問題ないです。
ギャラリーサイトから探す
イケてるwebサイトをまとめたギャラリーサイトから探してみましょう。
業界別、カラー別などのカテゴリで調べられるので、イメージに近いカテゴリから探すのもよいでしょう。
20のギャラリーサイト比較して、おすすめのギャラリーサイトを徹底分析した記事を別記事に書きましたのでご覧ください。
また、とにかく20のギャラリーサイトの比較表だけざっと見たいよ！という方は、noteに比較表のスプレットシートを載せているのでブックマークしておきましょう。
参考サイトは、上記のギャラリーサイトからイメージに近いサイトを3〜5サイトほど選べば十分です。
設定を意識しながら制作する
イメージに近いサイトが決まったら、手を動かしましょう。
デザインを制作する際に最も重要なのは、「なぜそのようにデザインしたのか」を考えることです。
何度もいいますが、webデザイナーの役割は、クライアントの要望や構成案に書かれた訴求をどのように表現するかを考え、デザインとしてアウトプットすること。これを考えずにデザインをする人は、webデザイナーに値する人ではありません。
あなたはデザインを制作する前に、クライアントの要望と構成案を手元に持っています。
これらを何度も見直しながら、「この要望を満たすにはどんなデザインをすればいいだろう」を考え、で選んだイメージに近いサイトのいいなと思ったところをピックアップして制作していきましょう。
もし、煮詰まってしまって手が動かない、見栄えをもう少し良くしたいといったテクニック面で悩んだときは、以下の記事でデザインカンプの作り方とコツをまとめましたので、ご覧ください。
フィードバックをもらう
独学で架空サイトを作った後、もし可能であれば自分のデザインが客観的にどう評価されるかを見てもらうとよいでしょう。
安心してください。そんな方のために、ぼっちでもフィードバックがもらえる方法を3つ紹介します。
- feeput
- ワンコインレビュー
- SNS
feeput
URL：feeput
無料で不特定多数の方からデザインのフィードバックがもらえるオンラインプラットフォームです。
プロから指摘がもらえるわけではないですが、第3者からの貴重な意見が聞けるすばらしいサービスです。
また、プラットフォーム上の他の方のデザインを見て、自分がどのくらいのレベルかを認識するのにもいいかもしれませんね。
ワンコインレビュー
URL：ワンコインレビュー
こちらは有料ですが、プロのデザイナーから安価でレビューをもらえるサービスです。
「15分500円」でという意味でワンコインレビューでしたが、大好評だったこともあり2020年6月2日以降から、2回目以降「15分1,000円」になってしまいました。
ちょっと高いなーと思うかもしれませんが、スクールに通ったり無駄な参考書を買うよりよっぽどタメになるので、ぜひ一度ためしてみてください。
SNS
ステップ❺で、わからないことはSNSで聞こうといったように、デザインのフィードバックもTwitterで聞いちゃいましょう。
僕もwebデザイナーになってポートフォリオをリデザインした際に、多くのフィードバックをいただけました。
ポートフォリオに実績(っぽいもの)を追加しました。 https://t.co/v2NWAFV4i9
— ゆーし@これだけデザイン (@OnitsukaYushi) October 22, 2019
1 on 1デザイン添削
当ブログこれだけデザインでは、著者ゆーしが直接フィードバックをするサービスを行ってます。
スクールと比べて独学が難しいのは、フィードバックがもらえる環境がないことです。
自分の制作物に自信がない方、スクールのように時間と費用をかけられない方、ぜひご活用ください。
自分に足りないスキルを独学で身につける
手を動かしている内に、わからないことがたくさん出てくると思います。
ただ、ここまで読んだ方は、具体的に何がわからないのか、どんな知識が必要なのかが明確ではないでしょうか？
基礎知識が足りない！
書籍で体系的に学びましょう。私が実際に買ってためになった書籍を2冊と、参考書を自分のスキルとしてしっかりモノにする上手な活用法を別途記事にしましたのでみてみてください。
ツールの使い方がわからない！
架空サイトのデザインは、Photoshopをメインに制作していくと思いますが、独学でPhotoshopの使い方に慣れるには、正しい手順で学ばないと、挫折してしまう可能性が高いです。
でも大丈夫です。以下の記事で正しい独学の手順を詳しく解説していますので、これを読めば参考書を買う必要も、有料スクールに通う必要もなく独学が可能です。
画像やアイコン、イラスト素材が見つからない！
画像やアイコン素材は、無料のものでもよいものがたくさんあります。
僕が普段使っている無料素材集を紹介しておきます。
①Unsplash: Beautiful Free Images & Pictures
Beautiful Free Images & Pictures
無料とは思えないほどおしゃれな画像がたくさんある海外サイト。
日本人の画像はほとんどないので、風景として使うにはいいかもしれません。
②写真素材なら「写真AC」無料（フリー）ダウンロードOK
画像のクオリティとしては低いですが、日本人に馴染みのある画像素材が多いので、最終手段として利用するといいでしょう。
③アイコン素材
アイコン素材については、以下に優秀なフリーアイコン素材集をまとめてますのでご覧ください。
またこの記事とは別に、アイコンの探し方についての記事を書いてますので、独学中にアイコンの制作に悩んだときは覗いてみてください。
④イラスト素材
イラスト素材についても、以下に無料とは思えないほどクオリティの高いフリーイラスト素材集をまとめてますのでご覧ください。
引き出しが足りない！
未経験なので引き出しが足りないのは当たり前です。
クライアントを想定して、構成案に沿ってデザインをしているという意識さえあれば、採用者はwebデザイナーとしてあなたを評価してくれるでしょう。
それでも引き出しを増やしたいという方、独学でも常に自分をアップデートできる方法を次の項目でお伝えします。
日々スキルアップを心がける
独学で架空サイトを作り続けていくと、引き出しのない自分に嫌気がさし、自分はwebデザイナーに向いてないのではないだろうかと思う日もあるでしょう。
しかし、誰でも最初はそうです。
未経験独学で学んだ人に対し、採用者はクオリティは求めてません。あなたのその行動と意欲に可能性を感じてくれることでしょう。
とはいってもやはりクオリティをあげたいという方へ。
独学でクオリティを上げるために必要なのは、「インプットとアウトプットの量」
これにつきます。
アウトプットは架空サイトの制作でできていると思うので、現役デザイナーの僕が普段行っているデザインスキルのインプットを全てお伝えします。
スキマ時間でも全然実践できるので、意欲のある方はやってみてください。
現役デザイナーの僕が普段行っているインプット
- ギャラリーサイトでおしゃれなサイトをインプットする
- ニュースリーダーでデザインの最新情報をインプットする
- SNSで勉強方法をインプットする
ギャラリーサイトでおしゃれなサイトをインプットする
よいデザインをたくさんみるだけでもクオリティは上がります。
「イメージに近いサイトを探す」でも紹介しましたので、それに加えてもう一つ僕が普段よくみるギャラリーサイトを紹介します。
bookma!
その他にも以下のようなギャラリーサイトがあります。
しかし、これらのギャラリーサイトは、更新頻度が低い、海外サイトが多いと言う点で月１程度でしかチェックしてません。
海外サイトは、優れた開発技術でリッチさを出しているものが多く、デザインもまた、規則から崩しに崩しまくった斬新でかつ洗練されたものが多いです。
つまり未経験者からすると、レベルが高すぎて参考にならないということです。
将来的には海外サイトのようなデザインの最先端をいきたい！と目標を大きく立てることは大変良いことですが、まずは規則に沿った綺麗でみやすいデザインをたくさんインプットして、目をこやしましょう。
また、よいサイトをただ毎日ぼーっと見るだけではインプットしたことにはなりません。
せっかく良いデザインをみたのに、すぐ忘れてしまっては意味ないですね。
そのサイトを見てどう感じたのか、何がよいと思ったのかを言語化して、ブックマークのタイトルにして保存しておきましょう。
あのサイトを参考にしたい！というときに、いつでも呼び出せるので、クライアントのイメージに近いサイトを探すのに役に立ちます。
ニュースリーダーでデザインの最新情報をインプットする
ギャラリーサイトを見るだげでなく、デザインの流行や最新情報を発信しているサイトを見ることも、デザインのクオリティを上げるために必要です。
ニュースリーダーにサイトを登録して、webデザインに関する最新の情報をインプットしましょう。
Welcome to Feedly
スマホとも連携できるので通勤時間にさくっとチェックできますよ。
では、僕が実際にニュースリーダーに登録しているサイトの中で、webデザイナーの独学に役立ちそうな記事を紹介しますね。
①photoshopvip
Photoshopの機能や使い方に関する記事や、画像やフォントの無料素材を紹介してくれます。
②ウェブクリエイターボックス
デザインツールの使い方や無料素材、デザインに関する書籍の紹介をしてくれます。
③コリス
コーディングに関する記事が多いですが、新しいデザインツールや有料素材のセールの告知をしてくれます。
こちらは知識レベルでいいので、ギャラリーサイトのようにガッチリ全部ブックマークする必要はありません。興味を持った記事や役に立ちそうな記事だけ、ブックマークしましょう。
また、webデザイナーの面接では、「どうやって情報収集してますか？」と聞かれることもあるので、普段見ているサイトや記事をスパッと答えられると、情報感度が高い！と評価してもらえます。
SNSで勉強方法をインプットする
最近の若者は、GoogleよりインスタやTwitterで検索することが多いみたいですね。（僕もまだ若者の部類ですが...）
それに伴ってSNSマーケティングが注目されるようになり、フォロワーを増やすために有益情報をSNSで発信する人たちが増えています。
web界隈も同様で、中には実績が曖昧な怪しい人たちもいますが、有名なデザイン会社の代表やデザイナーさんの方々も多くいらっしゃいます。
できればそのような方々をフォローして、彼らが発信、拡散しているものを見て勉強しましょう。
ちなみに、僕のTwitterアカウントでは、上記のような有名なデザイナーの方々や、webデザイナーを目指している方を多くフォローしてます。特にこの人はフォローするといいですよ、というのを以下にまとめたので、興味のある人をフォローしましょう！
ササキ独学デザイン上達の方法
WEBデザインの勉強方法が分からない😭
方向けに
会社の後輩に行っていたトレーニングを元に
「WEBデザイン勉強法６ステップ」を執筆・コーディングとデザインの勉強順
・デザインの勉強方法
・模写のタイミングなどの疑問に応えるステップですhttps://t.co/USYxwICduY#note #cakesコンテスト2020
— ササキ🐱独学デザイン上達の方法 (@Zenigame89) March 23, 2020
webデザイナーとして成長するためのマインドや、初学者むけの情報発信をしてくださいます。
ハラヒロシ / ウルトラエル デザイナー
ここ1ヶ月ぐらい、日常のデザイン業務で思ったこと、実践してること、Tipsなど意識的に言語化してツイートしてみました。また何かあれば投稿しますが、ひとまずここまでのツイートをモーメントにまとめました。
⚡️「デザインの思考＆Tips」（@harahiroshiさんによる: https://t.co/m1nmizPAJd）
— ハラヒロシ / ウルトラエル デザイナー (@harahiroshi) February 19, 2020
実践的なデザイン手法や思考、ツールの応用テクニックなどを発信してくださいます。個人的に神だと思ってます。
僕のアカウントのリスト「Webデザインお役立ち」からもチェックできるので、一気にフォローしたい方は僕のアカウントからどうぞ！
また、これだけデザインのInstagramアカウントでは、ブログとは別にデザインに関するお役立ち情報を発信しています。
よろしければフォローしてくださいね！
https://www.instagram.com/p/CD8kiianLk2/?utm_source=ig_web_copy_link
独学でポートフォリオを作る
満足のいく架空サイトが作れたら、それらをまとめたポートフォリオを作りましょう。
みなさん勘違いしているかもしれませんが、独学の方にとって、ポートフォリオは架空サイトを並べる箱。
デザインにこだわる必要は全くないです。
ポートフォリオを作り込むことは悪いことではありません。
しかし、そこに時間を使うよりかはその中身、実績（独学の方にとっては架空サイト）に力を入れるべきです。
ポートフォリオは紙版、webサイト版どちらを作るべき？
独学の場合は、紙のポートフォリオだけでも問題ありません。
採用者が評価するのは、あなたが作った架空サイトですから、しっかりとした架空サイトがあれば紙でもwebでもどちらでもいいです。
紙版ポートフォリオの作り方
では実際にどのように作るのかを見てみましょう。
本当のことをいうと、ポートフォリオは0から作る必要もないです。ここに時間をかける必要はないので、テンプレートを使っちゃいましょう。
「Webデザイン ポートフォリオ テンプレート」で検索するとたくさん出てきますよ。
僕はねこぽんさんのポートフォリオを参考にしました。
https://webdesigner-go.com/job/portfolio/
ポートフォリオを作る際のポイントは、あなたの作った架空サイトにたいし「なぜそのようにデザインしたのか」を解説することです。
なぜだか、分かりますね？それがwebデザイナーの役割だからです。
あなたの架空サイトは、クライアントの要望、構成案がしっかり準備されており、ちゃんと目的を持ってデザインされているはずです。
ちなみに僕が独学で作った紙版のポートフォリオは、以下PDFにまとめましたので見てみてください。
onitsukaが未経験時代に制作した紙版ポートフォリオ
webデザイナーはコーディングもできなきゃダメなんじゃないの？
僕の意見はできなくてもいいです。
その理由と、根拠に関しては以下の記事にまとめていますので、興味のある方はどうぞ！
上記の記事でも述べてますが、コーディングができないとダメ、と言うのはキャリアアップ が望めない、食いっぱぐれると言う意味だと思うので、現在webデザイナーの方に向けられたものです。
もしあなたが、webデザイナーとして2年後3年後、もっと年収をあげたい、キャリアアップしたいと考えるなら、コーディング をしっかり勉強すれば良いでしょう。独学の段階では、コーディングスキルは不要です。
ただ、独学でコーディングができるところまでになると、webデザイナーとして採用される確率はかなり高くなります。
「webデザイナーとして採用される確率を上げたい！」と思っている方は、以下の記事で学習すべきプログランミング言語と、その学習法を詳しく解説していますので、見てみてください。
いざ、就職活動へ
さあ、ポートフォリオができたら、就職活動を始めましょう。
おすすめの求人媒体や転職エージェント
オススメの転職サイトについては以下にまとめてます。
僕が実際に利用して転職できた求人媒体や、未経験でもwebデザイナーの転職で成功するポイントもまとめておりますので、是非ご覧ください。
会社選びのポイント
未経験でwebデザイナーに就職するための会社選びのポイントとして、以下の視点に気をつけましょう。
- webデザイナーとして成長できそうか
- キャリアアップができそうか
上記の2点を見分ける方法としては以下が挙げられます。
ポイントの見分け方
- 受諾制作（クライアントの依頼を受けてウェブサイトを制作）であること
- クライアントが小規模であること
- 分業がされていないこと
理由は以下の通りです。
- 受託制作会社には、デザインスキルの高い会社が多いので、スキルアップが望める
- クライアントの規模が小さいと、制作物自体の規模も小さいので、メインデザインをまるっと任せてもらせる
- 分業されていない会社では、デザイン、コーディングの両方を任せてもらえる
クライアントの規模感を調べる方法は、その会社のコーポレートサイトの実績を見ればわかるでしょう。
求人媒体では上記の項目に注意して、探してみてください。
独学は無理そうだと感じたあなた
もし今あなたが、独学はやっぱり難しそうだ、と感じているのであれば、他の方法として以下が挙げられます。
・スクールに通う
・ディレクターになる
スクールに通う
実は僕も、大学生の頃オンラインスクールに入っていました。
ですが入会金が安いのもあって、完全オンライン、個別のやりとりもメールのみというもので、ほとんど役に立ちませんでした。
そんなこともあり、あまりスクールをオススメする気には慣れないのですが、今はいろんな種類のスクールがありますし、当時僕が失敗したのはwebデザイナー としてちゃんと就職できるスクールかどうかを判断できなかったというのが大きいと思ってます。
webデザイナーとなった今では、どんなカリキュラムで、どのような教育体制が整っていればWebデザインのスキルが身につくか、だいたい見当がつきます。
僕みたいにスクール選びに失敗して時間とお金を無駄にする人がこれ以上増えないよう、本当にWebデザイナーとして成長できるスクールを選んでみました。
スクールを検討しているかたはぜひ一読してください。
webディレクターになる
webディレクターからwebデザイナーになる手法です。
この手法は業界未経験・独学でwebデザイナーになるよりも難しくないと思います。
webディレクター経由でwebデザイナーになることが難しくないと考えるのは以下の理由からです。
webディレクターは未経験で採用してもらえやすい
webデザイナーは技術職ですので、クリエイター系の専門学校や美大出身の方、もしくは事業レベルで制実績のある人でないと採用が難しいです。
その点、webディレクターは、実務経験を求められることはあまりなく、未経験でも参入しやすい職種になります。
業界経験者という強み
同じ業界での動き方を理解しているのは、例え別の職種であってもうまく順応してくれるだろうと思わせることができますし、ディレクターのことを理解してくれるデザイナーとして優遇されます。
また、web制作に関する知識がすでにあるので、独学でポートフォリオを作るのがかなり簡単になります。
ということで、webディレクターからwebデザイナーになるというのはいいことづくしなんですが、webディレクターの仕事はかなり大変ですし、そもそもwebデザイナーになりたいと思っている人は、webディレクターには絶対になりたくないと思っているでしょう笑
であれば、頑張って独学あるのみです。
まとめ
独学でwebデザイナーになるための完全ロードマップ、いかがでしたでしょうか。
とても長い記事でしたが読んでいただきありがとうございます。
最後に、上記でお伝えした中で特に大事なポイントを簡単にまとめてみました。
独学でwebデザイナーになるための特に大事なポイント
以上です。もしこれを読んでもわからないことがあればいつでも質問ください。
ご覧いただきありがとうございました！
