masaca（@masaca_dApps）です。
Webデザイナーに必要な技術はWebサイトの「デザイン」とHTML/CSS/JavaScriptによる「コーディング」です。
それぞれの基本的な技術を身につける方法についてお伝えします。
Webデザインを学び始めた頃は、学習範囲が広く何を学べば良いのかわからないと思いますが10年以上Webデザインをしてきた経験から、学んでおくべき技術だけに絞ってまとめました。
ここで紹介した基礎が身についていれば、Web制作会社などに就職することは十分可能です。
masaca
目次
Webデザインの基礎を身につける方法
Webデザインは「写真素材」、「文字」、「配色」、「レイアウト」で構成されています。それぞれを上手に組み合わせてWebサイトのデザインが成り立っています。
Webデザインができるようになるには、それぞれの基礎知識を身につけると上達が早いです。
デザインの基礎知識を学習する
「文字」、「配色」、「レイアウト」などデザインの基礎的な内容はこの本1冊で学ぶことができます。
この本を読んでからWebデザインに取り掛かると、素人っぽいデザインから抜け出すことができるので大変オススメです。
ノンデザイナーズ・デザインブック
Webデザイナーを目指す人全員に読んでほしい一冊、もちろんフォントや文字の扱い方についても記載があります。
文字・フォントの扱い方を学ぶ
Webサイトの大半は文字情報です。文字を上手に扱うことができるとWebデザインのレベルが格段に上がります。
感覚ではなく、理論が身につくと制作スピードもアップするので早い段階で身につけましょう。
タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-
Webサイトの見出しやキャッチコピーのデザイン力が身につきます。サイトロゴのデザインの考え方も身につきます。
フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？
フォントで人に与える印象は大きく変わります。狙ったイメージ通りのフォント選びができるようになります。
配色の基本を学ぶ
基本的な配色のルールを身につけていれば、配色でミスしたりすることはなくなります。
「ベースカラー」、「メインカラー」、「アクセントカラー」を意識するだけでカッコいい配色になります。
以下のスライドを見るだけで配色の基本は簡単に身につけることができます。
参考
色彩センスのいらない配色講座SlideShare
参考
ノンデザイナーのための配色理論SlideShare
配色にあたって気をつけるべきポイントも把握しておきましょう。
参考
デザインの基本日記 「配色編」note
参考
色による「見やすさ」のデザインdwango creator's blog
また、たくさんのWebサイトを見てどんな配色にしているのか研究することも大事です。
レイアウトのパターンや考え方を身につける
Webサイトのレイアウトはある程度パターン化されています。自分の中の引き出しを増やすと、デザインのバリエーションが広がります。
考え方を知りたい方は以下の本がおすすめです。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
デザインのクオリティの高いギャラリーサイトのレイアウトを見て研究することも重要です。
参考
I/O 3000 | WebデザインギャラリーI/O 3000 | Webデザインギャラリー
コーディングの基礎を身につける方法
HTML/CSSをかけるようになろう
まずはHTML/CSSでWebサイトの基本的なレイアウトのコーディングができるようになりましょう。
コーディング技術を身につけるにはとにかく実際に手を動かしてコードを書くしかありません。
手を動かしながら学べる本で学習したら自分で作ったデザインをコーディングしたり、実際のWebサイトのデザインを見て同じようにコーディングできるかどうが挑戦してみましょう。
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
JavaScriptとjqueryについて
JavaScriptについてはプログラミングなので難易度としてはHTML5/CSS3よりもはるかに難しいです。
フロントエンドエンジニアを目指すかコードに強いデザイナーを目指すなら学んでおきましょう。デザインメインで仕事をしたい方は無理に学ぶ必要はないです。
まとめ
Webデザイナーに必要な基礎技術についての学習方法についてまとめました。「デザイン」と「コーディング」の基礎はこの内容でバッチリです。
この内容と合わせてスクールや職業訓練校で学習しておけばさらに理解が深まります。独学の方はオンラインの動画教材と並行していけば問題ありません。
他にも気になる技術がたくさんあると思いますが、色々と手を広げる前に基礎部分は必ず学んでおきましょう。便利な技術や効率化は会社に入ってからで大丈夫です。
masaca
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す