【完全版】未経験者が独学でwebデザインを習得するロードマップ

この記事では、Webデザインのロードマップについてまとめました。

【この記事はこんな人に読んでほしい!】

  • 自分にとって使いやすいオリジナルサイトが作りたい
  • Webデザイン業界への転職に興味がある
  • フリーランスで役立つスキルを身につけたい

無料で使える学習サイトやWebツール、持つべき本も紹介しています。

それでは、早速見ていきましょう!

目次

Web制作・Webデザインとは

Web制作とは、新規のWebサイトの制作や既存ホームページの変更を行うことです。

また、ホームページの更新やコンテンツの追加、リニューアルに伴う制作も含まれます。

Web制作を行う目的として、個人であればWeb業界への転職における実績提示や企業であればコンテンツの発信・サイト集客などが挙げられます。

【簡単5ステップ!】Webデザインスキルを独学で習得するためのロードマップ

未経験者でもWebデザインを独学で習得できるロードマップを解説します。

  1. 目標や作りたいものを決める
  2. Webデザインツールのインストールと使い方を習得|Adobe・Photoshop・Illustrator
  3. コーディングの基礎学習|HTML・CSS・JavaScript・jQuery・WordPress
  4. ひたすらトレース(模写)を繰り返す|Photoshop
  5.  オリジナルポートフォリオやブログを制作|Photoshop・WordPress

5つのステップをこなすだけで、実用的な自分だけのホームページが作れること間違いなしです!

一つずつ見ていきましょう。

ステップ①:目標や作りたいものを決める

目標を設定しないと挫折する原因にもなるので、明確に目標は決めましょう。

ネットサーフィン中にいいなと思ったサイトを参考にしながら、作ってみたいWebサイトを構想してみてください。

ステップ②:Webデザインツールのインストールと使い方を習得|Adobe・Photoshop・Illustrator

Webデザインを本気でするなら、Adobe Creative Cloud コンプリートプランを必ずインストールしましょう!

サブスクリプション形式なので月額5,680円(税別) かかり、20種類以上のAdobeツールが提供されています。

  • Photoshop
  • Illustrator
  • Adobe XD
  • Dreamweaver
  • Premiere Pro
  • After Effects
  • Acrobat

それぞれ単体プランで購入するよりもお得に契約することができます。

インストールが終われば「Adobe XD」の公式チュートリアルで基礎を習得してください。

ステップ③:コーディングの基礎学習|HTML・CSS・JavaScript・jQuery・WordPress

まず、Webサイトの骨組みとなるHTMLとホームページの装飾に使われるCSSの基礎から学習を始めます。

私が実際に使ったおすすめの学習サイトをお伝えします!

  • 【無料】Progate|「HTML&CSS」講座の学習コース・道場コース
  • 【無料】Youtubeチャンネル|しまぶーのIT大学
  • 【セールで安く手に入る!】Udemy|HTML5+CSS3 手を動かしてマスターするWEBデザイン/プログラミング動画講座

また、jQueryはJavaScriptのライブラリで、簡単な記述でJavaScriptの動きを再現可能です。

jQueryでは、クリックイベント・マウスイベント・ブラウザイベントなどのホームページのアニメーションを付け足すことが出来ます。

趣味程度であれば、jQueryのプラグインを使いこなせるようになるだけでも十分です。

そして、Webプログラミング最後は、HTML&CSSで作ったサイトをWordPressで表示させてみましょう!

ちなみに、WordPressを推奨する理由は、初心者がつまづきがちなPHPを覚える必要がなく、非常に扱いやすいからです。

jQueryとWordPressに関してもProgateを使って勉強するのがおすすめです。

以上のプログラミング言語に関しては、日本語の解説サイトや技術系ブログが大変充実しているので、お金がなくても気軽に勉強することができます。

ステップ④:ひたすらトレース(模写)を繰り返す|Photoshop

