未経験から独学でWebデザイナーになるまでの全カリキュラム

未経験から独学でWebデザイナーを目指す場合に一番大切な事は、無駄な事を徹底的に省いて効率的に勉強を行い、1日でも早くWeb制作会社にポートフォリオサイトを持って面接に行く事です。とにかく形にする事に集中して下さい。

このページでは、未経験から独学でWebデザイナーになるまでの全過程をわかりやすくまとめて１つのカリキュラムにしました。

もし独学で今自分が全過程のどこにいるのかわからなくなってしまった時に、このページを見返していただく事で、今自分がカリキュラムのどの部分を勉強しているのかすぐにわかるので、行くべき道からそれる事なく、勉強を効率的に進める事が出来ます。

Webの勉強は片っ端からすべて勉強していては、どれだけ時間があっても足りません。Webデザイナーとしてデビューしてから実務を通して調べながらスキルを習得していけば良いのです。

こちらの記事で独学からWebデザイナーとしてデビューするまでの行動計画がすべてまとめてありますので是非参考にして下さい。独学からWebデザイナーになるまでの全過程は18項目です。

【手順1】ポートフォリオサイトとなるサイト名を決める

まずは、ポートフォリオサイトとなるサイト名を決める事からはじめましょう。サイト名はユーザーにとって覚えやすくわかりやすい名前が良いでしょう。

POINT:サイト名はわかりやすくユーザーに覚えやすいものを

【手順2】サイトのドメインを取得する

次にサイトのドメインを取得します。サイトを作る時には、サーバーのドメインではなく、必ず独自ドメインをとる事をおすすめします。

独自ドメインの方が、無料のドメインよりも情熱を持ってサイトのデザインや制作に打ち込めるからです。年間数百円のドメイン代をケチってはいけません。

ポートフォリオサイトと言ってもこれは宿題のサイトではないので、貴重な時間を費やして作るなら実際に長く運用出来るサイトを作るのが良いのではないのでしょうか?

Webデザイナーになる前に作ったポートフォリオサイトをどんどん進化させて5年運用するだけでもいろいろな事が学べますし、そこから学んだスキルや作成したコンテンツは間違いなくあなたの資産になります。

POINT:ドメインは早い者勝ち。.com.net.jpの中で覚えてもらいやすいものを選ぼう。

【手順3】サイトのコンセプトとターゲット・目的を決める

ポートフォリオサイトというのは、自分自身がお客さんという気持ちで作る事がとても大切です。ポートフォリオサイトを宿題・課題と思って作る人と、実際にお客さんがいると過程して作る人では、サイトのクオリティに大きさ差が生まれてしまうからです。

はじめに、サイトのコンセプトを決定し、ターゲットを設定しましょう。これらを決める時、以下の内容に沿って決めて行きましょう。

1. サイトのコンセプト(一文で言い表せるようにする)
   STACK DESIGNの場合は「Webデザイナーを目指す人の為のお役立ち情報サイト」
2. ターゲット(誰に向けて発信するサイトなのか)(年齢・職業・性別などまで決める)
3. 目的(何を伝えるサイトなのか・このサイトを見た人にどうなってもらいたいのかゴールを決める)

POINT:サイトのコンセプト・ターゲット・目的を決める事でブレずに運営を行っていく事が出来る。5W1Hで方向性を定めよう。いつどこで誰に向けて、何の為に発信するサイトなのか。それを実現する為にはどうやって見せるのか。

【手順4】ロゴをデザインする

手順3でサイトのコンセプトや目的が決まっているので、それらをロゴデザインに反映させるようにデザインをしてみましょう。

例えばAmazonのロゴには以下のような意味合いが込められています。

• A-Zまでの幅広い商品ラインナップ。
• 注文後、迅速に商品と共にスマイルをお届け。

ロゴデザインにはこのようにユーザーに視覚的にサイト運営側の思いやコンセプトを込める事が出来ます。出来ればあなたのサイトロゴにも、ユーザーに伝えたい要素を反映してみましょう。

POINT:ロゴは出来るだけシンプルに。シンプルながらもコンセプトが反映されたものがベスト。

【手順5】必要なページをリストアップする

マインドマップツールなどを使って、サイトに必要なページをすべてリストアップしていきます。ユーザーにとってこのようなページがあれば親切だなとか、こんなページがあれば、サイトの目的が達成出来るのではないかなど何でも良いので、これは必要だなというページをどんどん書き上げて行きましょう。

