はじめまして!

現役カフェオーナーのアンナです。

私は現在もカフェのメニュー表や各種SNS、サイトなどに使用する画像をほぼすべて自分で作り続けています。

デザインに関して素人でも、自分でそれなりのものを作れるように!
実践したことや勉強したことなどを発信していきます。

デザインを制作する前には目的や伝えたいことなどの情報を書き出しますが、それが終わったら次のステップです。

版面とマージンを決めます。

「いきなり専門用語出てきた…!無理!!」

「どうせCanvaでテンプレート使うし」

なんて思った方もちょっと待ってください!

ノンデザイナーでも知っておいて欲しい最低限の情報だけは頭に入れておいて欲しいのです…!

この先はなるべくわかりやすく解説していくので、ぜひ最後までご覧ください。

版面とマージンとは

版面…文字や写真などの要素を配置する領域

マージン…文字や写真などの要素を配置しない領域

マージンは余白のことです。

日本語にしたら結構親しみやすく感じませんか?

実際のデザインにすると例えばこんな感じです。

余白の大きさが与える印象

版面の大きさを「版面率」と呼びますが、ノンデザイナーは呼び方まで覚えなくていいです。

余白が広いか狭いかで考えた方がわかりやすいかもしれません。

 情報量 与える印象
 余白が狭い多いにぎやか
楽しい
 余白が広い少ない静か
落ち着いている
高級

ノンデザイナーは上の表のことだけは頭に入れておくことをおすすめします。

同じ素材を使っても、余白の広さによってこんなにイメージが変わります。

余白の幅は揃える

基本的には左右や上下の余白の幅は揃えます。

幅を揃えることによって、デザインに安定感が出てきます。

わざと幅を変えることによってより目をひくデザインに仕上げることもありますが、それはデザインについてよくわかっている人が手を出す手法です!

ノンデザイナーは変にアレンジせずに基本に従ってデザインを作りましょう。

しかし冊子など、紙を綴じる印刷物の場合には左右の余白の幅を変えることもあります。

これは綴じた後に見える部分が中央にくるようにするためです。

印刷物の余白

印刷物の場合には断裁時にデザインの端が切れてしまうことがあるため、紙の端から5~10㎜程度の余白を設定する必要があります。

印刷会社にデザインを持ち込んでショップカードやチラシなどを印刷する際は、印刷会社から余白について指示があるはずです。事前にしっかり確認して作成しましょう。

デジタル系のデザインの余白

サイトやSNSでは表示される範囲を意識して余白を決めましょう。

例えばサイトのブログ記事などのアイキャッチ画像はPCとスマホでは表示される大きさが違うことがあります。

あるいは記事一覧と記事本文を開いたときの表示範囲も変わることも。

SNSの場合も見る媒体がスマホかPCかで表示範囲が変わることもありますし、SNSの仕様により表示されない部分が出てくることも。

ですので、伝えたい情報が実は表示されてなかった!なんてことがないようにしっかりと確認をしましょう。

Instagramで複数枚の画像を一緒に投稿するときや、ピン止めする場合などは右上にアイコンが表示されます。

ここに重要な要素が被らないように注意しましょう。

こちらはTwitterのプロフィール画面です。

ヘッダー画像の一部にアイコンが被ります。

また、スマホの場合はヘッダー画像の上部に時刻や電波状況などの表示が被ります。