初心者デザイナーも今すぐ実践! Canvaを使ったデザインワークフロー

初心者デザイナーも今すぐ実践! Canvaを使ったデザインワークフロー

「ゼロからのデザイン、どこから手をつけたらいいかわからない」
「良いデザインって、どうやったらつくれるの?」
「デザインはしてるんだけど、なんかダサいかも…」

このような悩みを抱えている、デザイン初心者の方も多いのではないでしょうか。今回は、これからプロとしてデザインを本格的に始めたい! という方に向けて、「Canva」の便利なツールを使ったデザインのワークフローをご紹介します。
初心者からベテランまで幅広い層が使える、便利なツールが豊富な「Canva」。作成前の準備や思考を丁寧にやっていけば、良いデザインを作るきっかけがつかめるはずです。
作成フローを効率的に進めることができるツールも合わせてご紹介しますので、ぜひ活用してみてくださいね。

デザイン準備のためのワークフロー

今回はわかりやすく、仮のプロジェクトを例にあげて考えていきましょう。

新しくオープンするカフェの「新規サイト」と「メニュー表」のデザインをゼロベースで作る場合、どのようにデザインを進めていけば良いでしょうか。

デザインの情報を取りまとめてくれるディレクターはおらず、デザイナーのあなたとお店のオーナーで立ち上げる、という前提のもと、必要なフローについてひとつずつ丁寧に解説していきます。

01.ターゲット選定

まずは、カフェのメインとなるターゲットを考えていきます。
お店の雰囲気や商品に大きく左右されるので、クライアントであるお店のオーナーに方向性は決めてもらいましょう。

たとえば、

  • 20代前半の流行に敏感な若い女性。商品は見た目にもこだわりがあり、SNSでのシェアを意識している
  • 30代前後の男性。コーヒーにこだわりがあり、内装もシックで落ち着いた雰囲気のお店を好む
  • 10代〜20代の若者。商品はリーズナブルな価格で、オシャレな内装のお店を好む

など、お店の方向性からざっくりと年齢や性別などを決めていきます。よりターゲット像を深掘りしたペルソナを設計するのも良いでしょう。ここが決まれば、どういうデザインのテイストにするべきかも、大まかに絞られてくると思います。

02.コンセプトを決定

次に、ほかのカフェと差別化できるような、デザインのコンセプトを考えます。

コンセプトとは、「誰に、どのように」思いを伝えたいかを明確にし、それを達成するための概念です。そのお店が目指すゴール・目的になりますので、代表であるオーナーと一緒に慎重に決めていきましょう。

デザイン着手前にコンセプトを確定させることは、非常に重要な過程です。たとえば、途中で「やっぱりデザインをこうしたい、ああしたい」と、クライアントや自分の考えがフラフラしはじめても「それは本当にコンセプトに沿っているのか?」という判断を客観的にすることができます。不要な回り道を避け、最後まで筋の通ったデザインを作るためにも必要不可欠なフローです。デザイン着手前に必ず話し合って、納得のできるコンセプトをつくりましょう。

またデザイナー観点からのメリットとして、クライアントであるオーナーにデザインを説明する際、論理的に説明しやすくなるので説得感をもって提案することができます。

03.目的の明確化

ここからは具体的なコンテンツについて考えていくために、「なぜWebサイトを作るのか」というWebサイト作成の目的を決めましょう。

ここからのフローは、どちらかというとディレクターの仕事という認識が一般的には強いのではないでしょうか。しかし、デザイナーがゼロからすべてデザインを請け負う場合には、こういった作業的なフローも必要です。

新規オープンの場合は「まずはカフェの存在・ブランドを知ってもらい、そこから興味を持ってもらう」という目的が多いかと思います。何のためにサイトを作るのか、今一度クライアントと認識を合わせて、どういったコンテンツを盛り込むのかを考えていきましょう。

業種によって、「お問い合わせをしてもらう」「商品を買ってもらう」など、さまざまな目的があります。しっかりと目的を定めてコンテンツを提案することができればベストです。

お店を知ってもらい興味を引くことが目的なら、たとえば「Facebookページをつくってサイトと連携するコンテンツ」や「初めてきたお客様へのサービスページ」などを作ると良いかもしれません。

04.情報設計・ワイヤーフレームを作る

次に、クライアントからメニュー表やWebサイトに盛り込む具体的な情報をもらいましょう。メニューのタイトルや説明、お店の営業時間、アクセス、紹介文などです。

その情報を整理し、デザインレイアウト(ワイヤーフレーム)をつくります。Webサイトの場合は、全体を把握するためサイトマップもつくっておくと良いでしょう。

