- 2012年04月05日
- 今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~
Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?
- 2012年07月17日
- 気になるWebの動向!~HTML5とCSS3って何が違うの?~
最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの?
新たに勉強し直さなければいけないの?
- 2012年07月17日
- 既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~
ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。
- 2012年09月11日
- レイアウトの基本1 ~「整列」~
今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。
- 2013年02月12日
- 知っておきたい!基本のショートカット ~Photoshop編~
今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも?
- 2013年03月08日
- レイアウトの基本 2 ~繰り返し~
レイアウトの基本1 ~整列~ に引き続き、第2弾!Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。
- 2013年07月05日
- レイアウトの基本 3~「近接」~
レイアウトの基本 第3弾!今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。
- 2013年07月12日
- レイアウトの基本4 ~「関係性」~
関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。
- 2013年07月12日
- 夏向けイラスト素材
デジナーレカフェからの御中元!
夏向けのイラストやアイコンの素材を無料でプレゼント。
- 2013年07月19日
- レイアウトの基本 5 ~白黒配置で目的を明確にする~
レイアウトの基本5は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。
- 2013年08月02日
- 今更聞けないWebのギモン!! ~そもそもHTMLって何?~
言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。
- 2013年08月07日
- 暑中見舞いを作ろう! イラレで作る暑中見舞いレシピ
イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。
関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。
関係性とは
今回は、近接の補足にもなりますが、関係性について説明したいと思います。デザインの面白い所は、感覚的に見ている人に伝える事が出来る点です。熟練したデザイナは感覚的に、近接を理解していますが、近接を意識する際には、関係性を汲み取ると簡単に進められます。近接を行う際には、下記の2点に気をつける事が大切です。
関係している物を近くに置く。
関係していない物は遠ざける。
ただ、作業をしていると「こっちの方が見栄えが良い!」とか「ここのスペースを埋めないと!」と言ったように、ぱっと見た雰囲気で作ってしまう場合も出てきてしまいます。
そんな時に、上記の2点を常に意識しておくと、近接が感覚的に理解出来る様になると思います。


右の画像は、関係していないので、遠くに置く。
近接の際に、この2点に注意してビジュアルや見出しとテキストを作っていくと、近接が感覚的に行えるようになります。
関係を分かりやすくするために、顔を書いて表現を作っています。
次は、顔を消したパターンで見てみましょう。


右の画像は、一つだけ距離があるので、見ている人は「何かがある」とか「何かが起きる」と言った、注意をしたり心構えを取れたり、整列をした物とは違ったニュアンスで受け取る事が出来ます。
具体例を見てみる
フリー素材でサイトを作る~タイトル・見出し編~で使用している画像を見て見ましょう。
パッと見た時に、どちらも見られますが、どちらか一つしか目に入りません。
さらに誘導用の文章の場合も同様に考える事が出来ます。
感覚的に伝える為には、まとまりを考え、関係を意識するとバランスもよくなってきます。

写真とテキストの具体例

名刺から関係性を見る



またカテゴリーごとに見れるので一見してすぐに情報が入ってきます。
まとめ
レイアウトの基本1~整列~でも書いたとおり、まずは揃える事がとても大切です。
ただ揃えるだけではなく、距離を意識した近接。その近接には関係性がある事を意識するととても良くなります。
デザインの基本なので、応用が出来るともっともっと、様々な表現が出来る様になります。最初に表現を考えてしまうよりは、徹底して整列や近接、それらを繰り返す事で私生活での目線がとっても変わります。例えば、レストランに訪れた際のメニュー。ただ選ぶのではなく、整列や近接はどうかな?など、とても勉強になります。街を歩いているだけで、様々なデザインがありますので、色々見ながら歩いてみてください。
記事担当者のコメント
ものとものの関係性を考えながらデザインするだけでも情報が伝わりやすくなりますね。見栄えだけでなく、関係性も気にしながらデザインしてみて下さい!