サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

ポップなイメージを出したい時に使えるあしらい3つ【作成方法も解説!】

ポップなイメージを出したい時に使えるあしらい3つ【作成方法も解説!】

この記事にはプロモーションが含まれています。

ポップなデザインに仕上げるには、ポップなイメージを強調するようなあしらいの存在が欠かせませんよね。

ただ、ポップなあしらいを紹介している本はたくさんあるのですが、あしらいの作成方法まで解説しているものはあまりないように感じます。

そこでこの記事では、ポップなあしらいの作成方法もセットで紹介します!

作成に大きな手間がかかるものや、絵心(画力)が必要なものは除外し、誰でも簡単に作成できるものに厳選しました。
なお、あしらいはIllustratorで作成した方が楽な場合が多いため、使用ソフトはIllustratorです。

そして今回ポップなあしらいを加えていくのはこちらのサンプルバナーです。

ポップなあしらいを加える前のサンプルイメージ

丸ゴシックを使っているので、ある程度ポップな雰囲気は出ていますが、もう少しポップなイメージを足したいところですよね。

今回はこのサンプルバナーにポップなあしらいを加えて、デザインをブラッシュアップしていこうと思います!

– 目次 –

(1)セリフっぽいラインを破線に

ポップなイメージを出すために、テキストの両端にラインを加えてセリフっぽく見せるテクニックはよく使われますが、そのままではポップさや面白味に欠けてしまいます。

セリフっぽく見えるラインを加えたサンプルイメージ
いまいちポップさに欠けてしまう

そこでこのラインに一手間加えてよりポップなあしらいにしてみましょう。

単なる直線ではなく切れ目を作る(破線にする)ことで、ヌケ感が出てポップな雰囲気が強くなります。

セリフっぽく見えるラインを破線にしサンプルイメージ
ヌケ感が出てポップさが強調された

ラインにほんの少し手を加えるだけでも、画像の雰囲気が変わるのが分かりますね!

セリフっぽい破線の作成の手順は以下の通りです。

  1. 直線ツールでラインを引く

    直線ツールでラインを引く
  2. ウィンドウメニュー→【線】で線パネルを開き、円形先端にする

    ウィンドウメニュー→【線】で線パネルを開き、円形先端にする
  3. 破線にチェックを入れ、プレビューを見ながら線分と間隔の数値を調整する

    破線にチェックを入れ、プレビューを見ながら線分と間隔の数値を調整する
  4. 回転させてコピペ→左右反転して完成

    回転させてコピペ→左右反転して完成

    ※反転コピーの方法はこちらの記事をご参考ください

破線を設定する際のポイントは下にまとめました。

  • ・破線を細かく(小さく)しすぎない
  • ・線分の数値変え、長さにバリエーションを持たせる

破線を細かくしすぎると点線に近づくため、ラインが見づらくなってしまいます。
また、破線が全て同じ長さだと規則性が強調されるため、ポップな雰囲気やヌケ感が出づらくなってしまいます。

破線にある程度ランダム性を持たせるようにすると良い感じになるので、それを意識して破線の数値を調整してみて下さいね!

    POINT!
  1. ・セリフっぽく見えるラインはよく使われるが、そのままではやや単調なイメージに!
  2. ・ラインを破線にするとヌケ感が出てポップなイメージに!
  3. ・破線は細かくしすぎず、長さにはランダム性を持たせよう!

(2)手描きのフキダシ

フキダシもポップなイメージを出したい時によく使われるあしらいですが、下のように図形的なフキダシでは退屈なイメージになってしまいがちです。

図形的なフキダシを加えたサンプルイメージ
図形的なフキダシはやや退屈なイメージ

よりポップさを強調したい場合は、手描きのフキダシにすると良いです。

手描きのフキダシを加えたサンプルイメージ
手描きのフキダシはポップさが強調される

ただ、手描きに苦手意識を持っている方はきっと多いですよね?(筆者もそうです)

大丈夫です!絵が苦手でも、ペンツールが苦手でも、手描きのフキダシぐらいは誰でも簡単に作ることができます。
作成の手順は以下をご参考ください。

  1. 鉛筆ツールをダブルクリックし、精度を滑らかにしておく

    鉛筆ツールをダブルクリックし、精度を滑らかにしておく
  2. 鉛筆ツールでフキダシのラインを描く

    鉛筆ツールでフキダシのラインを描く
  3. うまく描けなかったところはダイレクト選択ツールで修正する

    うまく描けなかったところはダイレクト選択ツールで修正する
  4. はさみツールで切り取りたい2点をクリックして切り取る

    はさみツールで切り取りたい2点をクリックする
  5. 角度や大きさ、線の太さなどを調整して完成

    角度や大きさ、線の太さなどを調整して完成

