【やることを明確化】独学でWEBデザイナーになるための最強ロードマップ

webデザイナーになるためのロードマップ

WEBデザイナーになりたいんだけど、何から始めればいいかわからない…。

デザインツール?コーディング?具体的に流れとやり方を教えて〜(泣)

この記事では、webデザイナーを目指すと決めた方向けに「webデザイナーになるまでのロードマップ」をご紹介します♪

当社が運営している「WEB食いオンラインスクール」のカリキュラムと全体の流れは同じなので、やるべきことが明確になり、勉強方針も定まると思います◎

WEBデザイナーを目指すと決めたけど、何をすれば良いかわからずつまずいている方は、参考にしてくださいね。

このロードマップに沿って学習を進めれば、独学なのにまるでスクールに通っているかのような学習ができるので、就職・転職にググッと近づけるでしょう!

やぁみんな!

僕がWEB食いオンラインスクール校長の松崎だ!

僕のスクールのカリキュラムをそのまま紹介するから、これから独学でwebデザイナーを目指す人は参考にしてくれて構わないぜ♪

細かく何をすればいいか紹介するから、一歩ずつ確実にwebデザイナーへ近づいていこう!

【↓↓当社WEBデザインスクールはこちら♪入会金54,800円 + 月額10,800円

web食いオンラインスクール

【完全版】ロードマップの大まかな流れを把握しておこう!

まずは、WEBデザイナーになるまでのロードマップを確認しましょう!

当社運営のスクールも、基本的にはこの流れで進めていますよ♪

webデザイナーになるためのロードマップ

【WEBデザイナーになるまでのロードマップ】

  1. デザインソフトの使い方習得(Photoshop)
  2. バナー模写
  3. オリジナルバナー作成
  4. デザインの知識習得
  5. WEBサイトデザイン作成
  6. コーディング模写
  7. デザインしたサイトのコーディング
  8. jQuery入門
  9. PHP入門
  10. 作成サイトのWordPress化
  11. ポートフォリオを作成
  12. 就活・転職活動
  13. 並行して実績追加
  14. その他必要スキル習得

やること多くない?(笑)

適当なことを言ってもしょうがないからね(笑)

WEBデザイナーになるのは楽じゃないってことはわかってほしい。

採用側の立場になると、これくらいはやってきて欲しいのが本音だね。

すごく伝わってきたよ。。。

けど、これをやればWEBデザイナーになれるってことね!!

よし!まずはデザインツー…

ちょい待て〜〜い!(笑)

いきなり勉強を始める前に、まずはいくつか決めておくことがあるよ!

何を決めるの?

具体的には、「WEBデザインの勉強をする目的」と「勉強期間」だ。

これを決めないと無駄な勉強をして遠回りになるから、事前に決めておこう!

勉強は、計画的にね♪

うわ、うざ〜い。

WEBデザインを学ぶ目的を明確化しよう!

ゴールを明確にしよう!

まずはWEBデザインを勉強する目的を明確化しておきましょう!

というのも、正社員や派遣を目指すのか、インターンを目指すのか、即フリーランスを目指すのかで「どこまで学べば良いか」が変わるためです。

例えば、正社員を目指す場合「デザインの基礎知識がある」「デザインソフトが使える」「HTML/CSSコーディングができる」というスキルがあれば、就活しても雇ってもらえる可能性は少なからずありますが、フリーランスではそうはいきません。

フリーランスでは、WordPressや簡単なプログラミング、マーケティングなどの知識がないと、クライアントの目的を叶えられず満足してもらえないためです。

なので、まずはあなたが「どこまで学べば良いか」というゴールを設定するために、目的を明確化しておきましょう♪

正社員になるには「webサイトを一通り作れるスキル」が必要になるから、上記8番目の「jQuery入門」まで出来るようになれば、最低限就活で戦えるようになると言えるね♪

キャバコは即フリーランスになりたいな!

どこまでやればいい?

フリーランスを目指すなら、全てやらないと食べ続けていくのはかなり難しいぜ!

不可能ではないけど、相当なデザインスキルが必要だし、将来的にはデザインだけだと厳しいと言われてる。

だから、即フリーランスになるのはおすすめしないぞ。

【デザインしかできないWEBデザイナーは消える!?】
Webデザイナーの需要って、これから先もあるの?仕事なくならない?

え、そうなんだ…。

いきなりフリーランスになりたい人はどうすればいいの?

お勧めはしないけど即フリーランスになるのも不可能じゃないから、以下記事を参考にしてみてくれ!

正社員を目指す人は、このまま読み進めてね!

【正社員を目指す人は最低限以下はやろう!】

  1. デザインソフトの使い方習得(Photoshop)
  2. バナー模写
  3. オリジナルバナー作成
  4. デザインの知識習得
  5. WEBサイトデザイン作成
  6. コーディング模写
  7. デザインしたサイトのコーディング
  8. jQuery入門

学習期間を設定しよう!

学習時間・期間の設定

次に、学習期間を設定しましょう!

なぜ学習期間を決めるかというと、期間を決めないとダラダラと長い時間勉強することになり、「いつまで経っても上手くならないなぁ…」と挫折の原因となるためです。

ここで紹介するロードマップは、1日8時間、週5日で3ヶ月が学習終了目安となります。

個人差はもちろんありますが、合計480時間(8時間 × 週5日 × 4週間 × 3ヶ月)くらいの期間を設定してみましょう!

1日2時間、週5日の学習ペースの場合、ちょうど1年で480時間となりますよ♪

スクールを運営している僕の肌感覚だけど、WEBデザイナーの学習を一通り終えるには、最低480時間は確保したいところだぜ。

けど、学校・仕事や家事、子育てとかで時間を確保できない人は多いよね。

大切なことは「無理せず60%の力でもいいから、続けること」だから、余裕を持って期間を設定してみてね♪

1日2時間とかでもできるようになるの?

仕事が忙しい人や子育てがある人は不安だよね。。。

もちろん個人差はあるけど、諦めなければ誰でもwebデザイナーになれると僕は思っているよ。

1日2時間でも諦めずに勉強を続ければ、期間は長くなっても必要な時間を確保できるからね。

現に子育てしながらWEBデザイナーになっている人は少なくないし、僕のスクールでも1日2時間しか確保できなくても、すごく上達している人が多いぜ。

結局はその人のやる気次第ってことか。

「絶対できる!」って思っている人は、確保できる時間にかかわらず結果を出せるぜ!

これは何にでも言える絶対的な法則だよね。

絶対できるって信じよう!!

WEBデザインを勉強する準備をしよう!

WEBデザインを学習するために、最低限用意するものをご紹介します。

【webデザイナーになるために準備すべき3つのもの】

  1. パソコン(スペックに注意)
  2. テキストエディタ(コーディングするためのツール)
  3. デザインソフト(デザインを作るためのツール)

この3つを準備すれば、webデザイナーになる準備が整います。

なぜかというと、これでwebサイトを作れるから。

どんなものを選べば良いのか、1つずつ具体的に説明していきますね!

※すでに準備済みの方は飛ばしてください。

まずはパソコンを用意しよう!必要なスペックも解説!

パソコン,PC

当然ですが、webサイトを作るにはパソコンが必要です。

よくあるのが「どんなスペックが必要なの?」という疑問。

以下の表をチェックしてください!

OS 64ビットであること
CPU Core i5より良いもの
メモリ できれば16GB以上(8GBでギリ)
できればつけておきたいもの SSDやグラフィックボードを付ければ、読み込み速度が早くなります!

基本的には、OS、CPU、メモリの3つだけ気にしておけばOKです!

OSは32ビットか64ビットがあり、これからの主流は64ビットのため64ビットを選びましょう(32ビットしか対応していないと、新しいアプリが使えません)。

CPUは人間でいう「脳」のことで、Core i5以上がおすすめです。

