Home > スポンサー広告 > ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/98-26b17aaf
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

Home > デザイン > ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

all.jpg

ウェブデザインでの配置で、「ルール通りにやっているのにどこかうまくいかない」場合にどうやって解決していくかを考えてみました。今回の例題画像は、すべてクリックすると100%表示のデータを表示するようにしてあります。
ウェブデザインのちょっとした「もやもや」を、少しだけスッキリしたデザインにするヒントになれば嬉しいです。

上部詰まり、背景が強いデザイン
before
case1.jpg

背景にタイル状のものを敷き詰めるのは、コーディング的に簡単なので初心者の方がよく多用しがちなのですが、デザインのバランスとしては複数の色が散りばめられているので難易度が高くなります。
今回の例では、

・タイトルロゴのデザイン(フォント)の見やすさ
・コンテンツエリアの破線
・全体的な上部への詰まり


といったことに注意して、すこしだけスッキリさせてみます。

after
case1_af.jpg

タイトルロゴのフォントを変更し、境界線に白のラインを引き、
コンテンツ全体を天地中央に。
[Enter]ボタンを背景色と合わせました。
さらに白い枠の破線ラインをとり、角丸に変更し、内側の空間を多く取るようにしています。

縮小画像ではデザインできているように見えるのに、サイトを見ると間延びする
before
case2.jpg

サムネイル表示など、縮小した状態で見るとよく出来ているデザインに見えるのに、実際のサイトを見るとどこか間延びする場合、ウェブサイトの表示領域を理解していない、縮小した状態で(小さなノートパソコン等で)デザインを作成した場合に起こります。

・フォントのサイズ
・レイアウトの配置
・オブジェクトのサイズ
・キーカラー


などに注意して、調整してみます。

after
case2_af.jpg


黄色のキーカラーの量が多すぎたので、コンテンツリンク選択時と、マウスホバー時にのみ出現するようにし、ロゴ画像を縮小し、ナビゲーションを縦配置から横配置に変更しました。
さらにコンテンツ全体を2カラムから1カラムへ変更し、まとまりが生まれるようにしました。これで、ページごとに遷移する形でも、スクロールして展開するようなサイトであっても、ナビゲーションやロゴが邪魔することなく展開が考えやすくなりました。

空白マージンを取っているのに、どうしてもぎゅうぎゅうになる
before
case3.jpg

枠も線もそんなに多用していないし、各文章には統一したマージンを与えているにもかかわらず、詰まって見えてしまう場合、囲い方やルール付け自身を変更するとうまくいく場合があります。

・各コンテンツの配置
・コンテンツのデザインのルール付け
・枠の意味付け


に注目して、調整してみましょう。

after
case3_af.jpg


枠の意味付けを「ページ全体」ではなく、「コンテンツ個々」に変更し
ロゴやナビゲーションは外に出しました。
各枠のドロップシャドウは浅めにし、さりげない位に落ち着かせました。
レイアウトを2カラムからタイル状へ配置する形へ変更しました。

同じように文字とテキストが多いサイトですが、各コンテンツが独立していることがわかりやすく、「たくさんある」という印象をポジティブに持たせることもできます。
コーディング時にスクロールすると自動読み込みするような仕組みを組み込んでもいいかもしれません。

まとめ

ウェブサイトのデザインでは、

・実際に表示されるスケールの把握
・コンテンツの配置方法
・繰り返す要素のデザインパターン(ルール)の作成


を認識することで、より「様」になるデザインを起こすことができます。
天地中央、左右中央にすること、
ホワイトスペースを活用すること、
どこに区切りを持ってくると見やすくなるかということを
意識してデザインしてみてはいかがでしょうか。

※この記事は他の実際のサイトとの関わりは一切ありません。解説に必要なイメージを作成したものです。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/98-26b17aaf
Listed below are links to weblogs that reference
ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。 from バニデザノート

Home > デザイン > ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。