独学でWebデザインの知識が身につく！デザイナー初心者が絶対に抑えておきたいサイト・記事14選｜レバテッククリエイター

HTML、CSS、JQuery、WordPress、タイポグラフィ、配色、コピーライティングなどなど、Webデザイナーに求められるスキルは多岐に渡ります。
より多くのスキルを使いこなせるほど、Webデザイナーとして活躍できる場面は増えていくでしょう。
本記事では、これらのスキルを身につける必要性を解説した上で、独学でも学べるサイトや記事を紹介します。
 
 

---

HTML5、CSS3を学習できるサイト・記事

 
HTML5に対応したモダンブラウザが普及し、モバイル向けのWebブラウザもHTML5にどんどん対応していっています。
以前であればJavaScriptを使わなければ実現できなかった動きのある表現もHTML5とCSS3の組み合わせで実現できるようになりました。
HTML5は2014年10月にW3Cによる勧告もなされており、もはや標準技術といって差し支えないでしょう。
そんなHTML5とCSS3について学べるサイトや記事を紹介します。
 

１．HTML5+CSS3 入門 / yoppa.org

http://yoppa.org/taumedia10/1695.html
 
HTML5 の新要素、CSS3でレイアウトやデザインを行う方法をまとめた記事です。
HTML5の利便性がよくわかる内容で、HTML5とCSS3を学ぶなら最初に読んでおきたい記事です。
ページの最後からサンプルファイルをダウンロードできます。
 
 

２．HTML入門、CSS3入門 / ドットインストール

http://dotinstall.com/lessons
 
ドットインストールは、HTML、CSSをはじめ、JavaScript、PHP、Ruby、Pythonなど、さまざまなプログラミング言語を動画で学べるサービスです。
「HTML入門」ではHTML5を使ったレッスンを受けることができます。
「CSS3入門」もありますので、HTML5とCSS3の基本を身につけたい方はぜひ。
 
 

３．html5doctor  / HTML5.JP

http://www.html5.jp/html5doctor/index.html
 
「html5doctor」はHTML5に関する情報を提供している海外サイトで、「HTML5.JP」はその日本語訳です。
上記のURLでは、HTML5の基礎を理解するのに役立つ記事が数多く掲載されています。
 
 

---

JQueryを学習できるサイト・記事

JavaScriptライブラリであるJQueryはWebデザインで広く使われており、Webデザイナーが身につけておきたいスキルのひとつとなっています。
JQueryはJavaScriptを簡単に扱えるようにしたライブラリなので、比較的学びやすいです。
JQueryを使えば少ない記述でサイトに動きをつけることができるので、扱えるようになればWebデザインの幅が広がります。
 
 

４．CODEPREP

http://codeprep.jp/ja/books
 
「CODEPREP」では、JQueryの基礎を無料で学べます。
他にも以下のようなJQuery関連のコンテンツがあります。
 
・JQueryでつくるタップ切り替え
・JQueryでつくるパララックス
・JQuery UIでつくるドラッグ＆ドロップリスト
・CSS3&JQueryでつくる2Dゲームモーション
 
 

５．Progate

https://prog-8.com/
 
「Progate」はHTML、JavaScript、Ruby、PHPといったプログラミング言語が学べる無料サービスで、JQueryのレッスンもあります。
全6章で、学習の目安時間は4時間です。
基礎を学んだ上で実際にWebページを作成するので、身につきやすいです。
 
 

---

WordPressを学習できるサイト・記事

WordPressは世界で最も使われているCMSで、オープンソースで公開されているので誰でも無料で使えます。
カスタマイズ性が高く、無料で使える便利なプラグインが多数あるため拡張性にも優れています。
商用で使われることも珍しくないので、案件として接する機会も多いでしょう。
 
 

６．Webデザインレシピ

http://webdesignrecipes.com/category/wordpress/
 
WebデザイナーのNori Takahashiさんのサイトで、WordPress記事が充実しています。
ひとつひとつの記事がとても丁寧で、WordPress初心者にもわかりやすく解説されています。
 
 

７．Webクリエイターボックス

http://www.webcreatorbox.com/tech/wordpress3-original-theme/
 