メモリとは「処理能力」のことで、デザインソフトやブラウザ(Google chromeやsafari など)、エディタなどの複数のソフトやアプリを同時に使った時でも、パソコンが快適に動くかどうかを表します。

特にデザインソフトのPhotoShopなどは重いので、メモリは16GB以上あると快適に作業ができるでしょう(8GBでも良いかも)。

「ちょっと何言ってるかわからない…」というサンドウィッチマン状態の人はどうすればいい?

そういう人も問題ないぜ!

上記をメモして家電量販店で伝えれば用意してくれるはず。

正直、ゲーミングPCのように高機能で高価なパソコンは必要ないから安心してくれ。

web制作をする上で最低限必要な表のようなスペックを備えていれば、全く問題ないよ♪

ちなみにWindowsとMacはどっちを選べばいいの?

作れるものに違いはないからどっちでも問題ないぜ!

操作感に少し違いはあるから、使いやすい方を選んでくれよな!

ちなみに僕はWindows派だ♪

モニター画面は大きい方が作業が効率的になるから、基本デスクトップがおすすめだけど、ノートPCでも問題ないぜ!

テキストエディタを無料ダウンロードしておこう!

テキストエディタ

テキストエディタとは、テキストやソースコードなどを入力するためのツールです。

Webデザイン業務においては、制作したデザインをコーディングするため使うことが多いですね。

HTML、CSSなどのコードを書く際に使うので、必ずダウンロードしておきましょう。

エディタは無料のものを使えばOKです。

どれを使っても良いのですが、おすすめはMicrosoftが提供している「Visual Studio Code(ヴィジュアルスタジオコード)」。

日本語対応しているだけでなく、かなり高機能で使いやすいです♪

他にも、ATOM(アトム)Sublime Text(サブライムテキスト)なども人気があります。

【とりあえずテキストエディタをダウンロードする】
VScodeのダウンロードはコチラ
ATOMのダウンロードはコチラ
Sublime Textのダウンロードはコチラ
※全部ダウンロードする必要はありません。

VScodeは世界中で使われているから安心して使ってくれよな!

現役webデザイナーやエンジニアにも愛用されてるぜ。

正直、エディタはどれを使っても作れるwebサイトは変わらない。

自分が使いやすいものを選べばOKってことだ。

デザインソフトはデザイン制作に欠かせないツール

デザインツール

webデザインはデザインソフトを使って作成していきます。

デザインソフトとは、Photoshop(フォトショップ)、Illustrator(イラストレーター)、Adobe XD(アドビエックスディー)などのことですね!

デザインソフトが使えなければwebデザイナーにはなれないので、必ず用意しましょう。

そして未経験の方がまず用意すべきデザインソフトは、ズバリPhotoshopかXD。

なぜかというと、今のところ実務ではPhotoshopとXDが多用されているからです。

もちろん全て用意できるのが1番ですが、お金もかかるのでとりあえずPhotoshopかXDをマスターするのが無難と言えます。

Photoshopは、最新版だと月額課金制となっているので、Photoshop単体なら月1,000円程度※(フォトプラン)で利用できます。

※時期によって料金が変わります。

XDは2021年時点だと無料利用できますね。

全てをいきなり身につけるのは難しいので、IllustratorやXD、sketch(スケッチ)などは後回しでも問題ありません(余裕がある人は用意しましょう)。

【webデザイナーになるのに必要な3つの準備まとめ】

  • パソコンを用意する(OS:64ビット、CPU:Core i5、メモリ:16GB以上)
  • テキストエディタを用意する(VScodeがおすすめ)
  • Photoshop、XDを用意する

[/check]

これでWEBデザインを勉強する準備は整ったね!

次からは実際にWEBデザインの勉強を進めていくよ♪

「バナーの模写」からスタートになるけど、一歩ずつ確実に進めばWEBデザイナーになれる可能性は非常に高いぜ!

バナーを模写(トレース)してみよう!

勉強期間:数時間 ~ 数日程度

さて、ここからはWEBデザインの勉強を本格的にスタートしていきます!

まず最初にやることは「バナー模写(トレース)」。

バナー模写とは、実際に公開されているバナーを同じように作成することを言います。

なぜバナー模写をはじめにやるかというと、主な目的は「Photoshopの操作を身に付けるため」です。

いくらデザインセンスがあっても、Photoshopを触れなければwebデザイナーにはなれませんからね。

バナーを2,3個模写して、Photoshopの操作方法を学んだり、どんなバナーが求められているかなどを大まかに理解していきましょう!

バナー模写のやり方

模写のやり方は簡単で、「模写するバナーを見つける」 → 「模写する」という流れになります。

模写するバナーの見つけ方

バナーの見つけ方

模写するバナーは、「バナーのギャラリーサイト」から探しましょう!

ギャラリーサイトは複数ありますが、どのギャラリーサイトを使っても問題ありません。

特にこだわりがない方は、以下のギャラリーサイトを使ってみましょう♪

【バナーのギャラリーサイト】
レトロバナー
バナーデザインアーカイブ
Banner matome

バナーまとめサイトってたくさんあるんだね!

必要なのはバナーだから、どれを選んでも問題ないよ。

他にも、Googleの画像検索でバナーを探すのもおすすめだ。

「業界名 + バナー」で検索すれば、作りたい業界のバナーも見つかるよ♪

でも、どのバナーを選べば良いのかわからないよ。。。

上達するためのバナー選びのポイントとかあるの?

模写するバナーの選択基準

模写するバナー選びのポイントは、ズバリ「フォトショの機能をたくさん使えるもの」です。

バナーを模写する目的は「Photoshopの操作を身につけるため」でしたよね?

なので、画像とテキストを並べただけのものだとあまり操作が上達しません。

