Webデザイナーを目指していて毎日勉強を頑張っているけど、自分の勉強方法が間違っていないのか心配している。毎日、時間が過ぎていくばかりでスキルアップ出来ていない自分に、焦りを感じていないでしょうか？

私も独学からWebデザイナーになったので、その気持ちが本当によくわかります。独学時代この勉強方法で本当にあっているのか、前に進めているのかわからなくて毎日とても不安な思いをしたのを覚えています。

Web制作の勉強はとにかく時間がかかるので効率的に進めていかなければなりません。まずは勉強する前に、覚える事を整理して、ゴールまでの設計図を作る必要があるのです。

このページは、3ヶ月間でWebデザイナーに必要なスキルと知識を身につける為にどのようなソフトを使用してどのようなスキルを勉強すれば良いのかがわかるようになっています。ぜひ参考にして下さい。

独学をスタートする前にゴールを設定する

独学をスタートする前に、ゴールを設定する必要があります。3ヶ月間で、Webデザイナーを目指す為に必要な事は、資格取得や検定試験を受ける事ではありません。

何よりも大切なのは、応募先の制作会社に提出するポートフォリオサイト(作品サイト)を作る事です。ポートフォリオサイトなしでは、未経験から採用してもらえないのです。まずは3ヶ月間であなたの履歴書となるポートフォリオサイトを作成する事が最優先事項です。

POINT:Webデザイナーになる為の最初のゴール設定は、3ヶ月(90日間)でポートフォリオサイトを完成させる事。

【1ヶ月目】サイトの企画を行いロゴ・ページをデザインする

初めの一ヶ月目はポートフォリオサイトを作る為の下準備期間となります。デザインソフトの使い方を覚えてデザイン力を身につける1ヶ月間です。

1.HTML+CSSの基本を習得しよう

Webデザイナーを目指すなら、HTML+CSSの知識を身につける必要があります。HTMLの仕組みを把握してこそ、使いやすいサイトをデザインする事が出来るからです。HTML+CSSは言語の中でも一番覚えやすいと言われているので比較的簡単に習得する事が出来ます。

HTML+CSSの基礎を学ぶ為には以下のサイトがおすすめです。短期間で覚える事が出来ますので、ぜひ活用してみて下さい。

ドットインストール

POINT:HTML+CSSの使い方の基本を習得しよう。HTMLは他の言語と比べると、習得しやすい言語です。短期集中型で習得してしまいましょう。

2.サイトのコンセプトや概要を決めよう

HTMLの基本を習得後、これから作成するポートフォリオサイトのコンセプトと概要を決めます。ポートフォリオサイトでよく作成されるのが以下のものです。

1. 架空の飲食店や店舗のサイト
2. 架空の企業・会社のコーポレートサイト
3. 架空のキャンペーンサイト
4. 自分の学習ブログ

Web制作会社では、広告やキャンペーン・お店・飲食店などの案件が非常に多いので1〜3までの架空の企業サイトを一つ作ると良いかと思います。架空のサイトでも、お客さんの為にデザインしているという気持ちは大切です。手を抜く事なく丁寧に作成して下さい。

また自分の学習ブログもポートフォリオサイトとして提出する事が出来れば、採用担当者の評価につながります。Web制作会社では、常にアンテナを張り巡らせ自ら勉強出来る人を積極的に採用したいと考えているからです。

自分の学習ブログに関しては、テンプレートデザインでもOKだと思います。これからポートフォリオサイトを作るにあたり、使った技術やテクニックなどをメモするようにブログに綴って行きましょう。

学習ブログにアウトプットする事で、好きな時に読み返せますのでテクニックを深く理解する事が出来、スキルの確実な習得につながります。

作成するポートフォリオサイトが決まったら、サイトのコンセプトと概要を決めていきます。これから作成するサイトは誰に何の情報を伝える為のサイトなのかを考えてみましょう。STACKのサイト概要は「未経験からWebデザイナーを目指す人の為のお役立ち情報サイト」です。

POINT:あなたのサイトのコンセプト概要をわかりやすい一文で作成してみましょう。

3.illustratorでサイトのロゴをデザインしよう

サイトのコンセプト・概要の決定後、ポートフォリオサイトに使用するロゴをillustratorでデザインしてみましょう。ロゴは、Webブランドを構築する為の大切な要素の一つです。サイトのコンセプトにふさわしいロゴをデザインしてみましょう。

