ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > Webデザイン > Webデザイナーの独学は何から始める?ロードマップ形式で解説

Webデザイナーの独学は何から始める?ロードマップ形式で解説

Webデザイン

2023/03/30

2024/09/27

Webデザイナー 独学

「独学でWebデザイナーになりたい」
「何から学習を始めたらよいかわからない」
「Webデザイナーの独学を成功させるにはどうすればいいの?」

Webデザイナーを目指していて、このような悩みを持つ人も多いのではないでしょうか。

効率よくWebデザイナーの学習を進めるなら、まずはWebサイトに関する知識を身につけましょう。そのあとで、コーディングやデザインのような技術的な学習を行います。

この記事では、Webデザイナーの独学の進め方をロードマップ形式で解説します。Webデザイナーに必要なスキルをどんな順序で学べばよいか、ぜひ参考にしてください。

この記事で身につく内容
  • 独学でもWebデザイナーになれる理由がわかる
  • Webデザイナーを独学で目指すメリット・デメリットがわかる
  • Webデザイナーの独学ロードマップがわかる
  • Webデザイナーに必要なスキルがわかる
  • Webデザイナーの独学にはどんな方法があるかわかる
  • Webデザイナーの独学で挫折しないポイントがわかる

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Webデザイナーには独学でもなれる!

結論、独学でもWebデザイナーになることは可能です。

ただし、独学だと挫折しやすいため、学習の正しい方向性を正しく定めることが大切です。身につけるべきスキルを理解して、効率のよい勉強方法を選ぶようにしましょう。

次の項目からはWebデザイナーを独学で目指すメリットとデメリットをそれぞれ解説するので、自分が独学に向いているかを確かめながら読み進めてください。

 

独学でWebデザイナーを目指すメリット

Webデザイナーを独学で目指すメリットは、以下の3つです。

Webデザイナーを独学で目指すメリット
  • 自分の好きなものを作れる
  • 自分のペースで学習できる
  • 費用を抑えられる

 

自分の好きなものを作れる

Webデザインを独学するメリットの一つは、自分の好きなものを作れることです。

作りたいものを作ることで、学習のモチベーションが高まります。難易度の高いデザインに挑戦したとしても、楽しみながらスキルアップしていけるでしょう。

 

自分のペースで学習できる

独学なら、学習のペースやスケジュールを自由に組み立てられます。無理のない計画を立てられるので、疲れた時は休むなど、自由に学習できるのは独学ならではのメリットです。

スクールに通う場合、学習カリキュラムに従う必要があります。学習ペースが早すぎる・遅すぎる、スケジュールが合わないなどの問題も起こるかもしれません。このようなミスマッチを避けたい人には、独学の方がおすすめです。

 

費用を抑えられる

費用を抑えられることも、独学で進めるメリットの一つです。本や動画教材を活用すれば、無料でデザインスキルを身につけることもできます。

スクールに通うと受講料が高額になりやすく、経済的な負担も大きくなってしまいます。費用をかけたくない人は、独学で費用をかけずに進めるのがおすすめです。

費用を抑えて学習するなら「ZeroPlus Gate」がおすすめ!

無料でWebデザインを学ぶ

クレジットカードの登録も不要です

 

独学でWebデザイナーを目指すデメリット

Webデザイナーを独学で目指すデメリットは、以下の3つです。

Webデザイナーを独学で目指すデメリット
  • モチベーションの維持が困難
  • 時間がかかる
  • フィードバックを受けられない

 

モチベーションの維持が困難

Webデザインを独学するデメリットは、モチベーションの維持が困難であることがひとつ挙げられます。

独学は学習スケジュールを自分で考えなければならないため、計画的に行動する必要があります。しかし、計画的に行動するのが苦手な人も少なくないでしょう。また、学習に詰まった時に問題を解決できないこともモチベーションの低下に影響します。

モチベーションを維持するためには、行動面と心理面の両方からアプローチしていくことが大切です。具体的には、以下のような対策を取りましょう。

  • 目標を明確にして、逆算しつつ学習計画を立てる
  • 自分のキャパシティを把握して、無理なく続けられる方法を試す
  • 決めた目標をクリアできたら、プチご褒美を用意する

モチベーションが低下したままだと、最終的に挫折してしまう可能性が高いです。独学で進める場合は、モチベーションを維持するための工夫をしておきましょう。

 

時間がかかる

