PakuReserve( パクレゼルヴ ) R&D Laboratory

こんばんは、Yamatoです。
何だか、涼しいような…。まだ暖かいような…。
明日から11月っすよ!?

さて、今回はその4つの内の3つ目を説明します。

3. 対比（コントラスト）の原則とは?

対比を作るには？

対比を作るには文字の場合は大きさ、色、フォントを変えたり、アンダーラインを引いていきます。ポイントは強調したいものを大胆に装飾することです。また、反対に視覚的に弱めるところは弱めてメリハリをつけると読みやすくなります。

対比（コントラスト）の原則を使う前

悪い例

これでは、最初にデザインと言っているのにも関わらず、デザインと名前が同等に見えてしまいます。

対比（コントラスト）の原則を使った後

いい例

原則に適用させると、「デザイナー」があって、見出しになっている部分・名前になっている部分が明確になりました。

このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。

では、また来月〜(・v・)/

Yamato Design関係

こんにちは、Yamatoです。
だいぶ涼しくなってきましたが、9月も今日で終わりなのに、今日は真夏日手前の気温だそうです。
今年は、地震に台風に…。災害がとても多く感じました。

さて、今回はその4つの内の2つ目を説明します。

2. 整列の原則とは？

1. 見た目を統一する

2. グループ化した要素を揃える

1. 見た目を統一する

グループ化されたものでも配置すると散らかった家のようにバラバラになってしまいます。まずは見た目を統一。位置や大きさ、色を揃えます。すると、グループ同士でも同じグループの属性だというヒントを訪問者に与えることができます。

2. グループ化した要素を揃える

次にこれらを見えない線を引いて配置を整えていきます。配置を整えると、見た目が整然とした印象となって美しくレイアウトができるようになります。

整列の原則を使う前

悪い例

雑然としていて、グループ化しているのはわかりますが要素の関係がこれではわかりません。

整列の原則を使った後

いい例

まとめたり、左揃えにすることによって、整然とした印象を与えることが出来ました。
どちらの文字が、どこに属しているのかなどが解り易くなります。

このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。

では、また来月〜(・v・)/

Yamato Design関係

こんにちは、Yamatoです。
暑い日があまりなかった、ずっと梅雨のような夏でした。
もう秋ですねぇ〜。さて、芸術の秋！ということで、頑張ります。

前回、レイアウトの原則は4つの原則があると、記載しました。
今回はその1つを説明します。

1. 近接の原則とは？

近接の法則とは関係のある要素を近づけ、関係薄い情報同士は遠ざけるという原則です。私も初めてレイアウトをやろうとしたとき、とりあえず空きスペースができないようにと要素同士を広げて結果的に散漫な印象になったことがあります。
関連する情報を近づけることで、デザインをグループ化することになります。ページの構造と内容について手がかりを訪問者に与えることができるので、ユーザービリティに一役買うことができます。

ダメな例

このままでは写真と画像の距離が遠すぎるので、文字と写真がどのように対応しているかわからなくなります。

いい例

写真と画像の距離が近いので、それぞれ写真と文字で1セットのように見えています。これが近接の原則の基本です。

このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。

では、また来月〜(・v・)/

Yamato Design関係 近接の原則

Yamato Design関係

お久しぶりです。Yamatoです。

今回は、とても優れたWebサイトサンプル集を紹介します。

Design Link Database
http://www.designlinkdatabase.net/

この1つのサイトを知っているだけで、多岐にわたるデザインサンプルが見れます。
参考にどうぞ。ではまた。

Yamato Design関係