未経験からWebデザイナーを目指したい。いろいろな参考書を買っては独学でWeb制作の勉強しているけどうまくいかずに挫折していませんか？

挫折してしまう一番の原因はWeb制作の一連の流れを把握出来ていない事、ゴールを設定出来ていない為です。制作工程の流れを把握していなければ、その都度いろいろなテクニックに目が行ってしまい、広く浅く勉強して遠回りをしてしまう事に。結局、何も理解出来ないまま時間だけが過ぎていくという悪循環に落ちいってしまいます。

この記事では、そのような効率の悪い勉強を断つ為に、Web制作の流れとWebデザイナーに必要なスキルをわかりやすく解説しています。効率的に勉強を進めていただき、独学に自信をつけてWebデザイナーとしてデビューしていただければ幸いです。

１.illustratorでロゴをデザインしよう

web制作において、illutratorはwebアイコンの作成、ロゴの作成、イラストパーツの作成などに使用します。あなたが作成したいwebサイトのロゴをillustratorを使ってデザインしていきましょう。

ロゴをデザインする時は、紙にスケッチをして、illustratorでヴィジュアル化していきます。

サイトのコンセプトや、サイトを通して伝えたい事などが、ロゴに反映されているとユーザーにも何を発信しているサイトか伝わり、webブランディングに直接的につなげる事が出来ます。

ロゴデザインはブランドの象徴となるシンボル的役割を果たします。型に縛られる事なく、自由な発想であなたの納得のいくロゴをデザインしてみましょう。

2.PhotoshopでWebデザインを行う

2-1.Photoshopを勉強する前に基本的なHTMLを習得しよう

PhotoshopでWebデザインを行う前に、ホームページを作る為の言語である基本的なHTMLを習得しましょう。HTMLの基本的な使い方を理解してこそ、機能的で美しいWebをデザインする事が出来ます。

 

2-2.Photoshopを使ってWebデザイン力を身につけよう

まず初めにPhotoshopを使ってWebデザイン力を身につけていきましょう。

何かを作る時には必ず完成図を先に作る必要があります。建築でもプロダクトでもインダストリアルでもまず初めに完成予想図としてデザインを起こし、制作に取りかかりますよね。Web制作の場合もはじめにWebデザインを起こしてサイトの着地点を決めるのです。着地点さえ決まっていれば作業も効率的に進める事が出来るようになる為、勉強もスムーズに進める事が出来るでしょう。

Webデザインに使用するソフトは業界標準のPhotoshopです。Photoshopが制作現場でWebデザイナー必須のソフトとなっています。その為まずはPhotoshopのスキルを習得していく事が何よりも大切なのです。

2-3.Photoshopで習得したい基本スキル

1. Photoshopの基本操作をマスターする
2. 写真をリサイズ（サイズ変更）する力をつける
3. 写真補正・写真加工力をつける
4. 写真を切り抜き力をつける
5. バナーデザイン力を身につける
6. Webパーツ(ボタン・ボックス・フォームなどをデザインする)
7. Webページをデザインする。

2-4.PhotoshopでWebページをデザインする

Photoshopの基本操作を習得後、Webサイトの全ページをPhotoshopでデザインしていきましょう。Photoshopを使ったデザイン力は、Webデザイナーに必須のスキルです。

Photoshopを使ってデザインを可視化する力を身につける事が出来ると、デザイナーとしての仕事の幅が格段に広がります。

3.DreamweaverでHTML5+CSS3を使ってコーディングを行う

3-1.Photoshopで作成したデザインをコーディングする

手順3で作成した、Photoshopのデザインデータを元にAdobe のDreamweaver上でHTML+CSSを使ってコーディング(プログラミング)をして、Webページを作成していきます。DreamweaverはWeb制作の現場で標準のWeb開発ソフトとして使用されています。

3-2.Webデザイナーはコーディングも必須項目

Webページをデザインするだけではなく、コーディングスキルも必須となります。自分でデザインしたページを自分でコーディングする事が出来てこそ一人前のWebデザイナーです。

4.jQuery (Javascript)でサイトに動きをつける

jQueryはWebサイトに動きをつける事が出来る言語です。スライダーをつけたり、タブをつけたり、フェード効果をつけたり、複雑なJavascriptを書く必要がなく、簡単な記述で導入する事が出来ます。

jQueryはプログラミングするよりもカスタマイズ力が求められます。jQueryのサンプルを元に、HTML+CSSで自由にカスタマイズ出来るように練習してみましょう。

5.WordPressを使ってサイトにCMSを導入する

 

5-1.WordPressとは？

WordPressとは、完全オープンソースのブログシステムの事です。WordPressによると、世界のwebサイトの27%はwordpressで作られていると発表しています。

5-2.WordPressサイトは誰でもカンタンに更新する事が出来る

HTML+CSSだけでは、ページを手動で作成する必要があり、非常に時間がかかってしまいます。Webに精通していない人にとっては、難易度が高く、更新する事が出来ません。

