特集

Webデザインやhtml制作に関連する事、最近話題になっているサイトなどをピックアップし、お届けします。

Back Number

今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

2012年04月05日
今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?

07

2012年07月17日
気になるWebの動向!~HTML5とCSS3って何が違うの?~

最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの?
新たに勉強し直さなければいけないの?

06

2012年07月17日
既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~

ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。

index_img

2012年09月11日
レイアウトの基本1 ~「整列」~

今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。

知っておきたい!基本のショートカット ~Photoshop編~

2013年02月12日
知っておきたい!基本のショートカット ~Photoshop編~

今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも?

レイアウトの基本2~繰り返し~

2013年03月08日
レイアウトの基本 2 ~繰り返し~

レイアウトの基本1 ~整列~ に引き続き、第2弾!Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。

レイアウトの基本3 近接

2013年07月05日
レイアウトの基本 3~「近接」~

レイアウトの基本 第3弾!今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。

index_img

2013年07月12日
レイアウトの基本4 ~「関係性」~

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

index

2013年07月12日
夏向けイラスト素材

デジナーレカフェからの御中元!
夏向けのイラストやアイコンの素材を無料でプレゼント。

index_img

2013年07月19日
レイアウトの基本 5 ~白黒配置で目的を明確にする~

レイアウトの基本5は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。

index_img

2013年08月02日
今更聞けないWebのギモン!! ~そもそもHTMLって何?~

言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。

index_img

2013年08月07日
暑中見舞いを作ろう! イラレで作る暑中見舞いレシピ

イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。

特集一覧ページを見る

Special 特集

catch_balloon

2018年11月13日
【フリー素材】手書きふきだし素材スペシャル Ver.1

今回は3種類の手書きのふきだしです。シンプルで幅広く使えるので、制作物のちょっとしたアクセントにどうぞ。ふきだしの手書き…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

短時間で学ぶInDesign初心者講座
2018年11月20日(火) 16:00-18:30

デザイン

InDesign

Technic テクニック

catch_file_034

2018年11月06日
Photoshopブラシを使った簡単な雲の描き方

写真やイラストに雲を描き足したいけど、どうやって描くのか分からない… そんなお悩みに答えます! Step1 雲を描く下準…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

「海の日」ポスターコンクール
2018年12月5日(水) 締め切り

main

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

関係性とは

前回の特集で、レイアウトの基本3「近接」について説明しました。
今回は、近接の補足にもなりますが、関係性について説明したいと思います。デザインの面白い所は、感覚的に見ている人に伝える事が出来る点です。熟練したデザイナは感覚的に、近接を理解していますが、近接を意識する際には、関係性を汲み取ると簡単に進められます。近接を行う際には、下記の2点に気をつける事が大切です。
関係している物を近くに置く。
関係していない物は遠ざける。
この2点を注意していれば、ある程度は近接と言うルールに添えると思います。
ただ、作業をしていると「こっちの方が見栄えが良い!」とか「ここのスペースを埋めないと!」と言ったように、ぱっと見た雰囲気で作ってしまう場合も出てきてしまいます。
そんな時に、上記の2点を常に意識しておくと、近接が感覚的に理解出来る様になると思います。
kankeisei1
kankeisei2
左の画像は、関係しているので近くに置く。
右の画像は、関係していないので、遠くに置く。
近接の際に、この2点に注意してビジュアルや見出しとテキストを作っていくと、近接が感覚的に行えるようになります。
関係を分かりやすくするために、顔を書いて表現を作っています。
次は、顔を消したパターンで見てみましょう。
kankeisei3
kankeisei4
顔の表情が消えて、左側は意識をせずに見られます。
右の画像は、一つだけ距離があるので、見ている人は「何かがある」とか「何かが起きる」と言った、注意をしたり心構えを取れたり、整列をした物とは違ったニュアンスで受け取る事が出来ます。

具体例を見てみる

ビジュアルでは簡単でしたが、実際に関係性を意識した具体例を見て見ましょう。
フリー素材でサイトを作る~タイトル・見出し編~で使用している画像を見て見ましょう。

shop1

左に置かれているアイコンは、ぱっと見て目を引く為に置かれています。置かれているタイトルとは関係があるので、距離を近く置いています。これを遠くに置くとどうなるでしょうか。

shop2

何だか余白が多く空いてしまって、リズムが悪いように見えてしまいます。
パッと見た時に、どちらも見られますが、どちらか一つしか目に入りません。
さらに誘導用の文章の場合も同様に考える事が出来ます。

shop3

これでは、一つ一つを見ていくのに、ユーザは疲れてしまいます。
感覚的に伝える為には、まとまりを考え、関係を意識するとバランスもよくなってきます。
shop4

写真とテキストの具体例

見出しだけではなく、本文で使われる写真やテキストにも言えます。雑誌などをみていると、感覚的に見たいものを読み進める事が出来ます。これに習って、デザインする際には、関係を意識していくと良いと思います。
zasshi

名刺から関係性を見る

名刺を見てみると、関係性がとても分かりやすく、近接に乗っ取って作られています。関係を意識した近接は、カテゴリー別にわけていけば良い、と言う風に見ても良いかも知れませんね。
meishi1
まず名前と役職名を近づけているのでこの人はどういう役職なのかというのがすぐわかるようになっています。
meishi2
次の例をみると英語表記の会社名と日本語表記の会社名を近づけているので「Designare Cafe inc.」と「株式会社デジナーレカフェ」の関係性がわかり、日本語表記にすると「株式会社デジナーレカフェ」だということがわかります。
meishi3
関連性の強いもの同士を近づけ、カテゴリー別にわけることでより情報がわかりやすくなります。
またカテゴリーごとに見れるので一見してすぐに情報が入ってきます。

まとめ

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

記事担当者のコメント
ものとものの関係性を考えながらデザインするだけでも情報が伝わりやすくなりますね。
見栄えだけでなく、関係性も気にしながらデザインしてみて下さい!