Web関連

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

0

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

y_kimura_kihon.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

関連するサービス

Webデザイン制作

関連コラム

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    「LINEHERE」という便利なアプリが登場!

    みなさんは、友達や家族と待ち合わせをした時なかなか相手を見つけられない…

  2. Web関連

    顧客に物を買わせる第一歩!

    通販番組のフライパンが気になっているIAの加藤です。最近、なぜ…

  3. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?

    大企業から中小企業まで数多くのリクルートサイトが存在しますが「この職場…

  4. Web関連

    コンテンツ内容がわかるいいバナー広告を選んでみた

    最近、バナーの制作依頼が多く、Yahooのバナーに関する規約も変わりま…

  5. Web関連

    今さら聞けない!アクセスログ解析のやり方コラム ~3つの基本指標編~

    つい先日、よく行くクライアント先まで外出に行く途中、電車の中で一緒にい…

  6. Web関連

    【越境ECサイト構築】爆買い終了!お土産は自宅で買う時代に

    2020年の東京オリンピックの影響もあり、いま日本は世界中の人達のホッ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    スマートフォン専用サイトに力を入れないといけないワケ
  2. Web関連

    ターゲットで変わるサイトカラーの選び方
  3. Web関連

    今からでも遅くない!BtoB?BtoC?EC?ってなに?
  4. Web関連

    値段安く、使いやすく。格安SIMサービスの魅力
  5. SNS関連

    Web制作会社がアパレル業界のSNS戦略について調査してみた
PAGE TOP