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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

学習期間を設定しよう！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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デザインの勉強を本格的にスタートしていきます！

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

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

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

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

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

バナー模写のやり方

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

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

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

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

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

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

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

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

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

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

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

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

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

バナー模写のやり方

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

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

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

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

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

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

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

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

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

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

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

バナーで宣伝する商品・サービス

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

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

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

ターゲットユーザー（誰に売りたいか？）

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

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

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

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

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

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

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

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

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

コンテンツの優先順位

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

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

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

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

バナーのサイズを決める

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なるほどデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WEBサイトを作る目的

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

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

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

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

商品・サービス

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

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

ターゲットを決める

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

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

サイトマップの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考サイトを決めよう！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PLUS REVIEW

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

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

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

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

⇒PLUS REVIEWはこちら

MENTA

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

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

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

⇒MENTAはこちら

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

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

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

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

Progate（プロゲート）

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

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

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

⇒Progate（プロゲート）はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript（jQuery）を身につけよう！

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

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

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

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

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

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

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

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

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

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

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

環境構築をしよう！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

バレます。

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

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

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

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

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

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

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

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

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

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

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

Illustrator（イラストレーター）

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

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

Adobe XD

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

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

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

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

Git（ギット）

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

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

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

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

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

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

SEO

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

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

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

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

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

逆にSEOの知識がないと、

Googleが良く思わないデザインになってしまう
↓
上位表示されない
↓
誰にも見てもらえない

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

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

まとめ