Webデザイナーを独学で目指す場合、時間がかかることは覚悟しなくてはなりません。デザインの知識は覚えることが多く、さらに手を動かして覚えていくものも多いからです。

デザインスキルが身につくまでには、短くても半年〜1年ほどの期間を見込んでおいた方がよいでしょう。

半年以内の短期間でスキルを身につけたい人は、独学よりもスクールに通うことをおすすめします。

 

フィードバックを受けられない

独学だと、フィードバックを受けられないことがデメリットです。

フィードバックとは、自分のデザインを他の人に見せて評価してもらうことです。

作成したデザインについて、良い部分はもちろん、どこを改善するともっと良くなるのかを教えてもらえるのがフィードバックを受けるメリットです。Webデザイナーはフィードバックを受けて改善を繰り返すことによって成長していきます。

しかし独学の場合、自分が作ったデザインを評価する人がいないので、フィードバックを受けられません。作っただけで満足してしまい、成長への意欲がなくなってしまう可能性もあります。

かずき先生
かずき先生
独学でも他の人からフィードバックをもらうには、積極的に他人と関わるようにすることが大切です。SNSやコミュニティを有効活用して、人脈を広げていきましょう。

 

独学かスクールに通うかの決め方

独学でもWebデザイナーとして活躍できるまでにスキルアップすることは可能ですが、デメリットも多いためスクールに通うべきか迷っている人も多いのではないでしょうか。

自分に合っている方法を選ばないと、成功する可能性は大きく下がってしまいます。

独学とスクールのどちらが向いているのかを理解して、適切な方法を選べるようにしておきましょう。

独学が向いている人

  • 計画を立てて動くのが好き
  • 自分で決めた習慣を守れる
  • わからないことはすぐに自力で調べられる

スクールで学習するのが向いている人

  • 効率よく、最短で学び切りたい
  • 一緒に学習する仲間を作りたい
  • カリキュラムに沿って動ける

独学に向いている人の要素を一言でいえば、「自走力のある人」となります。

Webデザインを独学で身につけるのは、正直簡単なことではありません。しかし、自分で学習する習慣はWebデザイナーとして活躍するために不可欠な能力です。

「独学で進めたい!」という気持ちが固まった人は、次項の独学ロードマップを読み進めてください。

「スクールもいいかも...」と思った人は、こちらの記事も参考にしてください。

 

Webデザイナーの独学ロードマップ

Webデザイナーの独学は、勉強すべきことが多いです。「何から学習を始めればいいんだろう?」とお悩みの人も多いはず。また、学習を始めてもなかなか結果を出せずに、挫折してしまうことも少なくありません。

ロードマップを意識して計画的に学習を行えば、このような挫折を防げます。自分が今どの段階にいるのかを把握して、最適な行動を取れるようにしていきましょう。

Webデザイナーの独学はどのように進めればよいか、8つのステップに分けて解説します。1回だけ読んで終わりにするのではなく、学習を進める中で何度も読み返してください。

Webデザイナーの独学ロードマップ

STEP1:Webサイトについて学ぶ
STEP2:Webデザイナーに必要なスキルを把握する
STEP3:HTML/CSS、JavaScriptでのコーディングを学ぶ
STEP4:デザインカンプ作成を学ぶ
STEP5:WordPressによる動的コーディングを学ぶ
STEP6:サーバーアップを学ぶ
STEP7:案件や求人を探す
STEP8(+α):マーケティングを学ぶ

 

STEP1:Webサイトについて学ぶ

Webデザインの独学は、Webサイトについて学ぶところから始めます。

コーディングやデザインの作成など、いきなり技術的なところから始めても問題はありません。ですが、一連の流れでスムーズに学習を行うなら、前提知識としてWebサイトの知識を持っておく必要があります

特にWebサイトの種類については、この段階で知っておきましょう。

Webサイトには、以下のような種類があります。

  • コーポレートサイト
  • オウンドメディア
  • ECサイト
  • ランディングページ(LP)
  • サービスサイト
  • ポートフォリオサイト
  • プロモーションサイト
  • ブランドサイト
  • ティザーサイト
  • イントラサイト

サイトの種類によって、それぞれ目的が異なり、求められるデザインの質も異なります。それぞれどのような目的で制作・運営されるのかを知っておきましょう。

Webサイトの種類については、こちらの記事で詳しく解説しています。併せてお読みください。

 

STEP2:Webデザイナーに必要なスキルを把握する

