【非デザイナー必見!】知っておくべきデザインの基礎法則6つ
ferret編集部:2015年1月23日に公開された記事を再編集しています。
非デザイナーであれば、デザインの世界はセンスであったり、感性の問題だから自分にはできない。あるいは苦手意識があると思われている方も少なくないのではないでしょうか。
しかし、美しいデザインには法則というものが存在します。デザインの法則さえ、理解できていれば非デザイナーであっても基礎的なデザインは可能です。
今回は、非デザイナーが押さえておくべきデザインの基礎的な法則についてまとめました。
このニュースに興味のあるあなたにおすすめ
・Webデザインに役立つ無料のツール・デザイン集まとめ
・これだけ読めば大丈夫!デザインの基礎が学べる厳選5記事
・【事例あり】ランディングページ作成の基礎記事2選+参考になるデザインサイト集8選
規則正しいデザインが必要な場合
1 繰り返しの法則
上記のような形は同じでも2つ並んでいるだけの状態を見てどのように感じますか?
多くの人は、「2つ並んでるだけ、よくわからない」と感じるかと思います。
それでは、続いて数を増やしてみましょう。
先ほどとは違い、「同じ形・サイズが一列に並んでいる、繰り返されている」と感じるのではないでしょうか。
なぜかというと、同じ形・サイズで複数並べることで規則性が生まれたことにより、一直線に並ぶ法則が一目で分るようになったからです。
このように、人間は視覚的に見た情報に規則性があったほうが認識しやすい傾向にあります。
2. リズムを作る法則
先ほどの「繰り返す法則」を行うことで統一感がでるものの、単調で物足りなく感じる事もあります。
さらに、繰り返す中にも強調したいものがある場合、「リズムを作る法則」がおすすめです。
先ほどのサイズと同じ画像の中に、大きなサイズの画像を加えて配列を変えてみました。
あえてサイズを大きくしたり、色・角度を変えてリズムを作ることによって、視覚的に優先順位が明確になり目に留まりやすくなります。
3. 見えない線に沿って左揃えの法則
上記の画像は、文字が上下左右と不規則にレイアウト(配置)されています。
特に、読むための文章が不規則なレイアウトの場合、「読む・認識する」ために目線を頻繁に移動しなければいけません。
そのため読みにくいと感じたり、違和感を覚えてしまいます。
そこで、先ほどのように規則性を加えてみました。
不規則だったレイアウトを規則正しく左揃えに整列させました。
左揃えにしただけで、情報が整理され見やすなったのではないでしょうか。
「見えない線に沿って左揃えの法則」は規則性が生まれ、視線移動が軽減される基本のレイアウトです。
不規則なデザインが必要な場合
4.補色を使って目立たせる
色においては、規則性(同系色)を意識すると対象が目立たなくなってしまう場合があります。
そのため、補色を活用することで、強調したい対象を目立たせることができます。
画像参照:http://rock77.fc2web.com/main/color/color1-2.html
補色とは、「正反対に位置する関係の色の組合せ」のことです。
(「赤 / 青緑」「黄色 / 青紫」など)
例えば、ホームページが、オレンジのトーン多めであれば、バナーは補色の青・紺色を使うと正反対に位置する色(不規則性)ほど目立ちやすくなります。
5. あえて文字だけにする
写真などのコンテンツが多く並んでいる際に有効なテクニックとして、あえて文字だけの不規則性を出すことでユーザーの目を引くポイントになります。
6. 立体的にする
先ほどの写真と同様に、デザインのパターンが多い場合、「立体感・質感」を出すと効果的です。
以下では、平面的なデザインの中に立体的なデザインを加えました。
まとめ
デザインは、その人の感性や経験だけでなく、今回のような規則性やルールに基づいて構成される場合が多いです。
その中で、デザインの基礎として規則性は不規則性を意識した「情報整理」が重要です。
運営者がアピールしたい情報を自然に協調するということを心がけたデザインにしましょう。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング