映空舎-EiKUUsha

動画撮影/編集・Web/バナー制作

【デザイン初心者向け】「SUMMER CLEARANCE SALE 80% OFF」バナーの色見本をつくろう

バナーデザインに活かす夏の配色アイデア

こんにちは。「映空舎」のNagiです。
今回は「SUMMER CLEARANCE SALE 80% OFF」という文言を使って、セールバナーにぴったりな色の組み合わせ(配色)を考える方法を、デザイン初心者さんにもわかりやすくご紹介します。

「デザインって難しそう……」と思っている方も大丈夫。色選びの基本や、便利なサイトもあわせて紹介しますので、これを読めばすぐに“それっぽいバナー”が作れるようになりますよ。


■ なぜ「色(配色)」が大切なの?

「80% OFF」って文字だけでも目を引きますが、実はそれだけでは不十分なんです。
人の目を引きつけたり、気分を動かしたりするのは「色」の力がとても大きいんです。

たとえば……

  • 明るいブルー系 → 涼しさ・信頼感・爽やかさ
  • パキッとした赤・オレンジ系 → お得感・注目・勢い
  • シックなネイビーやゴールド系 → 高級感・上品さ・大人っぽさ

このように、色がもたらすイメージは見る人の「感情」や「印象」に直結します。


■ どんな色を使えばいい?ネットのバナーを参考にしてみよう

配色を考えるときにおすすめなのが、「すでに使われているバナーを参考にする」ことです。
PinterestGoogle 画像検索で「summer sale banner」などと入力してみると、たくさんの事例が出てきますよ。

※注意※
参考にするだけにして、画像をそのまま使うのはNGです(著作権があるため)。
「こんな雰囲気にしたいな~」と色を抜き出して使うのがポイントです!


■ 配色パターンを3つご紹介!

🌴 パターン①:セール配色の王道!目に飛び込むコントラスト

  • 背景:#ece237(レモンイエロー)
  • 文字:#d02a27(レッド)

→ 王道のセールバナー配色。ぱっと目を引く「黄色×赤」は、スーパーのチラシや家電量販店のPOPなどでも定番の組み合わせです。お得感・緊急感・インパクトを視覚でダイレクトに伝えたいときにぴったり。

この配色は、「迷ったらこれ!」と言えるほど安定感があります。値下げ・在庫処分・期間限定といった「買う理由を後押しする演出」に特に強く、誰が見ても“セールだ!”とわかる強力な訴求力が魅力です。

 


🌊 パターン②:「親しみやすくて、元気をくれる」ナチュラルポップ系バナー

  • 背景:#98d5f4(うすい青)
  • 文字:#feef01(レモンイエロー)

→ 家族向け・女性向けのカジュアルブランドにおすすめ

空のような淡い青と、はじけるようなイエローの組み合わせは、見る人に「安心感」と「元気」を同時に与える配色です。主張しすぎず、それでいて楽しげな印象を与えます。


🔥 パターン③:とにかく目立つ!圧倒的コントラスト配色

  • 背景:#FF0000(赤)
  • 文字:#000000(黒)

→ 赤の背景に黒い文字は、視覚的インパクトが非常に強く、特に「一目で伝えたい」「とにかく目立たせたい」時に有効な配色です。警告、注意、セール、残りわずか!などの「緊急性」を感じさせる効果があります。

一方で強すぎる印象になることもあるため、使用する場面はしっかり選びましょう。特に「在庫処分」「閉店セール」などのシーンでは、この組み合わせは間違いなく効きます。まさに“セールの最終兵器”とも言える配色です。


■ 配色を助けてくれる便利サイト5選(初心者OK)

「自分で色を考えるの難しい……」という方は、無料の配色サイトを使えばOKです。


■ まとめ:配色は「目的」と「気持ち」で選ぼう!

今回は、「SUMMER CLEARANCE SALE 80% OFF」という言葉をテーマに、初心者でも使いやすい配色アイデアを紹介しました。

どんな色が正解かは「誰に」「何を」「どう伝えたいか」で変わってきます。

見た目のおしゃれさだけでなく、「このバナーで何を伝えたいか?」を考えて、色を選んでみてくださいね。

配色に正解・不正解はありません。大事なのは「伝えたいことが伝わるかどうか」。
自分なりの感性や直感を大切にしながら、少しずつ「色のセンス」を磨いていくことで、どんどん楽しくなっていきます。

まずは今回紹介した5つの配色や便利サイトを使って、自分だけのバナーを作ってみましょう!

また、この記事でご紹介しているバナー作りは、Illustratorなどのデザインソフトを使う練習にもなります。文字の配置や色の指定、背景の作り方など、基本的な操作を試しながら覚えていくにはとても良い題材です。

デザイン初心者の方は、配色だけでなく「ツールの使い方」も一緒に身につけていけるので、ぜひチャレンジしてみてください。
「楽しくつくる」「誰かに見てもらう」ことが、いちばんの学びになります。

 


🖼 映空舎では、初心者の方にもわかりやすいサポートを心がけています!
「こんなバナーが作りたい」「配色で悩んでる」など、お気軽にご相談ください。
お問い合わせは https://lit.link/EiKUUSHA からどうぞ!

【Illustrator初心者向け】全画面表示を「Fキー」で簡単切り替え!

こんにちは!映空舎のなぎです!

Illustratorで作業していると、もっと大きな画面でデザインしたくなることはありませんか?
そんなときに役立つのが、Fキーで切り替えられる全画面表示モードです。

全画面モードとは?

Illustratorには、作業画面の表示モードが3種類あります。

  1. 通常モード(ツールバーとメニューあり)
  2. メニュー非表示モード
  3. 全画面モード(すべて非表示)

これらはキーボードの「F」キーを押すだけで切り替えることができます。

Fキーでの切り替え手順

  1. Illustratorを開く
  2. 「F」キーを押す → メニューが消えて画面が広くなります
  3. もう一度「F」キーを押す → ツールバーも消えて完全な全画面に
  4. さらに「F」キー → 通常モードに戻ります

簡単に切り替えられるので、ぜひ試してみてください。

どんなときに使うの?

  • 複雑なデザインを広い画面で確認したいとき
  • 画面共有やプレゼン中
  • 作業に集中したいとき

全画面表示を使うと、作業効率も集中力もグッと上がります。

元に戻す方法

切り替えを戻したいときは、もう一度「F」キーを押すだけでOKです。

まとめ

Illustrator初心者の方でも、Fキーを押すだけで簡単に全画面表示に切り替えられます。
ちょっとした操作ですが、作業効率アップに効果的なので、ぜひ覚えておきましょう!

【初心者向け】動画編集の基本操作をマスターしよう|カット・テロップ・BGMの入れ方を解説!

「動画編集を始めてみたいけど、何から手をつければいいの?」
昨日の記事ではそんな疑問に答える形で、編集ソフトの選び方や環境づくりを紹介しました。

今回はその続きとして、「実際にどうやって編集するのか?」という基本操作を一つずつ解説していきます。

動画編集というと難しそうなイメージがあるかもしれませんが、

まずはカット・テロップ・BGMの3つを覚えるだけで、驚くほど「見やすい動画」が作れるようになります。

1. カット編集から始めよう

動画編集の最も基本となるのが「カット編集」です。
例えば、話が脱線している部分や言い間違えたところ、無音の時間などを取り除くだけで、動画のテンポが良くなり視聴者も飽きずに見てくれます。

Premiere Proでは、Ctrl+KMacCmd+K)でカット、Deleteキーで削除が基本操作になります。
無料ソフトの「DaVinci Resolve」や「CapCut」でも同様のカット操作は可能です。

まずは「不要な部分を切る」だけでOKです。難しいことは考えず、

1本の動画を最後まで整えることを目標にしましょう。

2. テロップを入れて情報を整理しよう

テロップ(字幕)を入れると、視聴者にとって情報が整理されて伝わりやすくなります。特に、

  • キーワードの強調
  • 名前や商品名の表示
  • ネタ要素の補足

といった場面で非常に効果的です。

テキストは大きすぎず小さすぎず、中央より少し下に配置すると見やすくなります。
フォントは「ヒラギノ角ゴ」「Noto Sans JP」「源ノ角ゴシック」など、可読性の高いものを選ぶのがポイントです。

テンプレートを使えばおしゃれに仕上げることもできるので、Premiere Proの「エッセンシャルグラフィックス」も活用してみましょう。

3. BGMや効果音を入れて雰囲気アップ

映像に音が加わると、雰囲気がガラッと変わります。
例えば、落ち着いたBGMを入れるだけでプロっぽい動画になりますし、効果音(SE)を入れるとテンポが良くなります。

無料で使えるBGMサイトの例:

BGMはナレーションや話す声の邪魔にならないよう、音量を下げて配置するのがコツです(-25dB〜-15dB程度が目安)。

4. まずは1本、自分で作ってみよう

「カット」「テロップ」「BGM」の3つだけで、十分に「見せられる動画」になります。

まずは1〜2分程度の動画でOK。

  • 自分の1日のルーティン紹介
  • 好きな商品の紹介
  • 最近ハマってることを語るVlog

完成したら、YouTubeに非公開でアップして確認してみましょう。それだけでも大きな第一歩です。

5. 次回予告:さらにレベルアップした編集へ

今回は基本中の基本をお伝えしました。
次回は「映像の印象を変える色調補正」や「サムネイルの作り方」など、より魅力的な動画に仕上げるステップをご紹介する予定です。

動画編集は、「伝えたい想いを、伝わるカタチで届ける」ための手段。
一歩ずつ、自分のペースで覚えていきましょう!

【練習に最適】Illustratorで英字「B」をなぞってパスとアンカーポイントをマスターしよう!

パスとアンカーポイントを理解するには「なぞる」のが一番!

こんにちは!映空舎のなぎです!

Adobe Illustratorイラストレーター)を始めたばかりの人がつまずきやすいのが、「パス」や「アンカーポイント」の操作。
思い通りに曲線が描けなかったり、アンカーポイントの扱いに混乱したり…。そんな方におすすめの練習方法が、アルファベットの“B”をなぞるトレース練習です。

なぜ「B」なのか?
それは、直線・曲線・角・ハンドル操作など、基本のすべてが詰まった形だからです!

この記事でわかること

  • Illustratorで「B」をトレースする方法
  • パスとアンカーポイントの基礎を体感できる練習手順
  • 練習時に意識したいポイント
  • よくある失敗とその対処法
  • トレース練習を継続するためのコツ

なぜ「英字B」が練習に最適なのか?

アルファベットの大文字「B」は、一見シンプルな形ですが、次のような要素が含まれています。

特徴 説明
直線 背骨となる縦線(パスの基本)
曲線 上下の丸み(ベジェ曲線の練習に最適)
接点 直線と曲線が交わる箇所で、角とカーブの違いを体感できる
対称性 上下のバランスを意識することで整ったパスが描ける練習になる

【実践】Illustratorで英字「B」をトレースしよう

ステップ1:画像の準備

  1. Illustratorで新規ファイルを開く(A4サイズや1000px × 1000pxなど)
  2. 【文字ツール(T)】で「B」と入力し、大きめに配置
  3. フォントは太めでシンプルなものがおすすめ(例:Arial Bold、Helvetica Bold)
  4. 文字を右クリック →「アウトラインを作成」
  5. そのレイヤーをロック

※これで、Bの輪郭をなぞる「下絵」の準備が完了です。

ステップ2:ペンツールでトレース開始!

  1. 【ペンツール(P)】を選択
  2. 「背骨」となる左の縦線を、上から下にかけて2点打ちで直線を引く(Shiftを押すと垂直)
  3. 次に、上の丸部分(曲線)を描く

曲線を描くコツ:

  • アンカーポイントを打つ位置は、カーブの「始まり・終わり」
  • その地点で「クリック&ドラッグ」してハンドルを出す
  • 曲線が自然につながるように、ハンドルの長さと向きを調整
  1. 上部の丸が完成したら、下部の丸も同じように描く

ステップ3:閉じた形にする(任意)

「B」の内側も含め、輪郭全体をなぞるように描いた場合、最後に最初の点をクリックしてパスを閉じると「塗り」が適用できるようになります。

練習中に意識したいポイント

  • 点(アンカーポイント)は必要最小限
  • 曲線はハンドルのバランスで決まる
  • 直線と曲線の切り替えにはアンカーポイントツール(Shift + C)を活用

よくある失敗とその解決法

失敗例 原因 解決法
カーブがガタガタになる ハンドルを引きすぎている/短すぎる 短めにドラッグして調整しながら描く
角ができてしまう 曲線の途中で直線扱いになっている アンカーポイントが曲線になっているか確認
閉じたつもりが閉じていない 最初の点をきちんとクリックしていない ペン先に◯マークが出ているか確認する

Bの次は?練習におすすめのアルファベット

  • S:左右対称の連続カーブ(難易度やや高め)
  • D:直線+大きなカーブ
  • O:円のトレースで滑らかなベジェ曲線の練習に最適
  • R:Bと似ていて、さらに斜めの脚が加わる

おわりに|「B」が描ければパスの基礎が見えてくる

Illustratorのパス・アンカーポイント操作は、スポーツのような「手の慣れ」が必要です。
「なんとなく分かる」だけではうまく扱えないため、実際に手を動かす練習がとても大事です。

アルファベットの「B」は、直線・曲線・角のバランスを確認できる絶好の題材。
何度か描くうちに、自然とアンカーポイントの位置やハンドル操作の感覚が身につくはずです。

最初はうまくいかなくても大丈夫。少しずつ「点と線を使って形をつくる」Illustratorの考え方に慣れていきましょう!

【超入門④】Illustratorの基本「ベクター」「パス」「アンカーポイント」とは?やさしく解説!

Illustratorって「ベクター画像」っていうけど、ベクターってなに?

こんにちは!映空舎のなぎです!

Illustratorでは、ベクター形式の図形を描くために、以下の要素が重要です。

Adobe Illustratorを使うと、ベクター形式(ベクター画像)のデザインを作成できます。
ベクターとは、数学的な情報(点・線・角度)を使って描かれる画像形式のことです。

✅ たとえば…

  • 「この線は、点Aから点Bまでまっすぐ50pxの長さで描く」
  • 「この丸は、中心点Cから半径30pxで描く」

このように形を“数式”で定義しているのがベクターの正体です。

ビットマップ画像(ラスター画像)との違い

