必見!ノンデザイナーがデザインの基礎を学ぶための記事やサイト15選！！

f:id:mataro1:20160107142720j:plain

デザイン基礎のための記事やサイト
デザイン基礎のための動画サイト
レイアウト基礎
- Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ
文字やフォントの基礎
- ノンデザイナー向けガイド！文字を美しく並べる3つの基本テクニック
- デザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめ
UIの基礎
- UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
写真の基礎
- わたしのデザインセオリー（写真マスク編）
テクニックまとめ
- コンテンツを盛り上げる、逆引きデザインテクニック
Webデザインの素材まとめ記事
- WebデザインのアイコンやHTML・WordPressの素材まとめ記事9選
まとめ
オススメ記事

私自身デザインをしっかり学んだことはありません。
そこで、私を含めノンデザイナーの方などが参考にできるような記事をまとめてみました。

デザイン基礎のための記事やサイト

まずはデザイン関係初心者が読むべき記事をまとめた記事のご紹介です。これらを読むことで、デザインの基礎の全体像を把握できるようにしましょう。

HTMLとCSSの基本をサルでもわかるようにまとめてみようと思う。

まずはHTMLとCSSの基本を簡潔にまとめてある記事の紹介です。
HTMLやCSSの内容を理解していない方や復習したい方にオススメの記事です。この記事でHTMLやCSSのおおまかな内容の理解をできると思います。
どの記事やサイトから見ればいいか分からないという方にオススメです。

www.ituore.com

読むだけでWebデザインを独学できる！絶対押さえておくべきサイト10選

HTMLやCSS、レスポンシブデザインなどのWebデザインに関することを学びたいとき、参考にしたいサイトが紹介されています。

以下のような10記事のリンクが紹介されていて、ウェブデザインを初めて知る方はとても参考になると思います。

ウェブデザインの全体像が分かる記事が3記事
HTML・CSS・JavaScriptがわかる記事が3記事
スマホサイトやレスポンシブデザインがわかる記事が2記事
ギャラリーサイトが2記事

http://smaroomch.net/web-design-10/smaroomch.net

ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７

この記事は、はてなブックマークの数が尋常じゃないんです・・・
ウェブ制作の全体を学びたいときに見るべき記事です。以下の27の事柄についてのリンクが数多く紹介されています。自分に必要なものをブックマークなどしておくといいでしょう。

ページを作る
１．HTML5
２．CSS
３．Sass

動きを出す（クライアントサイドスクリプト）
４．JavaScript
５．jQuery

ユーザーにアクションを起こさせる（サーバサイドスクリプト）
６．php
７．Python
８．Ruby

バージョン管理システム
９．git

アプリ開発
１０．ハイブリッドアプリ
１１．ネイティブアプリ

サーバー
１２．MySQL
１３．Apache
１４．nginx

デザイン
１５．フォント
１６．タイポグラフィ
１７．配色
１８．カンプ

Adobe系
１９．Photoshop
２０．Illustrator
２１．Dreamweaver
コンテンツ
２２．ライティング

保守
２３．Google Analytics
２４．AdWords
２５．SEO
２６．Webmaster
２７．SSH

commte.net

ノンデザイナー必見！絶対に見ておきたいデザインスキルアップできる記事12選

フォントや配色、レイアウトなど様々な種類の記事が12個も紹介されています。
内容が盛りだくさん過ぎて、どれから読もうか迷うかもしれませんが、1つずつ見ていきましょう。

全体をなんとなく把握した後に細かい部分を学んで、デザインのポイントを掴んでいくといいかもしれません。

ics.media

今更聞けない！エンジニアのための CSS の基礎講座〜ボックスモデル編〜

CSSの基本のボックスモデルについて詳しく紹介されています。

今更聞けない！エンジニアのための CSS の基礎講座〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)

デザイン基礎のための動画サイト

YouTubeなどの効果もあってか動画配信サービスが身近なものになりました。
ここでは、ウェブデザインを勉強することのできる動画配信サービスを紹介します。文章を読めるだけでなく、映像や音声を用いて学習できるため、初心者にオススメです。

また、サイトによってはデザインだけでなく、プログラミング言語も学べたりします。

