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

logo2.gif猫の気まぐれ便り

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

neko1.gif
neko2.gif
neko4.gif

見やすい 美しい文字とレイアウトデザインは余白とグループ性を意識してる [webデザイン]


レイアウトデザインは余白とグループ性を意識してる

 

見やすい 美しい文字とレイアウトは余白とグループを意識してる

 

素人とプロの違いはズバリ!

余白の使い方とグループを意識したレイアウトデザインだと思います。

ちょっと漠然としているので伝わりにくですかね?

私もまだまだ発展途上ですが

これなら見やすい文字、見やすいレイアウトだと意識しながら

日々作品を作ってきました。

ではどうすれば美しく作れるか

それはもう場数を踏むしかないです

経験や失敗をしながら覚えていくものですが

必要最低限の知識を持ってれば

そこから誰でもスキルアップすることは可能です

今回は私のブログを例にいくつかご紹介致しますので

お役に立てれば嬉しい限りです

 



スポンサードリンク


文字はとにかく余白を空けること

基本的に文字は詰まっていると可読性、視認性が悪いです

ですので空ける所はしっかり開けて詰める所はちゃんと詰める

・・・まぁその見極めが難しいですけどね^^;

とりあえず画像を参考にして下さい↓

 

まずセンスのない余白の使い方

※画像を拡大してご覧ください

 

SnapCrab_NoName_2015-1-6_19-31-37_No-00.gif

 

大見出しの気になるトレンドキーワードをチェック

小見出しの文字列が詰まりすぎて美しくないです。

また小見出しの行間と文字間隔も詰まっているので読みにくいですね

 

では余白を開けるとどうなるか

※画像を拡大してご覧ください

 

SnapCrab_NoName_2015-1-6_19-58-37_No-00.gif

 

大見出しと小見出しを若干空け

行間と文字間隔はたっぷりと空けています

余白を空けることによって見やすく感じませんかね?

他の例も見てみましょう

 

SnapCrab_NoName_2015-1-7_15-15-21_No-00.gif

 

いつもブログで記事を書く時この小見出しを使用するのですが

文字の縦及び横幅はけっこう空けています

詰める視認性が悪いと思うので

 

ただし気をつけることは空けすぎてもダメです

どないやねん!って話ですが

空けすぎると今度はグループ性が失われ違和感を覚えます

 

実際にグループ性が失われる瞬間をご覧ください

※画像を拡大してご覧ください 

 

SnapCrab_NoName_2015-1-6_20-20-33_No-00.gif

 

グループ性と言うのはそのコンテンツ要素との関連性です

この場合だと空けすぎると大見出しと小見出しの関連性が薄くなり

ユーザーに違和感を覚えるコンテンツとなります。

個人によって見解は違うと思いますが。。

 

異なるグループの場合はしっかりと空けよう

※画像を拡大してご覧ください 

 

2015-01-06_20h52_47.gif

 

この場合異なるグループとなるのは

 

気になるトレンドキーワード

 

気になるweb関連キーワード

 

2つのグループが詰まるとコンテンツが

見づらくデザインとしてはナンセンス。

ユーザーを混乱させないためにも

見やすいデザインを心がけるならしっかりと余白を空けましょう。

 

違う例のも見てみましょう

※画像を拡大してご覧ください  

 

2015-01-07_15h09_50.gif

 

左のコンテンツと右のコンテンツ内容は全然違うので

しっかりと私は空けます。

詰まりすぎると美しくないです。

 

格好いい余白の使い方や美しいレイアウトが出来る訓練法

まだ初心者にとってどれぐらい空ければいいか

どれぐらい詰めたら良いのかわかりずらかもしれません

私が過去にした訓練方法は名刺を作る事です

名刺には全ての基礎が詰まっていると私は思います。

一応サンプルとして名刺を作りましたので

よければご覧ください。これが正しいデザインかはわかりませんが^^;

※画像を拡大してご覧ください  

 

SnapCrab_NoName_2015-1-7_15-42-12_No-00.gif

 

ややこして申し訳ないですが余白を空けること、詰める所を意識ながら

レイアウトを作っています。

 

まとめると。

見やすくするため余白はったぷりと空ける

 

異なるグループは混合しないように余白を空ける

 

関連するキーワードは詰める意識が必要

 

こんな感じでしょうか

もし一度デザインが完成したら目の肥えたデザインの先輩や

素人の友達や家族に見せると良いかもしれません。

そんな友人いないって方はあまり頼りにならない私にコメントくれたら

アドバイス致します。

それではまた^^


合わせて読みたい記事

視認性を高めるデザイン方法は見えない線を引くこと
webデザインサイト 鳥肌が立った格好いい演出を教えたい その1



スポンサードリンク

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

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


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

nice! 0

コメント 0

コメントを書く

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

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


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

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

×

この広告は1年以上新しい記事の更新がないブログに表示されております。