Webデザイン系のブログとして有名な「Webクリエイターボックス」さんの記事です。
本記事ではローカルにインストールする方法からオリジナルテーマを一から作る方法までを教えてくれます。
他にもWordPress関連の記事が多数ありますので、ぜひチェックしておいてください。
 
 

８．WordPress入門 / ドットインストール

http://dotinstall.com/lessons/basic_wordpress
 
再び「ドットインストール」さんからご紹介。
「WordPress入門」のレッスンが全23回で公開されています。
インストールからオリジナルテーマの作成まで動画で学べます。
 
 

---

タイポグラフィを学習できるサイト・記事

タイポグラフィは文字の体裁を整える技法で、Webデザイナーには必須のスキルです。
普段何気なく見ている文字もタイポグラフィで適切に整えられており、ロゴを作るにしてもバナーを作るにしてもタイポグラフィの技術は必要となります。
 
たとえば以下の場合、上記のテキストはタイポグラフィが施されていないので文字同士の間隔がバラバラで不自然な状態です。
これをカーニング（文字同士の間隔調整）することで自然な体裁になります。
こういった技法がタイポグラフィで、他にも行揃え、文字組、余白、グリッドなど学ぶことはたくさんあります。
 

http://type.method.ac/
 
 

９．Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き   / Webデザインレシピ

http://webdesignrecipes.com/typography-layout-system/
 
再び「Webデザインレシピ」さんの記事をご紹介。
自分自身がWebデザイナーとして学んだタイポグラフィレイアウトの要点をまとめ、事例つきで解説しています。
 
 

１０．デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ / コムテブログ

http://commte.net/blog/archives/4547
 
タイポグラフィとフォントの知識をまとめた記事です。
「レイアウト」「タイポグラフィの基礎」「＋約物（やくもの）を調整」「印刷と色の知識」の4部構成で、印刷の知識にも触れています。
 
 

１１．基本的だけど大切なタイポグラフィのシンプルな14のルール / コリス

http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html
 
海外のタイポグラフィに関する記事を意訳した記事で、タイポグラフィに役立つ14のルールを紹介しています。
 
 

---

配色を学習できるサイト・記事

 
適切な配色をするためには、センスだけで色を選ぶのではなく、基本を学ぶ必要があります。
もちろんセンスも強力な武器になりますが、理論で裏打ちすることでさらなるレベルアップを望めますし、クライアントから説明を求められたときにも筋道立てて説明ができます。
「自分には配色のセンスがない…」と悩んでいる方でも、基本を押さえれば適切な配色が可能になるでしょう。
 
 

１２．色彩センスのいらない配色講座

http://www.slideshare.net/marippe/ss-9003317
 
5,000以上のはてブがついている有名なスライドです。
噛み砕いた表現で、配色の基礎をわかりやすく説明しています。
配色を学ぶはじめの一歩としておすすめの資料です。
 
 

１３．配色パターンからWebデザインを考える / Webクリエイターボックス

http://www.webcreatorbox.com/tech/web-design-color-scheme/
 
再び「Webクリエイターボックス」さんの記事からのご紹介。
色彩の基礎と配色パターンの選び方をシンプルにまとめた記事です。
 
 

---

コピーライティングを学習する必要性 / 学習できるサイト・記事

 
Web制作の依頼を受けた際に、コピーをどうするか相談を受けたことはないでしょうか。
ライティングはWebデザイナーの仕事ではないと突き放すこともできますが、ライティングまで一気通貫で引き受けられれば単価アップや差別化につながります。
 
 

１４．効果が3倍あがる！ コピーライティングのテクニック【完全保存版】 /  LISKUL

http://liskul.com/copywriting-2503
 
魅力的な文章を書くためのコピーライティングのテクニックをまとめた記事です。
効果的なコピーライティングをするための方法がよくまとまっているので、これからコピーライティングを学びたいWebデザイナーはぜひ参考にしてください。
 
 

---

まとめ

いかがでしたか？
盛りだくさんな内容ですが、いずれも身につけて損はないスキルばかりです。
Webデザイナーとしての市場価値を高めるために、より多くのスキルを身につけていきましょう。