特集

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

Back Number

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ページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。

知っておきたい!基本のショートカット ~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 ~「関係性」~

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

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

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

index_img

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

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

index_img

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

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

index_img

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

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

特集一覧ページを見る

Special 特集

2019年04月15日
【フリー素材】手書き植物の素材セット

長いように感じた冬も終わり、柔らかい青葉が芽吹いて春になりました。皆さまいかがお過ごしでしょうか?今回は手書き植物の素材…

Interview インタビュー

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

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

Seminar セミナー

Technic テクニック

2019年02月15日
水彩絵の具ブラシを作成する方法

水彩絵の具のにじみは、アナログ表現の醍醐味ですよね。 綺麗なにじみをデジタルでも表現してみたい!!! そんなあなたに向け…

Books オススメ書籍

センスは知識からはじまる

2019年01月09日
センスは知識から始まる
  • デザイン

デザインをする上で大切な考え方 センスは知識から始まる デザインというと「センスの良さ」が必要だと感じたことはありません…

Award アワード

main

文字や必要要素をレイアウトをして行く上で、必要になってくるのがメリハリです。今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。

色は印象を決めてしまう

色はデザインする上でとても重要で、与えるイメージを大きく占めています。写真の色味を変えると、ガラりと印象が変わりますよね。レイアウトの際に、先に配色をしてしまうと、その印象に囚われてしまって、大切な「目的」を見失いがちです。

完成品をモノクロにしてみてみる。

既製品を白黒で表現すると、伝えたい部分がしっかりと目に飛び込んでくると思います。フリー素材でサイトを作る~タイトル・見出し編~より。
color
sirokuro
白黒にした事で、何が目立っているのかが一目瞭然です。タイトルや右側のショップガイドなど、コントラストがハッキリとしますので、「ここを伝えたい」と言う意思表示が出来るんですね。

必要な要素を全て置く

「写真に関しての困ったを解決」を例に挙げて、進めます。
レイアウトの「はじめの一歩」では、必要な物(要素)を全て置きます。最初の内は、考えながら、少しずつ要素を足したり引いたりしてしまいがちですが、デザインする画面上で、最初に全てを入れてしまい、そこからバランスを見ながらレイアウトをする方が効率よく、仕上がりが確認しやすくなります。
必要要素
【テキスト】
・特集
・沖縄の風景
・澄み切った青い空と、透明度の高い美しい海。豊かな自然や世界遺産など、沖縄独特の風景や文化の写真をお届けします。
【写真】
photo
必要な要素を白黒にし、置いていきます。
youso1
この時点で、メリハリをつけるものが分かってきます。長い文章は、読まなければいけませんので、まず目に飛び込ませる為に、タイトルをつけていきます。
タイトル(大見出し)をつけます。
youso2
メリハリがついて、何を最初に伝えたいか明確になってきました。「沖縄の風景」と言うキーワードを一番最初に伝えれば、周りのデザインもそれに合わせていけば良い、と言う事になります。ポイントは、「コントラスト」を観る事です。コントラストに意識して、レイアウトのパターンをだしていきます。
レイアウトのパターンを出します。
pattern1
タイトルの文字を大きくし、インパクトを出す。白黒にすることで、写真の明るさの違いがわかるようになります。上の例では、やしの木の写真が白っぽく目立つので、黒っぽい写真がかたまらないように中央に置き、前面に出しすぎるとそこばかり目立ってしまうので、重なりや位置を調整しています。
pattern2
特集の文字をベタ塗りの中に入れポイントにしてみます。バランスを合わせテキストを2行に調整。
pattern3
今度は写真をポラロイド風に加工し、単調にならないように散りばめて位置を調整。写真の周りに白い縁取りができたことで、背景とのメリハリがつきました。
pattern4
ポラロイド風に加工した写真を大きくし、インパクトをだしてみます。
pattern5
直線的な要素が多かったので、特集の文字を円の中に入れ斜めにしました。目を引くポイントになります。奥まで続くまっすぐな道を強調したいので、その部分には写真や文字は置かないように再度調整。
本文にある、「澄み切った青い空」や「豊かな自然」と言う事を考慮して、テイストを決めていきます。
色を使用する際は、可読性が損なわれないようにメリハリに気をつけましょう。わからない時は、白黒にして確認してみてください。
haiti
また、実際キービジュアルで使用する場合は、サイトに配置して確かめてください。
ビジュアルだけ作るのではなく、全体を見ながらデザインしましょう!
記事担当者のコメント
メリハリをつけることで一番伝えたい目的が明確になりますね!
既製品を白黒にしてみるのもメリハリつけ方の勉強になりそうです。
実際に白黒にして、メリハリを確認してみて下さい。