デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）

とりあえず時間のない人はこの3つだけでも食べて

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。

例えばそれがセンスと呼ばれることもありますし、Googleのように、数字（集合体データ）によってデザインを壊す場合もあります。ルールは、窮屈に思えることですが、先を考えると、自分を楽にしてくれるものです。

何でこれがダメなんだと思った時には再度基礎を思い出せばよいだけですが、それが分からないと、結局道をはずしたまま帰ってこれなくなるからなんですよね。そんな基本的なところを学べる記事となっています。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]
この記事はこの本の内容にそって、噛み砕いて説明されております。

ここで出てくる名言。熱いっすねぇ。

「ルールを破るためには、まずルールを知らなくてはならない」

[Webデザイン] 文字組みについて本気出して考えてみた

文字組みについての基礎。

とにかく凄く分かりやすい画像で解説されていますので、読み終えたらおそらく「ゴチになります」とつぶやいてしまうかもしれないです。実際に文字組みについて非常に優れた基礎となるはずです。

ただ、解析屋の私としては、webデザインが、紙広告っぽくなるとクリック率が落ちると言う現実も知っているので、あくまでも基礎を押さえた上でwebサイトに合わせたデザインが求められるかもしれませんね。

ここでも名言頂きました。

ぜひ意識していただきたいのが文字と文字の間のホワイトスペース。「文字と文字の間隔が均等に見えるように意識しながら手作業で調節することが大切」だと思っています。

デザインの要素と原則

デザインに使われる要素について触れられています。

それぞれのデザインのどこが、どう素晴らしいのかを理解する事で、初めてそのデザインを生み出せる、という考えのもと作られたエントリー。「ただ良い」ではなく「こうだから良い」と言えるように、それぞれどんな要素にエッジが効いているかを解説されています。

この記事のポイント

私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。

色彩スキル編

webデザイナーの色彩スキルを磨くエントリーまとめ

色彩については未だ過去のまとめ記事が通用しそうなので大幅カットで。
色彩力を固めるエントリーのまとめです。

ここでのポイント。

色彩感覚とは『センスの問題』ではなく、たんに勉強不足な事が多い。

もう一点。以下も参考にどうぞ。

タイポグラフィ

基本的だけど大切なタイポグラフィのシンプルな14のルール（意訳記事）

タイポグラフィのルールとしての基礎が学べます。
実にシンプルにルールを分散化して説明されているため、分かりやすい。

以下もあわせてどうぞ

• タイポグラフィの動画がかっこよすぎて鳥肌たった
• クリエイティブタイポグラフィ61総まとめ

リンク元からこんな名言を頂きました。


With knowlege and experience comes the decision if it is appropriate to stick to or break these rules.
知識と経験をつむ事で、そのルールを破るべきかどうかを適切に判断できるようになる
Simple rules for good typography






ホワイトスペース


ホワイトスペースを使ったウェブデザインの考え方

webデザインの観点からみたホワイトスペースについてです。
こちらはCSSのおさらいと一緒に進行しますので、webデザインの実践向けとなります。

ここで感じたポイント以下。


リズムが整っていれば、他の要素が主張したことが上手に伝わります。（中略）自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。




もう一点。以下の記事もあわせてみてください。
ホワイトスペース -十分に利用されていないデザインエレメント

同様にスペースの使われ方について、優雅さや、ユーザビリティなどの観点から解説されています。
これによって、また別の角度からスペースを考える切り口が増えます。

以下のポイントを把握しつつ、デザインも一緒に学べます。

• 優雅さと洗練さ
• レジビリティとユーザビリティ

翻訳記事のほうでも同様に素晴らしい言葉を発見したのでここに。


Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace.（略） The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.
ホワイトスペースの設計には、ガイドラインやルール、規則などない。（略）学ぶ為の最良の方法は実験と、他の設計を研究し、調べる事。目を養い、正しい余白を探れるようになってください。
Whitespace: The Underutilized Design Element | Tips






フォント選びやレイアウト


デザインの基礎力をワンランクアップしたい私の注意書き

上で紹介したスペースなど、様々な事が書いてます。

個人的にこの記事で注目なのが以下の
「2の配置、レイアウトの仕方の基本と」と「4のデザインの印象にふさわしいフォントを選ぶ」です。

ここで頂いたお言葉


たくさん見て、触って、自分でも作ってみないとそういうデザインの引き出しが増えていきません。誰だって最初は失敗してあたりまえ。






webデザイン


少しの手間で大きく変わる、細部にこだわったWebデザインを

webデザインにて、後一歩、どこにどんなこだわりを持つかを考えたときの一つのアイデアの種として。
1ピクセルにうっすらラインをいれたり、グラデーションをいれることで重みを調節したりと、色々と試せるようになってくるはずです。

注目のポイントはここ


デザインの授業の先生が言っていた言葉を未だに覚えています。「1 pixel line makes all the difference // 1ピクセルの線がすべてを変える 」



いかがだったでしょうか。
他にもこんな記事があるよというのがあれば是非教えてください。

あと文字組の記事でも紹介されているこの本。
デザインのルール、レイアウトのセオリー。

実は私ももっていて、困ったら使ってます。。

それでは、また。