特集

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日(水) 締め切り

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

Webページをデザインする際に気をつけなければならない基本、「繰り返し」についてご紹介します。
レイアウトの基本 1 ~整列~ についてはこちらをご覧ください。

繰り返しが必要なワケ

パターン化されている情報を探す場合、人は繰り返されている内容なほど、強調されている部分を探します。文庫本などでも、太字の箇所が最初に目に入ると思います。でも、それは、必ず全てのページが同じルールで作られていてこそなのです。ルールを決めたら必ず繰り返す。これが基本です。

下記は極端な例ですが、途中でルールを変えてしまった場合です。

左:繰り返しをしている場合 右:ルールを途中で変えた場合

定めたルールを繰り返す為には、今まで使っていない事にチャレンジするのではなく、見ている人がわかるルールを決める必要があります。
見出しと本文の余白、次の段落への余白、フォントの種類や大きさなど、一つ作ったものをコピーして貼り付けてレイアウトすれば、ルールが崩れることもありませんね。
最初のうちは、繰り返しを意識して、あまり崩さずに作るのがコツです。
慣れてくると、わざと崩したり、リズムをつける事もありますが、最初にそれをすると、後々苦労するデザインライフが待っています。

ビジュアルの繰り返し

ビジュアルを作る上で、困ってしまうのが、「伝えたいイメージはあるけど、何をしたら良いか・・・」とか、「何となく雑に見える」などでしょうか。整列と繰り返しをする事で、ある程度「それっぽく」見えます。今回の上部で使っているイメージを例に挙げて、ビジュアルの繰り返しについて説明します。(混乱を避けるため、ビジュアル内のタイトルを変更しています)

参考1

参考1のビジュアル

一番手前を整列させたら、奥に向かって繰り返していきます。にわとりを認識させるために、少しズラして鶏冠を見えるように配置しています。例えばこれを、繰り返さずに、整列を崩していったらどう見えるでしょうか。

参考2 繰り返さない場合

参考2のビジュアル

このビジュアルの目的は、イメージを伝え、タイトルを読んで貰う(見て貰う)事です。しかし、右側のイメージが乱雑に並んでしまっていることで、そちらが気になってしまい、タイトルを見てもらえない可能性もあります。
大切なのは、ビジュアルは目的がある事です。伝えたいイメージがあって、それに沿わせるためには、基本となる整列や繰り返しのルールを守ることです。勿論、基本ができたら応用に進むともっと楽しいデザインができてきますね。

記事担当者のコメント
タイトルと本文。ただ単純に置いているだけのように見えますが、ルールに沿ってレイアウトされているのがわかりましたか?
余白や文字の大きさなど細かい部分にも気を配りましょう。
手元にある書籍なども、どのようにレイアウトされているか、参考に見てみてください!