illustratorを習得する為には、「illustratorの使い方」「illustrator ロゴデザイン」のような内容の参考書で練習しながら学ぶ事が出来ます。

POINT:ロゴデザインのポイントは、とにかくシンプルにする事です。派手なものよりもシンプルで力強いロゴをデザインしましょう。

4.サイトマップを作成しよう

サイトマップは、Webサイト全体の地図の事でトップページからの階層と、必要なページを全てリストアップしていく作業です。サイトマップを作成する事で、サイトの全体を把握出来る為、どのページをデザインする必要があるのかすぐにわかるようになります。

POINT:サイトマップは三階層で作成しましょう。三階層でサイトを作成する事で、ユーザーも迷いにくく、検索エンジンも巡回しやすくなります。

5.サイトのレイアウトスケッチを書こう

サイトマップが完成したら、次はサイトの各ページのレイアウトスケッチを書いていきましょう。制作現場では、ワイヤーフレームというサイトレイアウト図をデザインソフトなどを使って作成しますが、自分一人でサイトを作成する場合は、手書きのスケッチでも全く問題ありません。

最近はスマートフォンサイト・タブレットに対応させる事が必須となっていますので、PCサイトとスマートフォンサイト・タブレットの3つをスケッチしましょう。

以下の要素をレイアウトしてスケッチをしてみてください。

• ロゴ
• ナビゲーションボタン
• メイン画像
• ヘッダー・フッター
• コンテンツとなる記事
• コンテンツのサムネイルの配置

POINT:サイトのレイアウトスケッチを書く事はとても重要な作業です。どこに何の要素を配置するかでWebサイトの使い勝手は大きく変わります。いろいろなサイトを参考にしてユーザーからみて使いやすく見やすいレイアウトを作成しましょう。PC・スマホ・タブレットのスケッチを書いてみましょう。

6.Photoshopでページのデザインをしよう

レイアウトスケッチ完了後、作成したスケッチを元にPhotoshopを使ってヘッダー、フッター、ボタン、アイコンなどをすべてデザインしていきます。

Webページをデザインする場合には、Photoshopをメインに使ってデザインしていくのですが、初めはPhotoshopの使い方に慣れるまで大変かもしれません。Photoshopは多機能で習得出来るまでにかなりの時間がかかるからです。

Photoshopを独学で覚える為には本や参考書よりも動画・またはスクールなどで学んだ方が短期集中型で早く確実に習得する事が出来るでしょう。

POINT:Photoshopを使ってWebページをデザインしましょう。Photoshopを習得する為には参考書よりもオンラインスクールや、WebデザインスクールのPhotoshopコースに短期間で通う事がおすすめです。「絶対に挫折しないPhotoshop基礎デザイン講座」がおすすめです。

【2ヶ月目】HTML+CSSのコーディングを行う

2ヶ月目ここからは、Photoshopで作成したデザインデータを元にしてDreamweaverというソフト上でHTML+CSSを使ってWebページに変換していくコーディングという作業に入ります。コーディングは肯定の中でも特にテクニカルな作業になりますが、自分のデザインしたサイトが、Webページとして出来上がっていくのはとても楽しい事です。それでは早速始めていきましょう。

1.Dreamweaverを使ってHTML+CSSでコーディングをしよう

デザインしたPhotoshopデータをスライスして、Webパーツとして書き出します。それらの画像をDreamweaver上でHTML+CSSを使って記述を行いホームページに変換していきます。これがコーディングと呼ばれる作業です。デザインした全ページのコーディングを行いWebページを作成していきましょう。

POINT:Dreamweaver上で、HTML+CSSを使ってコーディングを行いましょう。HTML+CSSに関しては、紹介させていただいたドットインストールがおすすめです。動画で短期間で学ぶ事が出来ます。

2.jQueryでサイトに動きをつけよう

jQueryはJavaScriptのライブラリーで、難しいJavaScriptをイチから記述する必要がありません。ノンプログラムのWebデザイナーでも扱えますので、サイトに簡単に動きをつける事が出来ます。

複雑なものを作る必要は全くなく、トップぺージのメインのスライダーであったり、スムーススクロール、またはマウスオーバーの効果などを作る事が出来れば良いでしょう。

