こういったページデザインをするノンデザイナーの人に向けてデザインのやり方を徹底解説します。
もちろん上記の物だけでなく平面にデザインするものであれば参考になる基本的なプロセスです。
私はネットショップ運営やブログ運営においてデザインを考える場面が多かったのですが、構成をせず最初から細かい部分にこだわってしまい、時間をロスしまくった経験が何度もありました。
この経験から先にデザインの構成をしっかり決めてから取り組んだ方が、効率的で完成度が高いこともわかりました。
真っ白なページからデザインが出来上がるまでの過程を例を使って紹介しますね。
☑ 本記事の内容
デザインを始める前に知っておくこと
いきなりデザインを始めてしまうのでなく、事前に知っておかなければならないことがあります。
最初に明確にさせること
これからデザインするものについて何のためにデザインするのか考える必要があります。
これらを明確にすることで届けたい人により自分のデザインを届けることができるからです。
今回はカフェのメニューを例にしますね。
「店内のメニュー」のデザインをこれから考える
こんな感じのイメージです。
ぜひご自分が作りたいデザインの目的をここでじっくりと考えてみてください。
デザインの基本原則
次に知っておかなければならないことは、デザインをわかりやすく伝えるための基本なルールです。
このルールを知ってるだけでデザインの出来栄えが格段に良くなるのと、素人くささがなくなります。
むしろ規則通りにデザインすればいいわけなのである意味楽でもあります。
こちらの記事でデザインの基本4原則を解説しています。
ただ、これから何度もデザインをする予定があるという方は、本で勉強した方が圧倒的に情報量が増えてデザインスキルが上がります。
ノンデザイナーズ・デザインブック [第4版]
デザイン基本4原則の教科書的な立ち位置で、ノンデザイナー向けに書かれているため他の本よりも優しく解説してくれています。
使うツール
ここでデザインするためのツールを2つ紹介します。
CANVA
オンラインで使える無料のグラフィックデザインサイトです。
思い通りのデザインができる、その名の通りキャンバスみたいなものです。
- チラシやパンフレットをデザインする
- ポスターを作る
- プレゼンテーション用の資料を作る
様々な目的別に用意されたテンプレートは、クオリティが高く誰でもおしゃれなデザインができますよ。
グーグルアカウントがあればログインしてすぐに使うことができます。
操作はかなり直観的にできるので初心者の人も安心して使えます。
coolors
これは配色を提案してくれるサイトです。
配色はデザインする上で重要な要素で、色合いがまとまってるだけで全体の見栄えが良くなります。
この『coolors』はスペースキーを押すたびに5色のカラーパレットがランダムで表示されます。
5色のうち気に入った1色があれば、その色だけをロックして別の4色のパターンを表示することが出来ます。
ひたすらスペースキーを押し続ければいいので楽ですよ。
デザインのやり方6ステップ
ではデザイン前の大事な準備ができたらいよいよプロセスを進んでいきます。
- ステップ1:情報整理とラフ案
- ステップ2:方向性の決定
- ステップ3:構成をつくる
- ステップ4:要素を際立たせる
- ステップ5:足し算と引き算
- ステップ6:最後の仕上げ
ひとつずつ説明していきます。
ステップ1:情報整理とラフ案
デザインしたいことを整理して図解し、ラフ案を作ります。
これから作り上げるデザインの根幹なので、これが上手くできなければこの先もスムーズに進まないです。
完成デザインが想像できるくらいしっかり考えることが大事ですよ。
情報整理
かなりざっくりした図解で大丈夫です。
(手書きでOK)
情報に優先順位をつけて何をどれくらいの量で伝えるのか整理します。
- すべてを等しく伝えるのか
- 特定のひとつだけを強調するのか
情報の優先順位がはっきりしてないとこの先で大幅な修正が必要となってしまい非効率です。
何を優先したいのかまず決めましょう。
ラフ
次はデザインの下書きであるラフを作ります。
この先「どこに何を書こう?」と大きく迷うことがなくなります。
内容を整理する意味も込めてこちらも手書きで書いてみましょう。
ステップ2:方向性の決定
描きたい内容を整理できたら「テイスト」と「構造」について大まかな方向性を決めます。
- デザインのテイスト
- 配置の構造
テイスト
どんなテイストのデザインにしたいか考えます。
- シンプルかにぎやかか
- 色数少なめかカラフルか
- イラストを使うか写真を使うか
3~4つ書きだします。
特にデザインのテイストはこの先の工程に影響してくるのでこの時点でしっかり決めておきます。
今回はこういったテイストにします。
- メニューを見やすくシンプルに
- 色数は少なくスタイリッシュに
- イラストではなく写真を使って大人っぽく
構造
さきほどのラフ案を参考にデザインの構造をしっかり決めます。
- 文章を置く場所
- 画像を置く場所
- イラストを置く場所
メニューを置く場所によって違う雰囲気になりますよね?
今回は何を注文するか迷わないためのメニューデザインなのでこの構造に決定しました。
ステップ3:構成をつくる
さきほど決めた構造を元に構成を作ります。
構造よりもさらに細かく各要素を配置する場所を決めます。
- タイトルを置く場所
- サブタイトルを置く場所
- リード分を置く場所
- 説明文を置く場所
- コラムを置く場所
- 注意書きを置く場所
- 写真を置く場所
- イラストを置く場所
今回はこの構成でデザインを作っていきます。
なおこの時点では「何色にするか、フォントの種類はどうするか」等を考えるのはやめておきます。
むしろ「色やフォントの力を借りなくても伝わるか」という視点をもつことが大事です。
そして各要素の配置場所は後から大きく修正すると大変なので、ここで決定させるつもりでいましょう。
ステップ4:要素を際立たせる
構成が決まったらいよいよ個々の要素に注目です。
ひとつひとつの要素をアレンジしていきます。
- フォントの種類を変更する
- 文章の位置を揃える
- 文字間のスペースを調整をする
- 罫線を追加する
大事なこととして「要素を際立たせること」は「色や飾りを付け加えること」ではないです。
こういった部分に気を配るだけで印象が大きく変わります。
今回は以下の要素をアレンジしてみました。
タイトルに特別感をだしたかったのでここだけ右揃えに
②メニュー背景をグレーに
スタイリッシュで大人っぽい雰囲気にしたかったのでグレーに
③メニュー項目の文字間を狭く
引き締めたかったので項目を中心に寄せて文字間を調節
④メニュー項目の文字を赤く
項目を目立たせたかったので赤に
だいぶ雰囲気が変わりましたね。
ステップ5:足し算と引き算
ここまできたらある程度のデザインができあがってると思います。
しかし思い通りの出来に届いていない場合は要素を足す、もしくは引きます。
なくてもいい要素がある→引き算
今回の例は「シンプル」という方向性なので引き算が多いですが、足し算と引き算のバランスが重要です。
さきほど決めた「デザインのテイスト」に近いかを基準に判断します。
セット/食べ物/ドリンクをはっきりと分けたかったので罫線を追加
スタイリッシュよりなんとなく暗い印象になってしまったので白でさわやかに
差し色として赤を選んだが浮いてる感じがしたので黒でシンプルに
以前に決めたテイストに近いデザインが出来上がってきてると思います。
- メニューを見やすくシンプルに
- 色数は少なくスタイリッシュに
- イラストではなく写真を使って大人っぽく
ステップ6:最後の仕上げ
やっと最後の段階まで来ました。
完成度を上げるために細かい部分をチェックします。
ここで大事なのが2つの目線です。
- 全体を見る目
- 細部を見る目
デザインを始める前に考えた「デザインの目的」にきちんと沿っているのか厳しい目でチェックします。
今回は最後にこういった仕上げを行います。
メニューのタイトルを目立たせたかったので太字に。
メリハリがついて判別しやすい。
②罫線を細くする
罫線が重い印象を与えていたので細くして軽やかに。
③画像を明るくする
写真を明るくすることでリラックス感がでて、仕事の休憩中に見るメニューとしてピッタリ。
特に「②罫線を細くする」は非常に細かいことなので、そんなに大差ないのでは?と思う人もいるかもしれません。
けれど色や形に対しては細かく見るほど全体のクオリティが上がります。
細部の手を抜くと全体の美しさにも影響してしまうということですね。
ただ最初の構成の段階から細かい点にこだわってしまうと非効率だし大事な構造を見落としてしまうこともありえます。
細部にこだわるのは最終段階になってからにしましょう。
まとめ
ではもう一度デザインのやり方をまとめます。
- ステップ1:情報整理とラフ案
- ステップ2:方向性の決定
- ステップ3:構成をつくる
- ステップ4:要素を際立たせる
- ステップ5:足し算と引き算
- ステップ6:最後の仕上げ
正直言ってノンデザイナーにとってデザインは、センスうんぬんより基礎知識と事前の準備が大きく影響すると思います。
さっそくデザイン4原則を知り、構成を考えてからこれらのツールを使ってデザインしてみましょう!