Webデザインを独学で学ぶための5つのステップ・勉強法
Webデザインを実践するために必要なスキルは、デザインの基礎からIllustrator、Photoshopの操作方法、HTMLやコーディングの知識など多岐にわたっています。
書籍やWeb上のまとめ記事などWebデザインを学ぶための情報はたくさんあっても、どこから手を付けたらいいかわからないという人も多いのではないでしょうか。
そんなWebデザインを独学かつ最速で習得するためのステップをまとめました。
目次
1. 最初に準備しておきたいもの
1-1. Illustrator
クリエイターの代名詞とも言えるAdobeのグラフィックソフト。
主にロゴや図面、広告などのグラフィックデザインを制作する際によく使われています。画像形式はベクター形式と呼ばれるもので、多角形や円といった複雑な図形を拡大しても荒れることなく、滑らかでくっきりと表示することができます。基本のデザインソフトとして揃えておきたいソフトです。
このIllustrator、単体で2180円/月、Illustratorをはじめとした20種類以上のAdobeソフトが使用できるAdobe CCで4980円/月となかなかのお値段。「なかなか手を出しにくい…」という人もいるのではないでしょうか。
Inkscapeはそんな方におすすめの無料ツール。Illustratorの代替ソフトとして長年愛用されているアプリで、Illustratorの基本機能はほぼ網羅しています。
1-2. Photoshop
主に画像の編集を得意とするAdobeのグラフィックソフトソフト。1ピクセルごとに細く色と濃度の情報を記録するビットマップ形式を採用しており、画像は全て点で構成されています。写真データはドットの集合体で構成されているため、写真データの加工に向いているソフトです。
Webデザイナーは画像編集の便利さからPhotoshopを利用している人が多いようです。
長年Photoshopの代替ソフトとして愛用されているのがGIMP。 Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能で画像の編集・加工ツールとしてはPhotoshopとほぼ同様の機能を備えています。
1-3. テキストエディタ
テキストエディタでおすすめなのはBrackets。
Adobeが開発しているテキストエディタで、無料かつ日本語で使えます。Adobeが開発しているソフトということもあってPhotoshopから画像を書き出す、デザイン情報を取り出すなどの機能が搭載されており、Webデザイン向きのテキストエディタといえます。
もうひとつおすすめなのがAtom。GitHub社製のテキストエディタでWeb開発を念頭に開発されています。使いやすいデザインで、様々な機能が追加できるパッケージも豊富に用意されています。
1-4. 参考書(『ノンデザイナーズ・デザインブック』、
『たった2日で楽しく身につくHTML/CSS入門教室』)
Webデザインに関しては様々な情報がWeb上に公開されていますが、ぜひ手元においておきたいのが次の2冊。
『ノンデザイナーズ・デザインブック』はデザイナーでない人のために丁寧に分かりやすくデザインについて書かれた本で、1998年に出版されてから今なお読み継がれているデザインのバイブルのような本です。デザインの基本から色彩、フォントについて解説しています。
『たった2日で楽しく身につくHTML/CSS入門教室』はWebデザインに必須となるプログラミング言語、HTMLとCSSを「主人公が先生に教わりながら一つのサイトを作っていく」というストーリーを読み進める中で学んでいける本です。
HTML/CSSの基本的な知識はカバーしつつ、高度なところまでも抑えられているのでぜひ手元においておきたい1冊です。
2. グラフィックデザインのスキルを身につける
2-1. デザインの4つの原則を学ぶ
まずは『ノンデザイナーズ・デザインブック』をもとにデザインの4つの原則について学びましょう。デザインの4つの原則とは「近接、整列、反復、コントラスト」のこと。言われてみれば当たり前のようですが、この原則を抑えるだけでもメリハリのあるデザインになります。
2-2.色彩の原則を学ぶ
次に同じく『ノンデザイナーズ・デザインブック』で色彩について学びましょう。カラーホイールから補色、類似色についておさえ、効果的な色の組み合わせの作り方を確認します。
2-3. フォントの原則を学ぶ
次に大切なのがフォント。同じく『ノンデザイナーズ・デザインブック』でフォントの基本を確認しておきましょう。オールドスタイルやサンセリフなどフォントの成り立ちやカテゴリーを把握しておくだけでも、デザイン作業のときにぴったりのフォントを見つけやすくなります。
2-4. オリジナルの名刺やフライヤーを作ってみる
4つの原則、色彩の原則、フォントの原則をおさえたら、オリジナルの名刺やフライヤーを作ってみましょう。
早くWebデザインに移りたい！という人もいるかもしれませんが、デザインの基本的なルールは紙でもWebでも変わりませんし、まずは小さいサイズからデザインの基本を実践してレイアウトのルールを習得することをおすすめします。
3. コーディングのスキルを身につける
3-1. HTML
HTMLはHyper Text Markup Languageの略で、Webページの基礎を作る最も基本的な言語です。Markupとは「しるしをつける」という意味で、文章にタグを付けることでコンピュータが理解できる形にするという役割を持っています。
3-2. CSS
CSSとはCascading Style Sheetsの略でWebページのデザインを担当する言語です。HTMLで作成された文書に対して色やサイズ、レイアウトなどを指定します。
3-3. JavaScript
JavaScriptとはWebページの動的な作用を担当する言語です。例えば「写真をスライドする」「入力された数値を計算する」といった動作を指定できます。
3-4. 本の通りにWebサイトをひとつ作ってみる
上記に説明した言語について、『たった2日で楽しく身につくHTML/CSS入門教室』を参考にしながら習得していきましょう。基本のWebサイトのアレンジも用意されているので、しっかりと復習しておきましょう。
4. オリジナルのWebサイトをひとつ作ってみる
4-1. デザインカンプを作る
デザインとコーディングの基礎を抑えたところで、オリジナルのWebサイトを作ってみましょう。最初にデザインカンプを作成します。デザインカンプはWebデザインの試案でPhotoshopやIllustratorで作成します。
「どんなWebデザインがいいかアイデアが浮かばない…」という場合は、まずWebサイトギャラリーを覗いてみましょう。
I/O 3000やMUUUUU.ORGなどではクオリティの高いWebデザインが豊富に掲載されています。まずはいくつかデザインを眺めてみて、どんなデザインにしたいか簡単にスケッチしてみるのがおすすめです。
4-2. コーディングを行う
デザインカンプができたら、コーディングに移りましょう。ここでも「どんなコードを書けばいいのかわからない…」ということもあるはず。そんなときは参考にしたいサイトを見つけて、Google Chromeのディベロッパーモードでソースを見てみましょう。タグが色付けされているので、とても読みやすくなっています。
5. 就職につなげるために
5-1. クラウドソーシングで経験と実績を積む
ゼロからWebサイトを作るスキルが身についたら、「仕事につなげたい」という人も多いと思います。しかし実績がほとんどない場合就職につなげるのは至難の業。まずは手軽に挑戦できるクラウドソーシングで実績を積んでいきましょう。
クラウドソーシングでは受注者がデザインを提案し、その中からクライアントが当選案を選ぶという「コンペ形式」と、クライアントが提示した仕事内容に受注者が自分のスキルを提示することで仕事の発注を受け取る「プロジェクト形式」があります。
最初は「コンペ形式」で実績を積んでいきましょう。当選を勝ち取るまでは時間がかかるかもしれませんが、毎日数多くのデザインコンペが開催されているので、初心者が実績を積むためにはぴったりです。
そうして実績を積むとプロジェクト形式で受注しやすくなったり、クライアントから直接依頼がかかったりすることもあります。ぜひ1日1コンペにトライしてみましょう。
5-2. ポートフォリオを作る(ポートフォリオを作るのに便利なサイトを紹介)
クラウドソーシングで実績を積んだら、その実績をポートフォリオとしてまとめましょう。紙にプリントアウトする方法もありますが、Webデザインではポートフォリオを作るためのサービスを利用するのがおすすめです。
「Portfoliobox」や「JAYPEG」では、Webデザインをポートフォリオとしてまとめることができます。こうした自分のポートフォリオのアドレスを履歴書に掲載しておけば効果的にアピールすることができます。
6. 独学でWebデザインを習得するためのツール
今は書籍からWeb上のサービスまでWebデザインを習得するためのツールが豊富にあります。特に独学の場合におすすめしたいツールをご紹介します。
6-1. 書籍
『Webデザインとコーディングのきほんのきほん』
Webデザインとコーディングの基礎がしっかりまとめられた一冊。デザインの基本についても詳しく説明されており、HTMLのタグなども表にして丁寧にまとめられています。かなり高度なポイントもおさえているので何度も繰り返し復習したい一冊です。
『Webデザイン必携。 プロにまなぶ現場の制作ルール84』
Webデザインの仕事をする上でおさえておきたいポイントについてしっかりまとめられている一冊。PhotoshopやIllustratorの具体的な操作方法も記載されているので、初心者にもわかりやすいのが特長です。
6-2. 勉強サイト
HTMLやCSSからPHPまで様々なプログラミング言語の学習動画を公開しているWebサイト。「ホームページを作れるようになろう」「PHPでウェブサービスを作れるようになろう」など一つのテーマに沿って動画が作られているので、習得しやすいのが特長です。1本3分前後というのもうれしいですね。
6-3. 通信講座
WebやCGの大御所、デジタルハリウッドのオンラインスクール。オンラインで学べるので気軽にトライできることに加え、コースによってはAdobe CCを学割で購入できることも。
6-4. 勉強会
「dots.」
最新テクノロジーを学べる勉強会やイベント情報を掲載しているWebサイト。スケジュールやジャンルによって様々な勉強会を探すことができます。
まとめ
Webデザインを習得するステップについて確認してきましたが、いかがでしたでしょうか。様々なスキルが必要とされるWebデザインも順を追って進んでいけば、必ず習得できます。
パソコンといくつかのソフトがあれば簡単に始められ、また勉強するためのソースもWeb上に豊富なのがWebデザインの特長です。上記のステップで基本をおさえたら、どんどんスキルアップを目指していきましょう。