PhotoshopやIllustratorを使ってホームページのデザインを丸ごと模写しましょう。

この段階では、Webデザインに欠かせない画像加工やロゴ作成、Webサイトのレイアウト構成を意識してください。

また、デザインデータの見本である「デザインカンプ」を使ってコーディングの練習をするのもおすすめです。

デザインカンプの見本は有志の無料サイトがたくさんあるので、自分の好きなホームページを参考にしてみてくださいね。

ステップ⑤:オリジナルポートフォリオやブログを制作|Photoshop・WordPress

ポートフォリオは自分の実績を示すための作品集として使えます。

ポートフォリオや自作ブログを作るときは、まずレンタルサーバー(出来れば有料)とドメインを用意することから始めましょう。

そして、ブログのテーマやデザインを決めていきます。

ここで、ブログ制作に役立つおすすめのWebサービスを紹介します。

  • 画像・写真収集|Pintarest
  • サムネイル作成|Canva
  • ファビコン|icon8
  • Webデザインギャラリー|MUUUUU.ORG

全て無料で提供されているので、ぜひ使ってみて下さいね。

また、ポートフォリオを作成する時に最低限記載すべき内容は以下の通りです。

  • サイト名(URL)
  • 公開年月日
  • 作業内容
    • 作品の目的・コンセプト・ターゲット・作業範囲
  • 制作期間
    • スケジュール概要・実作業時間
  • 制作環境
    • サーバー環境・使用ツール
  • 作品の説明文や工夫点
  • 成果
    • アクセス数・ダウンロード数・コンバージョン率

以上の内容を参考にして、自分を最大限にアピールできる作品を作ってくださいね!

初学者におすすめしたいWebデザインの本

「Webデザインの本、たくさんあってどれを買えばいいのかわからない」という初心者の方へおすすめしたいWebデザインの本を紹介します。

  • 1冊ですべて身につくHTML&CSSとWebデザイン入門講座
  • ノンデザイナーズ・デザインブック

それでは、一つずつ見ていきましょう!

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

HTMLとCSS、Flexboxはもちろん、Webサイトの仕組みや作り方やコンテンツの配置や配色、使用するツール、レスポンシブ対応などWebデザインに関する内容も充実しています。

また、完成したファイルはサポートページからダウンロードできるため、答えが書かれたサンプルコードを見ながら練習することができます。

このように、実際に手を動かしながら簡単なWebサイトを作成できる内容になっています。

HTMLやCSSなどのWeb制作についての本は、1冊持っておくと便利ですよ!

おすすめ②:ノンデザイナーズ・デザインブック

人が見やすい・美しいと感じる「デザインのルール」について丁寧に説明している本です。

デザインの基本について図解を使った分かりやすい説明や読者にデザインの知識をアウトプットさせるセクションがおすすめです。

今まで感覚的や直感的にデザインを行っていたのであれば、説明性を持ったデザインをできるようになります!

まとめ:未経験からWebデザインを習得してオリジナルサイトを作ろう!

今回は、Webデザイン未経験からでも習得できるロードマップを徹底的に解説してきました。

他のプログラミング言語と異なり、比較的ツールやプラグインも豊富で日本語での解説サイトも充実しています。

そのため、ITやWebに馴染みがなかった方でも気軽に始めることができます。

また、クラウドソーシングでの案件数も多く、未経験からでも仕事を獲得しやすいというメリットもあります。

解説した手順を参考にしながら、オリジナルWebサイトを作ってみてくださいね!

もし、自分でWebデザインを学ぶことが難しいと感じたら、Webデザインスクールに通うことも検討しましょう。

あわせて読みたい
給付金がもらえるWebデザインスクールまとめ! Webデザイナーになりたいと思った時、脳裏を過ぎるのが「学費」などの費用ではないでしょうか。お得にWebデザインの勉強ができるスクールがあったらいいですよね。 今回...
よかったらシェアしてね!
目次
閉じる