So-net無料ブログ作成
検索選択

logo2.gif猫の気まぐれ便り

pro2.png 元webデザイナーが話題のトレンドキーワードや役に立つデザイン情報をお届けします♪ なるべく有益な情報をお届けするつもりなので今後共よろしくお願いします^^

neko1.gif
neko2.gif
neko4.gif

視認性を高めるデザイン方法は見えない線を引くこと  [webデザイン]


視認性を高めるデザイン方法は見えない線を引くこと 

SnapCrab_NoName_2015-1-5_16-17-8_No-00.gif

 

まず視認性と言うのは

文字を見た瞬間の第一印象、即ちパットみた瞬間の認識のしやすさ

いくらデザインが良くても文字が見づらいとユーザーは見てくれませんね

じゃあどうするか

見えない線を引いてからに文字を配置していきます

線が見えないのに安易に文字を配置すると視認性が悪くなります。

以前記事にて

webデザインサイト 鳥肌が立った格好いいを教えたいにてご紹介した

有限会社プリズマ・サーヴィス様のサイトが非常に上手く

見えない線を活かしたデザインだったので

こちらを参考に教えていきたいと思います

 



スポンサードリンク


視認性を高めるデザインテクニック

まずは有限会社プリズマ・サーヴィス様のサイトをご覧ください。

 

SnapCrab_NoName_2015-1-5_16-43-20_No-00.gif

 

何個か見えない線が引いあるのですがわかりますか?

わからない方のために実際に線を引いてみます。

 

SnapCrab_NoName_2015-1-5_17-2-44_No-00.gif

 

拡大したらはっきりとわかりますが

 

線を引くと必ずどこかを基準に文字を配置していることがわかります。

例えば

 

SnapCrab_NoName_2015-1-5_18-19-30_No-00.gif

SnapCrab_NoName_2015-1-5_18-19-34_No-00.gif

 

の2つの要素は左を基準に配置してますよね

 

SnapCrab_NoName_2015-1-5_18-22-46_No-00.gif

 

こちらの2つ文字要素は下を基準合わせて文字を揃えております。

 

ちなみに

 

SnapCrab_NoName_2015-1-5_18-28-52_No-00.gif

 

ロゴマークの配置場所に注目して欲しいです

メニューバーの縦幅の真ん中に配置していますね。

 

私のブログサイトでは

SnapCrab_NoName_2015-1-5_18-35-29_No-00.gif

 

見えない線を引いてあげると

線を基準に様々な要素が揃っていることがわかるとおもいます。

 

ちなみに名刺だと。。

SnapCrab_NoName_2015-1-5_18-54-53_No-00.gif

 

名刺にも線を基準に揃えてるのがわかるかと思います。

もしかすると名刺の方がわかりやすかったかもしれませんね^^;

 

まとめると

 

線に合わせてオブジェクトや文字を揃えてあげる

 

必ずどこかを基準にして配置する

 

この2つの約束守ることで統一感がある、まとまった

見やすいデザインになります

 

ちょっと文才があまり上手くないので

わかりづらい表現かもしれませんが

役に立つと嬉しいです。


合わせて読みたい記事


見やすい 美しい文字とレイアウトデザインは余白とグループ性を意識してる
webデザインサイト 鳥肌が立った格好いい演出を教えたい その1



スポンサードリンク

DTP|WEB情報のリンク共有フォローはこちら↓

話題のトレンド|芸能ゴシップ情報のリンク共有フォローはこちら↓


nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

トラックバックの受付は締め切りました


ページトップ
(c) 2015 nikukyu-petsuki.

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。