POINT:jQueryは、複雑なものを作る必要はありません。トップページのスライダーやスクロール効果、マウスオーバーの効果をつける事が出来ればOKです。

 

【3ヶ月目】WebサイトにWordPressを導入しよう

3ヶ月目はWebサイトをWordPress化していく1ヶ月間です。

WordPress社の発表によると世界のWebサイトの27%のサイトはWordPressで作成されているそうです。その影響を受けて日本でもWordPressを使った案件が非常に増えていますのでポートフォリオサイトをWordPressサイトで提出すると採用担当者に好印象を持ってもらえるでしょう。

1.WebサイトをWordPress化しよう

サイトをWordPress化する事で、ブログのような更新性の高いホームページにする事が出来るので、コンテンツの量産を簡単に行う事が出来るようになります。仕事の案件においてもクライアントの方で更新出来るホームページを作る事が出来ます。クライアントからすると更新依頼をいちいちかける必要がないのでとてもありがたいシステムなのです。これがWordPressサイトが急増している一番の理由です。

これからもホームページは、WordPressサイトが増えていく事は間違いありません。この機会にWordPressの勉強をスタートして、早めに習得する事をおすすめします。正に手に職のスキルといえるでしょう。

POINT:WordPressの勉強は、WordPressレッスンブックの参考書を1冊勉強すれば、インストールから導入、カスタマイズまでを学ぶ事が出来ます。WordPressの勉強は難しい印象がありますが、ノンプログラマの人でも使いやすいように設計されているので比較的簡単に導入する事が出来ます。

2.WordPressのプラグインを導入しよう

WordPressには、様々なプラグインが用意されています。例えばお問い合わせフォームのプラグインを使えば5分程でお問い合わせページが作成出来ますし、関連記事のプラグインを使う事で指定したページに関連記事や関連ページを簡単に表示させる事が出来ます。

ポートフォリオサイトで使用すると良いプラグインは以下のようなものがあります。

• お問い合わせページ
• 関連ページを表示させる
• All In One SEO (SEO最適化)
• ページ送り機能
• ぱんくず表示機能
• ページトップへ戻る

プラグインを導入する事で、CMSならではの動的なサイトを作成する事が出来ます。

POINT:WordPressのプラグインは、あらゆる機能を簡単に導入する事が出来ます。WordPressは使っている人も多いので、ネット上で検索すればたくさんの解決ページがあります。WordPressサイトにプラグインを追加して機能的なポートフォリオサイトを作成しましょう。

ポートフォリオサイトこそがあなたの履歴書

今回は、3ヶ月でWebデザイナーになる為に具体的に何を勉強すれば良いのかをご紹介させていただきました。3ヶ月という期間でムダなく効果的にスキルアップしていく為には、ポートフォリオサイトを作成しながら同時に勉強していくのが一番です。

最後にもう一度まとめさせていただくと、ポートフォリオサイトを作成する上であなたが習得するべきソフトとスキルは以下の通りです。
【3ヶ月間で習得するソフトとスキル】

• Photoshop
• illustrator
• Dreamweaver
• HTML+CSS
• jQuery
• WordPress

【1ヶ月目〜サイトの企画を行いロゴ・ページをデザインする】

1. HTML+CSSの基本を習得しよう
2. サイトのコンセプトや概要を決めよう
3. illustratorでサイトのロゴをデザインしよう
4. サイトマップを作成しよう
5. サイトのレイアウトスケッチを書こう
6. Photoshopでページのデザインをしよう

【2ヶ月目〜HTML+CSS、WordPressのコーディングを行う】

1. Dreamweaverを使ってHTML+CSSでコーディングをしよう
2. jQueryでサイトに動きをつけよう

【3ヶ月目〜WebサイトにWordPressを導入しよう】

1. WebサイトをWordPress化しよう
2. WordPressのプラグインを導入しよう

3ヶ月(90日間)あればすべてのカリキュラムを独学でこなす事は十分に可能です。もしあなたが、オンラインスクールや学校に行く事を検討しているのでしたら、ご紹介させていただいたスキルがカリキュラムに含まれるのかを確認してみてください。

スクールの選び方に関しては「初心者・未経験者の為の失敗しないWebデザインスクールの選び方」で詳しくご紹介しています。

この記事を参考にしていただき、自信のあるポートフォリオサイトを作成して、Webデザイナーとしての道をあなたの手で切り開いていただければ幸いです。