次に、Webデザイナーにはどんなスキルが必要なのかを把握します。

「デザイナー」といっても、デザインの作成だけが仕事ではありません。Webデザイナーに求められるスキルは多岐にわたるので、どんなスキルが必要なのかを知っておきましょう。

Webデザイナーに求められるのは、以下5つのスキルです。

Webデザイナーに必要なスキル

  • コーディングスキル(HTML/CSS、JavaScript)
  • デザインツールの操作スキル
  • デザインの基礎知識
  • UI/UXデザインの知識
  • Webに関する知識

それぞれの知識は、以降のロードマップを踏襲すれば身につけられる内容となっています。いずれもWebデザイナーには必須のスキルなので、ひとつも取りこぼさないように学習していきましょう。

 

STEP3:HTML/CSS、JavaScriptでのコーディングを学ぶ

Webデザイナーに必要なスキルを把握したら、技術的な学習を始めましょう。

最初に学習すべきは、HTML/CSSやJavaScriptによるコーディングです。

デザインの作成よりも先にコーディングの学習をする理由は、デザインを考えるときにコーディングの知識が必要になるからです。

Webサイトをブラウザに表示するには、デザインデータをHTML形式に書き換える必要があります。コーディングで実装できないデザインは、ブラウザで表示することができません。

かずき先生
かずき先生

Webデザイナー自身がコーディングまで行わないときもありますが、だからといってコーディングを考慮しないデザインデータを作ってしまうと、それを実装するコーダーの負担が大きくなります。

コーダーとの連携が悪くなれば、プロジェクト全体の進行が遅れるうえ、チームでの関係も悪くなってしまいます。スムーズに高品質なデザインを作成するためにも、コーディングの知識を獲得しておきましょう。

Webデザイナーがコーディングを学ぶべき理由は、こちらの記事で解説しています。こちらも併せてお読みください。

コーディングの学習は、Webサイトを自作するのを目標にして行うのがおすすめです。

学習の順序は、以下の通りです。

  1. Progate、ドットインストールで基礎学習
  2. 既存サイトの模写で練習
  3. 参考サイトを使いながら自作のサイト制作

HTML/CSSの学習の進め方は、こちらの記事で詳しく解説しています。

Progateやドットインストールが終わった後、どのように学習を進めればよいかわからなくなってしまうことも珍しくありません。コーディングの練習は教材を使うと効率よく進められます。

こちらの記事でコーディング練習に最適な教材を提供してくれるサービスを紹介しているので、ぜひ活用してください。

 

STEP4:デザインカンプ作成を学ぶ

このSTEP4までが、デザインを仕事にするWebデザイナーが身につけておくべき最低限のラインになります。

コーディング技術がある程度身についたら、次はデザインカンプ作成の技術を磨く段階に移ります。

ポイントは以下の2つです。

  • デザインツールの操作
  • デザイン理論の習得

まずは、デザインツールを使ってデザインカンプ作成のやり方を覚えましょう。

デザインツールには数々の種類がありますが、使用されている現場の多さ・使いやすさなどから学習するツールを決めるとよいでしょう。多くの現場で使用されているおすすめのデザインツールは、以下の通りです。

  • AdobeXD
  • Photoshop
  • Illustrator
  • Figma
  • Canva

ZeroPlus Mediaでは、AdobeXDの使い方をいくつかの記事で解説しています。AdobeXDの利用を考えている人はぜひ参考にしてください。

​​AdobeXDについて学習したい人はこちら

デザインカンプの作り方は、こちらの記事で詳しく解説しています。作成のポイントや作り方の手順を押さえて、高品質なデザインカンプを作るためにもぜひ参考にしてください。

 

デザイン基礎知識についての学習

デザインカンプの作成を学習するときには、デザインの基礎知識についても学習しておきましょう。「Webデザイナーにセンスが必要」というのは、よくある勘違いです。効果的なデザインはすべて理屈で説明できます。学問としてのデザインを理解して、意図的に良質なデザインを作れるように学習していきましょう。

デザインの基礎知識として押さえておくべきは、以下4つの知識です。

  • デザイン4原則(レイアウト)の知識
  • 余白の知識
  • カーニング・トラッキングの知識
  • 配色・トーンの知識

デザイン4原則

デザイン4原則とは、「近接」「整列」「反復」「対比」からなるデザイン作成のルールです。これを意識することで、デザインの完成度を大きく高めることができます。

