最低限学習しておきたい基本スキル-独学!未経験からWebデザイナーになる!!

最低限学習しておきたい基本スキル

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

本ページでは、まずはWebデザイナーは最低限どんなことを学習したらいいのかということを確認してみましょう。こういった基本的なことをしっかり確認しておくことは、目標を達成する上で欠かすことができませんからね。

知識編

HTML(Hypertext Markup Language)

まずはこれが分からないとお話になりません。これはどんなWebデザイナーであったとしても、プロレベルの知識が必須です。Web制作ソフトにはＨＴＭＬを書き出す機能はありますが、Webデザイナーは通常そういった機能はほとんど使いません。したがってHTMLの知識が必要となります。

ついでに覚えるXHTML（Extensible Hypertext Markup Language）

HTMLと似ている言語としてXHTMLなるものもあり、こちらも併せて覚えておく必要があります。「HTMLだけでも大変なのに……」と思われるかもしれませんが、XHTMLはHTMLをXML準拠にした言語であり、HTMLと非常に似通っています（というかHTMLに制約が増えたような言語）。HTMLが分かれば、XHTMLも容易に覚えられるでしょうから安心してください。

最近のWebサイトはXHTMLで書くことが多く、こちらも必須知識であるといえます。

CSS(Cascading Style Sheets)

HTMLだけでもテキストの色を変えたり、センタリング（中央揃え）したりもできるのですが、そのような指定はもう完全に時代遅れ。CSSにしっかりと対応しているブラウザが増えたため、これからはHTMLでなくCSSを使用して見た目を表現するのが標準です。ですからCSSもHTML（XHTML）と並び、セットで覚えてください。

CSSができると言える目安とは！？

CSSレイアウトで、主要ブラウザに対応したサイトをデザイン通りにコーディングできるようになれば、実務で通用するレベルと言えるでしょう。ブラウザやOSによってレイアウトが崩れてしまったりするので、この点が最初は大きな壁となるかもしれません。壁をうち破るには、いろいろと試して、ブラウザごとの癖を知ることが大事です。

JavaScript

もちろん0からガリガリ書けるのが好ましいですが、それにはかなり学習が必要です。人が書いたライブラリを利用したり、ちょっとカスタマイズしたりするくらいの知識は最低限持っておきたいところです。特にjQueryなどの有名ライブラリはかじっておくといいでしょう。

SEO（検索エンジン最適化）の知識

SEOとは検索エンジンにヒットしやすいようにする対策のことです。私たちはお客さんのビジネスを発展させるためにWebサイトを作るのですから、Webデザイナーがこういった知識を持っていることは今や必須と言えます。

美しい(X)HTMLを書いていれば、ある程度検索エンジンに対して親和性の高いサイトを構築できますが、それだけではなく、基本的なSEOに対する知識を身につけておきましょう。

デザイン・レイアウト力

Webデザイナーはデザインをする職業ですから、デザインやレイアウトに関する知識やスキルは一定以上持っていたいところです。このあたりは頭でっかちになるだけでは能力が向上しませんから、基本を学んだ後は、実際に作りまくって体で覚えてください。

なかなか能力があがらない時期もあるかもしれませんが、諦めずにデザインを繰り返していれば必ずや成長するはずです。

基礎的なマーケティングの知識

SEOの項でも述べましたが、私たちはお客さんのビジネスを発展させるためにWebサイトを作ります。そのためには、最低限のマーケティングの知識を持っていた方がいいでしょう。

なぜなら、サイトをデザインする段階で、こういった点が全く考慮されず、デザイン的な観点だけで作ってしまうと“見た目だけはいいけれど売れないサイト”ができあがってしまうことに繋がるからです。なかなか学習しづらい分野ではありますが、Webデザイン誌やWebマーケティングの本をたくさん読むことで学ぶといいでしょう。

配色・色彩の知識

Webデザインは色を扱う仕事ですから、最低限の配色知識が必要です。実は色に関する学問というのは結構奥が深いものなのですが、Webデザイナーとしては基礎知識だけ覚えておけばいいでしょう。

ソフト編

Dreamweaver

Webデザイナー必須ソフトですから、一通りの操作は覚えておきましょう。Adobeのマニュアルもあるにはあるのですが大変わかりづらいので、書籍を一冊程度購入する事をお勧めします。ただし誤解しないでいただきたいのは、Dreamweaverは業界標準のエディタだから使うのであって、いわゆる“ホームページ制作ソフト”的な使い方はしません。例えば、Dreamweaverのデザインビューでデザインするようなことはほとんどしないということです。

初心者向けのDreamweaverの本はデザインビュー主体の解説になっているものがありますが、そういった本はあまり役立ちません。購入する際は注意しましょう。

Illustrator

こみ入ったイラストを書く際には必須のソフトです。こちらも書籍を購入する事をお勧めします。一冊だと情報が全く足りないと思いますので、自分のレベルにあった書籍を何冊でも購入して学習してみてください。そして実際に作りまくること。それが大事です。

