Web関連

基本を見直す!デザインの基本原則

0

こんにちは!デザイナーの勇希です!
今回はウェブデザインをするにあたっての基本原則を紹介したいと思います!
スポーツと一緒で、デザインにも基本があって応用があります。
僕もこの記事を書いていて、改めて基本というところをしっかり見直すことがで
きました!

y_kimura_kihon.jpg

そもそもデザインとはなんなのか

デザインとは一体どのようなことをデザインと言うのでしょうか。
デザインとアートは全く違うものだと言いますが、デザインとは主
に、問題解決の為の手段であり、お客さんの要望とターゲットユーザーを
考慮した設計、表現を考えるということです。

アートは自己表現であり、自分が作りたいものを作ったり自分を中心とした所
から生み出す創作物のことです。
問題解決の為のデザインと、自己表現のアートではまったく意味が異なってくる
のですね。

デザインの基本原則その1「近接」

デザインの「近接」とはすなわち関連する要素は近くに配置し、そうでないもの
は離して配置させるということです。
「情報のグルーピング化」とも言います。
まとまった要素を綺麗に配置し空白を整えた上で、ユーザーが見たときにこの情
報は関連性があるものなのだなと認識しデザインが
わかりやすくなります。情報が詰まりすぎた近接は逆に見づらくなったりもしま
すので、近接を行った際には空白の取り方も重要なポイントになってきます。

デザインの基本原則その2「整列」

デザインの「整列」とは読んだままですが、各要素を綺麗に配置させることで見
やすくするということです。
テキストも左揃え、中央揃えなど、綺麗に整えることで見やすくなります。

整列を意識すると、デザイン上に見えない線が出来てきます。
そうすると各要素にまとまり、一体感が生まれて見やすくなります。
世の中にはあえてグリッドから外したデザインを表現しているサイトもリリース
されていますが、
現代ではグリッドに沿ったデザインが主流ということもあり、デザインを行う際
にはしっかりガイドを引いたりグリッドラインを意識して
制作することが望ましいです。

デザインの基本原則その3「反復」

デザインの「反復」とはデザイン上の要素を「繰り返す」ということになります。
書体やアイコン、カラーも含め同じ要素を繰り返し使うことで統一感や一貫性、
共通性というもの生まれます。
一貫性があることで情報が見やすくなりますし、一貫性のある中に際立たせたい
要素を置くことで特別感を出すこともできます。

デザインの基本原則その4「コントラスト」

デザインの「コントラスト」とは異なる要素が2つ以上あった場合により際立た
せたい要素のボリューム感を変えることで目立たせることです。
例えばフォントを太くして見たりとか色を変えてみる、フォントサイズを大きく
したり、色の濃淡をはっきりさせる..などです。

要は2つの要素に対して大きく差異を出すことで、コントラストが強まり、情報
が見やすくなるということです。
例えば情報サイトを見ていても、見出し、中身出し、本文といったようにコント
ラストが明確に表現されているはずです。
全てが同じボリューム感だとすごく見づらくなってしまいますので、この辺りは
結構大胆に表現しても良いかもしれません。

まとめ

いかがでしたでしょうか。
今回はデザインを行う上での本当に基本的な部分の紹介でした。
あえてこのルールから逸脱したデザインを行うこともありますが、それはこの四
つの基本を理解している上で、
あえて外したデザインを行っているということです。
まずは基本を理解することが大切だと思います。

また、この4つの原則のどれか一つができていれば良いわけではなくて、全ての
原則をうまく使い分けてデザインすることで
相乗効果が生まれ、より見やすく、美しいデザインを作るベースができるのだと
思います。

デザイン制作にはまだまだたくさんの理論というものがありますが、一つ一つ理
解して実践していくことが大切ですので、
また機会がありましたらデザイン理論を紹介できたらと思います!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン制作

関連コラム

デザイナーが押さえておきたいweb配色パターン

0

ストレージ仮想化ってなんですか?前のページ

プロジェクトマネジメントについて考えてみよう次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. SNS関連

    実名でつながるソーシャルコミュニケーション

    Web業界の第一線で活躍するティファナがWeb関連情報をお届けしていま…

  2. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

  3. Web関連

    ウェアラブルで健康管理

    健康管理といえば、メディアの情報からセルフチェックをしたり病院で検査を…

  4. Web関連

    知っているようでよく知らない、著作権

    今回は、著作権について調べてみました。著作権、と言われて漠然と理解した…

  5. Web関連

    【必見!】円滑にコミュニケーションをとるための話し方、「PREP法(プレップ法)」とは?

    Web制作を進めていくうえで、コミュニケーションをとることはとても重要…

  6. Web関連

    免疫力を上げる!?インフルエンザから体を守る方法

    こんにちは、管理部の川又です。今年は昨年以上にインフルエンザや…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    とっても効果的!Facebook広告の活用メリット
  2. Web関連

    健康診断を行う理由と未来
  3. Web関連

    Google「Picasa」を「Google フォト」に統合
  4. AI関連

    「DX(デジタルトランスフォーメーション)実現」でウィズコロナを乗り越える!これ…
  5. Web関連

    米政府からの依頼!?「ペンタゴンをハックせよ」
PAGE TOP