デザイン4原則については、こちらの記事で詳しく解説しています。

余白の知識

デザインの作成はパーツやレイアウトなどの部分に着目しがちですが、余白が持つ重要性は無視できません。余白はただの余った部分ではなく、デザインを見やすくするためのものだからです。意識的に余白を活用することで、より洗練されたデザインを作成できるようになります。

カーニング・トラッキング

カーニングやトラッキングは、文字どうしの間隔を調整する作業のことです。デザインの作成では、テキスト(文字列)を使用しないことはほぼありません。文字間隔を意識して、見やすいデザインを作ることも大切です。

配色・トーン

色の組み合わせや、トーン(色の明るさ)の決め方にもコツがあります。特に配色はWebデザイン初心者が難しいと感じる部分でもあるので、学習しておくとよいでしょう。配色のコツについては、こちらの記事で詳しく解説しています。

 

UI/UXデザイン

デザインの基礎知識を押さえておくだけでも、効果的なデザインの作り方がわかります。それにプラスして、さらにクオリティを高くしていくならUI/UXデザインの考え方も学んでおきましょう。

UI/UXデザインとは、簡単にいえば「ユーザーが使いやすい・わかりやすいと感じるデザイン」のことです。UIは操作性(使いやすさ)を左右する要素、UXはユーザーの体験を指します。

UI・UXの具体的な例は以下の通りです。

UI:ボタンやテキストボックスの形や配置
UX:商品の選択から購入まで戸惑うことなくスムーズに行えること(その体験)

Webデザインでは、見た目だけではなく実用性も意識する必要があります。画面をただ綺麗に整えることはもちろん、その向こうにいるユーザーのことまで考えられるとよいでしょう。

かずき先生
かずき先生

特に、デザインを閲覧するデバイスによって見た目を変更する「レスポンシブデザイン」はWebデザイナーに必須の知識です。

どんなデザインを作ればユーザーフレンドリー(使う人に親切な設計)なのか」を常に考えましょう!

 

STEP5:WordPress化を学ぶ

HTML/CSS、JavaScriptによる静的コーディングとデザインの基礎知識がわかり、デザインカンプも作れるようになったら、次はWordPressを学びましょう。

WordPressとは、Webサイトの運用を楽にするためのCMS(コンテンツマネジメントシステム)です。記事の修正・更新が非常に簡単にできるようになるので、WordPressは多くのサイトで使われています。

Webデザイナーの案件でもWordPressを操作することは多いので、理解しておいて損はありません。

WordPressでできることは数多くありますが、Webデザイナーなら以下のことをできるようになっておくとよいでしょう。

  • HTMLファイルのWordPress化
  • カスタム投稿
  • カスタムタクソノミー
  • カスタムフィールド

WordPressは、以下に紹介する本で学習するのがおすすめです。

 

STEP6:サーバーアップを学ぶ

WordPress化とカスタム系の実装ができるようになったら、サーバーアップのやり方を学びましょう。

公開業務はWebデザイナーがやるとは限りませんが、例えば副業案件でデザインからコーディングまですべて対応する、という形を目指すなら覚えておく必要があります。また、実践することでWebに対する理解もより深まるでしょう。

サーバーアップの手順は、以下の通りです。

  • レンタルサーバーを契約する
  • FTPソフトを導入する
  • HTMLファイルをFTPにアップロードする

サーバーアップは実案件でも担当することが多い業務であり、今後Webサイト制作に携わるなら絶対に覚えておきたい知識です。しかし、サーバーやドメインなど、学び始めたうちはわからないことだらけでしょう。

今すぐに、すべて理解する必要はありません。自分のサイトを作ってみたらサーバーアップも行い、実際に体験しながら学ぶようにすると効果的です。

Web上に公開できる作品を作ったら、それをポートフォリオにまとめておきましょう。Webデザイナーのポートフォリオは案件獲得や転職のときに非常に重要になるので、作成のポイントを押さえておくことが大切です。

 

STEP7:案件や求人を探す

サーバーアップまでできるようになったら、案件や求人を探しましょう。実案件を獲得するまでが、Webデザイン独学の大きな目標です。

案件を獲得できたら学習が終わるわけではありませんが、あくまでひとつのゴールとして捉えておきましょう。

Webデザイナーの求人は、以下のようなサイトで探せます。

案件を探すなら、以下のような方法があります。

  • クラウドソーシング
  • SNS
  • フリーランスエージェント