項目 ベクター画像(Illustrator ビットマップ画像(Photoshopなど)
表現方法 点と線、角度など ピクセルの集まり(点の集合)
拡大縮小 どれだけ拡大しても劣化しない 拡大するとぼやける
編集方法 形を変えたり色を後から自由に変更可能 写真のように細かく塗り重ねる編集
向いているもの ロゴ・イラスト・図形 写真・写実的な絵・複雑な色合い

Illustratorは「ベクター」で形を作る

Illustratorでは、ベクター形式の図形を描くために、以下の要素が重要です。

  • パス:線や輪郭のこと
  • アンカーポイント:パスを構成する“点”
  • ハンドル:曲線の調整をするための“取っ手”

パスとは?──図形の「線」の正体

パスとは、Illustratorで描いた線や図形の輪郭のことです。
見た目は線ですが、これは「始点から終点までをつなぐ情報」として記録されています。

特徴:

  • 太さ、色、破線なども自由に設定可能
  • 複数のパスを組み合わせて図形やロゴが作れる
  • 閉じたパスは塗りつぶしができる(例:丸、四角)

アンカーポイントとは?──パスの「支点」

アンカーポイントは、パスの端や折れ曲がる場所にある点です。
この点をつないで、形を作っていくのがIllustratorの基本です。

たとえば:

  • 四角形 → 4つの角がアンカーポイント
  • 星の形 → 各角とへこみの部分にアンカーポイント

直線と曲線の違いは「アンカーポイントの打ち方」で決まる

  • 直線:アンカーポイントを「クリック」して打つ
  • 曲線(ベジェ曲線:アンカーポイントを「クリックしながらドラッグ」してハンドルを出す

このハンドルによって、曲がり具合・方向を調整できるようになります。

ハンドルの役割|なめらかな曲線のカギ

ハンドルは、アンカーポイントから伸びる方向線です。
この線の「向き」「長さ」によって、カーブの形が決まります。

  • ハンドルが長い → ゆるやかなカーブ
  • ハンドルの向きが変わる → 曲線のカーブ方向が変わる

よく使うツールのまとめ

ツール名 機能 ショートカット
選択ツール オブジェクト全体を移動・選択 V
ダイレクト選択ツール アンカーポイント・ハンドルの個別調整 A
アンカーポイントツール 曲線と直線の切り替え・ハンドル編集 Shift + C

よくある質問・つまずきポイント

疑問 解説・対処法
パスが繋がらない 始点と終点が結ばれていない可能性。最初の点をクリックして閉じる。
曲線が折れてしまう ハンドルが出ていない/片方だけ操作している可能性。Shift+Cで切り替え。
曲線が不自然 ハンドルの長さ・角度を揃えると自然なカーブに。ダイレクト選択で調整。

パスとアンカーポイントを使いこなすとできること

  • ロゴ制作で複雑な図形も自在に設計
  • イラストの輪郭を美しく仕上げられる
  • トレースで写真やスケッチをベクター化できる
  • 修正・拡大・配色変更もスムーズ

おわりに|点と線を「意識する」だけでIllustratorが楽しくなる

Illustratorでは、絵を“描く”というより、「線をつなぎ、点でコントロールして形を作る」という考え方が大切です。

このベクター的な感覚に慣れると、ロゴや図解だけでなく、さまざまなデザインの幅が一気に広がります。

ぜひ、今日から「どんな線にもアンカーポイントがある」「その線はパスでできている」と意識しながらIllustratorを触ってみてください。
最初は難しくても、少しずつ「あ、なるほど」と思える瞬間が増えてくるはずです!

【超入門③】Illustratorの使い方|ペンツールと画像トレースで自由に描こう!

Illustratorで「手描き」のような表現をしたい!

こんにちは!映空舎のなぎです!

Illustratorで図形やパスの操作に慣れてきたら、次にチャレンジしたいのが「自由な線」を描く方法です。

ペンツールを使えば、曲線・直線を自在に描けるようになり、さらに画像を下敷きにしてなぞる「トレース」もできるようになります。

この記事では、Illustrator初心者でもつまずきやすいペンツールの基本操作と、簡単なトレースのやり方を丁寧に解説します。

この記事でわかること

  • ペンツールで直線・曲線を描く方法
  • アンカーポイントとハンドルの仕組み
  • トレースに使える画像の準備
  • 下絵の配置とロック
  • トレースの基本手順
  • 練習に最適なおすすめ題材

1. ペンツールの基本|直線を描いてみよう

ステップ1:ペンツールを選択
左側のツールバーで「ペンツール」をクリック、または「P」キーを押します。

ペンツール

ステップ2:クリックして直線を描く
1点目をクリック → 2点目もクリック → 直線が引かれます。

このときに「Shift」キーを押しながらカーソルを動かすと

2. 曲線を描く|ハンドルでカーブを作る

ステップ1:クリック&ドラッグ
2点目をクリックする時にドラッグしてみましょう。ハンドルが出現します。

ステップ2:カーブの形を調整
次の点もドラッグしながら打つと、なめらかなカーブが完成します。

3. アンカーポイントの調整で自由なカタチに

描いた線が思いどおりにならなかった場合も安心です。

  • 白い矢印の「ダイレクト選択ツール(A)」でアンカーポイントを選択し、移動できます。
  • 「アンカーポイントツール(Shift+C)」で直線と曲線の切り替えも可能です。

4. 画像を下敷きにしてトレースしよう

ステップ1:画像を読み込む
【ファイル → 配置】でトレースしたい画像(JPEG/PNG)を挿入します。

ステップ2:テンプレートに設定
画像を選択し、「不透明度」で透明度を下げ、「Ctrl」+「2」を押してロックします。

5. ペンツールでトレース開始!

画像の輪郭に沿って、ペンツールでクリックやドラッグしてなぞっていきます。

完成後、画像を非表示にすれば、ベクター化されたイラストの完成です!

6. よくあるつまずきポイントと対処法

トラブル例 解決法
曲線がガタガタになる ハンドルを引きすぎず短く調整する
線が閉じない 最初の点を再度クリックして閉じる
元画像に干渉してしまう 画像をロックするかレイヤーを分ける

おわりに|「描けるようになる」とデザインが一気に楽しくなる

ペンツールはIllustratorの中でも習得に時間がかかると言われるツールですが、マスターすれば自由自在にオリジナルの形を作ることができます。

トレースはその実践練習として最適な方法です。まずはお気に入りのイラストやロゴをなぞるところから、楽しくスタートしてみてください!

【超入門②】Illustratorの使い方|オブジェクト編集・パス操作をマスターしよう

前回のおさらい

こんにちは、映空舎のなぎです! 前回は、Adobe Illustratorの基本操作として「図形の描き方」「色の変更」「文字の入力」などを紹介しました。今回はその続きとして、オブジェクトをまとめて扱う方法や、図形同士を合成・切り抜く「パスファインダー」、曲線の操作など、より一歩進んだ内容に触れていきます。

「図形は描けるようになったけど、そこからどうデザインにしていけばいいかわからない…」という方にぴったりの内容です。

この記事でわかること

  • 複数のオブジェクトをまとめる「グループ化」
  • 図形の位置をきれいに整える「整列」
  • 形の合成・切り抜きができる「パスファインダー
  • 曲線の編集に欠かせない「アンカーポイント操作」
  • よくあるエラーの解決法

1. 複数オブジェクトをまとめる|グループ化の基本

Illustratorでは、複数の図形をひとつずつ動かすのは手間です。そんなとき便利なのが「グループ化」です。

グループ化のやり方

  1. Shiftキーを押しながら複数の図形を選択
  2. 右クリック →「グループ」 または Ctrl+G(Macは⌘+G)

グループ解除したいとき
右クリック →「グループ解除」 または Shift+Ctrl+G(Macは⌘+Shift+G)

2. レイアウトを整える|整列と分布の使い方

複数の図形や文字を使っていると、見た目のバランスが気になりますよね。そんな時に使えるのが「整列」機能です。

基本的な操作

  1. 複数のオブジェクトを選択
  2. 上部のコントロールバー または「ウィンドウ」→「整列」を開く
  3. 「左揃え」「中央揃え」「上下中央」などをクリック

等間隔に並べるには?
「水平方向に等間隔に分布」「垂直方向に等間隔に分布」を使えば、自動でバランス良く配置されます。

3. 図形を合成・切り抜く|パスファインダーの活用

Illustratorの強みの一つが、図形同士を組み合わせたりくり抜いたりできる「パスファインダー」です。

よく使うパスファインダー機能

  • 合体:選択した図形を一つの形にまとめる
  • 前面オブジェクトで型抜き:上にある図形の形で下をくり抜く
  • 交差:重なった部分だけを残す
  • 中マド:重なった部分を透明にする

操作方法

  1. 図形を重ねて配置
  2. 両方選択
  3. 「ウィンドウ」→「パスファインダー」を開いて、好きなボタンをクリック

4. 曲線を自在に操る|アンカーポイント編集

Illustratorでは、図形は「パス(線)」と「アンカーポイント(点)」でできています。この点を動かせば、自由な形に変更できます。

ダイレクト選択ツールを使う
白い矢印の「ダイレクト選択ツール(A)」でアンカーポイントをクリックして移動できます。

ハンドルで曲線を調整
曲線になっているアンカーポイントには「ハンドル」が出現します。これを動かすことで滑らかなカーブを描けます。

5. よくあるつまずきポイント

よくある疑問 解決法
パスが結合できない グループを解除してから選択し直す
パスファインダーが使えない 図形がロックされていないか、レイヤーが一致しているか確認
曲線が思い通りに動かない ハンドル操作を両方向から調整してみましょう

おわりに|複雑な形も、基本操作の組み合わせで作れる

今回紹介した「整列」「グループ化」「パスファインダー」「アンカーポイント編集」は、Illustratorの基本中の基本でありながら、プロも日常的に使っている超重要スキルです。

図形を組み合わせて新しい形を作ることで、オリジナリティのあるロゴやアイコンを作れるようになります。ぜひ実際に触って、覚えた操作を試してみてください。

次回は「ペンツールでの自由な線の描き方」や「画像をなぞる“トレース”の基本」など、より“手描き”に近い自由度の高いテクニックをご紹介します!