Web・グラフィックデザイン「オリジナル作品」を作る手順|現役デザイナーが解説

Web・グラフィックデザイン「オリジナル作品」を作る手順|現役デザイナーが解説

デザインツールの操作やトレース練習ができるようになっても、見本なしで作品を作ろうとすると「何から決めればいいのか分からない」と手が止まることがあります。

オリジナル作品を作るときに大切なのは、いきなり色やフォントを決めることではありません。まず誰に、何を伝えて、どう行動してほしいのかを整理してから、載せる情報やレイアウトを考えていきます。

私はデザインスクールで初心者の作品を添削していますが、見た目に気を取られて、ターゲットや目的とデザインがずれているケースをよく見ます。作品づくりでは、デザインする前の設計がとても重要です。

この記事では、Webならバナー、グラフィックなら名刺を例に、業種決めから参考探し、制作、プロの添削まで、オリジナル作品を完成させる手順を解説します。記事内には、そのまま自主制作に使える「りす先生からの課題」も用意します。

りす先生
りす先生

課題で作った作品は、架空案件・自主制作であることを明記すればポートフォリオに掲載してOKです。実際に1作品完成させながら進めてみてください。

オリジナル作品は「見た目」から考えない

オリジナル作品を作ろうとすると、最初に「どんな色にしよう」「おしゃれなフォントを使いたい」と考えたくなります。

でも、実際のデザインでは、見た目より先に決めることがあります。

それが、

  • 誰に見せるのか
  • 何を伝えるのか
  • 見た人にどう行動してほしいのか

という3つです。

たとえば、ヨガスタジオのバナーを作る場合でも、「女性向けのおしゃれなバナーを作る」だけでは目的が曖昧です。

30代の会社員に、仕事帰りでも通えることを伝えて、無料体験へ申し込んでもらう。

ここまで決まると、必要な情報や目立たせる部分、使う写真や配色も考えやすくなります。

私はデザインスクールで初心者の作品を添削していますが、本人は配色や雰囲気を気にしていても、実際にはターゲットや目的に合っていないことや、情報の優先順位・レイアウトがずれていることがよくあります。

見た目を整える前に、

誰に → 何を伝えて → どう行動してほしいか

を決めることが、オリジナル作品づくりの最初の一歩です。

次から、この考え方を使って作品を作る手順を順番に見ていきます。

りす先生
りす先生

「おしゃれに作る」より先に、「誰のために、何のために作るのか」を決めてみてください。ここが決まると、デザインもずっと考えやすくなります。

オリジナルデザイン作品を作る6STEP

オリジナルデザイン作品を作る6STEP

オリジナル作品は、思いついたところから作り始めるより、実際の仕事と同じように条件を整理してから制作する方が進めやすくなります。

私が初心者に作品制作を教えるときも、次の順番で考えてもらいます。

STEP1|作るもの・業種を決める

まずは、何のデザインを作るのかを決めます。

たとえばWebなら美容室やヨガスタジオの広告バナー、グラフィックならショップや個人事業主の名刺などです。

最初から情報量の多いWebサイトやパンフレットに挑戦する必要はありません。初心者は、目的や載せる情報が整理しやすい制作物から始める方が、デザインの基本を練習しやすくなります。

STEP2|ターゲットを具体的に決める

次に、そのデザインを誰に見てもらうのかを決めます。

「女性向け」「会社員向け」だけではなく、

30代女性/会社員/仕事帰りに運動したい人

くらいまで具体的にすると、写真や色、文字の見せ方を考えやすくなります。

同じサービスでも、ターゲットが変われば適したデザインは変わります。

STEP3|デザインの目的を決める

次は、見た人に何をしてほしいのかを決めます。

たとえば広告バナーなら、

無料体験に申し込んでもらう

名刺なら、

名刺交換後にWebサイトを見てもらう

などです。

「おしゃれな作品を作る」ことは目的ではありません。見た人にどんな行動をしてほしいのかまで決めておきます。

STEP4|載せる情報と優先順位を整理する

制作に必要な情報を書き出したら、何を一番目立たせるかを決めます。

たとえばヨガスタジオのバナーなら、

  1. 初回体験0円
  2. 仕事帰りでも通える
  3. 平日22時まで
  4. 駅徒歩3分
  5. 無料体験はこちら