Photoshop

基本的にはIllustratorと同じです。こちらも一冊で覚えられるようなものではないので、書籍を購入して覚えましょう。また、写真などのレタッチを何度も実際に行って覚えてください。

Fireworks

PhotoshopとIllustratorを機能を削って足して2で割ったようなソフトです。IllustratorとPhotoshopのスキルがあれば不用かもしれません。逆に、IllustratorとPhotoshopが難しすぎる！という人は、Fireworksを学習するのも一案です。

Fireworksでもいいの！？

ソフトはただの道具ですから、どんなソフトを使ったとしても、クールなものを作れればWebデザイナーになれます。ですがWeb制作会社によって、Fireowks主体とIllustrator+Photoshop主体とに分かれてくるという問題があります。どちらを選ぶかはあなた次第。

統計をとった訳ではないのでわかりませんが、DTP業界で歴史のある（つまり既存のノウハウを活かせる）関係で、Illustrator+Photoshopが多そうな感はあります。しかし、Fireworksを使う・または併用するWeb制作会社は確実に存在します。

特に、Fireworksの方が習得難易度が圧倒的に低いというメリットは見逃せません。ちなみに私の場合はFireworks主体で、適材適所でIllustratorとPhotoshopを使っています。

何をどのくらい学んだらいいのかは、人それぞれ

このページで紹介している内容は、あくまでも最低限学習したいスキルです。つまり、一定以上は学んでおく必要があるというだけで、全部が全部得意と言えるレベルになる必要はありません（デザイン力とHTML/CSSコーディング力はある程度のレベルになる必要はありますが）。

それでは何をどのくらい学んだらいいかが分かりづらいところですが、それは人によってそれぞれ異なります。あなたがどんなWebデザイナーになりたいかを考え、それによって伸ばすものを決めていくといいでしょう。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

独学！未経験からWebデザイナーになる！！

ゆみママさん　2010年05月12日00時12分

馬場　誠様

初めまして。
私は5歳と2歳の2児の母です。業界未経験・初心者ですが、昨年4-からWebデザイナーを目指して勉強しています。恥ずかしながら、30代後半なのですが、将来の野望を実現させるために毎日少しずつですが、勉強しています。将来は規模は小さくですがフリーランスになって、街のWeb屋さん的な存在になりたいと思っています。が、馬場様のサイトを見て、少しでも早いうちにフリーランスになろうと考えているところです。

現在、某社のWebデザイナーの通信講座を受講中です。
でも、今の段階ではまだまだ知識がただの「点」でしかないですし、デザインのセンスも全くないようなので、「Webデザインは向いていないんじゃないか…」と思うほどです（泣）。でも一生に一度の人生、やりたいことをあきらめたくないので、頑張って勉強を進めています。

長々となりましたが、ご質問があってメールをいたしました。
通信講座では、Dreamweaverを使っています。Dreamweaverでは、主にデザインビューを使ってHPを作成していて、デザインビューで入力した後でコードビューでソースを確認する、という形で学習しています。
現場ではデザインビューで作成することはないそうなのですが、タグを手打ちするというのはまっだまだできそうにありません。デザインビューがメインではないDreamweaverの書籍があるとのことなのですが、お勧めの書籍はございますでしょうか?もしそのような本があったら、講座修了後にしっかりと勉強したいと思っています。

お忙しいところ大変恐縮ではございますが、ご回答いただけましたら大変うれしく思います。
よろしくお願いいたします。

馬場誠さん　2010年05月12日22時30分

ゆみママさん、初めまして。

> でも、今の段階ではまだまだ知識がただの「点」でしかないですし、デザインのセンスも全くないようなので、「Webデザインは向いていないんじゃないか…」と思うほどです（泣）。

Webデザインはダイエットや筋トレみたいなものですので、
努力した分だけ着実にスキルアップしますよ☆

安心して継続してみてください(^_^)b


> 現場ではデザインビューで作成することはないそうなのですが、タグを手打ちするというのはまっだまだできそうにありません。デザインビューがメインではないDreamweaverの書籍があるとのことなのですが、お勧めの書籍はございますでしょうか?

私がDreamweaverの本を読んだのがMacromedia時代の
Dreamweaver MX（CS3の前の前の前くらい！？）なので、
比較的新しいバージョン向けの本については
残念ながらご紹介できるものがありませんm(__)m

というよりも、ゆみママさんはフリーランスを目指されているとのこと。
Dreamweaverの複雑な使い方を、
無理して覚える必要はないかもしれません。

Web制作会社に勤務する場合は、
周りとの連携のために覚えた方がいいのですが、
フリーランスは一人で作業をするので重要度は高くありません。

それよりも、デザイン力はもちろんのこと、
HTML/CSSをしっかりと理解し、コードビューオンリーで
ガリガリ書いていけるチカラをのばす方がお勧めです。
（やはりWebデザイナーにとってHTML/CSSの理解は必須だと思います）