作成は手書きでも良いですし、Adobe XDやSketchなどツールを使用したり、Webサービスを活用するなど方法はさまざまです。

パソコンで作成する場合の注意点は、デザインのレイアウトを、パソコンのみで考えないようにすること。最近はスマートフォンでサイトを閲覧する方が多い傾向にあります。まずは「何を使って閲覧されるか」というデバイスを想定しておくことが大切です。ターゲット層に応じて、スマートフォンをベースにした設計にするのか、または画面サイズの異なる複数のデバイスに対応させるレスポンシブで構築するのか、パソコンとスマートフォンでページを出し分けるのかなどを、この時点で決めておくと良いでしょう。

デザインの着手へ

いよいよ表現に関わる部分ですが、まだデザインの実作業には入りません。大きな部分や周りから少しずつ固めていきましょう。いきなり細部のデザインに取り掛かるのではなく、全体の色や雰囲気といったところからひとつずつクライアントと認識を合わせていくことで、より良いデザインになっていきます。

デザインは自分が満足するように作るのではなく、そのサイトのコンセプトやターゲットとしているユーザーに寄り添った表現になっていることが非常に大切です。

カラーを決める

準備段階でターゲットやコンセプトが決まったことにより、デザインの表現方法がより具体的に見えてきていると思います。暖色系なのか? 寒色系なのか? まずはざっくりと色の雰囲気を決めていくと良いでしょう。

たとえば、メインターゲットが男性でコーヒーにこだわりがあるなら、本格的な雰囲気を出すために濃いブラウンをメインカラーに。アットホームで出入りしやすいような雰囲気がコンセプトなら、そこにオレンジなどの暖色系のカラーをアクセントにしても良いかもしれません。癒しをお客様に提供したいという場合は緑を…という具合に、そのお店がお客様に何を提供しようとしているのかを考え、そこから色を決めていきます。

色の大まかな方向性が決まったら、早速「Canva」のツールを使って具体的な色を決めていきましょう!

「Canva」の便利なカラーツール

なんとなく青系、ブラウン系…などふわっとした状態ではなく、具体的にカラーコードの16進数でメインカラー、サブカラー、アクセントカラーなど決めていきましょう。

下記で紹介するのは「Canva」のサービスに含まれているツールです。様々な方向からカラーを検討することができます。

『カラーパレットジェネレーター』

カラーパレットジェネレーター

https://www.canva.com/color-palette/

こちらは、写真をアップロードすると、その写真に入っている色からピックアップして、カラーパレットを自動生成してくれる便利なツールです。この手法は、ブランディングの観点からも非常によく使われる方法になります。

たとえば店内の雰囲気にこだわりがある場合なら、カフェの内装を撮影してその写真から色をピックアップすると、店内とデザインに統一感が出てよりブランド性も高まるでしょう。

『カラーコンビネーションズ』

カラーコンビネーションズ

https://www.canva.com/colors/combinations/

カラーコンビネーションズでは、様々な色の組み合わせ例をつくったり、他の人がつくった組み合わせを閲覧することができます。

下記の様に好きなカラーをフォームに入れて検索すれば、その色が含まれる組み合わせを提示してくれます。入力する内容は、「Green」や「Blue」など色の名前でもいいですし、16進数を直接打ち込むこともできます。

canva_workflow04

アクセントカラーのアイデアに煮詰まったときなど、インスピレーションが必要な際に重宝します。このツールを使えば、思いもよらない色の組み合わせが見つかるかもしれません。

『カラーズ』

カラーズ

https://www.canva.com/colors/

カラーズは、特定の色を詳しく解説してくれるツールです。

たとえば「Green」と打ち込めば、「Lime Green」や「Forest Green」といった、さまざまなタイプの「Green」を提示。さらにその色をクリックすれば、下記のような詳細ページにリンクします。

カラーズ詳細ページ

詳細ページにはその色の正式名称と解説、またその色が含まれた様々な色の組み合わせ(カラーコンビネーション)も紹介。「Color combinations」という見出し部分にある色の組み合わせをクリックすると、先ほどのカラーコンビネーションズの詳細ページへいくことができます。

機能としてはシンプルですが、色についての知識や使い方について学べるので、より納得感を持ってメインカラーを選ぶことができます。

ムードボードを作る

細かいデザインの着手をする前に、ムードボード(イメージボードとも呼ばれます)をつくり、デザインの具体的なイメージをクライアントと共有しておくこともひとつの方法です。

ムードボードとは、言語化できないデザインアイデアを共通認識させるためのボード(カンバス)のこと。デザイナーが「こう感じてもらいたい」と思う雰囲気を醸し出す写真やイラストなどで構成し、言葉では説明しづらいそのデザインの価値観を視覚的に表現します。

