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

イメージ画像

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 カナダのポテンシャル カナダ人の訪日者数は2016年では27万人と割合高く、毎年、訪日者数は伸長しており、英語圏では4番目の数値となっている。 比較的、日本に近いということから、国内では北海道などでウィンタースポーツを楽しむ観光客が増えているようだ。そして、カナダのEC市場規模も毎年増加しており、経済も安定して...
海外で売れそうな商品をセレクト 今回は、海外で売れる商品を考えてみる。その国で何が必要とされているか、どのような製品が頻繁に利用されているか、さらに、その製品につながる付属製品、部品など、様々な可能性が無限大に広がっていくだろう。 1.オランダの場合 ハイテク・スマート自転車ロックに注目 ヨーロッパ諸国でもオランダは...
タブレット端末がEコマースに及ぼす影響... 2010年春にiPadが発売されて以降、タブレット端末を使用する人は年々増加しています。 スマートフォンよりも画面が大きく、視認性や操作性の高いタブレット端末は、パソコン並みの環境でインターネットを利用できます。そのうえ、パソコンよりも軽くて起動が早く、バッテリーも長持ちするので、普段使い...
消費者の購買行動を後押しするコンテンツとは?... マーケティングリサーチ会社のニールセンによって最近実施された調査で、「消費者の購入決定に最も影響力の大きいコンテンツは、専門家によるレビューだ」という興味深い結果が出ました。 消費者の購買行動に焦点を当てたこの調査の内容を詳しく見ていきましょう。   購買行動に一番効果的なコンテ...
海外販路拡大を支援する最新補助金・助成金情報(2021年1月)...   2021年、明けましておめでとうございます。本年もLive Commerceを宜しくお願い致します。 2021年の干支は十二支で言うところの「丑年(うしどし)」である。 丑年は、先を急がず目前のことを着実に進めることで将来の成功につながると言われている。 コロナ禍が...
パソコンかスマホか?インターネットの利用状況はどう変化している?... 昨年の総務省が公表した情報通信機器の普及状況データによると、国内のパソコン世帯普及率は、78.0%なっており、パソコン以外ではスマホ普及率は64.2%、タブレットは18.4%とスマホ普及が、ここ5年で急速に進んでいる状況(下図参照)を明らかにした。そのような中で、今年4月8日にニールセン株式会社...

コメントをどうぞ