コンテンツ戦略 デザイン

【デザイン入門】原理とスタイルから見る、デザインの全体像

本屋のデザイン書コーナーに立つと、静けさを感じる装丁と、視線を掴んで離さない装丁が同じ棚に並んでいます。
どちらも『デザインされたもの』であることに変わりはありません。
けれど、そこには明らかに違う考え方が働いています。
一方は情報を整えて読み手に届ける工夫、もう一方は感覚を揺さぶって手に取らせる工夫です。
同じ『デザイン』という言葉で括られるこの2つの働き方を、この記事では見取り図として整理していきます。

この記事では、デザインという広い領域を『原理』と『スタイル』という2つの見方で整理し、それぞれにどんなテーマが含まれるのかを一覧できる形で示していきます。
気になるところから、個別記事の入口として使ってください。

デザインとは何か

デザイン入門 窓から差し込む金色の光と青い夕景のイラスト

デザインを一言で捉えるなら『目的を持って形と色を選ぶ営み』です。
目的が2階建てになっている点が、デザインの特徴です。
1階には『機能』があります。
読める、使える、伝わる、迷わない、といった働きです。
2階には『感情』があります。
安心する、心地よい、信頼できる、格好いいと感じる、といった働きです。
優れたデザインは、この2階建てを両立させています。

ここで、アートとの違いに軽く触れておきます。
アートは、機能を持たなくても成立します。
見る人がいなくても、作り手の内側から生まれた形がそのまま存在してよい、という前提があります。
一方でデザインは、必ず誰かに届けるための働きです。
この違いを、脳の使い方(収束的思考/拡散的思考)と商用性の角度から掘り下げた記事もあります。

デザインを理解する、2つの見方

デザインを学ぼうとすると、しばしば道に迷います。
その理由の1つに、デザインには『時代を超えて変わらない部分』と『時代とともに移り変わる部分』が同居しているという事情があります。
この2つを分けずに見てしまうと、流行を追いかけているうちに基本が抜け落ちたり、逆に基本ばかり学んで表現の幅が広がらなかったりします。

原理という土台

原理とは、人間の生理・認知・心理に根ざした働きのことです。
視線の動き方、色の見え方、余白の効果、明暗の対比。
これらはテクノロジーが変わっても流行が変わっても、人間の脳と目の作りが変わらない限り成り立ち続けます。
10年後に読んでも古びない、デザインの土台です。

スタイルという表現

スタイルは、特定の時代・地域・文化の中で生まれた表現の型です。
アール・ヌーヴォー、バウハウス、ミニマリズム、Y2K、グラスモーフィズム。
名前を聞くだけで頭の中に特定の視覚イメージが浮かびます。
それぞれのスタイルは、当時の技術・社会・思想を映しています。

スタイルは、原理よりも寿命があります。
流行が過ぎれば古く見え、時が経てば再評価されることもあります。
けれど、スタイルを知ることには実用的な意味があります。
自分が作るものに何を纏わせたいかを言葉にできるようになり、他の人が作ったものが『なぜそう見えるのか』を読み解けるようになります。

2つを行き来する読み解き

原理とスタイルは、対立する関係にありません。
原理という不変の土台の上に、スタイルという時代の衣装が乗っている、という関係にあります。
たとえばグラスモーフィズムというUIスタイルが心地よく感じられる理由には、透明感が空間の奥行きを示すという知覚の原理が働いています。
ブルータリズムがあえて『粗く見える』設計を選ぶ理由にも、明暗差と余白の心理が関わっています。
スタイルを見て『なぜこれが刺さるのか』を原理で説明できると、デザインは一気に立体的に見えてきます。
逆に原理を学んで『これは実際にどんな表現として現れているか』をスタイルで確認できると、抽象的な理論が肌感覚として腑に落ちます。

原理として扱うテーマの全体像

デザイン原理 星座のような光の線で描いた幾何学模様のイラスト

原理のパートで扱うテーマを、6つの系統に分けて整理します。
それぞれの系統に、代表的なテーマを並べています。