Webデザイン無料動画講座

動画でウェブデザインを学んでみたいという方にオススメです。
動画であるため、全部観ることは時間がかかるかもしれません。しかし、学ぶ順序がしっかりと示されているため、デザインの勉強がしやすいと思います。

以下のようなことが紹介されています。

HTMLについて8個の動画
CSSについて9個の動画
Illustratorについて18個の動画
Photoshopについて19個の動画

まあ暇な時や今まで学んだことを復讐するためなどに少しずつ見ていくと良いかもしれません。

web-creators-tips.com

ドットインストール

ドットインストールはHTMLやCSSだけではなく、様々なプログラミング言語を学ぶことが出来るサービスです。
動画でHTMLやCSSを学びたい場合にオススメです。

はてなブックマークの数から分かるようにとても人気があり、定評の有るサービスです。また、実際に手を動かしながら学びたいならCODEPREPなどもオススメです。

dotinstall.com

CODEPREP

JavaScript/HTML/CSSを学習するためのサービスの1つです。
オンライン上でゲーム感覚で学べる上に、コード入力をサポートしてくれるので便利です。

実践的な学習をしながら、コードを打ち込みたい場合にオススメです。

codeprep.jp

Progate

CODEPREPやドットインストールと同じですが、HTML/CSS/JavaScriptを学ぶことができます。
CODEPREPが合わなかった場合やCODEPREPをやり終えた後に復習として利用するのもいいでしょう。

prog-8.com

レイアウト基礎

レイアウトの配置などを学びたいときに参考にするべき良記事の紹介です。

Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ

グリッドレイアウトで要素を配置するとき、どのようにすればいいのかを学ぶことができます。

Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ | コリス

文字やフォントの基礎

文字の配置の基礎を学びたいときやフォントに関するテクニックが紹介されている記事の紹介です。

ノンデザイナー向けガイド！文字を美しく並べる3つの基本テクニック

文字を配置するとき、どこに配置すればいいか悩むものです。
そこで、どのように文字を並べたら綺麗になるのかを紹介している記事です。

文字の配置に悩んだときはこの記事を参考にするといいと思います。

photoshopvip.net

デザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめ

フォントの基礎テクニックが26個も紹介されています。
26個もあるため、私自身覚えられていません。そのため、何回も記事を見たりして少しずつ覚えて、身につけていくといいでしょう。

photoshopvip.net

UIの基礎

ユーザーインターフェースを学びたいときに読むべき記事を紹介します。

UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ

UI(ユーザーインターフェース)を学ぶときに是非読んで欲しいです。
当たり前のことですが、ユーザーインターフェースってかなり重要だと思います。

私自身スマホアプリを使っているときに、なんでこの操作ができないのかとかどうすれば自分のしたい行動ができるのかすぐに分からないときがあります。
そのときにもっと分かりやすいユーザーインターフェースだったらいいのにと思うことは度々あります。

そこで、自分がユーザーインターフェースを考えて実装するときは利用者が困らないようなユーザーインターフェースを実装したいものです。
ユーザーインターフェースに詳しくない人は以下の記事でまとめられているスライドなどを読むといいでしょう。

creive.me

写真の基礎

写真を加工したり、配置したりするときのことが紹介された記事の紹介です。

わたしのデザインセオリー（写真マスク編）

写真をデザインするときは様々な手法などがあるとは思います。
その中の一つとして参考にしたい記事です。

画像付きで詳しくかつ分かりやすくまとめられているためオススメです。

in.spicagraph.com

テクニックまとめ

様々なテクニックが紹介された記事の紹介です。

デザインの基礎が分かってきたときなどステップアップとして読むと良いかもしれません。

コンテンツを盛り上げる、逆引きデザインテクニック

以下のようなことを行いたいときに参考にしたい記事です。

イメージ
落ち着いた印象を出す
色をユーザーの記憶に残したい
写真
アイキャッチ写真をポジティブにしたい
緊張感、写真を引き締める
幻想的な写真を使いたい
メリハリのある料理写真
精読率
記事を一気に読ませたい
ストレスを与えずに読ませたい
精読率を上げたい
安定感
視線を安定させる
ヒエラルキーを明確にする