やらないと覚えないので、
教材を一通り終えたらデザインビューはしばらく使わず、
HTML/CSSの本を見ながら少しずつ学ばれるといいかもしれませんね☆

ゆみママさん　2010年10月19日22時28分

馬場様、こんばんは。

テスト用サーバーのセッティングを無事に終えたところで、ちょっとお絵かきを練習したくなってまたFireworksの勉強に戻っています。

Fireworksのペンツールを使う（ベジェ曲線）練習をしているのですが、全然うまく使えません。Fireworksの解説本を見ても、ペンツールに関する記載は見開き2ページ分くらいしかなくて、書いてあることがよくわかりません。

Illustratorではベジェを練習する本がたくさん出ているようですが、仮に何か1冊購入したとしたら参考になりそうでしょうか?
「ペンツールは慣れ」とも小耳にはさんだのですが、どんなふうに練習すればよいかわかりません。
ペンツールの使い方の基本がわかっていないので、この辺りから学ぶにはどのようにすればいいでしょうか？

お忙しいところ恐れ入りますが、アドバイスいただけましたらうれしく思います。
よろしくお願いいたします。

馬場誠さん　2010年10月22日01時29分

ゆみママさん、こんばんは。
コメント機能を改善していまして、お返事が遅くなり申し訳ありません。

> ペンツールの使い方の基本がわかっていないので、この辺りから学ぶにはどのようにすればいいでしょうか？

私自身は、特別ペンツールの練習をしたことはありません。
ペンツールはWebデザインをする上でよく使うツールなためか、いつの間にかできるようになっていました。

したがって「ペンツールは慣れ」、というのは本当だと私も思います。
慣れてくると、自転車に乗るのに何も意識しないのと同じように、無意識に思い通りのパスをかけるようになってくるはずです。

具体的には、アイコンを作ったり、イラストを描いたり、何かをトレースしたり、ひたすらデザインするのが良い練習になると思います。


というわけで、ペンツールの本に関しては一冊も読んでいないので、残念ながら効果のほどは分かりません。ただ、IllustratorもPhotoshopもFireworksもペンツールの基本は同じなので、参考にならないということはないと思います。

自然に覚えるとは思いますが、もし早く理解されたいようであれば、Amazon等のレビューを参考に購入してみるのもいいかもしれませんね。

ゆみママさん　2013年07月24日23時46分

馬場様、こんばんは。
お久しぶりです。
こちらからの投稿も久しぶりです(^^)

悩んでいたらハマってしまって、是非馬場様のご意見をお聞きしたいと思い投稿しました。

「コーディングができます！」と自信を持って言えるレベルってどれくらいだと思われますか？

私はコーディングのスピードが遅くて、まだまだ未熟者だなぁと思っています。
コーディングのスピードアップ、上達の方法はやっぱり書きまくることでしょうか？

お忙しい中恐れ入りますが、アドバイスいただけましたら嬉しく思います。

よろしくお願いいたします。

馬場誠さん　2013年07月27日08時05分

ゆみママさん、おはようございます。

> 「コーディングができます！」と自信を持って言えるレベルってどれくらいだと思われますか？

私が思うコーディングができるというレベルは、（文法チェッカーを使ってでもいいので）文法エラーが無いコードを書けること、適切なマークアップができること、スッキリしたコードを書けること等がまず挙げられると思います。

その上で、デザイナーがデザインした元画像を、そのままにWebに書き出せることでしょうか。

以上は私の考えですが、現場では、極論を言えば発注者（クライアントや上流のWeb制作会社）が想定するレベルに達していることが重要だと思います。

> コーディングのスピードアップ、上達の方法はやっぱり書きまくることでしょうか？

そうですね。たくさん書くことが一番だと思います。
その他にも、よく使うタグはショートカットで入力したり、英字のタイプを練習するなど、違った面からのアプローチでスピードアップできることもありますね。

とは言え、ゆみママさんのようにフリーランスの場合は、多少遅くても品質に問題がなければOKだと思います。速くなれば時給が上がる（もしくは安くできる）ので、速いにこしたことはありませんけれど(^^;)

ゆみママさん　2013年07月31日22時58分

馬場誠様

こんばんは。ゆみママです。
お忙しい中、ご回答くださいましてありがとうございます！

自分では”スッキリしたコードを書く”というところが今ひとつな感じです。
スッキリと書こう！とは意識しているのですが、最終的に見てみると「これは見やすいのだろうか…」と自分でいつも疑問に思っています（汗）

ショートカットでコードを入力というのを早速やってみようと思います(^^)

馬場誠さん　2013年08月01日22時14分

ゆみママさん、こんばんは。

スッキリは、不要なボックス要素の入れ子やクラス・ID指定をしないことに気をつけると、だいぶスッキリすると思います。

ショートカットは、最初からショートカットが登録されているタグはいいのですが、無いものはスニペットから登録するといいですよ♪（「Dreamweaver　スニペット　ショートカット」で情報が出てきます）