系統扱うテーマ根拠となる領域
視覚生理系視線誘導(Z・Fの法則)、コントラスト、明暗差、補色対比、余白の効果視覚生理学、色彩学
認知心理系ゲシュタルトの法則、メンタルモデル、五感と感情記憶、認知負荷認知心理学、ゲシュタルト心理学
色と身体反応自律神経と色彩、配色理論と配色パターン色彩心理学、生理学
媒体の物理RGBとCMYKの発色原理、タイポグラフィのジャンプ比、グリッドシステムと比率色彩工学、印刷技術、Web実装
実務基盤トーン&マナー言語化、CI/VIガイドライン、CTA心理、画像最適化、情報デザイン、ロゴデザインの原則ブランディング、UX、情報設計
アクセシビリティ・倫理加齢と視覚機能、色覚特性と弱視、ダークパターンとデザイン倫理ユニバーサルデザイン、行動倫理

これらは全体で20本以上の記事群として展開します。
色彩心理シリーズ、性格分類の視点とも密接に接続しています。
関連するテーマとして、色彩心理シリーズの入門ページもあわせて覗いてみてください。

スタイルとして扱うテーマの全体像

デザインスタイル 色とりどりの布が重なり合う幻想的なイラスト

スタイルは1つずつの記事として、または近縁のスタイルをまとめた形で展開します。
まず時代軸・文脈軸で並べた俯瞰マップを示します。

グループ代表的なスタイル特徴
装飾運動アール・ヌーヴォー、アール・デコ、ヴィクトリアン、ロココ、バロック植物・幾何・宮廷装飾を軸にした過剰な装飾美
20世紀初頭のモダニズムバウハウス、デ・ステイル、ロシア構成主義、シュプレマティズム幾何と機能美を追求した理論的デザイン運動
近代美術運動キュビズム、フォービズム、シュールレアリズム、ダダイズム、表現主義絵画史の運動から派生した造形言語
戦後モダン・ミニマルスイス・スタイル、スカンジナビアン・モダン、ミッドセンチュリー、ミニマリズム削ぎ落とす美学とグリッド理論の系譜
ポストモダン・反デザインメンフィス、コーポレート・メンフィス、パンク、アンチデザイン、デコンストラクティビズム秩序を崩し、意味をずらす表現
大衆文化・ポップ系ポップアート、キッチュ、サイケデリック、コラージュ、マキシマリズム大衆文化と鮮やかさを取り込む
レトロ・未来系Y2K、ヴェイパーウェイヴ、サイバーパンク、シンセウェイヴ、レトロ・フューチャリズム、カセット・フューチャリズム、ディーゼルパンク、スチームパンク、アフロフューチャリズム『過去から見た未来』の文化的バリエーション
ブルータリズム系ブルータリズム、ネオ・ブルータリズム、エコ・ブルータリズム、Webブルータリズム『あえて粗く見せる』の派生
UI機能ミニマルフラットデザイン、マテリアルデザイン、Bento Grid機能性優先の現代UI思想
モーフィズムUIスキューモーフィズム、ニューモーフィズム、グラスモーフィズム、クレイモーフィズムUIの質感表現の変遷
UI装飾トレンドダークモード、オーロラUI、フルーティガー・エアロ、リキッド・グラデーション直近のUIトレンド
タイポグラフィ・技法系タイポグラフィック、キネティック・タイポグラフィ、ハーフトーン、リゾグラフ、木版画、ピクセルアート、デュオトーン、アイソメトリック、3Dイラストレーション、手書き・レタリング、リーニュ・クレール、インフォグラフィック・エディトリアル技法から生まれる表現の系譜
和・東洋美学ジャパニーズ・トラディショナル、ジャポニスム、ジャパンディ、わびさび日本的美意識の国内表現と海外受容
インターネット・アエステティックダーク/ライト・アカデミア、コテージコア、ドリームコア、リミナルスペース、エセリアルアステティクスSNS発のムード先行型の美学
ゴシック・ダーク系ゴシック・デザイン、ゴシック・ボタニカル、バイオメカニカル・アート、グリッチアート、グランジデザインダーク・重厚・崩壊の表現
情緒・自然・文化由来オーガニック・ナチュラル、ラグジュアリー・プレミアム、ノスタルジック・ローファイ、チカーノ・アート特定の情緒・文化を纏う表現