副業でWebデザイナーを始めるなら、こちらの記事も参考にしていただくと動き方がわかります。

 

STEP8(+α):マーケティングを学ぶ

コーディング、デザイン、WordPress、サーバーアップと、これらすべてができるようになれば、かなりスキルの高いWebデザイナーであるといえます。さらに高いレベルを目指すなら、マーケティングの観点からデザインを考えられる状態を目指しましょう。

特にWebサイトやWeb広告などのデザイナーになる場合、SEOやマーケティングの知識が必要です。さらに、売上を増加させるにはコピーライティングセールスライティングなどのスキルも役立ちます。

このような周辺知識を身につけておけば、活躍できる案件の幅が広がって、多くの現場で求められるデザイナーとなれるでしょう。しかし、逆にいえば「デザイン」「コーディング」だけしかできないデザイナーの価値は、徐々に低くなっています。

 

Webデザイン独学の勉強方法3選

Webデザイナーを独学で目指すときの勉強方法は、大きく分けて以下の3つです。

この記事で身につく内容
  • 本を活用する
  • 学習サイト・動画を活用する
  • Webデザインスクールの無料体験を活用する

 

1.本を活用する

もっとも手軽に勉強するなら、本を活用するのがおすすめです。

世の中には数多くのわかりやすい本が出版されているので、複数の本を使って学習すればスキルが身についていくでしょう。

手元に置いておけるため、いつでも見返したり復習したりできるのも本を活用するメリットです。

Webデザインの勉強におすすめの本は、こちらの記事で紹介しています。こちらもぜひ参考にしてください。

 

2.学習サイト・動画を活用する

学習サイトや動画でデザインを学ぶこともおすすめです。

YouTubeやデザインについての情報を発信しているWebサイトを使えば、費用をかけずにデザインを学習できます。

プロのデザイナーとして活躍している人の発信を参考にすれば、質の高いスキルを身につけられるでしょう。Web業界の最新情報を追いかけられることもメリットの一つです。

ただし、動画やWebサイトは無名のデザイナーが発信している可能性もあります。そのため発信内容は鵜呑みにせず、複数の発信をもとに多面的に知識を吸収するのが賢いやり方です。

Webデザインの独学におすすめのサイト

 Webデザインの独学におすすめなサイトは、こちらの記事で紹介しています。学習サイトで勉強したい人は、使いやすそうなサイトを探してみてください。

 

3.Webデザインスクールの無料体験を活用する

「Webデザイナーになりたいけど、何から始めればよいかわからない」という場合はスクールの無料体験を活用するのがおすすめです。

Webデザインスクールの多くは、無料体験を実施しています。無料体験で聞けるのは以下のような情報です。

無料体験で聞ける情報

  • スクールで教えている内容・カリキュラム
  • Web業界に関する知識
  • デザイナーになるためのキャリア

独学で挫折しないためには、学習の方向性を決めることが大切です。スクールの無料体験は、学習の方向性を決めるヒントになるでしょう。

スクールの無料体験はZeroPlus Gateがおすすめ!

無料でスクールを体験する

まずは30日間デザインスクールを無料で体験してみよう!

 

Webデザインを作成するときの流れ

Webデザインの作成は、以下のような流れで行います。

Webデザインの流れ
  1. 参考サイトの選定
  2. ラフスケッチ作成
  3. ワイヤーフレーム作成
  4. 配色やフォント、パーツの配置などの調整
  5. 確認・修正

各工程について簡単に解説しているので、ぜひこの記事を見ながらWebデザインの練習をしてみてください。

Webデザインの作り方については、以下の記事でより詳しく網羅的に解説しています。

 

1.お手本となるデザインを探す

まずはお手本となるデザインを探すことから始めましょう。

いきなり自分の頭で考えたものを作ろうとするのはおすすめしません。Webデザインはある程度経験がないと、満足のいくものを生み出すのは難しいからです。

最初はお手本を真似するだけでもいいので、とにかくたくさんのデザインを作成して経験値を積んでいくのがベストです。

本やWebサイトを活用すれば、参考となるデザインに出会えます。

デザインのお手本を探すのにおすすめのギャラリーサイトを紹介するので、気になるものをピックアップしてみてください。

おすすめのギャラリーサイト
  • SANKOU!
  • Pinterest
  • I/O3000
  • URAGAWA

 

SANKOU!

SANKOU! 公式サイト

引用:SANKOU!

SANKOU!は、国内のWebサイト制作例を閲覧できるギャラリーサイトです。掲載されているデザインの数は豊富にあり、イメージにあうデザインを探しやすいでしょう。

SANKOU!では、STUDIOで制作する場合の参考サイトスマホ版での参考サイトも探せます。Webサイトのデザインだけでなく、フォントを検索できるページも用意されているので、Webデザインの練習には最適です。

独学でWebデザイナーを目指す人、参考サイトを探している人はぜひSANKOU!を活用してみましょう。

SANKOU!はこちら

 

Pinterest

Pinterest 公式サイト

引用:Pinterest

Pinterest(ピンタレスト)は、たくさんのデザインの中からお気に入りのデザインを「ピン」としてブックマーク保存できるサービスです。

種類豊富なタグを使用して画像を検索できるので、作りたいサイトに雰囲気が近いデザインを見つけることに適しています。例えば「おしゃれ」「かっこいい」「かわいい」などの雰囲気のほか、「美容院」「飲食店」などのテーマでも参考となるデザインを検索できます。

会員登録をするだけで無料で使用できるので、ぜひPinterestを使ってみてください。

Pinterestはこちら

 

I/O3000

I/O3000 公式サイト

引用:I/O3000

I/O3000は、国内・国外問わずWebデザインの参考となるサイトを集めたギャラリーサイトです。更新の頻度が高いため、新しいデザインを探すことにも適しています。

海外のようなスタイリッシュなデザインを学びたい人には、非常に参考になるサービスです。

テーマごとの検索はもちろん、気に入ったデザインは保存してあとで見返すこともできます。配色イメージからもデザインを検索できるので、あなたの理想とするデザインを探してみてください。

I/O3000はこちら

 

URAGAWA

URAGAWA 公式サイト

引用:URAGAWA

URAGAWAは、「どこの制作会社が作ったのか」がわかるWebデザインギャラリーサイトです。サイト内検索では、「業界」「サイトタイプ」「特徴」などのタグからデザインを検索できます。

Webデザインの参考サイト探しだけでなく、制作会社の特徴を把握するために使用するのもおすすめです。各制作会社のクリエイティブの裏側や企業のストーリーなども知ることができるので、就職・転職を考えている人は成功へのヒントを得られるかもしれません。

制作会社にフォーカスしてデザインを学びたい人は、URAGAWAを活用してみましょう。

URAGAWAはこちら

お手本となるデザインが決まったら、次はラフスケッチ作成のステップに移りましょう。

 

2.ラフスケッチ作成

参考にするデザインを決めたら、ラフスケッチを作りましょう。

ラフスケッチとは、図形や線、テキストだけで構成する簡単なレイアウト図のことです。この段階では、テキストや画像、図形などのパーツの大まかな配置や、ざっくりとしたページ内の構成を考えます。

ラフスケッチを作ることで、大まかなデザインの完成形がイメージできるようになります。デザインを作成するうえで骨組みとなる部分のため、できるだけ行うようにするとよいでしょう。

ラフスケッチを作成するときには、以下のことを意識しましょう。

  • 完成時のデザインを具体的にイメージできるようにしておく
  • できるだけ多く作成する
  • 思いついたことはメモしておく
  • 綺麗さは考えない

なお、ラフスケッチの作成はツールではなく紙とペンで行うのがおすすめです。簡単なラフの作成くらいであれば、ツールを使うよりも手書きの方が直感的に行えるためです。

ラフスケッチができたら、次はワイヤーフレームの作成へと移行しましょう。

 

3.ワイヤーフレーム作成

ラフスケッチの次は、デザインツールを使ってワイヤーフレームを作成していきます。ワイヤーフレームとは、Webサイトの設計書のようなものです。ラフスケッチをさらに具体的に、どのパーツをどこに配置するかを考えます。余白の大きさや要素の大きさは、なんとなくの配置ではなくきちんと数値で決めるようにしましょう。

なお、余白や要素の大きさは「8の倍数」で設定するのがおすすめです。

「8の倍数」ルールのメリット
  • 端数が出ない
  • 余白や要素の大きさに規則性が生まれる
  • 多くのデバイスの画面サイズと相性がいい

ワイヤーフレームを作成する時のポイントは以下の通りです。

  • 配色は考えず、白黒で設計する
  • ボタンや画像などの要素の部分は灰色の四角形を配置する
  • テキストは完成時のものを使用する