一番大事なポイントは、鉛筆ツールで描くときに完璧を目指さないということです。

特にマウス操作の場合は一発で思い通りのフキダシを描くことは困難です。

そのため、後でダイレクト選択ツールで修正することを前提として、うまく描こうと思わずに気軽に描くと良いと思います。

最初から完璧を目指さずに後でダイレクト選択ツールで細かく修正を加えるというテクニックは、イラスト作成やペンツールによるトレースなどでも役立ちます。

Illustrator初心者のうちは初めからキレイなパスを作成しなくちゃと焦ってしまいがちですが、上達のためには細かい修正は後で良いというスタンスを身につけることも大切です。

    POINT!
  1. ・フキダシもよく使われるあしらいだが、図形的なフキダシは退屈なイメージになりがち!
  2. ・ポップさを出したい場合は、手描きのフキダシにしてみよう!
  3. ・最初からキレイなパスを作る必要はない!後で修正すればOK!

(3)波打つリボン型フレーム

ポップなイメージを強調したい場合、テキストをフレームで囲むことも多いです。

フレームには様々な形のものがありますが、その中でも特に使用頻度が高いのがリボン型フレームです。

ですが下のようにシンプルすぎるリボンフレームでは、やはりイマイチポップさに欠けてしまいます。

ポップさに欠けリボンフレーム
シンプルすぎてポップさに欠ける

かと言ってフキダシのように手描きでリボンフレームを作成するのは、難易度がやや高くて手間もかかってしまいます。

そこでおすすめなのが、旗のように波打つリボンフレームです。

そして旗の形に合わせてテキストを配置することでデザインに動きが生まれ、遊び心やポップなイメージをより強調することができます。
具体的には下のようなイメージです。

ポップなリボンフレーム
形を工夫するとポップさUP!

いかがでしょうか?
直線的なリボン型フレームと比べると、楽しげな雰囲気が増したかと思います。

このような波打つリボン型フレームの作成手順は以下の通りです。

  1. 長方形ツールで長方形を描画する

    長方形ツールで長方形を描画する
  2. アンカーポイントの追加ツールで長方形の両端にアンカーポイントを追加する

    アンカーポイントの追加ツールで長方形の両端にアンカーポイントを追加する
  3. ダイレクト選択ツールで追加したアンカーポイントを内側へドラックする

    ダイレクト選択ツールで追加したアンカーポイントを内側へドラックする
  4. 効果→ワープ→旗を選択

    効果→ワープ→旗を選択
  5. カーブ(水平方向)の数値を調整してOKをクリック

    カーブ(水平方向)の数値を調整してOKをクリック
  6. ペンツールでカーブに合わせてパスを作成する

    ペンツールでカーブに合わせてパスを作成する
  7. パス上文字ツールでパスに合わせて文字を入力する

    パス上文字ツールでパスに合わせて文字を入力する
  8. 傾きや大きさ、位置などを調整して完成

    傾きや大きさ、位置などを調整して完成

ちなみに、アンカーポイントを追加して左右を凹ませる手順においては、完全に左右対称にする必要はありません。

ワープ(旗)で変形させるのでどのみち左右対称にはなりませんし、だいたいの見た目で調整して良いと思います。

アイコンやロゴを作成する場合は完璧な左右対称にすることが求められることも多いですが、手描き風のものを作りたい場合や、遊び心を出したい場合は左右非対称の方が良い味になります。

今回は遊び心を出してポップな雰囲気を出したかったので、完璧に左右対称にならない方法をご紹介しました。

完璧に左右対称の形にしたい場合は、こちらの記事で左右反転コピーについて詳しく解説しているので、興味がある方はご参考ください。

    POINT!
  1. ・ポップな雰囲気にしたい場合はリボン型のフレームを利用するのも有効!
  2. ・リボンフレームを旗のようにうねらせて、よりポップなイメージに仕上げよう!
  3. ・遊び心を出したい場合は、完全な左右対称の形にしなくてもOK!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン