お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top > これだけは知っておきたい!4つのWebデザイン基礎知識

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2012年9月14日

これだけは知っておきたい!4つのWebデザイン基礎知識

dasign_basis.jpg

Webサイトで非常に大事なんだけれども、
自分ではよく分からないもののひとつと言えば、
「Webデザイン」ではないでしょうか。

今回は、デザインの専門では無い方でも、
最低限知っておくべき、Webデザインの知識を4つご紹介します。
Webだけでなく、提案資料や報告書などにも活かせる知識ですよ!

1. アラインメント(整列)
アラインメント(整列)では、ある基準を決めて、
そこに合わせてテキストや画像を並べていくといったことです。

アラインメントをデザインに反映していくことで、
ユーザーにとって非常に見やすくなりますし、
見た目のスッキリさや、統一感も出てくるという効果があります。

例えば、左端を基準にして、画像を配置していくことです。
ECサイトによく設置されている、サイドメニューは端に合わせて
綺麗に配置されています。もし、サイドメニューがいびつに並んでいたら、
見た目が悪いだけでなく、使いづらさも出てきてしまいます。

ページ内には複数のコンテンツが掲載されていますので、
基準はひとつでなく複数決めて並べていくことになります。


2. レプティション(反復)
レプティション(反復)は、Webサイト内の特定の要素を
全ページのデザインで同じように使用していくことです。

どのページを閲覧しても、特定のデザイン要素が常に表示されるので、
ユーザーは他のページに飛んでも、同じサイト内にいるということが
認識できるようになります。
もし、各ページが全くバラバラのデザインだと、
他のページに飛んだ時に、ユーザーは違うサイトに飛んだと
認識するので、サイト内で迷う原因にもなり得ます。

例えば、Webサイトのグローバルメニューやサイドメニューは、
大抵どのページを閲覧しても、同じように表示されています。


3. プロキシミティ(近接性)
プロキシミティ(近接性)は、サイト内に掲載されてる
画像やテキストといったアイテムの距離に関係する知識です。

例えば、画像があって、その横に説明のテキストが掲載されている
ページがあるとします。
もし、距離が離れていた場合、画像とテキストの間には関係性がないと
ユーザーが認識する可能性が高くなります。
逆に、アイテムの間を狭めてあげると、画像とテキストは別のものでなく
互いに関係したものであると認識され易くなります。


4. コントラスト
コントラストは、皆さんもよく耳にする言葉ではないでしょうか。
色や文字のフォントに大きな差をつけて、特定の部分を強調することです。

例えば、背景を淡いの色にして、強調したい画像やテキストを
非常に濃い色にします。ユーザーの目線は、まず濃い色の部分に
行くようになります。

逆に、全体が色に濃淡がなく、テキストのフォントや大きさも同じだと
目をひく要素がないので、ユーザーは殺風景な印象を持ってしまいます。



さて、ココまで基礎知識を4つにまとめてご紹介してきましたが、
如何でしたでしょうか?分かってはいるけれども、実際活かすとなると
なかなか出来ていないという事もよくあるかと思います。
Webは勿論、提案書や報告書にも活かしてみてください!

trackbacks

trackbackURL:

Recent Entries

  1. 【あなたにピッタリのサービスがわかる】スマホでお得にエンタメ動画を楽しもう~全ての動画配信サービスを視聴してみた!~
  2. 個人の居酒屋もカフェもレストランもクレジットが安価に簡単に導入できる~ビジネスチャンスが広がる"モバイルクレカ"比較まとめ~
  3. 驚異の6秒動画プロモーション「Vineを活用した8つのキャンペーン事例」をご紹介!
  4. "スモールビジネス"LINE@活用法~PR戦略成功事例をご紹介!~
  5. 企業の存続危機に発展するかも!?Twitter炎上事例からわかるリスクの実態とその対策
  6. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~6/6
  7. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~5/6
  8. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~4/6
  9. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~3/6
  10. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~2/6