デザインとは ? 基本原則を勉強して考えてみた !
こんにちは(*^。^*)
現在Webクリエイターの学校(職業訓練)に通っているよこぽよ( yokopoyoblog )と申します。
この記事を書いている時点ではHTML、CSS、jQueryの授業を駆け足で終えたばかりです……(*_*;
まだAdobe illustrator、photoshopの授業には入っていません。
しかしすでに『デザインの基本原則』を授業で習いましたので、自分なりに深堀りしてみました。
デザインの本を読むと今回習ったことより更に踏み込んだことが色々書いてあります。
なので今回教えてくれたのはプロのウェブデザイナーさんですが、基本 (基礎中の基礎) を私達に叩き込んでくれたのだろうと思います。
まず、『デザインはセンスではなく知識』なので……
- なんとなく素敵
- あれっぽくて可愛い
- どことなくシャレオツ
↑
こーゆーのは無し(‘ω’)
センスが役に立たないのではなく、デザインしたものは説明（プレゼン）する必要があるため。
クライアントを説得（納得）させる必要がある。
「なぜこの色にしたか？」「なぜこのフォントにしたか？」「なぜこの配置にしたか？」…etc
その為にも知識は必須！
よこぽよそこまで深く考えたことなかった~
では早速、『デザインの基本原則4つ』をご紹介します。
- 近接
- 整列
- コントラスト
- 反復
いや、知ってるしって思った方…ちょっと待ってください！
私も思いました。
デザインは得意ではないとはいえ、ブログを1年以上やっているのだから「近接・整列・コントラスト・反復」って気をつけてるし、聞いたことあるしって思いました。
でもプロのデザイナーさんに教えて貰う機会なんて滅多にないと思ったので、かなり真剣に授業を聞いた。
そして、自分は甘いと気づきました。…全然出来ていなかった(;´∀｀)
プロ目線は厳しい(´-ω-`) ←当たり前ですね…
今回教えて貰った「近接・整列・コントラスト・反復」1つずつ簡単にご紹介します！！
1. 近接
近接とは、関連するものは近くに配置し、関係の薄いものは遠ざけるというものです。
「果物の名前でわかる」とかは無しとして、くっついているからその食べ物の名前だとわかる。
人は見たときに近いものは関係があって、離れているものは関係が薄いと自然に思います。
視覚的な配置の関係から情報をグループ化します。
近接のポイント
配置だけではなく、色や大きさを揃えるというのも近接的な要素があるとデザイナーさんは考えるそうです。
- 関連性のある情報はきちんと近づける
- 近づいているからこそ離したものに意味を付けられる
ネコまずは情報を得やすい構造にすることを意識しましょ
2. 整列
整列は、そのままなのですが要素をきちんと整列させること。
基本的にデザインの全てに当てはまり、デザインする時はまずは整列から！と言っても過言ではないくらい大切。
要素と要素が離れていても、整列すると線が見えます。
その線に拘って全ての要素を配置してみると、綺麗に整列されたデザインが出来ます。
整列は誰でも自然とやってるとは思うんですが、自分の今までのデザインを見ると意外に(いや、全然)出来ていなかった…
出来ていたとしても若干のずれが確認出来たり、誤魔化していたり(;´∀｀)
よこぽよこっちを整列するとあっちがずれてしまう…などもよくあります。
整列のポイント
整列は画面全体を見てきちんとレイアウトする！
一部のものさえ整列していればいいというものではないです。←これが意外とムジー…
整列されたものは揃って見えるだけでなく、整列によって生まれるラインはイメージを伝える手段にもなります。
整列って簡単そうで、実は一番難しいと思いました。
すごく意識して気にして定規をあてて…とやっていると大変な作業。
最初は大変でも「整列整列整列整列整列」と気をつけていると、揃っていないものを見た時に「きもっ」と直に思うようになるそうです。
チョリーがんばろ~！
3. コントラスト
コントラストにはいろんな種類があります。
色の濃淡・フォントの大小・線の太い細い・余白の大きさなどなど上げればきりがないです。
要素と要素を比べて大小の差をつける事。
大きいものを見てから小さいものへと視線が動くので画面に動きを与えることも出来ます。
それが前後関係にも似た奥行きの表現にも。
よこぽよ視線誘導っていうらしいです。
コントラストは今回授業で習ったデザインの基本原則「近接・整列・コントラスト・反復」の中で個人的に一番興味深かったです。
正直コントラストの写真を見た時、大した感動もなく…コントラストって濃淡とかそうゆうことだよね？
そんな感じで最初はあまり興味を持てなかったのですが、それだけではなかった。
大と小、前と後、濃と淡、メリとハリ、ツンとデレ、SとM、コントラストがはっきりしているとぞくぞくする！
チョリーギャップだよね~♪
コントラストのポイント
はっきりと違わせる、似せてはダメ。
コントラストに変化を与えると読みやすくなったり、ページに動きを与えたり、印象も変わります。
ひよこ敢えてコントラストを抑えるデザインもあるとは思いますよー
コントラストを少な目にすると落ち着いた印象になるそう(*・ω・)(*-ω-)(*・ω・)(*-ω-)ウンウン
（かしこまった席ではコントラストは控え目）
大小をつけると遠近感が生まれます。
また、近い文字でも色の濃い薄いをつけると見やすくなったり目立たせることが出来ます。
『ジャンプ率』という言葉をご存知でしょうか。
私は知りませんでした。
「ジャンプ率」とは、テキストレイアウト時の本文と、見出しの文字サイズの比率のことを言います。
ジャンプ率をつけて見やすくするのはデザインをする時に無意識にやっているとは思いますが、より意識していこうと思いました。
一般的に言われているのは以下。
ジャンプ率が高いと賑やか、躍動的、若年向けの印象。
ジャンプ率が低いと落ち着いた、高級感のある、大人っぽい印象。
30万円の美顔器を紹介した後で5万円の美顔器を紹介すれば、コントラスト効果で5万円の美顔器が大した金額じゃなく感じられる。
デザインや文章にコントラスト(メリハリ)をつけて、人の気持ちを動かせる作品を作れるようになれたらいいなと思います。
4. 反復
反復とは、デザインの中の何かしらの特徴をページ全体、もしくは作品全体を通して繰り返すことです。
例）フッターやヘッダー、サイドバーの色やデザインは全ページ共通にするなど。
反復を漠然と使うんじゃなくてページ全体を統合するようなポイントとして効果的に使います。
色や形、テクスチャやレイアウトなどなど、視覚的に認識できるものなら何でもOKです。
繰り返すことで作品に一貫性が生まれてきます。
反復のポイント
- デザインの中で特徴的な物を効果的に使う
- 反復を利用して全体に統一感やリズム感を与える
特に、Webサイトなどユーザーに操作（クリックなど）を促すものの場合、この「反復」の生み出す「統一性」が非常に重要です。
ボタンの色や大きさや配置などを「反復」することで、ユーザーにここが操作できる部分なんだなと感覚的に伝えることができます。
反復の例
サルのロゴこの原則はユーザビリティ（ユーザーが使いやすいかどうか）にも大きく関わってきます。
よこぽよ会社のロゴも「反復」によって共通性を与えられていたなんて深く考えたことはなかったな~
4つの原則が生み出す相乗効果
4つの基本原則（近接・整列・コントラスト・反復）を見てきましたが、どれか１つという事ではなく、それぞれを絡めながら相乗効果を狙って上手にデザインしていく！←それがなかなか難しいんですけどね^^;
近接だけではダメだし、整列だけではいいデザインはできません。
4つを意識しながらデザインすることで、きっと読み手にも優しい素敵なデザインができることでしょう。
よこぽよ近接・整列・コントラスト・反復の相乗効果🤔…！
デザインの基本原則は超基本
近接・整列・コントラスト・反復はあくまで基本。
もちろんこの基本を破るのだってありですがルールを破る前に基本を知っているのといないのではその効果はぜんぜん違います。
もぐらマンですよね~。まずは基本ルールを知ろう！
＼『まずは基本を知った上でデザインを頑張ってください』と教えていただきました ／
『ルールを破れるようになるにはまずルールを知らなければいけないんだよ。
ルールを破るなら、意識的でなきゃ意味がない。』
デザインに拘りすぎる必要がない時もあると思います。
でも、デザインの基本原則を知っていることで見てくれる人の気持ちを動かすことが出来たら…
- 目線が動くと気持ちが動く
- 気持ちが動くと行動（購入）に繋がる
デザインにセンス不要､ 必要なのは知識
今回習った基本原則は、ウェブデのザインだけではなく何かを作っていく上でとても大事だと思いました。
また、「余白もデザインの一つだからね」と言われたことは強く心に残っています。
私はすぐアイキャッチ画像などに情報を詰め込む癖があるので気をつけなきゃと思った(;´∀｀)
先生余白もデザインの一つだからね！
名刺などデザインが難しいと感じる場合は、プロが作ったテンプレートを使っていくのもありかな？と思いました。
自分で整えていくのは人によっては至難の業かも⁉
有名な書籍「なるほどデザイン」にある『デザイナーの7つ道具』も、今回習ったデザインの基本原則が自然と出来る人でなければ難しいでしょう。
最後に…
4つの基本原則を習いましたが、コントラストに対する考え方が一番斬新に感じました。←私の個人的な意見
↑正直に言うと最初にこれを聞いた時、意味がわからなかった。わかります？ｗ
でも、『世の中全ての性質がコントラストによって成立している』ってことをグルグル考えながら街を歩くと意外と面白い発見がありました(ﾟ∀ﾟ)
デザインにはトレンドもありますが、少しでも上手に出来るように勉強を続けていきたいと思います。
よこぽよ&チョリー最後までお読みいただきありがとうございました。
ひよこおっと！最後にご紹介したい方がいます✨
お友達でデザイナーの🌈ひなた猫々（ねね）＠電脳劇＆【ヒナレコ定❗️】のエンタメサイト放送@HNRC_official さんにも『デザインの基本原則はとても大切』と教えていただきました(ﾟ∀ﾟ)
ひなた猫々（ねね）さんの作品とブログはこちら↓
とても素敵な作品が並んでいますよー😇
ココナラでひなた猫々さんのギャラリーが見れます🌈
にほんブログ村
ポチップ