Webデザインの基礎知識 | アメーバブログ カスタマイズ

アメーバブログ カスタマイズ

アメーバブログ カスタマイズでアメブロをホームページのようにデザインしてみませんか?アメーバブログ カスタマイズ承っています。

とりあえずデザインてなんだと思いますか?

アップルの創始者であり、iPhoneの生みの親であるスティーブジョブスはデザインをこう定義しています。

Design is not just what it looks like and feels like. Design is how it works.
デザインとは単にどのように見えるか、どのように感じるかということではない。どう機能するかだ


ユーザにどういった印象を持たせるか、どんな機能があればユーザ体験が向上するかを追求するのが「デザイン」であり、自己表現をし、印象などはユーザに委ねる「アート」とは別物です。
Webデザインで多くのユーザーにリーチするためには「アート」であってはなりません。
では、もっと具体的に「デザイン」を定義すると

・実用的
・客観的
・意図がある

など、論理的に考える必要があります。
では、印象や機能はどのようにデザインしたらいいでしょうか。
考えてみましょう。

 

印象を与えるデザイン要素

見た目を魅力的にし、印象残すためには下記のことを踏まえてデザインする必要があります。

・色の組み合わせ
・タイポグラフィー
など

印象を決定するのに大きな役割を果たすのは「色の組み合わせ」です。
飲食店のHPでは黒背景を採用し、写真の鮮やかさを引き立てる意図があります。

また、保育園や幼児向けはフォントを丸文字にし、柔らか印象を出すなどタイポグラフィーも印象を操作する要素です。

その他、印象を与える要素はありますが多くなってしまうのでここでは割愛します。

 

 

機能を与えるデザイン要素

・情報に優先度を設定
・視線の流れのルール
など
ユーザーがストレスなく使うにはどうしたらよいかを常に考える必要があります。特に大事なのは例で挙げた「視線の流れ」と「情報の優先度」になります。HPにおいて、視線は「Z」のように左上から右上、左下に行き右下に移動しやすいです。なので最初に与えたい情報を左上に配置します。
サイトタイトルやロゴなどを左上によく配置されているのは「このサイトはこのようなサイト」というのをユーザーに与えるためにデザインされているのです。

 

 

まとめ

いかがでしたか。デザインとアートの違い、デザインとは論理的に説明できるものであるがわかったと思います。
この記事では簡易な説明にしましたが、WEBデザインに関してはこちらのブログで詳しく書いていますのでよかったら参考にしてみてください。