というように、情報に優先順位をつけます。

初心者の作品では、すべての文字を大きくしたり、全部に色をつけたりして、何を最初に見ればいいのか分からなくなることがあります。

デザインを始める前に情報を整理しておくと、レイアウトも決めやすくなります。

STEP5|参考デザインを探す

ここまで条件を整理したら、参考になるデザインを探します。

好きなデザインを一つ見つけてそのまま真似するのではなく、同じ業種や近いターゲット、目的の制作物を複数見るのがおすすめです。

見るポイントは、

  • どの情報が大きく扱われているか
  • どんな写真が使われているか
  • 配色やフォントの雰囲気
  • 情報がどの順番で配置されているか

などです。

「なぜこの見せ方になっているのか」を考えながら見ると、自分の作品にも応用しやすくなります。

\参考デザインを探すときはこちら/
👉 デザイン参考サイトの記事(準備中)

STEP6|情報を配置してからデザインを整える

条件と参考がそろったら、制作に入ります。

最初から色や装飾を細かく決めるのではなく、まずは情報をどこに置くか、何を大きく見せるかを考えます。

大まかな配置が決まったら、

レイアウト → 写真 → 配色 → フォント → 装飾

と整えていくと進めやすくなります。

最後に、最初に決めたターゲットと目的に戻って確認します。

「この人に伝わるか」「目的の行動につながるか」

ここまで確認できれば、見た目だけではなく、意図のあるオリジナル作品になります。

りす先生
りす先生

途中で迷ったら、色やフォントではなく「誰に、何を伝えて、どうしてほしいか」に戻ってみてください。判断しやすくなります。

最初のオリジナル作品はWebならバナー、グラフィックなら名刺がおすすめ

最初のオリジナル作品はWebならバナー、グラフィックなら名刺がおすすめ

最初のオリジナル作品は、いきなり情報量の多いWebサイトやパンフレットから始めるより、条件が整理しやすい小さな制作物から始めるのがおすすめです。

私が初心者に作ってもらうなら、Webデザインではバナー、グラフィックデザインでは名刺から始めます。

Webデザインならバナーから始める

バナーは、限られたスペースの中で、

  • 誰に見せるか
  • 何を一番伝えるか
  • どこを目立たせるか
  • どんな写真や色を使うか
  • 最後にどんな行動をしてほしいか

を考える必要があります。

情報量が多すぎないので、ターゲットと目的に合わせて情報を整理する練習に向いています。

たとえば「無料体験に申し込んでもらうバナー」なら、一番伝える情報とCTAをどう見せるかまで考えられます。

最初からWebサイト全体を作ると、ページ構成や文章量、導線など考えることが一気に増えます。まずはバナーで、1つの目的に対してデザインを組み立てる練習をしてみてください。

グラフィックデザインなら名刺から始める

グラフィックデザインでは、最初の作品として名刺がおすすめです。

名刺には、

  • 名前
  • 肩書き
  • 会社名や屋号
  • 電話番号
  • メールアドレス
  • Webサイト
  • QRコード

など、必要な情報が比較的はっきりしています。

その中で、何を最初に見せるか、どの情報をまとめるか、余白をどう取るかを考えるので、情報整理やレイアウトの基本を練習しやすいです。

さらに、同じ情報でも、弁護士の名刺とハンドメイド作家の名刺では、適した雰囲気や配色は変わります。

小さな制作物ですが、ターゲットに合わせてデザインを考える練習には十分です。

りす先生
りす先生

最初から大作を作らなくても大丈夫です。まずは小さな制作物で「誰に・何を・どう見せるか」を考えられるようになることを優先してみてください。

りす先生からの課題|オリジナル作品を1点作ってみよう

オリジナル作品を1点作ってみよう

ここまで読んだら、実際に1作品作ってみましょう。

今回は、初心者でも取り組みやすいように、Webはバナー、グラフィックは名刺の課題を用意しました。

この課題で作った作品は、「架空案件」「自主制作」「りす先生の課題制作」など、実案件ではないことが分かる表記をすれば、ポートフォリオに掲載してOKです。