とはいえ、この作業は複数人のデザイナーや数人のメンバーがいるチームで行う場合に実施することが多いので、必要に応じて活用してください。

デザイナーとクライアント、双方で言葉の認識は同じでもそれぞれの頭の中で思い描いているイメージが少しズレている、ということもあります。これからブランドをつくり上げていくという段階であればやっておいても損はないはずです。

ムードボード作成でも「Canva」が役に立ちます。

ムードボード紹介ページキャプチャ画像

https://www.canva.com/ja_jp/create/mood-boards/

こちらの「ムードボードのデザインを開始」ボタンから、簡単にムードボードを作成することができます。
※利用には無料会員登録が必要です。

テンプレート選択画面

このように、たくさんのオシャレなテンプレートが無料で用意されています。好みのテンプレートを選び色や画像を自由に差し替え、オリジナルのムードボードの作成が可能です。スピーディーに簡易的なムードボードを作成したい、という場合にも最適。画像は自分でアップロードして使用することもできます。URLでムードボードを簡単にシェアすることもできるので、クライアントへの確認もスムーズに行うことができるでしょう。

ツールを決めて、デザイン作業へ

これでいよいよデザインの着手です!

ツールについて

Webサイトの場合、グラフィックや装飾が多いデザインならAdobe Photoshop、シンプルで統一感のあるテイストならXDやSketchなどのツールがメジャーです。印刷物であるメニュー表の場合はAdobe Illustrator(画像加工にはAdobe Photoshop)が良いでしょう。

これらはすべて有料になります。デザインを始めたばかりで使いこなす自信がない…というデザイン初心者の方は、これまでにご紹介した「Canva」でデザインの作成も行うことが可能です。非常に簡易的なツールではありますが、無料で豊富なテンプレートが用意されていて必要なカスタマイズも行えるので、初心者デザイナーでも気軽に始めることができるでしょう。
デザインも非常にオシャレで、プロにも見劣りしません。しかもブラウザ上で操作ができるので、PCにインストールする必要もなくすぐに使い始めることができます。ネット環境さえあればどこでもデザイン作業ができて動作も軽快です。

まずは無料会員登録を行い、デザイン作成画面に入ります。

PCログイン画面

https://www.canva.com/ja_jp/

登録はFacebookやGoogleでログインすることも可能です。

登録すると、このような画面に入ります。

ログイン後画面

「デザインを作成」にあるさまざまなデザインテーマから、デザインを選びましょう。

どちらかというとCanvaは印刷物に強いので、メニュー表のほか名刺やチラシなどもテンプレートとして用意されており、お店の新規オープンに必要なクリエイティブがまとめて簡単に作ることができます。

では、メニュー表を作ってみましょう。画面左上、緑の「デザイン作成」ボタンをクリックし検索窓の中に「メニュー」と入力してください。

テンプレート検索イメージ

下部に表示された「メニュー」をクリックすると、下記のような編集画面に切り替わります。

メニューテンプレート

左側にはたくさんのテンプレートが用意されており、右側が実際のデザイン画面です。これまでに決めたターゲットやコンセプトのイメージに近いデザインを選びましょう。文字サイズやフォントの種類、色や配置など、自由に変更することができます。

また、Facebookページのヘッダー画像や広告用バナーなど、マーケティングに必要な画像も用意されています。必要な画像サイズを調べることなく、そのままワンクリックで規定のデザインがつくれるので、非常にスピーディです。

サイトの場合は選択項目がないので、デザインテーマを選ぶのではなく、トップページ右上にある「画像サイズを指定」をクリックし、画像やテキストを組み合わせて作るのが良いでしょう。

まとめ

ここまでの説明から、デザインはただ作ることよりもその下準備に膨大な時間を費やす必要があることがおわかりいただけたかと思います。

デザインは、ただキレイに色や形を並べているだけではありません。

どういう目的で、どのようなユーザーに、どんな情報をどうやって伝えるのか、それをどう感じてもらいたいのかを明確にしなければ、デザインの答えはおそらく見つからないでしょう。デザインは、目的を実現させるためのひとつの方法です。ただ感性だけでつくっているのではなく、論理的な思考で設計(デザイン)に取り組んでいるということを、ぜひ意識していただければと思います。

デザイン初心者の方は、今回ご紹介した下準備を通してデザインと徹底的に向き合えば、解決の糸口が掴めるはずです。

デザインは手を動かして作る時間よりも、事前に考える時間のほうが大切だということを心に留めて、取り組んでみてくださいね。