ワイヤーフレームが完成したら、次はデザインの色づけやフォントの調整を行っていきます。

 

4.画像の挿入や配色、装飾などの調整

ワイヤーフレームが完成したら、配色やフォント、配置などの調整を行っていきます。ここで作成するものは、コーダーやエンジニア、デザイナーがコーディングを行うためのデザインデータとなります。「デザインカンプ」「モックアップ」などと呼ばれることもあります。

ここで行う主な作業は、以下の通りです。

  • 画像の挿入
  • 配色
  • 装飾の作成

上記のほかにも、要素間の余白の微調整や、サイトのイメージに合うフォントの選定などを行うこともあります。

全体的なパーツの作成が終われば、デザインデータの作成は完了です。

 

5.確認・修正

最後に全体的な確認と修正を行います。

配置や配色の違和感はもちろん、デザイン内の文章に誤字脱字がないかなども入念にチェックしましょう。

確認・修正を行うコツは、デザインの完成後すぐに行わないことです。数時間ほど空けてから、最終的なチェックを行うとよいでしょう。

 

Webデザイナーの独学を成功させるためのポイント

Webデザイナーになるための独学を成功させるには、以下の3ポイントを意識して学習することが大切です。

Webデザイナーの独学を成功させるためのポイント
  • 目標を決める
  • 学習計画を立てる
  • 仲間を作る

それぞれのポイントと、どのように行動していけばよいかについて詳しく解説していきます。ポイントを押さえて、成功するための考え方を身につけましょう。

 

目標を決める

独学でWebデザイナーを目指すなら、「将来どうなっていたいのか」という目標を明確にしておくことが大切です。

最初に目標を決めておく理由は、主に以下の2点です。

  • モチベーション管理のため
  • 学習計画を立てやすくするため

目標を決めておけば、将来自分が活躍している姿をイメージできるようになり、モチベーションの向上・維持に効果的です。Webデザインの学習は独学だと挫折しやすいため、目標を設定して目的意識を持ちながら学習を継続させることが必要になります。

また、目標とは言い換えれば「将来自分がどんなポジションで、どんなふうに活躍しているか」を決めることです。これがイメージできれば、このあと学習計画を立てるときに効率化を図れます。

以下の例を参考に、目標を設定してみましょう。

  • 副業で案件を獲得する
  • Webデザイナーとして転職する
  • フリーランスのWebデザイナーとして独立する

それぞれ、「副業で案件をクリアできるレベル」「企業のWebデザイナーとして業務に従事できるレベル」「フリーランスで生計を立てられるレベル」と、目標に応じて目指すべきレベル感が明確になります。学習計画を立てやすくするためにも、理想の将来像を用意してみてください。

Webデザイナーの独学を成功させるポイントは、まず目標を決めておくこと。何となくで学習を始めないことが大切です。

 

学習計画を立てる

目標が決まったら、次に行うのは学習計画の立案です。こちらも独学を成功させるために欠かせないフェーズといえます。

学習計画は以下のように設定するとよいでしょう。

  • 毎日学習する時間を決める(平日は2時間、休日は5時間など)
  • 週ごとにクリアする中間目標を決める(今週は静的サイトの構築、次の週はデザインツールの使い方...)
  • 平日はインプットの時間、休日はアウトプットの時間にする

学習計画を立てるときのコツは、無理なく毎日続けられるようにすることです。「どれだけ疲れていても、最低限これだけはやる」ということを決めておけば、学習時間が少なくても罪悪感を抱かず、モチベーションを下げずに学習を継続できます。

最初からガッツリやろうとせず、様子を見ながら少しずつ学習時間を増やしていくようにしましょう。

また、学習計画の中では中間の目標を決めておくのも効果的です。例えば週ごとに

  • 「HTML/CSSで静的なサイトを作る」
  • 「JavaScriptでアニメーションをつける記述を理解する」
  • 「デザインツールの使い方を覚える」

など細かく目標を決めて学習すれば、インプットとアウトプットをバランスよく実践できます。

かずき先生
かずき先生

「何時間勉強する」という計画でも最初は問題ありませんが、学習に慣れてきたら時間ではなく「作る」ことを目標にしてみましょう。

学習計画は、最初からうまくいくことの方が珍しいです。何回か試しては別の方法を探して、自分に合ったやり方を探しましょう。意識すべきは、学んだことを実践するアウトプットの時間を作ることです。

 