同じ課題でも、写真・色・フォント・レイアウト・情報の強弱をどう考えるかで、完成するデザインは変わります。正解を一つに決めるのではなく、ターゲットと目的に合ったデザインを考えてみてください。

Web課題|ヨガスタジオの広告バナーを作る

まずは、Webデザインの課題です。

制作物
Instagram広告用バナー

サイズ
1080px × 1080px

業種
女性向けヨガスタジオ

ターゲット
30代女性・会社員。運動不足が気になっているものの、仕事が忙しく、平日の夜に通えるスタジオを探している。

目的
無料体験レッスンへ申し込んでもらう。

掲載する情報

  • 仕事帰りに通えるヨガスタジオ
  • 初回体験0円
  • 平日22時まで
  • 駅から徒歩3分
  • 無料体験はこちら

写真は、ヨガをしている女性やスタジオの雰囲気が伝わる素材を自分で選んでみてください。

制作するときは、

  • 一番最初に何を見せるか
  • 「仕事帰りに通える」が伝わるか
  • 30代女性に合う写真や配色になっているか
  • 無料体験への導線が分かりやすいか

を確認します。

すべての情報を同じ大きさで並べるのではなく、目的に合わせて情報の優先順位をつけることがポイントです。

グラフィック課題|整理収納アドバイザーの名刺を作る

次は、グラフィックデザインの課題です。

制作物
名刺

依頼主
30代女性のフリーランス整理収納アドバイザー

ターゲット
家の片づけや収納に悩んでいる、30〜40代の子育て中の女性。

目的
名刺交換後にWebサイトを見てもらい、整理収納の相談につなげる。

掲載する情報

  • 氏名
  • 整理収納アドバイザー
  • 電話番号
  • メールアドレス
  • Webサイト
  • Webサイトへ誘導するQRコード

屋号やロゴは、自分で架空のものを設定して構いません。

制作するときは、

  • 氏名と肩書きをどう見せるか
  • 連絡先をどのようにまとめるか
  • QRコードへ自然に視線を誘導できるか
  • ターゲットに合った雰囲気になっているか
  • 小さな名刺の中でも余白が取れているか

を確認してみてください。

名刺は情報量が少なく見えますが、限られたスペースだからこそ、情報整理とレイアウトの差が出やすい制作物です。

作り終わったら制作意図も書いてみる

作品ができたら、画像だけで終わらせず、簡単に制作意図もまとめてみてください。

たとえば、

  • 誰をターゲットにしたか
  • 一番目立たせた情報は何か
  • なぜこの色を選んだか
  • 写真やフォントを選んだ理由
  • 見た人にどう行動してほしいか

などです。

自分のデザインを言葉で説明すると、見た目だけでなく、目的に合わせて判断できたかを振り返れます。

この制作意図は、あとでポートフォリオへ掲載するときにも使えます。

りす先生
りす先生

課題の条件は同じでも、完成するデザインは人によって違います。「正解の見た目」を探すのではなく、ターゲットと目的に合っているかを確認しながら作ってみてください。

作品ができたらプロに添削してもらう

作品ができたらプロに添削してもらう

オリジナル作品が完成したら、そのままポートフォリオに入れる前に、一度プロのデザイナーに見てもらうのがおすすめです。

自分で作った作品は、長く見ているうちに違和感に気づきにくくなります。家族や友人に見てもらえば、「見やすい」「かわいい」「こっちの方が好き」といった感想はもらえますが、デザインとしてどこを改善した方がいいかまでは判断しにくいことがあります。

プロのデザイナーに見てもらうと、

  • ターゲットに合った見せ方になっているか
  • 目的につながるデザインになっているか
  • 情報の優先順位が適切か
  • レイアウトや余白に無理がないか
  • 配色やフォントが合っているか
  • 写真や素材の選び方に違和感がないか

といったところまで確認できます。

私はデザインスクールで初心者の作品を添削していますが、本人が「色が変なのかな」「もっとおしゃれにした方がいいのかな」と気にしている一方で、実際には情報の優先順位やレイアウトの方を直した方がいいこともよくあります。

自分では「なんとなく変」と感じていても、その原因がどこにあるのかまでは分からないことがあります。そこを具体的に指摘してもらえるのが、プロに添削してもらう大きなメリットです。

ただし、添削では「ここを大きくする」「この色を変える」と言われた通りに直すだけで終わらせないことも大切です。

なぜそこを直した方がいいのかまで理解すると、次の作品にも応用できます。

たとえば、

「この文字をもっと大きくしてください」

と言われたときも、

一番伝えたい情報なのに、他の文字と同じ強さで見えているから

と理由まで分かれば、次に別の作品を作るときにも「何を一番目立たせるべきか」を自分で考えられるようになります。

添削は、作品をきれいに直してもらうためだけではなく、自分でデザインを判断できるようになるために使うのがおすすめです。

りす先生
りす先生

添削してもらうときは、「どこを直すか」だけでなく「なぜ直すのか」まで聞いてみてください。その理由が、次の作品づくりに一番役立ちます。

初心者がオリジナル作品を作るときによくある3つの失敗

初心者がオリジナル作品を作るときによくある3つの失敗

オリジナル作品は、自由に作れる分だけ迷いやすいです。

特に初心者の作品を見ていると、見た目そのものより、考える順番がずれていることが原因でまとまりにくくなっているケースがあります。

ここでは、よくある3つの失敗を紹介します。

見た目から作り始める

最初に色やフォント、写真の雰囲気を決めてしまうと、あとから情報を当てはめる形になりやすいです。

その結果、

  • おしゃれだけれど何を伝えたいのか分からない
  • ターゲットに合っていない
  • 一番伝えたい情報が目立たない

といったことが起こります。

先に決めるのは、誰に、何を伝えて、どう行動してほしいかです。

見た目は、その目的を伝えるために整えていきます。

ターゲットや目的が途中でずれる

最初はターゲットを決めていても、参考デザインを見ているうちに、自分の好きなテイストへ寄ってしまうことがあります。

制作途中でも、

  • この色はターゲットに合っているか
  • この写真で伝えたいことが伝わるか
  • 目的の行動につながる見せ方になっているか

を確認してみてください。

「自分が好きか」ではなく、設定した相手に合っているかで判断することが大切です。

情報を全部目立たせようとする

初心者の作品では、載せる情報をすべて大きくしたり、色をつけたり、囲ったりしてしまうこともよくあります。

でも、すべてを目立たせると、かえって何を見ればいいのか分からなくなります。

たとえばバナーなら、

初回体験0円 → 平日22時まで → 駅徒歩3分 → CTA

のように、伝える順番を決めます。

名刺でも、氏名・肩書き・連絡先・Webサイトを同じ強さで見せるのではなく、最初に何を見てほしいかを考えてレイアウトします。

デザインでは、情報を足すことだけでなく、強弱をつけて整理することも重要です。

りす先生
りす先生

まとまらなくなったら、いったん装飾を増やすのをやめて、ターゲット・目的・情報の優先順位に戻ってみてください。原因が見つかることがあります。

まとめ|オリジナル作品ができたらポートフォリオへ

オリジナル作品ができたらポートフォリオへ

オリジナル作品を作るときは、最初から見た目を考えるのではなく、ターゲットと目的を決めてから制作することが大切です。

今回紹介した流れを、もう一度整理します。

  • 作るもの・業種を決める
  • ターゲットを決める
  • 目的を決める
  • 載せる情報と優先順位を整理する
  • 参考デザインを探す
  • 制作する
  • プロに添削してもらい、修正する

この順番で進めると、「なんとなくおしゃれに作る」ではなく、誰に何を伝えるためのデザインなのかを考えながら制作できるようになります。

最初から完璧な作品を作る必要はありません。私自身も、新人の頃からたくさん作って、直してもらいながらデザインを身につけてきました。

この記事の「りす先生からの課題」も、まずは1点完成させてみてください。完成後に見直したり、プロから添削を受けて修正したりするところまで含めて、作品づくりの練習になります。

作品が完成したら、次は採用担当者やクライアントに、どのように考えて作ったのかまで伝わる形にまとめる段階です。

\次に読む/
👉 Web・グラフィックデザイナーのポートフォリオの作り方

りす先生
りす先生

オリジナル作品は、上手に作ることだけが目的ではありません。「誰に、何を伝えるか」を自分で考えて形にする経験が、そのまま次の仕事につながる土台になります。