MENU
ブログ管理者 よこぽよ
執筆 よこぽよ
Amazonデバイス沢山持っています。
Fire TV好きです。

アレクサも日々活用。
デバイスを使っていて気づいたことを発信しています。

家電・ガジェットの記事、ブログ運営(主にCanva)のこと。

北海道に住んでいるため道民ネタ発信もしています。
PVアクセスランキング にほんブログ村

デザインとは ? 4つの基本原則を勉強してみた !

クリックできる目次
スポンサーリンク

デザインとは ? 基本原則を勉強して考えてみた !

こんにちは(*^。^*)

現在Webクリエイターの学校(職業訓練)に通っているよこぽよ( yokopoyoblog )と申します。

この記事を書いている時点ではHTML、CSS、jQueryの授業を駆け足で終えたばかりです……(*_*;

まだAdobe illustrator、photoshopの授業には入っていません。

しかしすでにデザインの基本原則』を授業で習いましたので、自分なりに深堀りしてみました。

デザインの本を読むと今回習ったことより更に踏み込んだことが色々書いてあります。

なので今回教えてくれたのはプロのウェブデザイナーさんですが、基本 (基礎中の基礎) を私達に叩き込んでくれたのだろうと思います。

まず、『デザインはセンスではなく知識』なので……

  • なんとなく素敵
  • あれっぽくて可愛い
  • どことなくシャレオツ

    こーゆーのは無し(‘ω’)
場合によっては全然テキトーで良い時もあると思いますけど( ^ω^)・・・ムム

センスが役に立たないのではなく、デザインしたものは説明(プレゼン)する必要があるため。
クライアントを説得(納得)させる必要がある。

「なぜこの色にしたか?」「なぜこのフォントにしたか?」「なぜこの配置にしたか?」…etc

その為にも知識は必須!

よこぽよ

そこまで深く考えたことなかった~

では早速、『デザインの基本原則4つ』をご紹介します。

Bedrock of the design( デザインの基盤 )
  • 近接
  • 整列
  • コントラスト
  • 反復

いや、知ってるしって思った方…ちょっと待ってください!

私も思いました。

デザインは得意ではないとはいえ、ブログを1年以上やっているのだから「近接・整列・コントラスト・反復」って気をつけてるし、聞いたことあるしって思いました。

でもプロのデザイナーさんに教えて貰う機会なんて滅多にないと思ったので、かなり真剣に授業を聞いた。

そして、自分は甘いと気づきました。…全然出来ていなかった(;´∀`)

プロ目線は厳しい(´-ω-`) ←当たり前ですね…

今回教えて貰った「近接・整列・コントラスト・反復」1つずつ簡単にご紹介します!!

1. 近接

近接とは、関連するものは近くに配置し、関係の薄いものは遠ざけるというものです。

「果物の名前でわかる」とかは無しとして、くっついているからその食べ物の名前だとわかる。

近接の例
右の方が果物名がわかりやすい!

人は見たときに近いものは関係があって、離れているものは関係が薄いと自然に思います。

基本原則の近接
基本原則の近接

視覚的な配置の関係から情報をグループ化します。

近接のポイント

近接

配置だけではなく、色や大きさを揃えるというのも近接的な要素があるとデザイナーさんは考えるそうです。

  • 関連性のある情報はきちんと近づける
  • 近づいているからこそ離したものに意味を付けられる
ネコ

まずは情報を得やすい構造にすることを意識しましょ

2. 整列

整列したひよこ

整列は、そのままなのですが要素をきちんと整列させること。

基本的にデザインの全てに当てはまり、デザインする時はまずは整列から!と言っても過言ではないくらい大切。

要素と要素が離れていても、整列すると線が見えます。

整列
オンラインデザインツールCanvaのテンプレ↑

その線に拘って全ての要素を配置してみると、綺麗に整列されたデザインが出来ます。

整列は誰でも自然とやってるとは思うんですが、自分の今までのデザインを見ると意外に(いや、全然)出来ていなかった…

出来ていたとしても若干のずれが確認出来たり、誤魔化していたり(;´∀`)

よこぽよ

こっちを整列するとあっちがずれてしまう…などもよくあります。

整列のポイント

整列されたデザイン

整列は画面全体を見てきちんとレイアウトする!

一部のものさえ整列していればいいというものではないです。←これが意外とムジー…

整列されたものは揃って見えるだけでなく、整列によって生まれるラインはイメージを伝える手段にもなります。

整列って簡単そうで、実は一番難しいと思いました。

すごく意識して気にして定規をあてて…とやっていると大変な作業。

最初は大変でも「整列整列整列整列整列」と気をつけていると、揃っていないものを見た時に「きもっ」と直に思うようになるそうです。

チョリー

がんばろ~!

3. コントラスト

コントラスト
contrast = 対比

コントラストにはいろんな種類があります。

色の濃淡・フォントの大小・線の太い細い・余白の大きさなどなど上げればきりがないです。

画像コントラストの例
↑上のデザインだと大きい文字から順に読んでいくはず!

要素と要素を比べて大小の差をつける事。

大きいものを見てから小さいものへと視線が動くので画面に動きを与えることも出来ます。

それが前後関係にも似た奥行きの表現にも。

よこぽよ

視線誘導っていうらしいです。

コントラストは今回授業で習ったデザインの基本原則近接・整列・コントラスト・反復の中で個人的に一番興味深かったです。

正直コントラストの写真を見た時、大した感動もなく…コントラストって濃淡とかそうゆうことだよね?

そんな感じで最初はあまり興味を持てなかったのですが、それだけではなかった。

世の中コントラストだらけだと気づいた。 画像引用元Canva
コントラストの画像Canva
コントラストって見やすい!画像引用元Canva

大と小、前と後、濃と淡、メリとハリ、ツンとデレ、SとM、コントラストがはっきりしているとぞくぞくする!

チョリー

ギャップだよね~♪

コントラストのポイント

はっきりと違わせる、似せてはダメ。

コントラストに変化を与えると読みやすくなったり、ページに動きを与えたり、印象も変わります。

ひよこ

敢えてコントラストを抑えるデザインもあるとは思いますよー

コントラストを少な目にすると落ち着いた印象になるそう(*・ω・)(*-ω-)(*・ω・)(*-ω-)ウンウン
(かしこまった席ではコントラストは控え目)

大小をつけると遠近感が生まれます。

遠近感
手が大きく、人は小さい

また、近い文字でも色の濃い薄いをつけると見やすくなったり目立たせることが出来ます。

近いけど文字の色に濃淡をつけると見やすくなったヽ(^。^)
ジャンプ率を効かせたデザインで読みやすく!

ジャンプ率という言葉をご存知でしょうか。

私は知りませんでした。

ジャンプ率」とは、テキストレイアウト時の本文と、見出しの文字サイズの比率のことを言います。

ジャンプ率をつけて見やすくするのはデザインをする時に無意識にやっているとは思いますが、より意識していこうと思いました。

一般的に言われているのは以下。

ジャンプ率が高いと賑やか、躍動的、若年向けの印象。

 ジャンプ率が低いと落ち着いた、高級感のある、大人っぽい印象。

コントラストの例(金額のコントラスト)

30万円の美顔器を紹介した後で5万円の美顔器を紹介すればコントラスト効果で5万円の美顔器が大した金額じゃなく感じられる。

デザインや文章にコントラスト(メリハリ)をつけて、人の気持ちを動かせる作品を作れるようになれたらいいなと思います。

4. 反復

反復

反復とは、デザインの中の何かしらの特徴をページ全体、もしくは作品全体を通して繰り返すことです。

例)フッターやヘッダー、サイドバーの色やデザインは全ページ共通にするなど。

反復を漠然と使うんじゃなくてページ全体を統合するようなポイントとして効果的に使います。

色や形、テクスチャやレイアウトなどなど、視覚的に認識できるものなら何でもOKです。

繰り返すことで作品に一貫性が生まれてきます。

デザインの反復

反復のポイント

  • デザインの中で特徴的な物を効果的に使う
  • 反復を利用して全体に統一感やリズム感を与える
メリット
デメリット
  • 反復することでユーザーに安心感操作性の向上も期待できる
  • やりすぎるとくどい、つまらないという印象になる

特に、Webサイトなどユーザーに操作(クリックなど)を促すものの場合、この「反復」の生み出す「統一性」が非常に重要です。

反復ボタン
このボタンは押せるのかな?とユーザーに思わせることができる。

ボタンの色や大きさや配置などを「反復」することで、ユーザーにここが操作できる部分なんだなと感覚的に伝えることができます。

反復の例

サルのロゴ

この原則はユーザビリティ(ユーザーが使いやすいかどうか)にも大きく関わってきます。

よこぽよ

会社のロゴも「反復」によって共通性を与えられていたなんて深く考えたことはなかったな~

4つの原則が生み出す相乗効果

4つの基本原則(近接・整列・コントラスト・反復)を見てきましたが、どれか1つという事ではなく、それぞれを絡めながら相乗効果を狙って上手にデザインしていく!←それがなかなか難しいんですけどね^^;

近接だけではダメだし、整列だけではいいデザインはできません。

4つを意識しながらデザインすることで、きっと読み手にも優しい素敵なデザインができることでしょう。

よこぽよ

近接・整列・コントラスト・反復の相乗効果🤔…!

デザインの基本原則は超基本

近接・整列・コントラスト・反復はあくまで基本。

もちろんこの基本を破るのだってありですがルールを破る前に基本を知っているのといないのではその効果はぜんぜん違います。

もぐらマン

ですよね~まずは基本ルールを知ろう!

\『まずは基本を知った上でデザインを頑張ってください』と教えていただきました /

『ルールを破れるようになるにはまずルールを知らなければいけないんだよ。
 ルールを破るなら、意識的でなきゃ意味がない。』

デザインに拘りすぎる必要がない時もあると思います。

でも、デザインの基本原則を知っていることで見てくれる人の気持ちを動かすことが出来たら…

  1. 目線が動くと気持ちが動く
  2. 気持ちが動くと行動(購入)に繋がる

デザインにセンス不要、 必要なのは知識

おれ、デザインのセンスないかも・・・
4つの基本原則だけやっとけって。

今回習った基本原則は、ウェブデのザインだけではなく何かを作っていく上でとても大事だと思いました。

また、「余白もデザインの一つだからね」と言われたことは強く心に残っています。

私はすぐアイキャッチ画像などに情報を詰め込む癖があるので気をつけなきゃと思った(;´∀`)

先生

余白もデザインの一つだからね!

名刺などデザインが難しいと感じる場合は、プロが作ったテンプレートを使っていくのもありかな?と思いました。

名刺
オンラインデザインツールCanvaテンプレ

自分で整えていくのは人によっては至難の業かも⁉

有名な書籍「なるほどデザイン」にある『デザイナーの7つ道具』も、今回習ったデザインの基本原則が自然と出来る人でなければ難しいでしょう。

デザイナーの7つの道具
『デザイナーの7つ道具』 引用元:なるほどデザイン

最後に…

4つの基本原則を習いましたが、コントラストに対する考え方が一番斬新に感じました。←私の個人的な意見

『この世の全ての性質はコントラストによって成立している。それ自体で存在するものはなにもない。』

↑正直に言うと最初にこれを聞いた時、意味がわからなかった。わかります?

でも、『世の中全ての性質がコントラストによって成立している』ってことをグルグル考えながら街を歩くと意外と面白い発見がありました(゚∀゚)

デザインにはトレンドもありますが、少しでも上手に出来るように勉強を続けていきたいと思います。

よこぽよ&チョリー

最後までお読みいただきありがとうございました。

ひよこ

おっと!最後にご紹介したい方がいます

お友達でデザイナーの🌈ひなた猫々(ねね)@電脳劇&【ヒナレコ定❗️】のエンタメサイト放送@HNRC_official さんにも『デザインの基本原則はとても大切』と教えていただきました(゚∀゚)

ひなた猫々(ねね)さんの作品とブログはこちら↓

とても素敵な作品が並んでいますよー😇

ココナラでひなた猫々さんのギャラリーが見れます🌈

にほんブログ村 ブログブログへ
にほんブログ村

よこぽよブログInstagram

ラーメン食べ歩きInstagram

北海道ログ【札幌在住の道産子よこぽよ】Youtube

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
クリックできる目次