ここでリストアップしたものがナビゲーションやメニューなどのボタンになり、ページになります。サイト構築において一番重要な工程と言っても過言ではありません。

手を抜かずにすべての必要ページをリストアップしていきましょう。

POINT:必要なページをすべてリストアップしましょう。間違えてリストアップしてもOK。間違えたら捨てればいいんです。

【手順6】サイトマップを作成する

サイトの全体図となるサイトマップと呼ばれるものを作成します。別名サイトストラクチャーなどと言われているサイトの全体構造を表すものです。

サイトマップの作成には、いつもXmindというマインドマップソフトを使用するととても便利です。

POINT:サイトマップはサイトの全体構造を表すもの。トップページから数えて三階層になるように構成しよう。

【手順7】ページのコピーライティングを行う

Webサイトで重要なのはデザインだけではありません。Webサイトはご存知の通り、写真と画像と文章で構成されています。その中でも重要な要素である文章を適当に書いてしまってはいけません。

サイトマップでリストアップした全ページのコピーライティングをしっかりと行いましょう。

POINT:コピーライティングも、ページデザインと同じくらい大事なコンテンツ。

【手順8】ワイヤーフレームを作成する

サイトマップ完成後、次にワイヤーフレームと呼ばれる各ページの構成のレイアウトを仕上げていきます。ワイヤーフレームは、建築でいう図面のようなもので、いわゆるWebページの設計図です。

POINT:ワイヤーフレームをしっかり作成してそれをポートフォリオの資料に入れるのも良いでしょう。

【手順8】全ページをデザインする

ワイヤーフレームを元に、全ページをPhotoshopでデザインしていきます。Webページは、illustratorでデザインする方も少なからずおられますが、出来ればWeb制作業界で標準のデザインソフトPhotoshopでWebページをデザインするようにしましょう。

Photoshopは写真に強い為、Web制作業界では、ほとんどの場合PhotoshopでWebページのデザインしています。

POINT:全ページをPhotoshopでデザインしよう。

【手順9】HTML+CSSでコーディングを行う

全ページのデザインが完成後に、Photoshopで作成した1枚のpsdデザインデータをスライスして、デザインを各パーツに切り分けます。

それら切り分けたパーツをDreamweaver上でHTML+CSSを使ってコーディングを行って行きます。HTMLにエラーが出ていないかを確かめながら丁寧にコーディングを行って行きましょう。

POINT:コーディングはエラーの無いように。

【手順10】jQueryでサイト内に動きの効果をつける

HTML+CSSでコーディング完了後、サイト内に動きをつけたい場合はjQueryを使って効果をつけて行きます。jQueryは難しいイメージがありますが、実はそんなに難しくはありません。

Webサイトでよく使われている画像の切り替わるスライダーや、ドロワーメニュー・ハンバーガーメニュー・マウスオーバーの効果などが実現出来れば問題無いです。

あまりにも難しいjQueryカスタマイズを覚える必要は全くありません。JavaScriptをイチから書く必要はなく、CSSでカスタマイズしている能力が必要です。

POINT:jQueryはスライダー、マウスオーバー効果、ドロワーメニューなど主要なものだけでOK!難しいものを覚える必要無し。

【手順11】WebサイトをWordPress化する

HTML+CSS+jQueryでサイトのコーディングが完了したら、次にサイト全体をWordPress化して行きましょう。

全世界の27%のサイトがWordPressで作成されていて、その影響からか日本でもWordPressの案件が急増しています。

これからWebデザイナーを目指す方は出来ればWordPress化したものをポートフォリオサイトとして提出するのが評価につながるでしょう。

POINT:WordPressは、今後もずっと使えるスキル。必ず覚えよう。

【手順12】コンテンツをアップする

WordPress化したサイトはまだコンテンツをアップしていない状況かと思いますので、コンテンツをアップして、サイトにボリュームを出しましょう。コンテンツもターゲットを設定してそのターゲットの悩みが解決出来るものにしましょう。

最近は、「コンテンツ・ファースト」という言葉が生まれていて、これからWebデザイナーを目指す人にも間違いなくコンテンツ作成能力が問われます。