仲間を作る

学習計画を立てたらあとは実践あるのみですが、より効果的に学習を行うなら仲間を作りましょう。Webデザイナーを目指す同志がいれば、お互いに相談しながら学習を進められます。将来案件を紹介してもらったり、助けあったりできることも仲間を作るメリットです。

身近にいる人と一緒にやるのももちろんおすすめですが、周りにデザインの勉強をしている人がいない場合はオンラインのコミュニティに参加してみましょう。

コミュニティは、インターネットでの検索やSNSを活用すれば見つけやすいです。新しい環境に飛び込んで、仲間を作ってみましょう。

コミュニティを最大限に活用するコツは、以下の通りです。

  • 主体的に動く
  • 自分より実力のある人に積極的に関わりにいく
  • 他の人を巻き込む
かずき先生
かずき先生
新しい環境に飛び込んだら、自分からどんどん動くことが大切です。学習のためにコミュニティを活用するなら、案件をたくさん獲得している人のところに積極的に関わりにいきましょう。自分の作品を見て感想をもらう、わからないことを質問するなど、他の人を巻き込むように行動するのも効果的です。

 

Webデザイナーの独学には資格の取得もおすすめ

 Webデザイナーを目指すなら、資格の取得を狙うのもおすすめです。資格は就職に必要というわけではありませんが、持っておいて損はありません。何より資格取得のために勉強することで深い知識が身につき、自信につながります。

Webデザイナーにおすすめの資格は以下の7つがあります。

Webデザイナーにおすすめの資格7選
  • HTML5プロフェッショナル認定資格
  • ウェブデザイン技能検定
  • Web検定
  • Webクリエイター能力認定試験
  • ITパスポート試験
  • CG-ARTS検定
  • Adobe認定プロフェッショナル

それぞれの資格については、以下の記事で詳しく解説しています。資格に興味のある方はぜひ参考にしてください。

 

独学が不安な人・挫折しそうな人はスクールも検討しよう

ここまで、Webデザイナーの独学について解説してきました。このロードマップを意識すれば、効率よく学習を進められます。しかし実際に独学を始めてみると、想像しているよりも大変だと感じるはずです。どうしてもうまくいかず、Webデザイナーを諦めてしまう人も少なくないでしょう。

独学でやり切れるか不安な人や、今にも挫折しそうになっている人は、スクールに通って学習することも検討してみましょう。独学ほど自由には進められませんが、業界知識のある人のもとで効率よく学べるのはスクールならではの魅力です。

費用の問題でWebデザインスクールに通えないと考えている人は、無料スクールに通うことも視野に入れてみてください。

完全無料でWebサイトの制作を学ぶなら、ZeroPlus Gateがおすすめです。Webデザイナーに必要なコーディングスキルをたったの1ヶ月で身につけられます。独学でうまくいっていない人、学習のサポートをしてくれるメンターをつけたい人は、ぜひZeroPlus Gateを受講してみてください。

公式サイトはこちら

 

まとめ:Webデザイナーの独学はロードマップを使って効率よく進めよう

Webデザイナーの独学は、ロードマップを意識して進めていくことが大切です。自分の学習の進みを見える化して、今のレベルに合った学習をしていきましょう。

Webデザイナーの独学ロードマップ

STEP1:Webサイトについて学ぶ
STEP2:Webデザイナーに必要なスキルを把握する
STEP3:HTML/CSS、JavaScriptでのコーディングを学ぶ
STEP4:デザインカンプ作成を学ぶ
STEP5:WordPressによる動的コーディングを学ぶ
STEP6:サーバーアップを学ぶ
STEP7:案件や求人を探す
STEP8(+α):マーケティングを学ぶ

ただし独学だと挫折しやすいため、学習計画を立てておくことが大切です。まずは必要なスキルを理解して、どんな学習を行えばよいのかを把握しましょう。Webデザイナーになるなら、デザインの基礎知識だけでなくコーディングやWebマーケティングに関わる部分も学習する必要があります。

スキルの高いWebデザイナーを目指して、独学を成功させられるように頑張りましょう!

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の監修者

首藤和希

営業10年&自動車整備士からWeb制作のフリーランサーに。 案件のディレクションと営業に精通。未経験の社会人の方でも「Webの世界へ」飛び込めるようポジティブかつ有益な情報を発信してます。

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから