【初心者向け】デザインのやり方6ステップをわかりやすく図解します【事前準備と構成が大事】

こういったページデザインをするノンデザイナーの人に向けてデザインのやり方を徹底解説します。

もちろん上記の物だけでなく平面にデザインするものであれば参考になる基本的なプロセスです。

私はネットショップ運営やブログ運営においてデザインを考える場面が多かったのですが、構成をせず最初から細かい部分にこだわってしまい、時間をロスしまくった経験が何度もありました。

この経験から先にデザインの構成をしっかり決めてから取り組んだ方が、効率的で完成度が高いこともわかりました。

真っ白なページからデザインが出来上がるまでの過程を例を使って紹介しますね。

デザインを始める前に知っておくこと

いきなりデザインを始めてしまうのでなく、事前に知っておかなければならないことがあります。

最初に明確にさせること

 
これからデザインするものについて何のためにデザインするのか考える必要があります。

これらを明確にすることで届けたい人により自分のデザインを届けることができるからです。

今回はカフェのメニューを例にしますね。

 

こんな感じのイメージです。

ぜひご自分が作りたいデザインの目的をここでじっくりと考えてみてください。

デザインの基本原則

 
次に知っておかなければならないことは、デザインをわかりやすく伝えるための基本なルールです。

このルールを知ってるだけでデザインの出来栄えが格段に良くなるのと、素人くささがなくなります。

むしろ規則通りにデザインすればいいわけなのである意味楽でもあります。

こちらの記事でデザインの基本4原則を解説しています。

【超単純】デザインの基本4原則をわかりやすく図解します【センス以前に大事なこと】

2021年7月25日

ただ、これから何度もデザインをする予定があるという方は、本で勉強した方が圧倒的に情報量が増えてデザインスキルが上がります。
 

ノンデザイナーズ・デザインブック [第4版]
 
デザイン基本4原則の教科書的な立ち位置で、ノンデザイナー向けに書かれているため他の本よりも優しく解説してくれています。

使うツール

ここでデザインするためのツールを2つ紹介します。

ＣＡＮＶＡ

 
オンラインで使える無料のグラフィックデザインサイトです。
思い通りのデザインができる、その名の通りキャンバスみたいなものです。

様々な目的別に用意されたテンプレートは、クオリティが高く誰でもおしゃれなデザインができますよ。

グーグルアカウントがあればログインしてすぐに使うことができます。

操作はかなり直観的にできるので初心者の人も安心して使えます。

coolors

 
これは配色を提案してくれるサイトです。

配色はデザインする上で重要な要素で、色合いがまとまってるだけで全体の見栄えが良くなります。

この『coolors』はスペースキーを押すたびに5色のカラーパレットがランダムで表示されます。

5色のうち気に入った1色があれば、その色だけをロックして別の4色のパターンを表示することが出来ます。

ひたすらスペースキーを押し続ければいいので楽ですよ。

デザインのやり方6ステップ

ではデザイン前の大事な準備ができたらいよいよプロセスを進んでいきます。

ひとつずつ説明していきます。

ステップ1：情報整理とラフ案

デザインしたいことを整理して図解し、ラフ案を作ります。

これから作り上げるデザインの根幹なので、これが上手くできなければこの先もスムーズに進まないです。

完成デザインが想像できるくらいしっかり考えることが大事ですよ。

情報整理

 
かなりざっくりした図解で大丈夫です。
（手書きでＯＫ）

情報に優先順位をつけて何をどれくらいの量で伝えるのか整理します。

情報の優先順位がはっきりしてないとこの先で大幅な修正が必要となってしまい非効率です。

何を優先したいのかまず決めましょう。

ラフ

 
次はデザインの下書きであるラフを作ります。

この先「どこに何を書こう？」と大きく迷うことがなくなります。

内容を整理する意味も込めてこちらも手書きで書いてみましょう。

ステップ2：方向性の決定

描きたい内容を整理できたら「テイスト」と「構造」について大まかな方向性を決めます。

テイスト

 
どんなテイストのデザインにしたいか考えます。

3～4つ書きだします。

特にデザインのテイストはこの先の工程に影響してくるのでこの時点でしっかり決めておきます。

今回はこういったテイストにします。

構造

さきほどのラフ案を参考にデザインの構造をしっかり決めます。

メニューを置く場所によって違う雰囲気になりますよね？

 

 

今回は何を注文するか迷わないためのメニューデザインなのでこの構造に決定しました。

 

ステップ3：構成をつくる

 
さきほど決めた構造を元に構成を作ります。

構造よりもさらに細かく各要素を配置する場所を決めます。

今回はこの構成でデザインを作っていきます。

 

なおこの時点では「何色にするか、フォントの種類はどうするか」等を考えるのはやめておきます。

むしろ「色やフォントの力を借りなくても伝わるか」という視点をもつことが大事です。

そして各要素の配置場所は後から大きく修正すると大変なので、ここで決定させるつもりでいましょう。

ステップ4：要素を際立たせる

 
構成が決まったらいよいよ個々の要素に注目です。

ひとつひとつの要素をアレンジしていきます。

大事なこととして「要素を際立たせること」は「色や飾りを付け加えること」ではないです。

こういった部分に気を配るだけで印象が大きく変わります。

今回は以下の要素をアレンジしてみました。
 

だいぶ雰囲気が変わりましたね。

 

ステップ5：足し算と引き算

 
ここまできたらある程度のデザインができあがってると思います。

しかし思い通りの出来に届いていない場合は要素を足す、もしくは引きます。

今回の例は「シンプル」という方向性なので引き算が多いですが、足し算と引き算のバランスが重要です。

さきほど決めた「デザインのテイスト」に近いかを基準に判断します。

以前に決めたテイストに近いデザインが出来上がってきてると思います。

ステップ6：最後の仕上げ

 
やっと最後の段階まで来ました。

完成度を上げるために細かい部分をチェックします。

ここで大事なのが2つの目線です。

デザインを始める前に考えた「デザインの目的」にきちんと沿っているのか厳しい目でチェックします。

 
今回は最後にこういった仕上げを行います。
 

 

 
特に「②罫線を細くする」は非常に細かいことなので、そんなに大差ないのでは？と思う人もいるかもしれません。

けれど色や形に対しては細かく見るほど全体のクオリティが上がります。

細部の手を抜くと全体の美しさにも影響してしまうということですね。

ただ最初の構成の段階から細かい点にこだわってしまうと非効率だし大事な構造を見落としてしまうこともありえます。

細部にこだわるのは最終段階になってからにしましょう。

まとめ

ではもう一度デザインのやり方をまとめます。

正直言ってノンデザイナーにとってデザインは、センスうんぬんより基礎知識と事前の準備が大きく影響すると思います。

さっそくデザイン4原則を知り、構成を考えてからこれらのツールを使ってデザインしてみましょう！

デザインを始めるんだけど何を使えばいい？基本の素材サイトを５つまとめました【これさえあれば無料でおしゃれなデザインが可能】

2021年7月23日