コンテンツをアップする事で、検索エンジンでどの様にランキングされているのかなどを勉強する事が出来ます。また、将来的に必ず勉強する事になるSEO(Search Engine Optimization)の知識にもダイレクトにつながります。コンテンツ作成能力とは、これからの鍵を握るスキルの一つです。

POINT:コンテンツを実際に作成して、どの様に検索エンジンにランキングされるのかを検証してみよう。コンテンツを通してSEOの仕組みを理解する事が出来る。

【手順13】サイトをFTPソフトでアップロードする

作成したサイトは自分のパソコン上にデータがあると思います。このデータをFTPソフトと呼ばれるファイル転送ソフトを使ってサーバー上にアップしてインターネット上に作成したサイトを公開します。

POINT:FTPソフトは、1日で覚える事が出来る簡単なソフト。

【手順14】サイトのデザインを紙に出力してファイリングする

サイトのアップロードと公開が完了したら、サイトのデザインをプリンターで印刷してファイリングしましょう。サイトのデザインを面接先の採用担当者に渡す為です。

面接の時に、採用担当者に紙媒体の資料を渡してモニターなどでプレゼンを行うと良いです。トップページ、カテゴリーページ、詳細ページを出力してファイリングしておきましょう。

POINT:面接先の採用担当者にファイリングしたものをそのまま渡せるようにまとめよう。

【手順15】面接を受けたい会社をピックアップする

面接を受けてみたい会社を求人サイトや、Web制作会社のホームページなどからピックアップします。

Webデザイナー・エンジニアに特化した「FindJob」「デザインのお仕事」「Green」などの求人サイトで気になる会社をまとめてみましょう。

アルバイトに強い「FromA」「an」「indeed」などではなく、ITに特化した求人サイトで探すのがおすすめです。

POINT:Webデザイナーとして就職するなら断然正社員がおすすめです。(正社員は仕事を進める上で権限を与えてもらえるから)

【手順16】履歴書・職務経歴書・ポートフォリオの準備をする

受けたいWeb制作会社がが決まれば

• 履歴書
• 職務経歴書
• ポートフォリオサイトの出力(URL付き)

この3つを準備しましょう。履歴書と職務経歴書は、細い封筒に入れるのではなく、A4のクリアファイルに入れましょう。

ポートフォリオサイトに関しては以下の資料を準備して下さい。

• サイトマップ
• サイトのコンセプト・ターゲット・目的を文章にしたもの。
• サイトのデザイン(トップページ・カテゴリーページ・詳細ページ)

POINT:これらを早く準備をして、1日でも早く面接に行こう

【手順17】面接に着ていく服装を検討する

Web制作会社の場合、服装ですが上下リクルートスーツで行く必要は全くありません。ビジネスカジュアル・オフィスカジュアルの服装が最適かと思います。

カジュアル・清潔感があって、大人なスタイルが良いと思います。

POINT:ビジネスカジュアル・ジャケット着用が良いでしょう。

【手順18】応募して面接に行く

ピックアップした会社に電話または、応募フォームからエントリーして、採用担当者からの連絡を待ちましょう。面接日の連絡があれば後は、当日準備した書類を持って面接に足を運ぶだけです。

面接当日良く聞かれる質問に関しては「Webデザイナーの面接で採用担当者によく聞かれる質問内容」で詳しくまとめていますのでご確認下さい。

まとめ

いかがでしたでしょうか？

独学で勉強を初めてからWebデザイナーとして面接に行くまで全過程をまとめて見ると18項目に分ける事が出来ました。この全過程の期間を1年も2年の長い期間を費やす事なく、6ヶ月に設定する事をおすすめしています。

独学から勉強を初めて、Webデザイナーとしてデビューするまでの期間を長くする必要は全くありません。長ければ長いほど無駄な時間を過ごす事になってしまいます。

Webの勉強をはじめた方は片っ端からすべて勉強しようとしてしまい、無駄な時間を勉強に費やしてしまいますが、細かい所の勉強はWebデザイナーとしてデビューして仕事をこなす上でその都度、調べながら勉強していけば良いのです。

もしあなたが独学でつまずいてしまいそうになった時こちらのページを参考にしていただき、今いる自分の場所を確認して下さい。「今自分はこの過程の途中にいるんだなと」常にゴールを見ながら勉強していただき、1日でも早くWebデザイナーとしてデビューしていただく事が出来れば幸いです。

形にして、行動した人からWebデザイナーになる事が出来ます。