« ブログのトップページに戻る

デザイン4原則でラクラクデザイン -その1:整列(Alignment)-

   投稿者 : 2015年3月30日 By

イメージ画像

Webデザインを行なうとき、困った、デザイン経験が自分にはない。デザインは無理、どうすればいいのか?と思っている方もいるかと思う。しかし描画力や美的センスなどなくても、デザインの原理、原則を踏まえたデザインを行なえば良いデザイン、つまり素人っぽいデザインからプロ並みのデザインを行うことができる。
今回はデザインを勉強したことがない人でも、楽しくデザインするためのノウハウ、デザインの基本原則4つ(整列、近接、反復、コントラスト)の中から整列について説明する。

 

Webサイトのデザインする時、その“ページを読む人のことを考えてデザインする”ということを基本に据えなければならない。そのページはユーザーに分りやすいか? 見やすいか? 読みやすいか? 美しいか? など考え、意識的に作るということである。
そうした内容を作りだすために考えだされたのが、1.整列する 2.近接(グループ化) 3.反復する 4.コントラストのデザイン4原則と呼ばれている、4原則ルールである。この4原則ルールの中で、今回は整列について見てみよう。

1.整列とは各要素を見えないラインにそって配置すること

整列とはドキュメント内全ての要素を見えない線を中心に意識的に配置することである。意識的に各要素を見えない線に合わせてゆくことで、各要素間に緊張感が生まれ、統一感、一体感が生まれ、まとまりを持つ内容になり、見た目にも美しいものになる。「左に揃える」「センターからふりわける」「右に揃える」を例にどのような場合に使うか見てみよう。

1-1.左に揃える

左寄せ

左揃えがレイアウトの基本である。左側に透明な見えないラインがあり、この見えないラインに合わせる。左に整列しているものは種類が同じであることを意味する。人の目線は左から右へ移動するため、この左側に要素を揃える方法が最も多く使われる。

 

1-2.センターからふりわける

センター振り分け

中心に見えないラインがある。このラインを中心に要素をふりわける。要素は文章をセンター(中心)にふりわけ配置するのは、読むためのテキストの場合はやめたほうが良い。読ませるものではなく。イメージを印象づけたいとき、例えば伝統や格式、エレガント、気品を出したい時にこの配置が使われる。フレンス料理のメニュー、結婚式の招待状などに有効である。

 

1-3.右に揃える

右寄せ

右側に透明な見えないラインがある。この見えないラインに合わせる。人の視線の移動を考えると、右から左へ向かうこの配置は自然ではない。文章が読みにくくなる。Webデザインではこの配置はほとんど無いと言ってよい。あえてこのような配置を使うのは文字量が少なく、右側の見えないラインの終着点を強調させたいときに使う。

 

2.グリッドシステムで整列する

この整列の原理、原則を最も有効に活用できるのが「グリッドシステム」である。「グリッドシステム」はWebサイトや印刷物に採用されるデザイン手法だ。レイアウトのための基準線を引き、その四角のラインに合わせて、情報をはめ込んでゆくだけでよい。つまり、
文字や画像などの各要素をグリッドを基準にそろえることで情報が整理され、内容が伝わりやすい、読みやすい、さらには美しい統一感あるデザインを構築できるのである。現在のWebデザインはこのグリッドデザインを採用してデザインを行なっているものが多い。

グリッドデザイン
グリッドを作りグリッドを目安に、情報を入れると、情報が組織化されてサイトが分かりやすくなり、結果として、サイトの離脱率が下がる。


12カラムのグリッドシステムでデザインされたサイト:http://aia.org/

 

まとめ

最近の有名なサイトを見てみると、どのサイトも細かいところまで作りこまれいるという印象を持つ。そんなサイトに必ず採用されているのがグリッドシステムによるレイアウトだ。グリッドシステムを使うことで、デザインに論理性が生まれ安定感あるサイトを構築できる。
また、グリッドに整列させることで、規則性やリズムをコントロールし、統一感のある優れたデザインを構築できる。ECサイトを構築するとき、このグリッドシステムに沿って製作し、UI、UXの高いデザインを行うことをおすすめする。次回は「2.近接」について見てみよう。

関連する記事

今年も始まる「春節」、越境ECへの影響は?... ここ最近、インバウント(訪日外国人旅行)といった話題を聞かない日はない。 ここ数年、訪日外国人の数は右肩上がりで増加しており、特に中国人観光客の訪日が大きい。爆買いブームは終わり、買い物から観光する・日本を体験することに目的がシフトしてきたと言われるが、中国では今月、1月27日(金)から2...
越境ECサイトをスタートする前に考えるべき10のこと... 著者: Practiclogy社 シニアコンサルタント Bianca Mercer イギリス、オーストラリアのEコマースコンサルタント会社”Practiclogy”のシニアコンサルタントのBianca Mercerは、販売業者やブランド会社が海外販売に踏み切るときのチ...
海外販売に関する補助金・助成金情報(2017.May)... 海外販売・展開を行うにあたっての課題は人員の確保だったり、失敗しないためのノウハウであったり、資金調達であったりする。 その中でも資金調達は最重要課題である。 海外展開できる、販売するための確かな素地があるにもかかわらず、資金調達に苦労し断念せざるをえない企業も少なくはない。 そのような...
中国越境ECにかかる関税の新税制度はどうなったのか?... 中国の昨年(2015年)の越境ECの統計をみると、越境ECの利用人口は約2,400万人。前年が1800万だったので、伸び率は133%。越境ECによる消費総額は368億ドル、2014年は220億ドルであったので、伸び率は167%と、どちらも、中国の越境EC市場規模は拡大成長していることが見てとれる...
コンバージョン率をアップする商品写真の扱い方、3つのポイント!... ECサイトを構築する時、何に優先順位をおいて、構築しているのだろうか? サイト名? ターゲット? ユーザビリティ? デザイン? SEO? さまざまあることだろう。その中でも重要なのが商品写真の撮り方、選び方、種類や表示内容である。写真の撮り方、選定内容しだいではユーザーの購買意欲は大きく変わ...
「製造業の海外展開」:海外販売を新規スタートする意義... 皆さん こんにちは。 数回にわたって、海外販売第一歩の経緯をお話しました。 皆さんは、このチャレンジをどう感じられたでしょうか? さて、日本人口の減少・新興国の台頭などの社会構造の変化を受け、製造業での海外市場への参入、海外販売が今後の発展には欠かせないとお考えの方も多いと思います。 ...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。