全体では60本以上の記事群として展開します。
気になるグループから読み始めても、代表的な単独スタイルから読み始めても構いません。

媒体を超えた見方。Web・印刷・映像の違いと共通点

同じ『赤』でも、画面で見る赤と紙に印刷された赤では発色のしくみが違います。
静止画としての構図と、動画としての構図では、視線をどこに置くかの設計が異なります。
媒体ごとの制約を大まかに整理すると、次のように分かれます。

媒体性質主な制約
Web光と操作の媒体光の3原色で発色、読み手の環境が制御できない
印刷インクと触覚の媒体インクの色料で発色、一度刷ったら修正できない
映像時間と音の媒体時間軸を持ち、最初の数秒で離脱される可能性を抱える

興味深いのは、同じデザインスタイルであっても、媒体を移すと表情が変わるという点です。
ミニマリズムを紙面で表現すると余白と紙質が主役になり、映像で表現すると『何もない時間』が主役になります。
サイバーパンクを紙のポスターで見るときはネオン風の印刷技法と色の重なりが工夫の見せどころになり、映像で見るときはグリッチや光の点滅というスタイル固有の動きが加わります。
スタイルの記事では、この媒体ごとの表情の違いにも触れていきます。

心理学とデザインを重ねて見るという視点

心理学とデザイン 青とピンクの光の雲が重なるイラスト

デザインは、目に映る形と色を通して人の判断・感情・選択に働きかけます。
つまり、デザインを語ることは人の知覚と感情のしくみを語ることに近づいていきます。

なぜ病院の待合室に淡い青緑が多いのか。
なぜ高級ブランドのショップは照明を落とし気味にするのか。
なぜ小さな子供向けの商品には丸みを帯びた形が多用されるのか。
これらはすべて、色や形が人の身体反応と感情に働きかけるという心理の原理に立脚しています。
デザインは、その原理を意図して活用する営みです。
心理学とデザインを重ねて見ると、こうした『あたりまえの光景』が別の顔を見せ始めます。

関連するテーマとして、性格分類学入門もあります。
『どんな人に、どんな見え方が届くか』というブランド設計の視点で読み替えると、デザインとの接点が浮かび上がります。

目的別・入口ガイド

デザイン入門 星空に伸びる複数の光の道のイラスト

どこから読み始めるかで迷ったら、目的別の入口を目安にしてみてください。

目的別・入口ガイド

ブランドの世界観を作りたい
スタイルの記事群から入ります。
特に『和・東洋美学』『レトロ・未来系』『UI装飾トレンド』は、纏いたい世界観を言葉にする助けになります。

情報を伝える力を上げたい
原理の『視覚生理系』『実務基盤』が向いています。
視線誘導、コントラスト、情報デザインの記事から入ります。

色の使い方を深めたい
色彩心理シリーズを通読したうえで、原理の『色と身体反応』『媒体の物理』(RGB/CMYK)に進みます。

デザイン発注者として理解を深めたい
原理の『実務基盤』(トーン&マナー、CI/VI)と、スタイルの『UI機能ミニマル』『モーフィズムUI』が向いています。

誰にも届くデザインを考えたい
『アクセシビリティ・倫理』の記事群(加齢と視覚、色覚特性と弱視、ダークパターン)から入ります。

あなたが最近『心地よい』『格好いい』と感じたデザインは、どんな形をしていましたか。
その心地よさは、原理の働きだったでしょうか。
それとも、時代の空気が乗っていたのでしょうか。

-コンテンツ戦略, デザイン
-, , , , ,

PAGE TOP