こんにちは！ デザイナーのおまめ（@omame_creator）です。
LIGに実務未経験で採用していただいてから約1年。大好きなデザインを仕事にでき、毎日充実した日々を送っています。
最近、美大も出てないのにどうやってデザイナーになったの？ と聞かれることが多くなってきました。せっかくなので、私が独学でWebデザイナーになった方法と、その勉強した内容をまとめておこうと筆を執りました。
私は普通の大学の経営学部を出て、アパレルメーカーに新卒入社。営業職を経験したのち、急にフリーランスのカメラマンに転向。その後26歳でWebデザイナーに転職しました。パソコンも得意な方ではなく、自分で言うのも悲しいですが、センスがあったわけではないと思います。
だから今、Webデザイナーを目指している方、努力さえすればきっとなれます。私の経験がみなさんのお役に少しでも立てますように。
独学でWebデザイナーを目指すために必要なもの
パソコン（必須） 料金：約10万円〜
私が仕事用に初めて買ったPCはMacBook Airでした。大学生のときにITベンチャーのインターン面接に行った際、大学の購買で買っためっちゃ分厚いVAIOのEシリーズを持っていきました。しかし、メモリが4GBだったからか、「それじゃスペック不足でちょっと雇えない」と言われ、その場でMacをポチりました。動画編集や3Dゲームを作る、解像度の高い写真をそのまま加工する以外は、メモリ8GBあれば最低限大丈夫だと思います。
MacとWindowsで言うと、正直、今のパソコンではどちらでもいいと思っています。Windowsでもの方がスペックが良いものが多いです。将来ゲーム開発に関わりたいという人がいたら、ゲーム開発向きでもあり、プレイできるゲームの種類も豊富なWindowsのほうが良いかもしれません。
でも私はMacの見た目と、中に入っている豊富なフォント、Retinaディスプレイ（綺麗な発色のディスプレイ）のデスクトップのデザインから、Macのほうが良い（使っててテンション上がる）と思ってしまいます。もう一つ使っている理由があるとすれば、使用しているスマホがiPhoneで、iPadも持っているので、データがAirDropで全部送れるところ(互換性)がとても便利というところでしょうか。
将来の就職を見据えるなら、デザイン会社は基本Macを使っている印象なので、慣れておいた方がいいかなと思いました。
Adobeソフト（必須） 料金：約6,000円／月
デザイン制作ツールです。Adobe以外にもさまざまな制作ツールがあるのですが、Adobeを使っている会社は多いです。こだわりがなくどの会社に行っても通じるスキルを得たいのであればPhotoshop、Illustratorは最低限入れた方が良いと思います。この2つを入れるなら、単体プランにするよりは、Adobeのコンプリートプランをサブスクリプション契約することをおすすめします。動画編集ソフトやAdobe XDなどをはじめとした、すべてのAdobeソフトが使えるようになった方がよいかなと思っています。
高機能テキストエディタ（必須） 料金：無料〜
コーディング用に最適化されたエディタです。コーディングは極端な話デフォルトにあるメモ帳でもできます。しかし、エラーの指摘やプロパティごとに色を変えてくれるなど、機能が充実しているエディタを使うととても便利です。さまざまなエディタがあり、それぞれ独自の特徴があります。私は初めから複雑な処理を行えるエディタは必要ないと思い、軽くて自分が書いててテンションが上がりそうなエディタを探しました。結局、SublimeTextというエディタを選びました。いろいろなところでAdobeのDreamweaverがおすすめされていましたが、挙動が遅いうえにほとんどの機能を使わないため、私は使いませんでした。
はじめは挙動が軽いBracketsや、ゴリゴリプログラミングができるAtomやVisual Studio Codeをおすすめします。
フォント（必須） 料金：無料〜
フォントが少ないとデザインの幅が狭くなってしまうので、まずは汎用性高いフォントをGoogle FontsとAdobeフォントから入れました。Google FontsはWebフォントなのでサイト制作にとても便利です。Adobeフォントにも日本語フォントが最近たくさん登場しています。本格的にグラフィックデザインで日本語フォントを使いたければ、年間約5万円くらいがかかりますが、モリサワパスポートを契約することもおすすめです。
マウス（任意）
LIGに入る前はトラックパッドしか使っていませんでした。なので、人によってはいらないと思います。LIG入社後に会社で支給していただき使い始めてみたところ作業が爆速になったので、私は手放せません。かっこいいので私はMacのマジックマウスを使っていますが、なんでもいいと思います。
モニター（任意）
ブラウザで参考探して、それをメモにまとめて、Photoshopでデザインして……と、デザイナーがやるべき作業は山積み。1画面では窮屈だな〜と思い始めたらモニターの買いどきです。ただ、モニター画面でデザインするなら、ある程度色域がちゃんとしたデザインモニターの方が良いと思います。
私は最初5,000円くらいのゲーミングモニターを使っていましたが、黒がすべて潰れて表示されてしまいました。なのでデザインや写真編集をモニターですることができず、ブラウザを開いたり、テキストエディタでコーディングしたりするときに使用していました。
いまは下記デザイナーズモニターを使っています。WQHD解像度にして作業領域を広げ、モニターだけでデザインすることが多いです。
最低限習得したいWebデザインのスキル
先ほどのセクションで準備は整ったはずです。さっそく勉強してみましょう。——といっても、何から始めるべきか迷いますよね。
Webデザイナーに必要なスキルは主に2つです。今回は必須のスキルのみ記載します。私は大学生のとき、これらを約1ヶ月でだいたい習得することができました。
デザインスキル
主にAdobeのPhotoshop / Illustratorを使ってデザイン制作をします。さまざまな用途がありますが、Photoshopは主に高度な写真加工に使用し、Illustratorは写真以外のグラフィックを作るときに使用します。最近ではXDを使ってデザインすることも増えてきましたが、まずは前者の2つを使いこなすことを最初の目標にした方がよいでしょう。汎用性が高く、いろいろなものが作れるようになります。
とはいえ、ツールを使いこなせるようになっても、それはあくまで鉛筆が持てるようになったようなもの。良いデザインをたくさん見て、なぜこのデザインが素敵なのか理解することが大切です。そのためにはデザインの基礎をある程度知る必要があります。
デザインはセンスではなく、引き出しの数だと思っています。たくさんインプットして、たくさんアウトプットすることで、良いデザインが作れるようになります。
コーディングスキル
Webサイトのデザインをしたら、PC用の言語を使ってブラウザ上に反映します。たくさんの言語がありますが、まずはHTMLとCSSの2つを学べばOKです。
HTMLはマークアップに使用し、CSSはそれを装飾するために用います。
その後サイトを動的に動かしたくなった場合、よく使うJavaScriptの表現を学べばOKだと思っています。
独学でWebデザイナーになるための勉強法7ステップ
ここではWebデザインを独学で学べる私の知る限りの最短の勉強法を具体的にご紹介しましょう。
ステップごとに必要な知識が違うので、私が実際に学んできた順番を7つのステップに分けて紹介します。このステップを私は仕事をしながらだらだら3ヶ月くらいで完走しました。
Step1. 作りたいものを決める
これは性格によって変わるかもしれませんが、私は初めから体系的に学習することが苦手です。基礎よりもまず自分の作りたいものを決め、それに必要な知識、ツールの使い方を学んでいった方が何よりも楽しいと思います。なのでツールの使い方を学べる本や、架空のWebサイトを制作することをゴールにしている本などは一切読みませんでした。
私はカメラマンとしてのポートフォリオサイトが欲しかったため、参考サイトを探してPinterestで保存しまくり、おおよそ作りたいものの方向性を決め、手書きでラフを書きました。
便利なもの
- 参考画像を探して、保存して、共有もできる、アイデア探しツール。
ある程度ボードに保存したら関連画像を表示してくれるから、ほかのアイデアも集めやすい。
- I/O 3000
- Webデザインギャラリーサイト。テーマごとに検索できるから参考サイトが探しやすい。ギャラリーサイトはほかにもたくさんあるので、作りたいものによって変えてもよいかも
- GoFullPage – Full Page Screen Capture
- Google Chromeの拡張機能。io3000で見つけた良い参考サイトを、Pinterestに保存するため、全画面キャプチャを撮るのに使う。便利。
Step2. 好きなサイトがなんで素敵なのか分析する
方向性が決まり、好きなサイトがいっぱい集まったら、次はなぜそのサイトが良いと思ったのかを書き出します。配色がかっこいいとか、レイアウトが斬新とか、コンテンツの企画がユニークとか。
その後、抽象的な素敵ポイントを、デザインの知識によって因数分解します。
「メインカラーに対して反対色のアクセントカラーが取り入れられているからcool」や、「写真と文字の大きさにかなりメリハリがついているからインパクトある」など具体的に褒められるようになりましょう。それらの要素を、自分のデザインするクリエイティブにも落とし込めるようにします。
デザインの基礎知識が大事になってくるので、私は本を2冊読みました。Webサイトで検索するのも手ですが、何も知識がないときは検索するワードもわからないため、基礎を網羅的に紹介されている本を何冊か読んだ方が良いと思います。
おすすめの本
- ノンデザイナーズ・デザインブック
- デザイナーでなくても使える、デザインの基礎がわかりやすく書かれています。とにかく読みやすい！
- なるほどデザイン
- 本のデザインが素敵。デザインの基礎が網羅されています。ギャラリーを見ているみたいに楽しくデザインを学べます。
Step3. 手書きでラフ画を書く
イメージができたらラフ画を手書きで書きます。PC上で書いてもいいのですが、まだ全然ツールを使いこなせない初心者だった私にとって、スピード感もって書くことは難しかったのでかならず手書きで大きな紙に書いていました。初心者がPC上でラフを書いてしまうと、自分の使えるツールの範疇でしかデザインができず、デザインの幅が狭くなってしまいます。
Step4. 作るために必要な知識を習得しながら完成7割を目指す。
ラフ画を書き、作りたいものが明確に決まれば、次はツールを使いこなさなければなりません。PhotoshopやIllustratorでの文字の入れ方からレイアウトする方法まで、調べることはたくさんあります。
ただ、気負わないでください。Adobeソフトはすべてメニューがアイコンで記載されているので、触ったことがない方でもなんとなくどういう挙動になるのかわかります。
ここで大切なのは、完璧なものを作るのではなく、まずは「完成させる」ことを目標にがんばることです。そもそもデザイン初学者が初めから誰もが納得する完璧なものを作れることは、厳しいと思います。
おすすめデザイン勉強法
- 動画学習Udemy
- Photoshop / Illustratorの基礎的な使い方が網羅されています。初学者だとツールの名前もどこにあるものなのかもわからないので、記事を参考にするより実際動かしている様子がわかる動画の方がわかりやすいと思いました。
私が実際に見ていた動画はこちら
Photoshopマスターコース 基礎から上級まで ステップバイステップでPhotoshopのすべてを学ぼう | UdemyIllustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる標準Illustratorコース | Udemy
- ひたすら検索する
- 上記動画をさらっと見て、だいたいの使い方を把握したら、次はつまずいた部分をひたすら検索します。
ここから作ったデザインをWebサイト上に表示するため、コーディングも学んでいきます。
まずは静的なサイトを作るための知識として、HTML / CSSの勉強をしましょう。
動的な部分は、作りたいものにどうしても入れたい部分だけ勉強します。
コーディングから学んだ方が、コーディングしやすいデザインを作れるという考え方もあると思いますが、
私はできるだけ自由にデザインした方が楽しいと考える派だったので、コーディングのこと何も考えず、まずはデザインを作り、
コーディングに落とし込むときに、試行錯誤しました。
おすすめコーディング勉強法
- ドットインストール
- 3分間動画でさまざまなプログラミングが学べます。さらっとみれるのでこれで大枠を理解していました。
- Progate
- 説明がとても丁寧で、スライドを見ながら楽しく学習できます。実際に手を動かすフェーズがあります。より理解が深まるのでおすすめです
※わからなくなった場合
独学でやっているとどうしても1人では解決できないことが出てくると思います。
そんなときは有識者に頼れるといいなと思います。
私の場合デザイナーの知り合いはいなかったのですが、プログラマの友人が２人いて、コーディングする際めちゃくちゃ頼らせていただきました。
周りにそういった友人がいない場合は、オンラインサロンに入って質問させてもらうのが１番いいのではないかと思います。
私は前田デザイン室というオンラインサロンでのプロジェクトを通して、初めてデザインのFBをしてもらい衝撃を受けました。
また、プロデザイナーからデザインレビューが受けられるPLUSREVIEWというサービスを最近見つけたのですが、独学で勉強している人にかなり嬉しいサービスですよね！私が勉強してた時、こういうサービス欲しかったと心から思います。
TwitterなどSNSで有識者の方と繋がる方法もあると思うのですが、私は人見知ってしまうのと、Twitterでデザインのことを発信しておらず、そこから繋がるのは壁が高くできませんでした。。。
また、出来上がったサイトは途中段階でも、友人とご飯に行く機会などにどんどん見せました。
意外と、これどこ押せば次進むん？とか言われることが多く。
結局サイトを見るのはデザイナーでない人が大半なので、初めて見る人の意見を参考にブラシュアップしました。
Step5. もっとよくできないか考える
自分なりにある程度形になってきたあとは、もっと良くできないか考えます。
ここまで自分の作りたいもが目に見えてわかる状態になったら、そこからすごく知識欲に溢れているはずです。売れてるデザイン本や、有名な記事、YouTubeなど興味ある分野をいろいろ見て知見を広げましょう。デザイン失敗例をみて当てはまってないか考えるのも有効です。
友達に見てもらい感想を教えてもらうのもとても良いと思います。SNS上でつながった人に相談するやり方も、とても良いと思います。私はほとんどSNSをやっておらずあまり交流できなかったので、勉強したことを発信して、いろんな繋がりを増やせばよかったなーと少し後悔しています。
おすすめ本
- ほんとに、フォント。
- フォントに関する失敗例と、それを修正した例が載っています。自分が同じ過ちに陥っていないかチェックにも使えるし、読んでいて楽しいです。
- けっきょく、よはく。
- 余白に関する失敗例と、それを修正した例が載っています。
おすすめのLIGブログ
LIGにはすごい経験を持ったデザイナーがいっぱいいて、ノウハウを惜しみなくブログに書いてくれています。しかも説明の仕方が丁寧。
私は困ったときはいつもLIGブログに頼っていました。入社してからの記事も含め、私のおすすめをお伝えします。
Webデザインをはじめよう：初学者向けの記事はここにすべてまとまっています。興味がある分野をのぞいてみてください！ 無料とは思えないノウハウが詰まっています。
【初心者脱却！】デザイナー歴4ヶ月の私が現場で悩んだこと、学んだこと。【レイアウト編】
おまめ
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！
えびちゃん
▲ ポートフォリオ制作のための考え方が書かれています。転職用のポートフォリオを作る予定の方は、考え方が変わりますよ！
Step6. 完成、そして公開！
自分が納得できるできばえになれば、かならず公開しましょう！
Webサイトは使ってもらわないと意味がありません。なのでいっぱい宣伝もしましょう。
公開まではサーバーを借りたり、ドメインを作ったり地味な作業が必要です。が、愛する我がサイトのために、あなたはきっとがんばれるはずです。
公開すると、意外に見てもらえなかったり、意外な指摘があったり、いろんな気づきがあると思いますので、改善したければ改善しましょう！
ちなみに私が独学のみで作ったサイトは下記２つです。
- MAMI MATSUMTO Photograpy
- カメラマンとしての実績をまとめたポートフォリオサイトです。
写真が目立つよう、シンプルな配色、レイアウトで作りました。
- ROOTBOX
- 古代文明を研究するメディアです。
サイト作ることで燃え尽きてしまい全然更新できていません。
Step7. 振り返る。次にやりたいことを見つける
公開お疲れ様でした！ 1つのWebサイトを自分で1から作ってみていかがだったでしょうか？ どの部分が楽しかったのか、今後どれくらいやりたいか、考えてみましょう。
たとえば、どんなサイトを作るか企画を考えることが一番楽しかったとしたら、あなたはディレクターに向いているのかもしれません。すべてを1人で作ることが楽しければフリーランスが向いているかもしれません。デザインは楽しかったけどコーディングはあまり好きではないという場合は、デザインとコーディングが分業されている会社に就職するのも良いでしょう。
独学で勉強するメリット
最短で好きなものが作れるようになる
スクールだと基礎から学んで1つのオリジナルサイトを作るのに通常半年くらいかかりますが、独学であれば2〜3ヶ月でできるはず。また、自分の好きなものを作るためにがんばっているので、「これ学んで何になるん？」と思う時間はないはずです。
お金がかからない
やったことがないことなので、もしかしたらやってみて向いていないと思うかもしれません。そんなとき、独学なら失うことが何もない状態でやめることができます。
興味はあるが本当にやりたいかわからなくて悩んでいても、独学ならすぐ始められます。
自分のペースでできる
やりたくないときはやらなくて良いんです。人生は長いんです。独学であればなおさら、無理に期日を決めてやるより、好きなときにやるほうが嫌いにならなくて済むんじゃないかなぁと思っています。
独学で勉強するデメリット
パッと相談できないので挫折しやすい
わからないことをすぐに解決できないので、ある程度検索力が必要です。フィードバックしてもらえる機会もないので、自分で本当にこれで良いのかわからなくなってしまうときがあります。
就職支援がないので、自分にあった会社などがわからない
最終的に就職したいと思ってる人は、そもそも就職するためのポートフォリオ作りが必要です。そうなると、どういうコンテンツがいるか、サイトを就職したい会社が求めている内容に合わせていくなど必要になります。ポートフォリオ作りの過程でアドバイスしてくれる人がおらず、遠回りしてしまう可能性があります。
背中を押してくれる仲間がおらず、モチベーションが保ちにくい
「仲間が良いものを作ったら私もがんばらないと！」など、一緒にがんばる人がいるから自分もがんばれるタイプの人は、ただ黙々と1人でサイトを作るのはしんどくなってくるかもしれません。
（▼独学は自分には向いてないな……という方は、こちらの記事でスクールの紹介をしていますのでご覧ください） 【2021】Webデザインスクールおすすめ9選！未経験からWebデザイナーを目指すあなたへ
Ten Tanaka
まとめると、スクールも独学も、向き不向きがあるということです。
私が就職活動で行ったこと
独学ののち、私が就職活動をどう行ったかもお伝えしておきます。
就職活動の前はいろいろあって留学とか起業とかをしていました。がっつり就職活動をしていたのは約1ヶ月。当時、資格は何も持っていませんでした。
それまではWantedlyをだらだら見つつ、Wantedly経由のカジュアル面談をしていただいた企業から、Webデザイナーの働き方についてリモートでお話をお伺いしていました。
就職したいとコンタクトをとった企業は5社。もともと知っていた企業や、Awwwardsから検索して、実績がとにかくかっこよすぎる！ と思った企業に直接メールしました。
突然のメールにもかかわらず、また、採用も行っていないのに、そこからお話する機会をいただけた企業のみなさまには、感謝しかありません。
就職活動中、選考に進ませてもらったのはLIGだけでした。面接からとても丁寧で楽しく、先輩たちがみんなあたたかい印象でした。内定をいただけたときはとても嬉しかったです。
内定約3週間後に入社という流れになりました。上京後の家が決まらず、会社にご厚意で泊めていただきました。さらに入社1日前の夜までカメラマンとして大阪で撮影していたんです。入社日に始発で新幹線に乗り、なんとか始業時間に間に合って初日を始めました。バタバタと上京・入社して、今に至ります。
他の人とはかなり違うかもしれませんが、私の体験談としてご紹介しました。就職活動の考え方については、こちらの記事が参考になるので合わせてご覧ください！
まとめ
独学で勉強し、自分の好きなサイトを作れたものの、LIGではまったく通用しませんでした。LIGブログのアイキャッチ画像制作も、初めは1つ作るのに3日くらいかけ、先輩デザイナーに何度も何度もフィードバックしてもらっていました。今だから言えますが、入社半年くらいまで自分のできなさが本当に辛くて、絶対自分はデザイナーに向いてないんやと思っていました。
そんな私もあたたかい先輩たちのおかげで、今ではアイキャッチ画像を3時間で制作でき、さまざまな表現ができるようになりました。会社に入ってから、私は初めてデザイナーになれたんだと思います。
そもそも凄腕デザイナーに、完全未経験から半年でなるのは不可能です。半年くらいで、なんとかスタートラインに立て、その後仕事を通して成長してデザイナーとして一人前になれるのだと私は思っています。
Webデザイナーとして仕事をいただくのも、就職するのも、まずは自分でデザインを作らなければ始まらないことです。
この記事が、あなたのはじめの一歩を踏み出すきっかけになれば嬉しいです。
▼働きながら。授業の合間に。Webデザインを勉強するなら……
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
