昨今、ミニマルデザインを主流としたシンプルなデザインが多くなり、派手な装飾のあるデザインやリッチデザインを見かける事が少なくなりました。
バナーやランディングページだけでなく、WEBサイトもシンプルなデザインが主となっていますよね。
しかしシンプルなデザイン＝簡単ではありません。
シンプルなデザイン程奥深く、一歩間違えると「シンプルでおしゃれ」ではなく「殺風景で物足りない」ダサいデザインになりがちです。
今回はシンプルなデザインを簡単におしゃれに作るコツを手順を追って紹介していきたいと思います。
シンプルなデザインをおしゃれにするコツ
まずはじめにシンプルなデザインをおしゃれに作るためのコツを3つ紹介致します。
これはどんなデザインにおいても共通して言える事なので、抑えておきましょう。
シンプルでおしゃれなデザインのコツ01.フォント種類
シンプルなデザインにおいてフォントは主役になるケースが多いです。
そのためシンプルなデザインをおしゃれにするには「どんなフォントを選ぶか」が重要になってきます。
特にデザイン初心者の人ほど、クセのあるフォントは避け、ミニマルデザインの流れもふまえて出来るだけシンプルなゴシック帯のフォントを用いる事をおすすめします。
シンプルでおしゃれなデザインのコツ02.文字組みや字間
シンプルなデザインだけでなく、字間や行間を意識した「文字組」は大切なポイントになります。
ここで抑えて頂きたいのが「文字同士の間に余裕を出す」という事です。字間も行間も広めに取ることでデザインの出来栄えが一気に変わります。
上記の例の場合、左側のぎゅうぎゅうに詰まっている文字組みは行間や字間が未設定の状態の者です。
デザインとしてもッパとしないし、何よりも読みにくいです。
それに対して左側は
文字パネルで字間行間の調整をしっかりと行っています。
- オプティカルに設定
- 字間は50～100の間※フォント種類にもよる
- 行間はフォントサイズ＋10pt前後を目安に
シンプルでおしゃれなデザインのコツ03.空白の使い方
特に初心者の方はデザインにおいて余白について意識していない方も多いと思います。
しかし「余白の使い方」こそデザインのクオリティに差がつく部分です、プロのデザイナーは必ず余白を意識します。
まず最初はシンプルでおしゃれなデザインをするコツとして余白をしっかりと取る事を実践してみて下さい。
シンプルでおしゃれなデザインのコツ04.背景の選び方
シンプルなデザインと聞くと背景もすっきりとしたイメージを持つ方が多いかと思います。
ベタ塗りの背景を選ぶのが最も簡単ですが、どうしても写真を使いたいという場合は以下の点に気をつけて素材を選んでみて下さい。
- シンプルな構図の写真
- 色が統一された写真
- 人物が写っている場合、1人～2人以下の写真
- 看板等の文字が入っていない写真
もしも、どうしても仕様したい写真があって、上記の条件外の場合は下記の方法で対処してみて下さい
- 全体にぼかしを入れる
フィルター＞ぼかし＞ぼかし(ガウス)で調整可能 - 白黒にする
イメージ＞色調補正＞白黒で調整可能 - 彩度を落とす
色調補正ウィンドウを開きレベル補正、色彩・彩度等から調整可能
上記方法で対応すれば大抵の写真は素材として使用する事が出来るかと思います。
実践編！シンプルでおしゃれなデザインの手順を解説
6つシンプルなデザインのサンプルを用意しました。
このサンプルを元にシンプルでおしゃれなデザインのコツ、手順を解説して行きます。
01.文字のみのシンプルなデザインのコツ
フォントのみのデザインはシンプルデザインの王道パターン。
これはフォント種類の選定と字間や行間の強弱がデザインの決め手となります。今回のデザインは下記の通りです。
SIMPLE DESIGN
- フォント：Helvetica LT Std Bold
- サイズ：60pt
- 字間：オプティカル・25pt
シンプルだからこそ～
- フォント：A-OTF ゴシックBold
- サイズ：14pt
- 字間：オプティカル・75pt
- 行間：20pt
※LET’S TRYはSIMPLE～の箇所と同様(サイズのみ24pt)
※A-OTFゴシックは真源ゴシック(フリーフォント)で代用出来ます。
02.写真を用いたシンプルなデザインのコツ
写真を用いる時は背景の構図も踏まえて文字の配置をしましょう。
今回は画面向かって右側に人物が来るように写真を配置したので、左部分に文字を入れていきます。
＋コツを抑えて～
- フォント：A-OTF ゴシックDB
- サイズ：14pt
- 字間：オプティカル・75pt
SIMPLE DESIGN
- フォント：Helvetica LT Std Bold
- サイズ：71pt
- 字間：オプティカル・65pt
- 行間：72pt
シンプルだからこそ～
- フォント：A-OTF ゴシック M
- サイズ：12pt
- 字間：オプティカル・75pt
- 行間：20pt
03.素材を使ったシンプルなデザインのコツ
シンプルなデザインでも素材の使用はOK！ただしこの場合、デザインに使用する素材の種類に気をつけるようにしましょう。
“シンプル”というコンセプトからはずれないように、素材も出来るだけフラットデザインの物を使用するとgoodです。
デザインに使用しているフォントや方法は「02.写真を用いたシンプルデザインのコツ」と同様になります。
04.文字を背景に使用したシンプルなデザインのコツ
こちらは文字組のみデザインになります。文字を背景のようなイメージで配置した物になります。
このようなデザインは文字の大きさや配置する場所がデザインの肝になります。
SIMPLE
- フォント：Helvetica LT Std Bold
- サイズ：110pt
- 字間：オプティカル・25pt
Simple is the best
- フォント：A-OTF ゴシック M
- サイズ：10
- pt
- 字間：オプティカル・75pt
シンプルだからこそ～
- フォント：A-OTF ゴシック M
- サイズ：12pt
- 字間：オプティカル・75pt
- 行間：20pt
コツを抑えて
「＋」はフォントで＋を出し、背面に丸いシェイプを敷いています。
- フォント：A-OTF ゴシック DB
- サイズ：18pt
- 字間：オプティカル・75pt
05.写真に効果を掛けたシンプルなデザインのコツ
写真の色調を変更するなどの工夫をすると、おしゃれな雰囲気にすると同時に目を引くデザインに仕上げる事が出来ます。
SIMPLE
- フォント：Helvetica LT Std Bold
- サイズ：60pt
- 字間：オプティカル・10pt
Best
- フォント：Jellyka CuttyCupcakes Font(フリーフォント)
- サイズ：48pt
- 字間：オプティカル・10pt
写真加工
- 青のカラー：#173ef0
- モードをカラーにし、透明度は60％
06.写真を生かしたシンプルなデザインのコツ
最後は素材となる写真の構図を生かしたデザインです。
いい写真を見つけたのに背景が足りない！という場合は「Photoshopで簡単に背景を伸ばす方法！」をご参照下さいませ。
文字組みは基本的には今までにご紹介したフォントや字間、サイズを用いているので、前頁をご参照下さいませ。
初心者でも簡単にシンプルでおしゃれなデザインをするコツ
最後に、今回この記事を読んで頂ければお気づきになれた方もいらっしゃるかと思いますが、シンプルなデザインをお洒落にするコツは
- 文字組み
- 字間や行間を空ける
- 空間(余白)を大切に
- 無駄な装飾をしない
- 写真もシンプルな物を選ぶ
このあたりがポイントになります。
まずは今回説明させて頂いた6つのチュートリアルを参考にシンプルなデザインに挑戦して頂けたら幸いです♪
コメントを残す