そのため、以下の項目を意識してみましょう!

  • 背景にストライプや模様がデザインされているもの(参考バナー
  • 多角形やハート、リボン、矢印、吹き出しなど特殊なシェイプが使われているもの(参考バナー
  • 背景やシェイプ、テキストなどにグラデーションがかけられているもの(参考バナー
  • 人物や物の画像が切り抜きされているもの(参考バナー
  • 曲線が使われているもの(参考バナー)…etc

これらの項目を意識してバナーを選ぶことで、WEBデザインで使う機能をたくさんマスターできるでしょう!

1つのバナーに全ての要素が含まれていることはないので、条件を満たしているいくつかのバナーを選んで模写するのがおすすめです♪

フォトショップは画像編集ソフトなので、かなり多機能ではありますが、WEBデザインで使わない操作や機能はマスターしなくて大丈夫です♪

フォトショップの機能がふんだんに使われているのを選ぶのか!

これなら操作が上達しそうだね!

バナーの模写にも目的を持って取り組むことが大切だよ♪

ちなみに、バナーのサイズは何でもOKだぜ。

バナー模写の注意点はある?

ロゴやイラスト、画像とかは完璧に再現する必要はないってところかな。

バナー模写の目的は「フォトショップの操作を身につけるため」だから、バナーの再現度は二の次さ。

人物画像は適当に取ってきた画像を使うなど、似ているもので代用しよう!

あとは「薄くかかっているドロップシャドウ」とか、文字詰め・行間詰めみたいな、細かい部分を見逃さないようにすることも大切だね!

なるへそ〜。

難しいデザインの方がやっぱり上達する?

初めのうちは複雑すぎるデザインは選ばない方がいいよ。

そんなバナーを作ることはマレだし、特殊なデザインはその都度やり方を調べればOKだ♪

比較的シンプルなものにいくつかトライしてみてね!

バナー模写のやり方

バナー模写のやり方は、模写元のバナーを見ながら写せば良いだけなので決まったやり方はありません。

以下のように模写元のバナーを横に配置して模写をするのがおすすめです♪

バナー模写(トレース)のやり方

ちなみにバナー模写をする際の基本設定は、解像度「72ppi」、カラーモードは「RGBカラー」とすることを忘れないようにしましょう♪

バナーにもよるけど、最終的には1つの模写を30分以内で作れるようになろう!

30分!?

初めはゆっくり時間をかけてもいいけど、実務でのWEBデザインは納期との勝負もあるから、作成スピードを上げておくことはとても大切なんだ。

操作に慣れると15分くらいでバナーデザインができるようになるぜ!

作成速度を早めるには、フォトショップのショートカットキーも使えるようにしておくのがおすすめだよ♪

【Photoshopのショートカットキーを知ろう!】
これで作業効率が劇的に上がる! Photoshopのショートカットキー早見表

オリジナルバナーを作成しよう!

勉強期間:数日 ~ 数週間

バナーの模写(トレース)が終わったら、次はオリジナルのバナーを作成しましょう!

オリジナルバナー作成の目的は「デザイン知識習得 & バナー作成スキルの向上」となります。

実務でも初めのうちはバナー作成を任されることが多いので、しっかり作れるようになりましょう♪

オリジナルバナーを作る時に決めておくべきこと

オリジナルバナーを作る前に、「どんなバナーを作るのか?」を決めておきましょう!

これがないと何を作れば良いかわからず、手が進まないですからね。

最低でも以下の5つの項目は決めておくのがおすすめです♪

【オリジナルバナー作成前に決めておくべきこと】

  1. バナーで宣伝する商品・サービス
  2. ターゲットユーザー(誰に売りたいか?)
  3. コンテンツの用意(ロゴやキャッチコピー、文言・料金など)
  4. コンテンツの優先順位
  5. バナーのサイズ
バナーで宣伝する商品・サービス

バナーは売りたいものがないと作れないので、宣伝する商品・サービスを設定します。

架空のもので大丈夫なので、楽しく設定しましょう!

「痛みにコミットする整骨院」や「ファッションのサマーセール」など、ありそうなもので大丈夫です。

ターゲットユーザー(誰に売りたいか?)

次に、その商品を「誰に売りたいか?」を考えましょう!

ターゲットが決まることで、バナーの色味やフォント、画像などをある程度絞り込むためです。

例えば20代女性向けバナーなら、パステルカラーが中心でマルっこいシェイプ、可愛らしいストライプの背景、若い女性の画像を使うなどが考えられますよね♪

ターゲットを決めれば「あなたに向けたバナーです♪」ということをユーザーに伝えられるので、最低限「性別」「年代」くらいは決めておきましょう◎

ちなみに、ターゲットを設定することを「ペルソナを設定する」と言ったりもするぜ!

ちょこちょこ使われるから覚えておこう!

コンテンツの用意(ロゴ・キャッチコピー・文言・料金など)

ロゴ作成

次に、バナーに記載するコンテンツ部分を用意しましょう!

具体的にはロゴ(会社名)、キャッチコピー、文言、料金くらいは設定しておきたいですね!

ロゴについてはあまりこだわりすぎる必要はなく、storesが提供してくれているロゴ作成ツールでサクッと作ればOKです♪(テキストだけでも良いですよ◎)

キャッチコピーや文言、料金もこだわる必要はなく、同じ業界のバナーのものをそのまま使うのがおすすめです。

コンテンツの優先順位

コンテンツが決まったら、コンテンツの優先順位を決めていきましょう!

コンテンツの優先順位を決めることで、「何を見て欲しいのか?」を明確にできるため、バナーにメリハリを作ることが可能です♪

例えば、当社のオンラインスクールのバナーは「①キャッチコピー」>「②ターゲット」=「③ボタン」>「④スクール名」の順に優先順位を設定しています。

バナーの優先順位

こうすることで、何を一番目立たせるのかなどが明確になるので、バナー作成時に迷わなくもなるのでおすすめですよ♪

優先順位ってそんなに大切なの?

超大切だぜ!

バナーを作る目的は「商品を見てもらう、商品ページに飛んでもらうこと」にあるから、「何がユーザーに刺さるか」を考えた上でデザインしないと、バナーの役割を果たせなくなってしまうぜ。

極端な話、「知名度の低い中小企業のロゴ」が一番目立ってるバナーだったら、細かく見ようとは思わないよね?

たしかに…興味はわかないね(笑)

良いバナーは必ず見せたいところを目立たせているから、コンテンツの優先順位は決めておこうね♪

バナーだけじゃなく、WEBデザインでも大切なことだよ。

バナーのサイズを決める

作れるようになっておくべきバナーサイズ

作成するバナーのサイズも決めておきましょう!

バナーの種類には正方形や縦長、横長のバナーがあり、サイズも様々なバリエーションがあります。

どの媒体にバナーを掲載するかによってサイズが変わるためですね。

正解はないので迷ってしまう方も多いのではないでしょうか。

とはいえ、GDN(Googleディスプレイネットワーク)やYDN(Yahooディスプレイアドネットワーク)といった広告枠でバナーを掲載することが多いので、以下の4種類のサイズを作れるようにしておけば良いでしょう♪

【オリジナルバナー作成で作っておきたいバナーサイズ(ヨコ × タテ)】

  • 300 × 250
  • 728 × 90
  • 160 × 600
  • 320 × 100

この4つのサイズを作れれば、他のサイズもリサイズすれば対応可能で効率的です。

必ずしも全て作る必要はありませんが、一度作ってサイズ感をつかんでおきたいですね♪

実務でも毎回これをやるの?

商品やコンテンツ、バナーサイズはクライアントから指定される場合が多いから、実務で決めるのは「コンテンツの優先順位」くらいかな。

ここでは練習だから、0から作ってバナーの理解をより深めていこう!

設定が面倒な人は、以下に架空の設定を用意したから、使ってくれてOKだよ♪(コンテンツの優先順位は考えてみよう!)

【お題1】

  1. フリーランスwebデザイナー向けエージェント会社のバナー
  2. 20 ~ 40代の主婦で、フリーランスwebデザイナー
  3. 会社名:webテック、キャッチコピー:今日から「お家WEBデザイナー」になろう!、文言:週3日の在宅案件多数、登録無料
  4. 300 × 250

【お題2】

  1. 格安航空会社のセールのバナー
  2. 20 ~ 30代の男女、安い航空券を探している
  3. 会社名:ビーチ、キャッチコピー:デラックス早割セール、文言:コロナが終わる!マスクを外して旅行に行こう!、国内線990円~、期間2022/1/1 ~ 2022/1/31
  4. 728 × 90

【お題3】

  1. 結婚相談所のバナー
  2. 40代独身の男性
  3. 会社名:The Marriage、キャッチコピー:結婚できないのは、環境のせいだ。、文言:成婚率業界No.1、詳しく見る(ボタン)
  4. 160 × 600

画像や色などに縛りはないから、自分で探してみようね!

オリジナルバナーの作り方

最低限決めておくべきことが決まったら、オリジナルバナーを作っていきます。

ただ、いきなりバナーを作り始めると、かなりの確率で素人感強めのダサいデザインとなってしまうはずです。

(最初はデザインの正解や引き出しが少ないため、ほとんどの人が素人デザインになるので安心してください)

そのため、見本を探してそれを参考にバナーを作ることが大切です!

見本はプロが考え抜いて作った正解に近いデザインなので、学ぶべきところがたくさんあります。

同じ業界のバナーから「何を目立たせているか?」、別業界のバナーから応用できそうなデザインなどを探してみましょう!

【バナーのギャラリーサイト】
レトロバナー
バナーデザインアーカイブ
Banner matome

見本は絶対に用意しなきゃダメ?

デザイン経験がない人は、必ず用意しよう!

「素人デザインになりにくい」、「デザインの引き出しが増える」というメリットがあるだけじゃなく、プロがどんなことを気にしてバナーを作っているかも学べるからね♪

ちゃんと理由があるんだね。

例えばどんなことを気にしてるの?

「読みやすさ」なんかはかなり意識して作っているよ。

文字を読みやすくするために薄くドロップシャドウをかけたり、目立つように背景色との反対色を使ってたりね。

余白も意図的に使われたりと、ぱっと見ではわからない部分もデザインされているのに気づくはずだ!

へぇ〜。そんな細かいところまで意識されているんだね。

そのおかげで私たちは快適にバナーを見られるってわけか♪

バナー選びには注意点があって、「コンテンツ量」「バナーのサイズ」「ターゲット」の3つが似ているバナーを選ぶように心がけよう!

これらを意識しないと見本を上手く参考にできないからね。

作ってる途中で嫌になってしまうから注意しよう!

あと、同じ業界のバナーを参考にしちゃうとただのパクリになるから、なるべく別の業界のバナーを参考にするのがおすすめだ!

並行してデザインの基礎知識を身につけよう!

勉強期間:数日 ~ 数週間

オリジナルバナー作成と並行しておこなって欲しいのが、「デザインの基礎知識学習」です。

プロのバナーを参考にするとクオリティの高いバナーを作成できますが、「なんでこうすると良いの?」というのが理解できないためです。

そのため、このタイミングでデザインの知識も身につけておきましょう!

デザインの基礎知識を身につけるのにおすすめなのが、参考書を読むことです。

デザインの基礎知識を得るのにおすすめの本

デザインの基礎知識は、本から学びましょう!

写真でていねいに解説されていて、体系的に教えてもらえる以下の3冊がおすすめです。

ノンデザイナーズ・デザインブック

webデザイン,勉強,本

ノンデザイナーズ・デザインブックは、webデザイン専用の本ではありませんが、すべてに共通するレイアウトデザインの基礎中の基礎である「デザインの4原則」について教えてくれます。

「デザインの4原則(近接・整列・反復・コントラスト)」を守っていれば、「素人っぽいなぁ…」というデザインから脱却できます。

ほとんどのwebデザイナーは読んでいると思うので、「デザインの勉強をしよう!」と思ったら初めに読んでほしいです!

なるほどデザイン

webデザイン,勉強,本

なるほどデザインもwebデザイン専門の本ではありませんが、「目的に合わせたデザインの考え方」が身につく本なので、ぜひ読んでほしい一冊です。

デザインを考えていると、多くの人が「どういうデザインにすればいいんだろう?」と手が止まるか、「なんとなくでデザインして目的を達成できないデザイン」をしてしまいます。

原因は「デザインの考え方」がわかっていないからです。

「なんでここにこの要素を配置したの?」「なんでこの色なの?」「なんでこの文字の大きさなの?」という部分を、webサイトの目的に沿って論理的にデザインできないと、良いデザインは生まれません。

つまり、デザイン1つ1つに「根拠となる考え方」を持つ必要があるのです。

そして「なるほどデザイン」には、「デザインの考え方」から「デザインをつくる流れ」、「デザインを良くするためのポイント」などが書かれているので、初心者がぶつかる壁を解決することができます。

この1冊だけでも、webデザインにおける理論をマスターできるので、読んでみてくださいね♪

ほんとに使えるユーザビリティ-より良いデザインへのシンプルなアプローチ-

webデザイン,勉強,本

こちらは、「UI(ユーザーインターフェイス)」というwebデザインの機能的な使いやすさについて書かれた本です。

UIについて知れば、デザインするときに「こっちのほうがユーザーは使いやすいし、理解できるだろう!」「こうすればユーザーが迷いにくい!」という機能面の判断ができるので、初めのうちから知っておくのがおすすめです。

UIと聞くと難しく聞こえるかもしれませんが、この本では身近にあるモノやサービス、もちろんwebサイトを引き合いに出して「これはこうだから使いにくい」「ユーザーはこうやってwebサイトを使いたい」ということをユーモアたっぷりにわかりやすく紹介してくれているので、安心してくださいね!

ユーモアが多くて少し疲れますが、内容はわかりやすく、役に立ちます。

「ノンデザイナーズ・デザインブック」でデザインの基礎を学び、「なるほどデザイン」でデザインの考え方、「ほんとに使えるユーザービリティ」でどんなサイトなら見やすい・使いやすいかを学ぶ流れだよ!

とりあえずこれくらい学べば素人デザインから抜け出せるぜ!

WEBデザインを作っていこう!

WEBサイトのデザインに取り掛かろう!

勉強期間:1 ~ 2ヶ月

次のステップはいよいよ「WEBデザインを作る」です!

ここまでで「Photoshopの操作」「デザインの基礎知識」「デザインの基本スキル」が身についている状態のため、今度は実際にwebデザインをしていきます。

就職・転職活動で使う実績となるので、本気で作っていきましょう!

【WEBデザイン作成の流れ】

  1. サイトの設定を決める(架空のサイトの場合)
  2. ワイヤーフレームを作成する
  3. デザインを作成する
  4. デザインを添削してもらう

デザインするサイトの設定を決めよう!

デザイン作成は、できれば知り合いに公開するものを作らせてもらえると良いのですが、周りにいない人も多いでしょう。

その場合は、オリジナルバナーを作成した時のように、「架空のサイトの設定」を決める必要があります。

【WEBサイトの設定は以下の項目を決めておこう!】

  1. webサイトを作る目的
  2. 商品・サービス
  3. ターゲット
  4. サイトマップ作成
  5. webサイトのコンテンツ

僕は最初、行きつけの美容室に頼んで作らせてもらったぜ!

個人店はWEBサイトにお金をかける余裕はあまりないから、無料なら作らせてくれる可能性は高い。

思い切って頼み込んでみるのがおすすめだよ!

WEBサイトを作る目的

            まずはWEBサイトを作る目的を決めます。

            どんなWEBサイトにも、作る目的が必ず存在します。

            具体的には、「売り上げを伸ばしたい」「商品・サービスイメージを変えたい(客層を変えたいなど)」「認知度を高めたい」「集客チャネルに合わせたデザインにしたい」などの目的ですね!

            目的を決めることでデザインの方向性が決めやすくなります。

            就職・転職活動でも「WEBサイトを作る目的」まで考えられる人は、やはり評価が高いぜ!

            クライアントは目的を叶えて欲しくてWEBサイトの作成依頼を出すから、ここを考えられる人が売り上げを伸ばすことに繋がるからだね。

            商品・サービス

            次に、商品・サービスを決めましょう!

            バナーの時と同様、「どんな商品・サービスを売るのか」を決めます。

            ターゲットを決める

            こちらもバナーの時と同様にターゲットを決めましょう!

            商品から「どんな人が欲しがる商品なんだろう?」と考えると、自然とターゲットが設定できるかと思います♪

            ターゲットは自分が売りたい人じゃないの?

            理想はそうなんだけど、商品によっては売りたい人とは違う人に向いている商品ということもあるんだ。

            極端な話、老眼鏡を20代に売るのは難しそうでしょ?

            うん、父の日みたいな特別な日以外は無理だね(笑)

            商品には商品の特性があるから、それ以上にも以下にもならないんだ。

            だから、商品からターゲットを考える方が合理的と言えるね。

            サイトマップの作成

            WEBサイトは、トップページ以外の下層ページまで作成することが多いです。

            絶対に必要というものではありませんが、「WEBサイトの全体像」をクライアントに提示できるというメリットがあるので作成しておきましょう!

            フォトショップなどで作成しても良いですし、テキストベースでも親子関係がわかれば問題ありません♪

            サイトマップ

            サイトマップ

            WEBサイトのコンテンツを決めよう!

            最後に、WEBサイトのコンテンツを決めておきましょう!

            コンテンツとは、「ヘッダー」や「フッター」、「KV(キービジュアル)」、「お知らせ」、「〇〇について」など、1ページ内に配置するセクションのことです。

            そのページに何を配置するのかを決めましょう!

            コンテンツはどうやって決めていけばいいの?

            必要なコンテンツがわかればいいんだけど、初めのうちはそうはいかないよね。

            その場合は、「競合他社」が掲載しているコンテンツを真似しよう!

            ワイヤーフレームを作成しよう!

            次に、ワイヤーフレームを作成します。

            ワイヤーフレーム とは、WEBページの設計図のことです。

            どんな要素をどこに、どのように配置するかを決めるために作成していきます。

            【ワイヤーフレームの作成例】

            ワイヤーフレーム

            ワイヤーフレームって設計図だったのか!

            けっこうシンプルな作りだね。。。

            シンプルでOKだぜ!

            ワイヤーフレームは要素の配置を共有するためのもので、「デザインはしない」というのがポイントだからね。

            え、なんか二度手間感があるけど。

            デザイン作っちゃえばいいじゃん。

            ワイヤーフレームは要素の配置とかをクライアントとすり合わせるために使うものだから、デザインは必要ないよ。

            ワイヤーがあれば事前に要素の配置をクライアントに見せられるから、大きな修正になりにくいという利点もある。

            デザイン作ってから「サイドバーはいらない」って言われた時のショックときたら半端ないからね(泣)

            たしかに!!

            デザイン終わってからそんな修正きたら泣く自信あるわ(笑)

            WEBデザインをしていこう!

            webデザインをする

            ここからはワイヤーフレーム をもとに、WEBサイトのデザインをしていきます。

            最初に決めた「WEBサイトを作る目的」を達成できることを念頭に置き、デザインをしていきましょう♪

            デザインを始める前に、まずは参考にするデザインを決めよう!

            参考サイトを決めよう!

            WEBデザインは、参考サイトをパクりながら作るのがおすすめです。

            なぜかというと、デザインの引き出しが少ない段階でオリジナルのデザインをすると、十中八九ダサくなるからです。

            プロもデザインに迷ったら、他のデザインを参考にしたりするので、パクることを遠慮する必要はありません。

            ギャラリーサイトなどで良さそうなデザインを探してみましょう!

            【保存版】WEBデザイン時に参考となるおしゃれギャラリーサイト48選

            デザインをパクる時の注意点はある?

            以下のポイントは意識して欲しいかな!

            【デザインをパクる時に意識したいこと】

            • 複数のデザインを組み合わせる
            • メインでパクるサイトを同じ業界から選ばない
            • 色やシェイプの形などを少し変える
            • パクったデザインはストックしておく

            色も配置も完全に同じにしてしまうのは問題だからね。

            複数のデザインを組み合わせることで、オリジナルのデザインにすることを意識していこう!

            デザインはストックした方がいいの?

            これからたくさんのデザインを作っていくと思うんだけど、良いと思ったデザインパーツをストックしておくと、迷った時にいつでも見られるからおすすめだよ。

            特に、初めのうちはデザインの引き出しがないからさ。

            WEBデザインは納期との勝負もあるから、ストックしておけば時間短縮になるってのもポイントだ♪

            キャプチャを撮って、以下のようにEvernoteとかに保存しておくといいよ◎

            最近のボタンデザイン例

            たしかに毎回探しにいくのは大変そうだもんね。。。

            ボタンとか、ヘッダー・フッターデザインとか、よく使うデザインはストックしとこ♪

            レスポンシブまでデザインすべき?

            レスポンシブwebデザイン

            「WEBデザイナーになるためにレスポンシブまでデザインするべきか?」と考えるかもしれませんが、結論を言うと「どちらでも良い」と言えます。

            レスポンシブデザインまで作れるというのは素晴らしいことですが、PC用のWEBデザインができればレスポンシブデザインもできるためです。

            時間がある方は、レスポンシブデザインまでやればOK♪

            実務では、クライアントから「スマホデザイン作って!」と希望された場合に、スマホやタブレットサイズのデザインを制作するケースが多いね。

            あと、マッチングサイトみたいなWebサービスを構築する際は、スマホデザインを起こすかな。

            店舗型ビジネスといった小規模のサイト制作の場合は、クライアントがお金ないケースも多いから、コーディング時にスマホのデザインを調整してしまうなんてことも多いぜ!

            作ったデザインを添削してもらおう!

            作ったWEBデザインは、プロに添削(フィードバック)してもらいましょう!

            自分で作って自分だけが納得できても、クライアントが喜んでくれるかはわからないですよね?

            また、自分では気づけないようなプロならではの視点や発想も知れるので、デザインの引き出しが圧倒的に増えます。

            そのため、プロに添削してもらう必要があるのです。

            デザインが上達する人、しない人の違いは「プロに添削してもらっているかどうか」と言っても過言じゃないぜ!

            スクールを利用していれば先生に添削をしてもらえますが、独学の場合はなかなか添削してくれる人が見つからないと思います。

            なので、以下の方法で添削してくれる人を見つけましょう!

            PLUS REVIEW

            plus review

            PLUS REVIEWはデザイン添削を時間で販売しているサービスです。

            zoomやdiscordというオンラインツールを使用して、あなたのWEBサイトをプロが添削してくれます♪

            料金は15分1,000円です(1時間添削を受けると4,000円です)。

            単発で添削を受けたい場合に便利ですね~

            PLUS REVIEWはこちら

            MENTA

            MENTA

            MENTAは「メンターを探せる」サイトです。

            もちろんWEBデザイナーのメンターもいるので、あなたに合うメンターを見つけることでデザインを添削してもらうことも可能ですよ♪

            「スクールに通う必要はないと思うけど、メンターはいてほしい。。。」なんて方におすすめのサービスですね!

            MENTAはこちら

            デザインは添削してもらった方がいいんだね。

            見本があれば誰でもそれっぽいデザインはできるようになるけど、「なぜこのデザインは良いのか?」をちゃんと理解できないとWEBデザイナーとして食っていくのは難しいんだ。

            添削をしてもらうことで自分のデザインを客観的に判断してもらい、「どこを直せばより良くなるか」がわかることで圧倒的に上達していくからね。

            必ず添削してもらおう!

            HTML/CSSコーディングの基礎を身につけよう!

            コーディング

            学習期間:数週間 ~ 1ヶ月

            デザインが一通りできたら、次はデザインをWEB上に表示するための勉強をしていきましょう!

            HTML/CSSのコーディングですね♪

            おすすめの勉強法は「Progate(プロゲート)」か「参考書」で基礎を学び、その後、模写コーディングを行うことです。

            Progate(プロゲート)

            progate,プロゲート

            プロゲートは、スライドでコーディングの基礎を学び、学んだことをプロゲート内で練習できる無料ツールです。

            学習効率の良さから現役のWEBエンジニアが勉強に使うほど人気があります♪

            基本料金は無料で、学習を進めると月額1,078円が必要になりますが、月に1,000円程度で効率の良い学習ができるのでコスパもかなり良いですよ。

            Progate(プロゲート)はこちら

            1冊ですべて身につくHTML & CSSとWebデザイン入門講座

            1冊ですべて身につくHTML & CSSとWebデザイン入門講座

            HTML/CSSは、参考書で学ぶのもおすすめです。

            参考書は体系的に学べるため、「何を勉強すればいいかわからない…」という初学者も適切な手順で学びやすいから♪

            特に「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は「webクリエイターズボックス」という超人気WEBデザインサイトの著者manaさんが書いた本で、Amazonで1位を取るほどの良書です。

            HTML/CSSに加えて、今時のWEBデザインについても学べるので、気になった方は手にとってみてくださいね!

            1冊ですべて身につくHTML & CSSとWebデザイン入門講座はこちら

            WEB食いの記事でもHTML/CSS基礎を学べるぜ!

            WEBサイトを模写コーディングしてみよう!

            基礎が身についたら、公開されているWEBサイトを模写(トレース)コーディングしてみましょう!

            模写をすることで、ここまでで学んだコードを復習できますし、 自分で考えてコードを組む練習にもなります。

            究極は、デザインを見ただけでなんのコードを書けば良いか想像できるようになるのが目的ですね。

            1~3個のサイト模写コーディングをするだけでかなり上達しますので、ぜひトライしてみましょう!

            コーディングの模写はどんなサイトを選べばいいの?

            複雑なデザインだと時間がかかりすぎちゃうから、シンプルなものがおすすめだね!

            画像とテキストがあって、要素が横に並んでいるものなんかがおすすめだ。

            できるだけ、1つのサイトで色々なレイアウトを実装できるようなものが良いね♪

            具体的には以下のようなサイトかな。

            【模写コーディングにおすすめのサイト】
            ■ 初級(プロゲートを終えたくらいのレベル)
            デイトラの模写コーディング練習サイト
            はにわまんさんが公開しているデンタルクリニックサイト
            ■ 中級(レイアウト自体は簡単だけど、オシャレな装飾の仕方を学びたい人レベル)
            株式会社ドリームラボさんのウェブサイト(アニメーションは真似しなくていいです)
            有限会社吉田印刷所さんのウェブサイト
            ■ 上級(今っぽい複雑なデザイン + フォームやタブの実装もしてみたい人レベル)
            ギャラリーサイトに載っている今風なLP

            ギャラリーサイトって、見本になるものがたくさんあるね~!

            ブログとかでよくある2カラムレイアウトを練習したい場合は?

            その場合は、SANGOのサイトがシンプルで模写しやすいと思うぜ!

            気になったらのぞいてみてね!

            コーディングの模写も、完璧に作る必要はないのかな?

            もちろんだ!

            コーディング模写の目的は、完璧に再現することじゃなく、コードに慣れる・使えるようにすることだからね。

            レイアウトとか余白などはちゃんと再現した方がいいけど、動きがついているものや画像は完璧に再現しなくても大丈夫。

            ちなみに、模写するWEBサイトの画像は「Image Downloader」っていうChromeの拡張機能でダウンロードできるよ♪

            コーディングの答えはどうやって確認するの?

            ブラウザに付いてる「ディベロッパーツール(検証ツール)」という機能を使えば、模写サイトのコードを確認できるぜ♪

            ▼以下みたいな画面のことだ。

            ディベロッパーツール,検証ツール,デバッグツール

            Windowsなら「F12」、Macなら「Cmd + Shift + C」でディベロッパーツールを開けるぜ!

            「右クリック → 検証」でもOKだよ◎

            デザインしたものをコーディングしよう!

            コーディングしていこう

            学習期間:数週間 ~ 1ヶ月

            コーディングの基礎が身についたら、デザインした制作物をコーディングしていきます。

            PCだけでなく、タブレット、スマホにも対応できるレスポンシブなコーディングをおこなっていきましょう!

            デザインにもよりますが、数週間から1ヶ月はかかるかと思います。

            コーディングが終わったら添削してもらおう!

            ご自身で作ったデザインのコーディングが終わったら、こちらもプロに添削してもらうようにしましょう!

            コードがルール違反をしていると、ブラウザによってはエラーが出ますし、検索順位に影響を与える可能性も。。。

            なので、プロにちゃんと添削してもらうことが大切です。

            マウスオーバー時の挙動なんかもみてもらうと良いですね♪

            添削は以下のサービスを利用するのがおすすめです!

            ココナラ

            ココナラ

            ココナラは、スキルを売買できるクラウドソーシングサービスで、コーディング添削を販売している人もいます。

            1ページ1,000円 ~ と格安なので、周りに添削してくれる人がいない場合は依頼してみると良いでしょう♪

            ココナラ-CodingSalonさん

            MENTA

            デザイン添削でも紹介しましたが、コードレビューにも使えます♪

            お気に入りのメンターを探して、コードレビューをしてもらいましょう!

            MENTAはこちら

            ScssやBootstrapでコーディングを爆速にしよう!

            余裕のある人は、このタイミングでコーディングのスピードアップを意識するのがおすすめ。

            方法は「Scss」と「Bootstrap」を身につけるです。

            Scssとは、CSSを簡単に書ける記法のことで、特に親子関係を簡単に記述できる点が優れていると言えます♪

            /* 普通のCSSは、親要素(.demo-code)を何度も記述するから面倒 */
            .demo-code .child-code1 {
                text-align: center;
            }
            .demo-code .child-code2 {
                text-align: left;
            }
            /* SCSSなら親要素の記述は1度で良い */
            .demo-code {
                .child-code1 {
                    text-align: center;
                }
                .child-code2 {
                    text-align: left;
                }
            }

            Scss徹底入門

            BootstrapはCSSのライブラリのことで、よく使うCSSをまとめてくれているためコーディング量が少なくて済みます。

            CSSを記述せずに横並びのレイアウトなども実現できるので、使えるようになるとコーディングが爆速になりますよ♪

            BootstrapとScssに一度慣れちゃうと普通のCSSには戻れないぜ!

            う〜ん…HTMLとCSSでさえよくわからないのに、この段階だとできる気がしないよ。

            BootstrapとScssは余裕がある人だけで大丈夫だ!

            後から身につけるでも全く問題ないしね。

            ちなみに、難しいの?

            深いところまで極めていくと複雑な面もあるけど、基本的な操作は難しくないよ♪

            ScssやBootstrapは初心者でも使いこなせるようになるから、デザインをコーディングするまでに身に付けておくのがおすすめだ!

            JavaScript(jQuery)を身につけよう!

            Javascript

            学習期間:数週間 ~ 1ヶ月

            最近のWEBサイトは動きのあるものが多いので、JavaScriptについても学んでおくのがおすすめです。

            実際に使うのはjQueryというJavaScrptのライブラリで、そこまで難しくないので早めに取り組んでおきましょう!

            とはいえ、jQueryを完璧に使えるようになる必要はありません。

            WEBサイトでよく使われる機能に絞って学習するだけで大丈夫なので、心配しないでくださいね♪

            JavaScriptってプログラミング言語じゃんか。

            私はWEBデザイナーになりたいの!

            最近はWEBデザイナーもコーディングまで担当することが増えていて、簡単なjQueryを使えるWEBデザイナーは多いんだぜ!

            だから、WEBデザイナーを目指す人も基礎を身につけておくと就職・転職活動で有利になるよ♪

            表現の幅が広がるし、慣れると楽しいしね!

            そうなんだ…。

            どこまで勉強すればいいの?

            具体的には、以下の機能を実装できればOKだね。

            【WEBデザイナーが実装できるようになりたいjQueryの機能】

            • ハンバーガーメニュー
            • スライダー
            • アコーディオンメニュー(ドロワーメニュー)
            • headerの追従
            • スムーズスクロール

            ハンバーガーメニューって、以下みたいなやつだよね?

            ハンバーガーメニュー

            クリックしたら横からヌルッとメニューが表示されるやつ…。

            できる気しないんだけど。。。

            0から実装すると大変だから「プラグイン」で代用してOKだ!

            プラグインっていうのは、「必要なコードがすでに用意されている便利パック」みたいなもので、呼び出すことでプログラマーじゃなくても簡単に機能を実装できるもののことだ。

            上記でいくつか実装できた方が良い機能を紹介したけど、プラグインを使えれば大体実装できちゃうよ♪

            つまり、プラグインの使い方をマスターすればいいってこと!?

            そういうことだ!

            もちろん、基礎的な書き方や「条件分岐・繰り返し処理」、メソッドなんかは勉強した方がカスタマイズできて良いんだけど、初めはプラグインを使えるようになることを目標にすればOKだ!

            プラグインって確か簡単に実装できるんだよね?

            それならなんとかいける気がする。。。!

            実務でもプラグインは使う?

            めちゃくちゃ使うぜ!

            このサイトのハンバーガーメニューも「hiraku.js」っていうプラグインを使ってるからね。

            確かに自分でコードを書ければ一番だけど、初めのうちは似たような機能を実装できれば問題ない。

            ユーザーは派手な動きを期待してWEBサイトを見るわけじゃないからさ。

            わかった!

            jQueryのプラグインは最低限使えるように勉強するわ!

            jQueryの基礎はプロゲートにあるコースをやればある程度マスターできるからおすすめだよ♪

            とりあえず、ここまでできればWEBデザイナーとして就職・転職活動で勝負できるレベルだよ♪

            「デザインして、WEBで見られるようにする」というWEBデザイナーとしての最低限の仕事ができるようになったからだ。

            早く仕事に就きたい人は、「jQuery習得」までを目標にして、ポートフォリオを作って、就職・転職活動に進んじゃおう!

            もう少し時間がある人は、WordPressまで身につけることを目標にしてね♪

            PHPの基礎も身につけよう!

            php

            学習期間:1週間

            WEBデザイナーも、PHPの基礎くらいは身につけておくことをおすすめします。

            というのも、全WEBサイトの1/3は「WordPress」というPHPでできたCMS※が使われているためです。

            ※ブログのようにWEBサイトを更新できるシステムのこと

            乱暴な言い方ですが、WordPressを理解していないとWEBデザイナーとして受けられる案件が1/3減ってしまうということですね!

            不安に感じたかもしれませんが、WordPressで使われるPHPは基礎部分がほとんど。

            PHPの基礎さえ身につけてしまえば、WordPressも扱えるようになります!

            WEBデザイナーって業務範囲広すぎぃ〜。。。

            PHPはどこまでやればいいの?

            基本的な書き方、変数・配列、条件分岐・繰り返し処理などについて、理解しているレベルで大丈夫だ!

            ゴリゴリに使えるようになる必要はないから安心してくれ。

            というのも、PHPを勉強する目的はWordPressを使えるようになることだからね。

            WordPressはPHPの基礎でいけちゃうものなの?

            PHPの基礎がわかってれば、WordPressは理解できちゃうね。

            難しいプログラムはWordPress側で用意してくれているから。

            オッケー。

            おすすめの勉強方法はある?

            プロゲートにPHPの基礎文法を学べるコースがあるから、それをやれば大体OKだ!

            このサイトにもPHPの基礎を学べる記事もあるから、そっちも参考にしてくれたら嬉しいぜ♪

            環境構築をしよう!

            WordPressサイトなど、PHPファイルをブラウザで表示するには、ローカル環境を構築する必要があります。

            具体的には、XAMPP(ザンプ)、MAMP(マンプ)というアプリをダウンロードし、ローカルでPHPファイルをブラウザに表示できるようにする設定を「ローカル環境構築」と言います(WordPressやPHPの場合)。

            PHPを勉強する段階で環境構築はやっておきましょう!

            やり方は以下記事に書いてあるので、参考にしてくださいね♪

            XAMPPをサクッとインストールする方法と使い方を徹底解説!

            MAMPのインストールから使い方までを3ステップ解説!

            LocalbyFlyWheelっていうアプリを使って簡単にWordPressを表示する方法もあるんだけど、できるだけXAMPPやMAMPを使って環境構築をしてみよう!

            そんなに難しくないし、WEBデザイナーはWordPressサイト以外のPHPファイルを扱うこともあるからさ。

            一度構築すれば、そのあとは使いまわせるから、今回だけ頑張ろう♪

            作ったサイトをWordPress化しよう!

            wordpress,ワードプレス

            学習期間:1~2ヶ月

            PHPの基礎を理解したら、作成したWEBサイトをWordPress化していきます。

            WordPress化することで、WordPressの仕組みや使い方なども理解できるようになるのでおすすめです♪

            就職・転職活動でも「オリジナルテーマ作成まで対応可能です!」と言えたら、かなり評価が高くなります。

            ぜひトライしておきましょう!

            WordPress化ってどういうこと?

            作ったサイトのファイルを、WordPressのシステム内に配置して、反映させるってことだよ♪

            以下記事の通りにやればWordPress化は難しくないぜ(最初はつまずきまくるけど)。

            ファイルを配置したあとは何をするの?

            WordPressのルールに合わせてPHPのコードを書き足す必要があるんだ。

            初めての時はカスタマイズするのに結構苦戦するから、どうしても困った人はWeb食いオンラインスクールで質問してみてね!

            宣伝かよ!

             


             

            ふぅ〜。WEBデザイナーの勉強って結構大変だなぁ。

            ちなみに、WEBサイトは何個くらい作るといいの?

            最低2個、できれば3個は作っておきたいところだね。「ポートフォリオ」に掲載して、キャバコのPR素材にしたいからね。

            さ、3個…!?

            WordPressまで!?

            WordPressまで実装するのは、1個で十分だ!

            1つ実装してあれば「WordPressを使えます」とアピールできるからね。

            WordPressまでを1個、デザイン + コーディングまでを1 ~ 2個作ることを目標としよう!

            ひぃいいぃぃ…!!!

            でも、これでWEBデザイナーになれるならがむばる!!

            ここまででWEBデザイナーになるための勉強は完了だよ♪

            ここまでやり切ったらもうほぼWEBデザイナーになったと言っても過言ではないぜ♪

            期間としては、最低でも3~6ヶ月ぐらいかかるね。

            うちのスクール生(未経験スタート)で、早い人だと1カ月半で就職を決めた人もいるけど。。。

            正直、再現性は低いから、相当な努力と行動量を伴わないと、1カ月半は無理と考えておこう。

            甘い言葉で勧誘してくるスクールに騙されないようにね!

            うん、私は辛いから大丈夫!

            このあとは何すればいいの?

            面接受けていい?

            次は、就職・転職するための強力な武器「ポートフォリオ」を作成して、採用される確率をさらに高めていこう!

            ポートフォリオを作成しよう!

            ポートフォリオ

            期間:2週間程度

            ポートフォリオとは自分で作った作品をまとめておく物ですが、本質は「企業に自分は何ができるのか」をアピールするための武器です。

            WEBデザイナーは資格が重要視されない代わりに、実績が求められます。

            とはいえ、ガチガチに作り込む必要はありません。

            採用担当者は「カッコ良さ」といった見た目よりも、「クライアントの目的を達成できるデザインを作ってくれるか」を重視する傾向にあるためです。

            ※厳密に言うと会社によります。アーティスティックなデザイン制作会社の場合は、見た目がかなり重視されるケースもあるので、応募する会社によって、表現を変えられると良いですね。

            ポートフォリオに記載すべき項目

            ポートフォリオには、以下の項目を記載するようにしましょう!

            【ポートフォリオに記載すべき項目】

            • 自己紹介(名前、顔写真等のプロフィール)
            • 持っているスキル
            • これまでの経歴
            • 仕事への意気込み
            • 自己PR
            • 自分の作品

            ポートフォリオは履歴書のような役割も果たすので、作品だけでなく「自分がどういった人間なのか」もわかりやすく掲載するようにしましょう!

            また「持っているスキル」は作品を見てもらうまでわからないので、ぱっと見でわかりやすく書いておくのもポイントです。

            ポートフォリオってこういうことを書くんだねぇ〜。

            紙とWEB、どっちで作るのがいいの?

            企業にもよるんだけど、WEBがおすすめだ!

            というのも、最近は動きのあるWEBサイトや、WordPressを使ったWEBサイトが多いから、機能面まで実装できることをアピールできるからだね。

            なるほど!

            WordPressまで勉強したなら、そこまでアピールしないともったいないもんね♪

            でも、どんなポートフォリオにすればいいかイメージがわかないなぁ…。

            ポートフォリオに関しては、調べればいろんな人のが見られるからそれを参考にしよう!

            イケてるWebデザインで作られたポートフォリオサイト21選まとめ

            ほぇ〜。いろんなのがあるね〜。

            Wixとかで簡単に作っていいの?

            構わないけど、せっかくデザインとHTMLなどのスキルを手に入れたんだから、自分で作るのがおすすめだよ♪

            ドメインを取得したり、サーバーにサイトをアップするみたいな手順も発生するから、勉強にもなるしね!

            ポートフォリオサイトを作る際の注意点

            ポートフォリオを作る際は、スクールで作るようなありきたりなサイトを掲載しないようにしましょう!

            というのも、採用担当者はスクールの課題などで作られたWEBサイトを見飽きているからです。

            コーディング模写したサイトを掲載するのもやめましょう!

            バレます。

            このページの通りやってきた人は、オリジナルのWEBサイトを作ってきたはずだから心配いらないぜ!

            作品については、サイトの目的やターゲット、なぜそのフォントや色、シェイプを使ったのかなどの説明も記載しておくのがおすすめだよ♪

            就職・転職活動をはじめよう!

            就職・転職活動をしよう

            活動期間:30日~

            ここまできたら、あとは就職・転職活動をするだけです。

            気になる企業を探し、求人サイトを利用して面接を受けまくりましょう!

            未経験だからといってビビる必要はなく、積極的に活動した人が勝ちます。

            就活成功のためのポイントは、「何十社落とされても気にせず応募しまくること」。

            というのも、就活にはどうしても運や巡り合わせがあるためです。

            企業の都合もあったり、他の応募者が経験者だったりする可能性は大いにありますからね。

            未経験者は誰でも大きなハンディとなるので、最初から持久戦を覚悟しておくことが大切といえます。

            とはいえ、企業のリサーチなどはしっかりとしておきましょうね♪

            面接は結構落とされるの?

            未経験の場合、誰でも落とされた経験はあるんじゃないかな?

            僕の部下も10社以上落とされたって言ってたし、行動力ある人は「50社落ちました~!」なんて言ってる人もtwitterで見かけたりするしね。

            けど、企業の採用状況にもよるし、面接を受ける側がどうこうできる問題でもなかったりするから、落とされても気にする必要はないよ。

            そうなんだね!

            確かに、企業にも都合があって、全員合格にするわけにもいかないしね。

            気にせず応募しまくろーっと。

            就活で返事の待ち時間が出ると思うから、そういう時間を使って他の勉強や新しい作品も並行して作っていくことをおすすめするぜ♪

            他にもこんなスキルがあるとWEBデザイナーになりやすい

            ここまでの知識とスキルで十分WEBデザイナーになることができますが、他にも身につけておくと有利なスキルがあります。

            【できれば身につけておきたいWEBデザインスキル】

            • Illustrator(イラストレーター)
            • Adobe XD
            • git
            • SEO
            Illustrator(イラストレーター)

            Illustrator,イラストレーター

            イラストレーターは、Adobe社のグラフィックソフトで、ロゴやイラスト作成の際に使われます。

            WEBデザインの仕事でもロゴやイラストを作成する機会もあるので、できれば身につけておきたいスキルです。

            イラレはよく使うの?

            WEBデザイン自体で使うことはそんなに多くないかな。

            ロゴはクラウドワークスのコンペとかで募集してしまうケースが多いからね(web食いのロゴもコンペ募集)。

            ロゴはベクターデータ(イラレで使われるデータ形式)で渡されるのが一般的だから、「データを開いて、書き出す」くらいの操作はできるといいね!

            「イラレが使える」のと、「イラストを描ける」というのは全く別のスキルだから、必ずしもWEBデザイナーが使いこなす必要はないよ。

            Adobe XD

            Adobe XD,XD,エックスディー

            Adobe XDもAdobe社が提供しているソフトです。

            UI(ユーザーインターフェイス)やUX(ユーザーエクスペリエンス)をデザインするために使われることが多いです。

            ワイヤーフレームやシンプルテイストのWebデザイン作成は、XDが使われることが多いですね。

            ページ遷移やヘッダーの追従機能など、webで見ずに動きを確認できる「プロトタイプ機能」もあるので、これから活躍の場はさらに増えてきそうです。

            XDの習得は難易度低いぜ!

            というのも、操作感はPhotoshopとほとんど同じだからさ。

            ちょっと触ってればマスターできるよ♪

            XDが使われることが増えてるって聞いたけど、どうなの?

            XDの機能が良くなったことで、頻度はかなり高くなったね。

            最近はワイヤーだけじゃなく、デザインもXDでやる人が増えてるし。

            時間がある人は、XDも使えるようになっておこう!

            Git(ギット)

            git,github

            gitとは、「ファイルのバージョン管理」ができるシステムのことを言います。

            バージョン管理とは、要は新しいデザインにアップデートしたり、元のデザインに戻したりすることです。

            iPhoneのアップデートをイメージしてもらうとわかりやすいかもしれません。

            gitはエンジニアのためのツールだと思われがちですが、最近はWEBデザイナーも使うことが増えてきました。

            コーディングもおこなうようになったのが、背景にあるのかもしれません。

            完璧に使いこなす必要はありませんが、仕組みや基本的な使い方は勉強しておくのがおすすめです♪

            【Gitについて詳しく知るならこちら】
            【Git基礎】インストールから使い方まで

            SEO

            SEO

            SEOとは「検索順位最適化」のことをいい、平たくいうと「どうすれば作ったWEBサイトがGoogleで上位表示されるのか」を考えて実施することです。

            基本的な考え方は、「ユーザーの役に立つサイトかどうか」が判断基準となります。

            一見WEBデザイナーには関係なさそうに思えますが、実はWEBデザインもSEOに関わりがあるのです!

            例えば、Googleは「クリックできる要素は16px以上離さないと、ユーザーが間違えてクリックしてしまうから使いにくい」と判断します。

            これを知っていれば、デザイン段階でクリックできる要素同士の距離を16px以上にする対策ができそうですよね?

            逆にSEOの知識がないと、

            Googleが良く思わないデザインになってしまう

            上位表示されない

            誰にも見てもらえない

            ということが起こり得るのです。

            これを避けるために、ある程度はSEOの知識を有しておく必要があります。

            コーディングもSEOに関わるって言われているよ!

            見出しはちゃんとh2タグなどで囲わないと、見出しと判定されなくてSEO的に良くないってことがあるんだ。

            まぁ、こんなのはほとんど影響ないけど、チリも積もれば山となるから、細かい部分もこだわろう!

            【できれば身につけておきたいWEBデザインスキルまとめ】

            • Illustrator(イラストレーター)
            • Adobe XD
            • git
            • SEO

            まとめ

            WEBデザイナーになるには、乗り越えることがたくさんあるんだね。

            そうだね。決して楽なことではないね。

            けどこのロードマップ通りに頑張れば、WEBデザイナーになるためのスキルを遠回りせずに身につけられるよ♪

            あとはやる気次第だね。

            スクールでもこんな流れなんだよね?

            うん、Web食いオンラインスクールでは全く同じロードマップを提示してるよ。

            他のスクールも大体こんな流れになってたしね。

            楽な道はないってことか!

            私、がむばる!!!

            スタートはキツく感じるけど、努力して身につけたスキルは長期間お金に変えられるよ♪

            一歩を踏み出せば意外とすんなり進めるから、まずは一歩を踏み出してみよう!

            【WEBデザイナーになるまでのロードマップ】

            1. デザインソフトの使い方習得(Photoshop)
            2. バナー模写
            3. デザインの知識習得
            4. バナー作成
            5. デザイン作成
            6. コーディング模写
            7. デザインしたサイトのコーディング
            8. jQuery入門
            9. PHP入門
            10. 作成サイトのWordPress化
            11. ポートフォリオを作成
            12. 就活・転職活動
            13. 並行して実績追加
            14. その他必要スキル習得

            メニューを閉じる