そのような問題を解決してくれるのがWordPressです。CMS（コンテンツマネジメントシステム）と呼ばれており、簡単にページの量産と、コンテンツの追加・更新を行う事が出来ます。Webに詳しくない人でも、簡単に更新作業を行えるので企業から個人サイトまで幅広くWordPressでの運用が行われています。

5-3.WordPressは手に職のスキル

前述させていただいた通り世界のWebサイトの約1/4がWordPressで作成されています。その為、これからの時代はWordPressのカスタマイズ能力を持った人は、どこに行っても重宝されるでしょう。WordPressを使う人が増え、制作案件は毎年増加しています。

5-4.Webデザイナーの面接では、WordPressサイトを提出しよう

これからWebデザイナーの面接を受ける為に作品用のサイトを作る時には、自分でデザインしたオリジナルWordPressサイトで提出すると、企業に好感を持ってもらえるでしょう。WordPressを使った制作案件は増えている為、多くの企業がWordPressに強いWebデザイナーを求めています。

Photoshopでデザインして、HTML+CSSを習得後、WordPressカスタマイズ力を身につけましょう。WordPressはまさに手に職のスキルであり、勉強に費やした時間は決して無駄にはなりません。

6.レスポンシブwebデザインを習得する

6-1.スマホの普及と共に、スマホサイト制作案件が増加

ここ数年のスマートフォンの普及に伴い、Webサイトもスマートフォンの画面サイズに最適化したスマホサイトが主流となりつつあります。

Web制作の現場では、「モバイルファースト」という言葉があるようにこれからは、スマホを始めに最適化させようという考え方の事です。

それだけ、スマートフォンユーザーが爆発的に増えており、スマホサイトの重要度が高くなっているのです。今後もスマホサイトの需要は高まるばかりで制作案件もどんどん増えていくでしょう。

6-2.レスポンシブWebデザインは今後必須のスキルに

現在は、スマートフォン、PC、タブレットなどのデバイスが登場し、様々な画面サイズがある為、それぞれのデバイス環境で、ストレスなくwebサイトが確認出来るように最適化して制作する必要があります。

異なるデバイスごとにデザインとHTMLページを作成するのは、制作時間とコストがかかりますし、管理も非常に大変です。

そのような問題を解決する為に生まれたのがレスポンシブWebデザインです。それぞれのデバイスに対してHTMLページを作成するのではなく、1つのソースコードで管理できるようにしようというものです。更新管理が楽な上に、各デバイスで異なる画面サイズに対応します。

6-3.bootstrapを使えばレスポンシブwebサイトを短時間で作る事が出来る

レスポンシブWebデザインに特化したCSSフレームワーク「bootstrap」などを利用する事で、さらに効率的にサイト作成を行う事が出来ます。

予め用意されたHTMLとCSSを使用してカスタマイズを行うので、複雑なソースコードを、書く必要が無く、短時間でレスポンシブサイトが完成します。「bootstrap」も制作現場でよく使われていますので、bootstrap+WordPressで作品サイトを作るのも良いでしょう。

7.Webデザイナーに最も求められるのは「造形力」と「コミュニケーション能力」

これからデザイナーに求められるのは、「造形力」と「コミュニケーション能力」です。

社内会議や打ち合わせなどでは、様々なWebサイトのアイデアが立案され、議論が交わされています。会議が行われているテーブルの上には、様々な文章・写真・グラフなどの文字ベースの資料がたくさんある事でしょう。

それらの内容をコミュニケーションを通して汲み取り、わかりやすくまとめて、ヴィジュアル化し、全員が目指すものをプレゼンテーション出来る人が一人いるとその会社はどうなるでしょうか？

ヴィジュアル化されたデザインによって、プロジェクトの方向性が明確になり、プロジェクトメンバー全員がイメージやアイデンティティを共有する事が出来ます。その結果、業務はスピード化し、プロジェクトの成功へとつながりやすくなるのではないでしょうか？

つまり企業活動の現場では、「コミュニケーション能力」と「造形力」を両方の力を備え持ったWebデザイナーが今一番求められているのです。

 

8-1.まとめ

いかがでしたでしょうか？未経験からWebデザイナーを目指す時に必ず身に付けたい7つのスキルをご紹介させて頂きました。

企業または制作会社勤務のWebデザイナーを目指す人も、フリーランスWebデザイナーを目指す人も、身につけなければならないスキルは全く同じです。勉強は参考書を買って闇雲に勉強するのではなく、計画を立ててサイトを作成する事が上達への一番の近道です。

8-1.未経験からWebデザイナーを目指す時に必要なスキルまとめ

1. illustratorでロゴをデザインする。
2. PhotoshopでWebページをデザインする。
3. DreamweaverでHTML5+CSS3を使いコーディングを行う
4. jQueryでサイトに動きをつける
5. WordPressカスタマイズ力を身につける
6. レスポンシブWebデザイン
7. 「形にする力(造形力)」「コミュニケーション能力」を身につける

はじめは誰でもゼロからのスタートです。毎日コツコツと独学で勉強する事で、未経験からでもWebデザイナーになる事は十分に可能です。

勉強は常に、「着地点をイメージ出来るかどうか」が一番大切。勉強始める前にゴールを設定して一つ一つのスキルを確実に身につけていきましょう。