CursorやWindsurf、GoogleStitchなどのAIコーディングエージェントを活用した開発は最初は楽しいのですが、次第に苦行になっていきます。その原因のひとつに「AIが出力するデザインが思っていたものと違う」があります。

こうした問題を解決するためのベストプラクティスとして、Googleが公式に「DESIGN.md」の書き方ガイドライン（Google Stitch DESIGN.md）を公開しました。

本記事では、そうした「AI デザインがバラバラなUIになる問題」を抑え、プロジェクト全体のデザインを統一（一貫性）させるためのGoogle公式DESIGN.mdの書き方と、実際に使えるテンプレートを紹介します。

Google公式が提唱した「DESIGN.md」とは？

AIにUIの構築を依頼すると、「修正を頼むたびにボタンの形が変わる」「ページごとに色のトーンがバラバラになる」といった、デザインの一貫性が保てない問題に直面します。

この「AIがバラバラなUIを作る問題」に対し、Google LabsのStitchチームが2026年3月に公式ブログで提示した解決策が、プロジェクトのルートディレクトリ（最上層のフォルダ）に配置する「DESIGN.md」ファイルです。

参照：https://stitch.withgoogle.com/docs/design-md/overview

これは、AIが理解するために最適化されたデザインシステム用のドキュメントです。Markdown（見出しやリストによる構造化テキスト）を活用することで、人間が読んで理解しやすいだけでなく、AIに読み込ませた際にも正確にルールを反映できる設計になっているとのこと。

なんだそんなことか。と思うかもしれないが、Googleの開発チームが提示しているということに意味がある。つまり、AIエージェントの構造を理解している人たちが、伝えるべき情報はこれです。と言っているようなもので、個人で適当に作るより遥かに理にかなっているはずだ。

公式ドキュメントによると、「DESIGN.md」は以下のような要素を定義すると良いとの事。

• プロジェクトのビジュアルテーマと雰囲気
• 色（カラーパレットとHexコード）
• タイポグラフィ（文字のデザインとウェイト）
• 余白（Margin/Padding）の具体的なルール
• コンポーネント（ボタン、カード等）のスタイル

AIエージェントはコードを記述する際、このDESIGN.mdを読み取ることで、プロジェクト固有の「デザインのコンテキスト（文脈）」を把握します。これにより、AIがブランドのトーン＆マナーを外さず、常に一貫したUIを出力できるようになります。

元々はStitch向けに発表されたフォーマットですが、あらゆるAIコーディング環境で有効な手法ではないかと思うので気になる方はチェックしてみてください。

私のプロジェクトでの活用例

私が個人で開発しているではこの「DESIGN.md」を活用して、フルAIによるコーディングをしています。

ファイル内に「余白はTailwindの mb-8 を基準とする」「アイコンはHeroiconsに統一する」といった具体的なルールを定義しておくことで、AIの出力のブレや、不要なライブラリの混入を未然に防ぐことができています。

バイブコーディングで開発スピードを上げつつ、AIデザインの一貫性を保つコツは、こうした「余白」「色」「コンポーネント」をDESIGN.mdで先に固定しておくことでした。

DESIGN.md 汎用テンプレートの配布

DESIGN.mdの公式ドキュメントは英語なので、分かりやすいよう日本語のフォーマットに整理してみました。ノンプログラマーでもすぐに自分のプロジェクトで使えるテンプレートのセットとして配布します。

もしAIエージェントやバイブコーディングをしているが、デザイン品質を高めたい、これからAIによる個人開発をしてみたいという方は参考にしてみて下さい。

テンプレートの内訳は以下です。

DESIGN.md

私が使用しているファイル本体です。どう書けばいいかの参考にしてみてください。書き方はプロジェクトごとに最適なものが変わるので、参考に活用してください。

DESIGN-temp.md

DESIGN.md本体だけだと、どのように自分のプロジェクトに編集したらいいのか分からないと思うので、カスタマイズ用ファイルを同梱します。[ ] の部分を自分のプロジェクトに合わせて書き換えてください。

readme.txt

DESIGN.mdの役割や、Tailwind CSSを使っていない場合のカスタマイズ方法などを解説した簡単なマニュアルです。デザインやTailwind CSSもし使い方が分からない方は読んでください。

とくに、これからAIにUIをつくらせたい人や、すでにAIデザインがバラバラなUIになってしまっているプロジェクトでは、「まずDESIGN.mdを整えてからAIに任せる」というフローに変えるだけで、一貫性のあるUIに近づきやすくなります。

これらのファイルをプロジェクト内に配置し、AIエージェントに「DESIGN.mdのルールに従って」と一度指示するだけで、出力精度がグッと上がるはずです。デザイン修正の手間を省き、本来の機能開発に集中したい方はぜひチェックしてみてください。

記事を購入で「DESIGN.md」をDL

こちらの記事を購入していただけると、以下の内容がDL可能です。

• DESIGN.md
• DESIGN-temp.md
• readme.txt

こんにちは！広告会社でデザイナーをしている、『かじゅう』と申します。

• 「AIで画像を作るのって、なんであんなに時間がかかるんだろう…」
• 「プロンプト（呪文）が難しすぎて、全然イメージ通りにならない！」

Stable DiffusionやMidjourneyに挑戦してみたけど、結局、途中で「もうムリ！」って挫折しちゃった…なんて経験、ありませんか？

その気持ち、すっごく分かります！僕もそうでした。 でも大丈夫！今回紹介する「Drop AI」は、 そんな「時間と手間」の問題を解決するために生まれた、めっちゃ簡単なAI画像生成ツールなんです。

Drop AIとは？プロンプト不要で高品質な画像が作れるAI画像生成サービス

Drop AIは、2025年2月にサービスを開始した、新しいWebベースのAI画像生成サービスです 。運営は日本の株式会社GO TO MARKETで、安心感があります 。

高性能な「Stable Diffusion XL（SDXL）」を搭載 。しかし、その技術的なハードルを完全に取り払い、誰もが直感的に使えることを目指しています。

Drop AIの3つの特徴

1. 設定不要でSDXLが使える：高性能PCや専門知識がなくても、ブラウザ上でStable diffusionレベルの画像生成が可能です
2. 無料で使える：Drop AIはFreeプランがあり無料で使えます。ただし1日の制限があります。
3. プロンプトを考えなくていい：「実写風」「イラスト風」など、目的に合わせたモデルが用意されており、「プロンプト（呪文）」を書かなくても良い

なぜ1分で作れる？Drop AIが「高画質」「速い」4つの理由

実際に使ってみて「これはイイ！」って感じたメリットを紹介します。

メリット1：とにかく時間がかからない！

画像生成AIのネックは思い通りの画像を作るのに「時間」がかかることですよね。特に、PCにソフトをインストールする「環境構築」は、最初の大きな壁です。

Drop AIは、その時間は必要ありません。 サイトにアクセスしてログインするだけなので、難しいPCの設定が必要ありませんでした。

メリット2：難しいプロンプトを考える時間が不要に！

AI画像作りで一番時間がかかるのが、「プロンプト」作りですよね。 Drop AIなら、キーワードを選ぶだけでOKで「プロンプト候補探索機能」とか、 上手い人の真似ができる「コピー機能」があるから、悩む時間を減らしてくれます。

メリット3：「ハズレ」を引いてやり直す時間が減る！

Drop AIには、超高画質な画像を作れる「Stable Diffusion XL（SDXL）」が使われています。 それに加えて、作りたい絵の雰囲気に合わせた「厳選モデル」が用意されてるから、 モデル選びで悩む必要もなしです。

だから、誰が作ってもクオリティが高い画像が安定して出てくれます。プロンプト職人だけがイイ画像を作れると言うモヤモヤをなくしてくれます。

メリット4：安心して創作に集中できる！

画像生成AIって色々試してると、たまに「うわっ」ってなるような変な画像ができちゃうこともありますよね。Drop AIは、そういう不適切な画像を自動でブロックしてくれるんです。

しかも、その分はクレジット（ポイントみたいなもの）が消費されないっていう神仕様！ だから、余計な心配しないで、安心してどんどん創作に集中できます。

【超かんたん】Drop AIで最初の1枚を作ってみよう！

アカウント登録から画像を作るところまで、簡単だから一緒にやってみよう！

Step 1：アカウント登録

公式サイトにアクセスし、Googleアカウントでログインします。

アクセス後は、右上のログインボタン ＞ アカウントをお持ちでない方はこちら > 利用規約に同意をクリック > Googleで登録 > Googleアカウントを選択すれば登録完了です。

Step 2：作りたい画像のテイストを選ぶ

ログインするとTopページが表示されます。画面左には「モデルのテイスト」や「インスピレーション」があり、ここからクリックで選択するだけで自動でプロンプトが作成されるイメージです。右側にはプロンプトが表示されており、手動で書くことも可能です。

まずは、「モデルのテイストを選ぶ」という項目から、作りたい画像の雰囲気に合わせて好きなモデルを選びましょう。「デフォルトSD XL」や「アニメ blue_pencil」、「CyberRealisticイラスト」イラスト系実写系など幅広くあります。

Step 3：プロンプト（指示文）を作る

ここがDrop AIの面白いところ！プロンプトの作り方は大きく2つあります。

方法A：インスピレーションから作る

「イメージが湧かない…」という時は、画面下にある「インスピレーションを得る」のコーナーを見てみましょう。他の人が作った素敵な画像がたくさん並んでいます。

1. 気になる画像をクリック
2. ポップアップでその画像に使われたプロンプトが表示されます
3. 「このプロンプトを利用する」ボタンを押せば、自分のプロンプト欄に自動でコピーされます。

インスピレーションを選択すると、プロンプトが作成されているので「このプロンプトを利用する」をクリックで簡単にプロンプトを作成可能です。

方法B：キーワードを選んで作る

「作りたいイメージは決まってる！」という時は、キーワードをポチポチ選んでいくだけ。

1. 「プロンプトを選ぶ」の項目までスクロール。
2. 「クオリティ」「シーン」「テイスト」「主な登場者」などのカテゴリから、イメージに合うキーワードをタップしていきます。（例：「ベストクオリティ」「にぎやかな街並み」「アニメイラスト」「女の子1人」など）
3. 選んだキーワードが、プロンプト欄に自動で追加されていきます。

Step 4：画像のサイズを決めて、生成！

画像の比率（1:1、2:3など）を選んだら、あとは「画像生成する」ボタンをクリックするだけ！

Step 5：ダウンロード

数十秒待つと画像が完成！作った画像はずっと履歴に残るので、後から見返すこともできるようです。

今回Freeプランでは以下のような画像を生成できました。キーワードを選択するだけ、画像生成時間も僅かなので1枚の画像生成に1分もかからない感じでした。

Drop AIの料金プランは？無料で商用利用もOK？

Drop AIは無料で始められますが、生成したい画像が決まっている場合は、有料プランが必須です。料金は月額または年払いです。

Drop AI 料金プラン比較表

プランによって、生成可能な画像枚数が異なりますが、画像の精度等に影響はないみたいです。最新の料金は公式サイトでチェックしてね！

【重要】無料プランでの商用利用について

公式サイトのQ&Aによると、Drop AIは無料プランで生成した画像でも、商用利用が可能とのことです。これは他の多くのサービスと比較しても、非常に大きなメリットと言えます。

ただし、もちろん無条件ではありません。「人に危害を加える内容、誤った情報、公序良俗に反する内容、法律に違反する内容でない限り」という条件が付きます。これは当然のルールですね。

【お知らせ】有料プランの全機能を「無料」で試せる！

Drop AIは有料プラン（Lite/Standard）の全機能を10日間無料で試せるトライアルを用意しています。

この無料トライアルでは、有料プランと全く同じ機能を体験できます。具体的には、以下のことが可能になります。

• 生成回数の制限を気にせず使える：無料プランの回数制限が解除され、圧倒的に多くの画像を生成できます。
• 画像を非公開にできる：生成した画像が他のユーザーに公開される心配がなく、クライアントワークでも安心です。
• プロ向けの高度な機能が使える：一度に複数枚の画像を生成するなど、作業効率を上げる機能もすべて試せます。

トライアルで試す場合は、公式サイトの料金ページへ行き、試したいプランの「このプランを選ぶ」ボタンから、簡単に10日間の無料トライアルを始めることができます。期間中に解約すれば料金は一切かからないので、有料プランの全機能をリスクゼロでじっくり試せるチャンスです。

【比較】Drop AI vs 競合ツール、どれがあなたに合ってる？

自分にはどのツールが合ってるんだろう？って思いますよね。 サクッと比較してみたから、自分にピッタリのツールを見つけてみてください！

AI画像生成ツール 比較早見表

vs Stable Diffusion (ローカル) ：
「とにかく手軽さ重視！」ならDrop AI。 「PCに強く、とことんこだわりたい！」ならStable Diffusion。

vs Midjourney ：
「分かりやすくて、安定したクオリティが欲しい！」ならDrop AI。 「アート作品みたいなのを作りたい！」ならMidjourney。

vs Canva ：
「画像そのもののクオリティを上げたい！」ならDrop AI。 「デザイン作業のついでにサクッと作りたい」ならCanva。

結論：Drop AIがおすすめな人、そうじゃない人

ここまでDrop AIの魅力や使い方を解説してきましたが、一番大事なのは「で、結局どうなの？」ってことですよね。

もしあなたが、デザイナーやクリエイター、またはnoteなどで発信する人なら…
Drop AIは「ストックフォトを早く生成できるツール」としての利用がいいでしょう。ブログや記事のアイキャッチ、クライアントへの提案資料に使うイメージ画像を、素材サイトで探し回るより早いかもしれません。有料プランの料金は、この「探す時間」と「オリジナリティ」を買うための投資と考えれば、十分に元が取れるはずです。

ただし、 細かい部分の調整や、独自の作風を100%反映させることには限界があります。あくまで「アイデア出し」や「作業の初速を上げる」と捉え、最終的な仕上げは自分の手で行う、という付き合い方がベストでしょう。商用利用権がクリアな点は、仕事で使う上で絶対的な安心材料になります。

もしあなたが、AIに興味がある、趣味で使ってみたいと思っているなら…
Drop AIは「良い入門ツール」です。難しい設定や専門知識で挫折する心配がないから、「AIってすごい！楽しい！」という純粋な感動をすぐに味わえます。無料プランでもその面白さは十分に体験できるので、まずは気軽に触ってみるのが一番です。

ただし、「もっと細かい設定をいじりたい」「特定のキャラクターを学習させたい」といった欲求が出てくるかもしれません。その時が来たら、ローカル環境のStable Diffusionなど、次のステップに進むと良いでしょう。Drop AIは、その入り口として選択肢の一つです。

Drop AIは、これまで一部の専門家のものだった「高品質なAI画像生成」を、初心者でも簡単に生成できるようになります。

ぜひ一度、Drop AIのすごさを体験してみてくださいね！

『文字に勢いがほしい！』『インパクトがある文字を作りたい！』

でもどうしたらいいの？

そんな時に役立つ文字に勢いが出せるデザインの作り方を紹介します！

こんにちは！広告会社でデザイナーをしている『かじゅう』です！

勢いがある文字は、デザインやテキストを目立たせたり、文字に注目させることが出来るメリットがあります

『スピードを感じる』『お得な感じがする』など様々なデザインに生かすことができるので知っていると大きな武器になります。

太いウェイトの文字を使う

太いウェイトのテキストはインパクトがあり、強調して目立ちます。

ただし、やみくもに太いフォントを選ぶのはNGです。また、ボールド（B）機能で太くするのはオススメしません。ウェイト（太い書体）があるフォントを選ぶようにしましょう。

フォントサイズに注意して文字がつぶれない様にウェイトを選ぶのがコツです。

▲上の画像では、文字のウェイトが太いために潰れてしまっていて読みづらくなっています。

右上がり文字

簡単にできるのに効果が高い右上がり文字。

右上がりの文字は、デザインに動きが出て単調さを抑えることが出来ます。『お得感』を表現しつつ、テキストを目立たせることが出来るのでオススメです。

▼Photoshopでは自由な角度で簡単に、『右上がりの文字』を作れます。作成方法は以下の記事で紹介しています。

【早く知りたかった】バナーデザイン初心者必見！今すぐ使えるPhotoshopの簡単テクニックでデザイン力UP！

「もっと早く知りたかった」デザイン１年目の初心者のときに知っておきたいデザインのコツやテクニックを紹介します。

design.kajyublog.com

2024.06.22

斜体文字にする

スピード感があり、動きのあるデザインと相性がいい斜体文字。

斜体はレイアウトがしやすいのが特徴です。

立体的なシャドウ

ドロップシャドウを使って文字が立体的に見えるようにすると勢いのある文字になります。

コツは「影である」ことを意識することです。

影は通常暗く落ちるものなので、この画像では文字色を明るくしてシャドウを濃い色にしています。

アーチ型にする

イベントやキャンペーンの雰囲気が出るアーチ型文字。

『勢いは欲しいけど、力強くはしたくない』という時はアーチ型の文字を試してみてください。

アーチ文字に奥行きがあるようなシャドウを加えると「どどーん！」といった感じが出せます。

アーチの角度は急にしすぎないのがコツです。

【無料あり】テキストを目立たせるにはフォント選びも重要

インパクトのあるテキストデザインの手法を活用するためには、適切なフォント選択が重要です。

adobe Creative Cloudプランに含まれる『Adobe Font(アドビフォント)』は、登録だけで20,000以上の高品質なフォントを使用することができます。無料プランもあり、1,500程のフォントが使用できます。

「太いウェイトを使う」で紹介した、ウェイト幅を含むフォントもたくさんあるので、オススメです。

【無料でも使える！】Adobe Fontsの登録～使い方とおすすめのフォントを紹介

Adobe Fonts（アドビフォント）の登録方法や使い方、おすすめのフォントについて詳しく紹介します。無料でも使える高品質なフォントの選び方や活用法をご紹介します。デザイン初心者やノンデザイナーの方にもAdobe Fontsはおすすめです

design.kajyublog.com

2024.02.01

勢いがある文字表現のパターン まとめ

『勢い』を感じる文字表現のパターンを5種類紹介しました。

• 太いウェイトの文字にする
• 右上がりの文字にする
• 斜体文字にする
• 立体的なシャドウにする
• アーチ状にする

どれも基本のテクニックで、良く活用するので覚えて損はありません。

こちらの記事では、「派手で目立つバナーデザインの作り方」を紹介しています

視線釘付け！？派手で目立つバナーデザインの作り方

この記事では『派手なバナーデザイン』を作る際に筆者が気を付けているポイントを『写真レイアウト・文字・色・あしらい』の４項目で紹介します。

design.kajyublog.com

2023.11.25

アレンジ・オリジナル・組み方で差がつく！ タイトル文字のデザイン

最後に勢いがあって目立つ文字をデザインする上で参考になる書籍を紹介します。

タイトルデザインは目立つ文字を作るの時の参考になります。

この本は、そんなタイトル文字がなんと300点以上掲載されています。

見ているだけで勉強になるので一冊持っておきたいですね。

こんにちは！広告会社でデザイナーをしている、『かじゅう』と申します。

「LP(ランディング ページ)の料金表をもっと魅力的に見せたい…」
「Webサイトのサービスに適した料金表のデザインを作りたい」

そんな風に思ったことはありませんか？

私は中小企業のデザイナーとして、限られたリソースの中でデザイン業務を行っています。マーケティング業務も兼任し、日々、WebサイトやクライアントのLP制作やその料金表デザインに頭を悩ませています。

デザイン業務を兼任しているマーケターは、常にこういった課題を抱えているのではないでしょうか？

そこでこの記事では、数多くのLP・Webサービスの料金表を分類し、よくあるランディングページのデザインパターンやサービスの特徴にあったレイアウトなどを調べたので共有します。

LPの料金表のデザインパターン一覧

今回の調査では様々なLPデザインを参考にさせていただきました。その結果から、料金表のデザインパターンを分類しまとめました。

▼参考にしたデザインの基準

• 見やすい、分かりやすい料金表か？
• 様々なサービスに応用できそうか？

それでは詳しく紹介していきます。

1.プランカード型

今回の調査で最も多くみられたのが『カード形式の料金表』です。視覚的に訴求力があり、プランの特徴を強調しやすいメリットがあります。プラン数が少ない場合や、シンプルな料金体系の場合に適しています。

プランカード型の料金表デザインは、デザイン性に富んでいてサービスに応じて柔軟に対応することができると思います。

プランカード型の料金表の中にも様々なデザインがあったので紹介します。

1-1.プランカード【縦型】

最も一般的な形式で、複数のプランを縦に並べて表示します。今回調査した中でも圧倒的に多いパターンでした。情報量が多くても整理しやすく、プラン間の比較が分かりやすいので特殊な料金体系でなければこのパターンでデザインするのが良いと思います。

1-2.プランカード【横型】

プラン名や詳細を横に並べるレイアウトです。

少ないプラン数の時に効果的で、縦型と比べ情報がコンパクトにまとまると思います。また、時系列やアクションの流れに沿って料金を表示するのに適していると感じます。そのため、Webサイト開設サービスなどのように、

1. 初期費用： Webサイト開設費用は0円
2. 利用料： 月額固定費
3. 従量課金： Webサイト経由で商品が購入された場合の手数料

複数の段階や条件によって料金が発生するサービスの料金体系を表現するのに効果的です。

1-3.プランカード型＋機能比較表

プランカード型の料金プランは、サービスをシンプルにまとめることができますが、プラン毎に機能やサービスなどが異なる場合は情報が伝わりづらくなります。

そこで、プランカード型の料金に加えて『機能比較表』を組み合わせているLPも多くみられました。こちらもよく見るデザインだと思います。

2.タブ切り替え型

続いて紹介するのは、タブを切り替えることで、異なるプランや料金体系を表示する『タブ切り替え型』の料金表です。

この形式は、スペースを節約できるため、多くのプランを掲載したい場合や、学生向けプラン、月額払い・年払い法人向けなどの特定のユーザー毎に料金体系が異なる場合に適しています。

2-1.プランカード＋タブ切り替え型

タブ切り替え型の料金表デザインは、プランカードと組み合わせて使います。タブを使うと複数の料金をシンプルに構成することができ、プランの特徴を絞って訴求できると思います。

一方、タブの切り替えのUXを考慮したデザインにする必要があり、ユーザーがプランを比較したい場合は向いていません。

2-2.プランカード＋タブ切り替え＋比較表

タブ切り替え型の料金表に比較表を組み合わせたデザインも存在します。この形式では、料金と機能の比較を一度に見ることができるため、ユーザーにとって非常に便利です。

しかし、情報量が増えるため、色による視覚効果や強調などを活用するなど、デザイン性を高める工夫が重要となります。

料金と機能の比較を一度に見れるデザインですが、情報量が増えるので色による視覚効果や強調などを活用するなどデザイン性が必要になります。

3.料金積み上げ型

続いて紹介するのは、初期費用や基本料金に加えて、オプション機能や利用量に応じて料金が加算される料金積み上げ型の料金形式です。

一般的な構成としては、『初期費用＋基本利用料＋従量課金』または『初期費用＋基本利用料＋オプション』といった形があります。

4.表型

表型のデザインの料金表は、表形式で料金プランを提示するデザインです。一般的には、行と列で構成され、横軸を『料金』『サービス内容』『納期』など独自にカスタマイズできるので様々なサービスに適用できます。

シンプルで視覚的に理解しやすく、比較的簡単にデザインできる特徴があります。

【その他】ソリューション型

最後にその他として、ソリューション型の料金プランを紹介します。

『ソリューション』は、もともと英語の “solution” で、『解決策』や『解答』を意味する言葉です。

ビジネスシーンでは、顧客や企業が抱える課題や問題を解決するための方法や手段、サービス全般を指して『ソリューション』と呼ぶことが多いです。

このようなサービスを提供する場合は、あえて具体的な料金を明示しない料金デザインを用いられます。顧客のニーズに合わせて柔軟な対応が可能な料金表のタイプです。

サービス内容や提供価値、顧客が得られる成果・解決策を具体的に説明するようなデザインになっているのが特徴で、これまで紹介したプランカード型や表形式などをうまく組み合わせてデザインします。

まとめ

LPでよく使われる料金表のデザインパターンと、それぞれの特性、そしてサービスへの適用例などを紹介しました。

料金表のデザインは、ただ料金を提示するだけでなく、ユーザーの理解を促進し、サービスの価値を伝え、成約へと導く重要な役割を果たします。

サービスの特性やターゲット層を考慮し、最適なデザインパターンを選択することで、より効果的な料金表を作成し、ビジネスの成功へと繋げると思います。

こんにちは！広告会社でデザイナーをしている、『かじゅう』と申します。

• バナー広告のデザイン、もっと効率良く、サクサク進めたい！
• Photoshopで作業効率を上げるショートカット設定を知りたい！

Photoshopには作業時間をグッと短縮できる、便利なショートカットや小技が豊富に備わっています。しかし、デフォルトのショートカットだけでは、バナー制作の時短には最適化されていません。

バナーデザインを早く作るコツは、よく使う機能やツールに合わせたショートカットをカスタム設定することです。

この記事では、バナーデザインを効率化するための『おすすめショートカット＆アクション設定』をご紹介します。設定ファイルの無料ダウンロードもできるので、これからPhotoshopでデザインを始める方も、この記事を参考にまずは設定をしてみてください。

バナー制作の基本と手順！初心者が実践したい5つステップ

バナー制作をするときの流れを5つのステップで紹介。バナー制作をしたいけど、何から始めたらいいの？手順を教えて！みんなはどうやって作ってるの？という初心者の方は是非ご覧ください。

design.kajyublog.com

2024.06.28

絶対設定すべき！おすすめショートカット&アクション

Photoshopのデフォルト設定にはないが、デザイン作業効率化のための『おすすめショートカット設定』や『アクション設定』を紹介します。

逆に使用頻度の低いショートカットは削除し、よく使うショートカットは覚えやすいキーに変更することで、作業効率を向上させることができます。

【ショートカット】書き出し設定

Photoshopの書き出し機能は便利ですが、デフォルト設定では複数のステップを踏む必要があり、少し手間がかかります。書き出し作業を1ボタンで完了できるように設定することで、作業効率が格段に向上します。

私は、ファンクションキーの『F2』に設定しています。
デフォルトでは、『ファイル > 書き出し > 任意の書き出し設定』の複数ステップが必要なのに対して今回の設定は１ステップで完了します。

【アクション】中央揃え

オブジェクトやテキストを『中央揃え』にするショートカット（アクション）を設定しておくと便利です。

Photoshopのデフォルト設定では、中央揃え（水平方向中央揃え、垂直方向中央揃え）には特定のショートカットキーは割り当てられていません。

デフォルトで中央揃えを実行するには、以下の2つの方法があります。

1. メニューバーから選択:
   • 対象のレイヤーを選択した状態で、メニューバーの「レイヤー」→「整列」→「水平方向中央に整列」または「垂直方向中央に整列」を選択する。
2. オプションバーのボタンをクリック:
   • 対象のレイヤーを選択した状態で、オプションバーの「整列」セクションにある中央揃えのボタンをクリックする。

ただし、これらの方法は、毎回メニューやオプションバーをクリックする必要があるため、頻繁に中央揃えを行う場合は非効率です。

私は、これらの操作を『F3』ボタンで実行されるように、アクション登録をしています。

▼中央揃えをアクション登録すると作業効率がスピードが上がります。

【ショートカット】水平垂直反転

垂直水平反転もデザインにおいてよく使う機能です。

例えば、左右対称のアイコンや素材を作成するときや、写真のレイアウトバランスが悪いと感じた際に、要素を反転させて調整したりする事に活用します。

Photoshopのデフォルト設定では、水平方向に反転、垂直方向に反転の機能にショートカットキーは割り当てられていません。

これらの機能を実行するには、以下の方法があります。

1. メニューバーから選択:
   • 対象のレイヤーを選択した状態で、メニューバーの「編集」→「変形」→「水平方向に反転」または「垂直方向に反転」を選択する。
2. 自由変形ツールを使用:
   • 対象のレイヤーを選択した状態で、「command + T」を押して自由変形ツールを起動する。

しかし、これらの方法は、毎回メニューをクリックする必要があるため、頻繁に水平垂直反転を行う場合は非効率です。

そこで、水平垂直反転のショートカットを設定することをおすすめします。

私は、水平反転に『cinnand + control + Z』を垂直反転に『cinnand + control + X』を割り振っています。

【アクション】スマートオブジェクトに変換

『スマートオブジェクトに変換』はデザインでよく使う機能です。
非破壊編集や画像の劣化を防ぐことが出来るのでロゴやアイコン、写真素材の編集に使われます。

デフォルトでスマートオブジェクトを実行するには、以下の2つの方法があります。

1. レイヤーを右クリック:
   • 対象のレイヤーを選択した状態で、右クリックしてパネルから「スマートオブジェクトに変換」
2. メニューバーから選択:
   • 対象のレイヤーを選択した状態で、「メニュー」→「レイヤー」→「スマートオブジェクト」→「スマートオブジェクトに変換」

一度の工数は少ないですが、作業におけるクリックの回数をなるべく減らしたいので私は、スマートオブジェクトに変換を『F10』にアクション登録しています。

【ショートカット】ブラシの拡大・縮小

Photoshopのデフォルト設定では、ブラシツールの拡大縮小は以下のショートカットに割り当てられています。

• ブラシサイズを大きくする： ] (右角括弧)
• ブラシサイズを小さくする： [ (左角括弧)

しかし、右利きの場合、右手でマウスを操作しながら左手で『[』、『]』 キーを押すのは、少し使いづらいです。

ですので、左手で押しやすいキーに変更するのがおすすめです。

私は、ブラシの拡大を『S』ブラシの縮小を『D』に変更しています。

マウスやペンから手を離さずにブラシの拡大、縮小が楽に出来るので便利です。

【無料ダウンロード】ショートカット＆アクションの設定ファイル

上記で紹介した、ショートカットとアクションを以下から無料ダウンロードできます。

【ダウンロードファイルの詳細】

・Photoshop_アクション_カスタム.atn
・Photoshop_ショートカット_カスタム.kys

設定ファイルの使い方

1．ダウンロード:
上記リンクから設定ファイルをダウンロードしてください。

2．設定ファイルを保存

以下のディレクトリにショートカットまたはアクションのデータを移動させます。

【ショートカットファイルの保存場所：Windows】

【ショートカットファイルの保存場所：Mac】

【アクションファイルの保存場所：Windows】

【アクションファイルの保存場所：Mac】

3．Photoshopで読み込み:
ショートカットとアクションで読み込み方法が異なります。

【ショートカットファイルの読み込み】

「メニュー」→「編集」→「キーボード ショートカット 」を選択します。

ショートカットキー設定項目からファイルを選択します。

【アクションファイルの読み込み】

「メニュー」→「ウィンドウ」→「アクション」を選択します。

アクションパネルで「メニュー」→「アクションの読み込み」を選択して保存したファイルを読み込みます。

※ファイルが出てない場合はPhotoshopを再起動してみましょう。

※ショートカットキーやアクションキーは設定によっては競合する場合があります。必要があればキーの設定をカスタマイズしてください。

【初心者向け】覚えておきたい便利ショートカット

『絶対設定すべき！おすすめショートカット&アクション』では、Photoshopにデフォルトで登録されていないが、設定する事でデザインの作業効率が上がるショートカットとアクションを紹介しました。

この項目では、Photoshopにデフォルトで設定してあるショートカットの中で、デザイン制作で使用頻度が高いショートカットをまとめました。

沢山ありますが、以下を覚えるだけでもデザイン作業時間の短縮になると思います。
_{（windowsをお使いの方は、commandをctrlに置き換えてください）}

ファイル操作系

編集操作系

ツール選択系

レイヤー操作系

表示系

その他

デザイン作業と言っても、作業の内容は様々です。まずは自分のよく使うツールや操作のショートカットを覚えるといいでしょう。

バナー制作をしたいけど、そもそも何から始めたらいいの？

『他の人はどうやって作ってるの？』『バナー制作のコツや手順を知りたい！』

こんにちは！広告会社で雇われデザイナーをしている、かじゅうです！

突然ですが、筆者はデザイン未経験で広告代理店のデザイン制作部に入社しました。社内の教育制度が整っているわけではなく、バナーデザイン制作に関しては基本も分からない初心者でした。そのため、全て手探り状態で新人時代を過ごしました。

そんな私は当時こんなことを思っていました。

• デザイナーは『どんなことを考えながら』バナーデザインしているのだろう？
• 『どういう手順で』デザインしているのか知りたい

私のような環境はとても特殊だと思いますが、少数のデザイン部署で働いている方やこれからバナーデザインを始める方で周りからのヒントがもらいづらいという方がいたらこの記事が少し参考になるかもしれません。

こんなバナーデザインを作ります

KAGOMEさんから出ている野菜生活「アップルサラダ味」が新登場！というバナーを作る工程を紹介していきます。

※こちらの画像はKAGOMEさんとは全く関係ありません。

バナーを作る前にチェック！目的は何？

バナーデザイン制作を始める前に、どんなバナーを作るのかイメージします。
紙に書き出してみてもいいですし、頭の中で考えてもいいと思います。

バナーデザインの基本となる工程なので、初心者の方は「目的を考える」時間を長くしてみると良いと思います。

5STEPで作るバナー制作の手順

5STEPで作るバナーデザイン制作の手順を紹介します。

▼全体の流れは以下の通りです。

• 要素を洗い出す
• 大事なものを絞る
• 仮レイアウト
• 文字を組む
• あしらいを考える

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

STEP.1 要素を洗い出す

バナー制作に必要な要素を全て洗い出します。まずは、バナーに使いたいテキストをざっくり並べてみましょう。

テキストを洗い出したら、続いて使いたい写真や素材を洗い出します。

要素の洗い出しは、手書きやデジタルメモなど自分に合った方法でいいと思います。要素を洗い出すと『あれ？文章が抜けちゃった』というようなミスを防ぐことができるので私は必ず行っています。

STEP.2 大事なものだけに絞る

続いては、洗い出した要素に優先順位をつけます。優先順位が低いものや、同意味のテキストは削ってしまいます。

「家族みんなが~補える野菜飲料です」は野菜生活自体の訴求文なので、削りました。「野菜生活」は他と被っているテキストなので削りました。

STEP.3 文字や写真の仮レイアウト

文字や写真を仮レイアウトします。優先順位が高いものから配置していきます。
今回は、シンプルに商品写真を左側にテキストを右側に配置する構成で考え、①〜④の順番で仮レイアウトしました。

配置しただけで、バナーとはいい難い状況ですがこの段階ではこれでOKです。
STEP.1で洗い出した要素を抜けがなく配置することが出来ました。

バナーデザインで使える人物写真レイアウトの必勝パターン12選＋α

バナーデザインをする時に覚えておくと役立つ必勝レイアウトパターンを紹介。レイアウトのコツやNGなど、現場では教えてくれない必須項目を詳しく紹介

design.kajyublog.com

2023.07.14

STEP.4 文字組をする

見栄えをよくするために文字組をします。
この段階でフォントも何が適しているか考えて必要があれば変更していきます。

アーチ状にすると文字にリズムと温かみが生まれると思います。
テキストを声に出して読んでみてください。アーチ状になっていると感情が乗りませんか？

STEP.5 あしらい

あしらいをして仕上げていきます。

画像のように、色調加工前と加工後では商品の見た目や存在感が違って見えます。このように、細部までこだわってバナーを制作するのがいいですね。

【必須知識】バナーデザインがワンランクアップする素材の写真加工と補正のテクニック

バナーデザインをする上で欠かせない写真素材ですが、いざ配置してみるとなんだか微妙だなと思う事も多いです。この記事では、イケていない写真をイケている写真に変身させるための写真加工や補正を紹介します。

design.kajyublog.com

2023.11.25

以上で完成です。

【企業向け】ビジネス系広告バナーの作り方！デザイン初心者でもわかる配色・フォント・レイアウトのコツ

ビジネス広告バナーのデザインで、クリック率やコンバージョン率を上げたいとお考えですか？この記事では、プロのデザイナーが実際に効果のあったバナーデザインを50例以上分析。ターゲット層の心を掴む配色、信頼感を高めるフォント選び、視線を集めるレイアウトのコツを、初心者にもわかりやすく解説します。

design.kajyublog.com

2024.06.16

最終チェックは必ずしましょう！

テキストの誤字脱字を丁寧に確認しましょう。

次に、デザイン上のミスがないかチェックします。レイアウトが崩れていないか、画像やアイコンが適切に配置されているか、色使いやフォントの組み合わせが適切か、全体的なバランスが取れているかなどを確認しましょう。

広告が表示される媒体や配信枠によっては、アイコンやボタンが重なり、メインコピーやロゴなどの重要な要素が隠れてしまう可能性があります。事前に確認し、必要な場合は調整を行いましょう。

画像として書き出す際は、Web表示であればJPEGまたはPNG、印刷物であれば高解像度のPDFなど、適切な保存形式を選びましょう。ファイル容量の上限がある場合は、適切な圧縮を行いましょう。

jpegからwebpへ一括変換！Photoshopの『ドロップレット』で自動アプリケーション化する方法

大量のjpeg画像をphotoshopで開いてwebpに変換するのは大変です。そんな時はPhotoshopの機能である『ドロップレット』を使えば、一括でwebpに変換してくれます。

design.kajyublog.com

2023.11.25

もし、ある程度できあがったバナーがしっくりこない場合は、時間を置いてから改めて見てみましょう。客観的な視点で見ることで、新たな発見があるかもしれません。また、第三者に意見を求めるのも有効です。客観的な視点からのアドバイスは、主観では気づかなかった改善点を見つける助けになるでしょう。

パソコンとスマホでは見え方が異なるため、特にテキストサイズに注意が必要です。必ずスマホ実機でも表示を確認し、読みやすさを確保しましょう。

バナーデザインの作り方【手順まとめ】

筆者が仕事で行っているバナー制作の手順を5STEPで紹介しました。

• 要素を洗い出す
• 大事なものを絞る
• 仮レイアウト
• 文字を組む
• あしらいを考える

ステップを踏むことの利点としては、自分が苦手にしているところが理解できる点です。
苦手な部分が分ったらそこを重点的に勉強すればいいと思います。ちなみに筆者は「あしらい」が苦手でした。

以下に各ステップ毎の上達のヒントとなる書籍を紹介します。どれもオススメなので参考になればと思います。

話し合いやアイデアを出すのが苦手だ

レイアウトの引き出しを増やしたい

文字組が上手になりたい

あしらいのアイデアや引き出しを増やしたい

あ、あと。一応アップルサラダ味紹介しときますね。おいしいので是非。

「バナーデザインを勉強しているけど、なかなか上手くいかない…」そんな悩みをお持ちの方へ。

この記事では、デザイン初心者でも簡単にマネできるPhotoshopを使った、バナーデザインのコツとテクニックを紹介します。機能、テクニック、文字組みなど、実際自分が経験した中で、初心者向けのデザイン本では教えてくれないことをまとめました。

この記事でわかること

• 初心者でもできるバナーデザインのテクニック
• デザインをよくする簡単ワンポイント
• 誰も教えてくれない便利なPhotoshop機能

難しい知識や複雑なテクニックは一切なし！今すぐ実践できるテクニックばかりなので、ぜひ最後まで読んでバナーデザインをレベルアップさせましょう。

よりデザイン性がある斜体文字を覚えよう！

文字の斜体は使っていますか？文字パネルの『イタリック』だけを使っていませんか？

文字を斜体にする方法は、Photoshopの文字パネルの中にある斜体だけではありません。

「ゆがみ」ツールを使った斜体文字の作り方

STEP
1

「編集」→「変形」

斜体にしたい文字レイヤーを選択して、「編集」→「変形」を選択します。

STEP
2

上下左右自由に変形

上下左右にボックスをドラックして好みの斜体になるように変形します。右端を上に、上部を右側へ移動させるとスピード感のある斜体を作ることが出来ます

「ゆがみ」斜体を使ったデザイン

ゆがみツールはシェイプにも使用できるので、サントリーのデザインのように文字と傾度があった帯をつくることできます。

文字の縦幅と横幅を調整していますか？

文字を組むときに、デフォルト入力のフォントを並べたり組み合わせたりしていませんか？

文字の縦幅・横幅を調整するとは？

この2つのバナーの違いが分かりますか？

左のバナーは文字の縦・横幅を調整していないため下記の箇所が気になります。

文字の縦・横幅を調整することできれいに見えるだけではなく、文字組もしやすくなります。

エクスクラメーションマーク（！）やクエスチョンマーク（？）などは画像のように新たに作り直すとプロっぽくなります。

文字の縦幅・横幅を調整する方法

文字の縦幅・横幅を調整は文字パネルから変更することが出来ます。

１文字ずつ調整することもできます。

文字入力で作れるお手軽なあしらい

デザインにおけるあしらいの重要性は周知だと思いますが、デザインの度にこだわったあしらいを用意するのは大変です。

なによりノンデザイナーの場合はあしらいまでこだわる余裕なんてないですよね。

呼びかけ吹き出し

「呼びかけ」のあしらいはキーボードの「/」や「／」を入力することで簡単に作れます。

人物の呼びかけや注目してほしい情報があるときに使いましょう。

長さを調整したいときは文字の縦幅・横幅を調整する方法で紹介した調整方法を使えば作成可能です。

左側の記号は「／」を複製して「編集」→「変形」→「水平方向に反転」を押してつくりましょう。

▼「呼びかけ」あしらいを使ったデザイン例

中黒（・）を使った強調と注目

文字を強調したり注目してもらいたいときに使う点は中黒（・）を入力することで作成できます。

▼中黒（・）を使って作れるデザイン例

▼（三角）や＜＞（不等号）を使った誘導記号

ボタンなどの案内をするときに使う三角のあしらいは「▼」や「＜＞」を入力することで作成できます。

入力した文字は文字幅を調整することで綺麗な形にすることができます。

▼(三角）や＜＞（不等号）を使って作れるデザイン例

背景の柄は控えめに

「背景をどうしよう」と悩んだあげく目立ってインパクトがある背景素材を選んでしまう。

背景を選ぶときはデザインを潰さない控えめな背景を選んだ方がデザインしやすいです。

特に、柄物の背景は控えめにしましょう。

背景が目立ちすぎるとデザインしづらい理由

目立つ背景を使ってしまうと文字や写真素材などが目立たなくなります。

もっと悪いのが、目立たない文字や写真を目立たせようとするあまり不要な境界線やドロップシャドウなどを多用してしまう事です。

デザインをしてみて文字や写真素材が見づらい場合は、背景素材に問題はないかチェックしましょう。

背景素材を選ぶときは、デザインを潰してしまわないか注意しましょう。

よく使う「素材・あしらい」のパターンを覚える

バナーデザイン初心者の方がまずすべきことは、よく使われる『素材やあしらい』を覚える事です。

どんなものがあるのか知っているか知らないのかでは全然違います。

Webデザイン初心者が覚えるべき『素材の名称と英語検索キーワード』20選

材を探すときは、日本語だけではなく英語の名称を知っていると探せる素材の幅が増えるのでオススメです。また、Webデザインを学ぶ際には、良く使う素材から覚えると効率的です。

design.kajyublog.com

2023.07.14

人物写真レイアウトのパターンを覚えておく

サイズの小さいバナーデザインでは、伝わるレイアウトのパターンがある程度決まっています。

オリジナルなレイアウトを探すよりも王道のパターンを使うのがきれいにまとまったデザインをつくるコツです。

バナーデザインで使える人物写真レイアウトの必勝パターン12選＋α

バナーデザインをする時に覚えておくと役立つ必勝レイアウトパターンを紹介。レイアウトのコツやNGなど、現場では教えてくれない必須項目を詳しく紹介

design.kajyublog.com

2023.07.14

色に迷ったらスポイトツールを使う

バナーデザインの「色」に迷うことってありますよね。

そんな時は素材に使われている色を参考にしてみましょう。

スポイトツールを使って写真素材から色を決める

◀左の写真素材を使う場合を例にします。

この写真の印象的な色は「赤」と「黒」ですよね。

写真の印象的な色をスポイトツールで取得してデザインしたものが下段の画像です。

背景やあしらいの円など全て写真からスポイトした色を参考にしています。

このようにしてデザインするとデザインにまとまりがでるのでおススメです。

スポイトで色を取得する際の注意

• 完全に同じ色を使わない
• 明度や彩度を変えて使用する

写真素材を使う時は、暗くないか気をつけましょう。

提供された写真素材の多くは暗い写真が多いのでそういった場合は、必ず明るく補正しましょう。

Photoshopで写真素材の影を明るくする「初心者ができる簡単な加工方法」

Photoshopを使った写真の影を明るくする簡単な方法を紹介。

design.kajyublog.com

2023.07.14

こんにちは！広告会社でデザイナーをしている、『かじゅう』と申します。

インターネット広告市場は拡大しており、企業は自社のサービスやキャンペーンをアピールするためのバナー広告制作に注力しています。しかし、デザイナー不在の中小企業などでは、自社のサービスやキャンペーンをアピールするためのバナー広告デザインを内製で制作することが多く、専門知識や経験がない担当者は苦労しているのではないでしょうか。

この記事では、世の中に存在するビジネス広告系バナーを分析し、デザインパターンや制作のコツなどを共有します。

バナー制作の基本と手順！初心者が実践したい5つステップ

バナー制作をするときの流れを5つのステップで紹介。バナー制作をしたいけど、何から始めたらいいの？手順を教えて！みんなはどうやって作ってるの？という初心者の方は是非ご覧ください。

design.kajyublog.com

2024.06.28

ビジネス系バナーとは？

ビジネス広告系バナーとは、企業や団体がWebサイトやSNSなどで利用する、主にWebサービス、システム、ツール、アプリなどを告知・宣伝するためのバナー広告としておきます。

ターゲット層としては、ビジネスパーソンや企業（法人）関係者など、BtoBビジネスに関係を持つ人々を想定します。

▼ビジネス広告系バナーデザインの主な特徴は以下の通りです。

ビジネス広告系バナーデザインのパターンとコツ

この項目では、ビジネス広告系バナーデザインを５０点ほど集めて分かったことや特徴をまとめます。

1.よく使われる色や配色の組み合わせ

ビジネス広告系のバナーデザインの配色パターンとして、以下の2つが多い様に感じます。

1. メインカラーと類似色のみのデザイン
2. ベースカラー＋メインカラー＋アクセントカラー

メインカラーと類似色のみのデザインは、商品やビジュアルを際立たせたい場合に効果的です。ベースカラー＋メインカラー＋アクセントカラーは、テキストによる説明やCTAボタンなどを配置したい場合に適しています。

続いて、どんな色が使われているか調べてみました。

ベースカラー（背景色）

よく使われている色：白や薄いグレー

ベースカラーは、最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立て、コンテンツや内容を読みやすくするための役割があります。

メインカラー

よく使われている色：青、オレンジ、緑

メインカラーは、それぞれのサービスのイメージや特徴を表す色として選ばれています。また、青色は明るい青ではなく、少し落ち着いた深い青がよく使われています。

アクセントカラー

よく使われている色：赤や黄色、オレンジ

アクセントカラーは、ボタンや見出しなど、注目させたい部分に使われており、デザインにメリハリを与えています。

サービス内容に合わせた色の選び方

画像から各サービスがどのようなイメージを伝えたいのか、どのようなターゲット層にアピールしたいのかを読み取ることができます。

• サービスの信頼感や誠実さを伝えたい → 青や紺
• 親しみやすいサービス → オレンジ
• 難しくない、簡単、安心感 → 緑

色の選び方は、デザインの良し悪しだけではなく広告のクリック率やコンバージョン率にも影響を与える要素なので、何となくで選ぶのではなく成功事例から色を真似てみましょう。

2.よく使われるフォント

ビジネス広告バナーでよく使われている『フォント』は以下の通りでした。（今回はゴシック体フォントに絞っています）

▼和文フォント

Photoshopを利用してバナー制作をするのであれば、Adobe Fontsが追加できるはずです。ほとんどのフォントが追加できるのでAdobe Fontsの利用がおすすめです。しかし、Adobe Fontsで提供するフォントの種類や数は変動します。一部のフォントは提供が終了し、新しいフォントが追加されることもあります。

▼欧文フォント

Bebas Neue、DIN、Futura、Gothamは、Adobe Fontsで提供されていますが、一部のウェイト（太さ）やスタイルは有料プランでのみ利用可能です。 RobotoはGoogle Fontsで提供されている無料フォントです。 Arvo BoldはGoogle Fontsで提供されている無料フォントで、太字のウェイトが特徴です。

Adobe Fontsは無料登録でも一部のフォントが利用可能です。詳しくは以下の記事で解説しています。

【無料でも使える！】Adobe Fontsの登録～使い方とおすすめのフォントを紹介

Adobe Fonts（アドビフォント）の登録方法や使い方、おすすめのフォントについて詳しく紹介します。無料でも使える高品質なフォントの選び方や活用法をご紹介します。デザイン初心者やノンデザイナーの方にもAdobe Fontsはおすすめです

design.kajyublog.com

2024.02.01

3.よく使われるレイアウトとデザインパターン

ビジネス広告系バナーデザインは、情報を効果的に伝えるために、いくつかのレイアウトパターンがよく使われます。ここでは、代表的なレイアウト例やデザインパターンをいくつか紹介します。

1. 左右分割のレイアウト

バナーを左右に分割し、片側にテキスト、もう片側にスマホを配置するレイアウトです。

スマホには、ツール画面やアプリ画面などをはめ込むことで、サービスのイメージを具体的に伝えることができます。また、範囲が小さいバナーでは、スマホの一部を隠すことでテキストエリアを増やすことができます。

ポイント

スマホの一部を隠すのは、情報量を調整する役割もあります。小さなバナーでは、ツール画面や管理画面は見えません。つまり、スマホ画面は『ツール』や『アプリ』であること伝える役割でしかないのです。

2. イメージ前面のレイアウト

商品画像やサービスのイメージ画像を全面に大きく配置するレイアウトです。

視覚的なインパクトが強く、商品の魅力やサービスの世界観をダイレクトに伝えることができます。キャッチコピーやCTAボタンは、画像の上に重ねて配置したり、余白部分に配置することで、視認性を確保しましょう。

3. 問題提起と解決策提示レイアウト

「こんなことでお困りではありませんか？」といった顧客の悩みや課題を提起し、その解決策として自社の商品やサービスを紹介するレイアウトです。

ツール系であれば、パソコン操作で悩んでいるイメージ写真を使うバナーが多くみられます。写真レイアウトは、テキストスペースを確保するようにトリミングするのがポイントです。

4. PC画面を使用したレイアウト

PC画面を配置したデザインで、実際のサービス画面を表示するレイアウトです。

サービスの使い勝手や機能を具体的にイメージさせることができ、ユーザーの興味を引くことができます。一般的には上下どちらかに配置して開いたスペースにテキストをレイアウトします。シンプルで制作しやすいので、デザインに迷ったり早く用意したい時はこのレイアウトがおすすめです。

ビジネス系バナーのデザインを調べてわかったこととコツ

ビジネス系バナーのデザインを調査した結果、以下の点が重要であることがわかりました。

1.ターゲット層に合わせた配色をする

• 白や薄いグレーをベースカラーに、青・オレンジ・緑をメインカラーにすることで、信頼感、、安心感を表現する
• アクセントカラーには赤や黄色、オレンジを用いることで、注意を引き、行動を促す

2.視認性と信頼性を重視したフォント選び

• 和文フォントでは、ヒラギノゴシック、モリサワ 新ゴ、源ノ角ゴシック、游ゴシック、Noto Sans JPがよく使われる
• 欧文フォントでは、Bebas Neue、DIN、Futura、Gotham、Montserrat、Poppins、Ralewayなどがよく使われる。

3.レイアウトで情報を整理し、視覚的に訴求する

• ビジネス広告系のバナーデザインでは、PC画面やスマホをレイアウトすることが多い
• 『サービスの機能を伝えたい』『悩みを解決したい』など目的が決まると最適なレイアウトが考えやすい

これらのポイントを踏まえ、効果的なビジネス系バナーを作成し、自社のサービスやキャンペーンを広告デザインに活かしましょう。

デザインは効率的に！時間を割くなんてもってのほか！

こんにちは！広告会社でデザイナーをしている、かじゅうです！

インスタ、twitterなどのSNSやYoutubeで使う画像をもっとおしゃれにしたい…

だけど、なーんかめんどくさいし。デザインするソフトも時間もないし…

そう思っている人がいたらちょっと損してるかもしれません。

• もし、数回タップでデザインが出来るとしたら。
• もし、10分以内でデザインが出来るとしたら。

この記事で紹介する『Adobe Express』はそれが出来ちゃいます。

しかも、プロ顔負けのクオリティーで！！

Adobe Expressとは

Adobe Expressとは豊富なテンプレートからデザインを選択して、文字やデザイン素材を自由に追加したり編集して画像を作成できるアプリです。

素材は自分で用意したものを使用することもできます。

• 作りたい画像の種類を選ぶ
• テンプレートを選ぶ
• 写真を自分の素材に置き換える（必要なら）
• テキストを変更するorテンプレートから選択する
• 書き出す
• 様々なサイズに変更する（必要なら）

完全無料のモバイル対応デザインソフト

Adobeと聞くと『高い』というイメージを持たれている人もいるかもしれませんが、Adobe Expressは『完全永久無料』で使用できます。

■無料プランで使える機能は下記のとおりです

• 基本的な作成機能
• テンプレート、デザインアセット、アドビフォント
• Adobe Stockのロイヤリティフリー無料写真コレクションの一部
• 基本編集機能と背景の削除やアニメーション化などの写真効果
• Webとモバイルの両方で作成可能
• 2GBのストレージ

有料プランでは、よりリッチな機能を使用することが出来ます。

詳しくは『Adobe公式ページ：プランの比較』を確認ください。
※https://www.adobe.com/jp/express/pricing

有料プランで使える機能は、あれば少し便利といったものです。
デザイン制作の機能制限はないので無料プランでも十分おしゃれな画像を作成できると感じました

スマホからも作成可能なモバイル版アプリあり

Adobe Expressはモバイルアプリ版があります。

iOS、Androidデバイスで使用できるのでSNS投稿までスマホだけで完結します。

Web版とのデータ共有もできるので、スマホで作成したアイデアをWeb版で仕上げるといった使い方も可能です。

豊富なテンプレートで何が作れる？

Adobe Expressには、豊富なテンプレートが揃っています。

テンプレートを選んで画像作成ができるので、簡単に効率よくデザインできます。

■Adobe Express：テンプレートの種類

• Instagram投稿、ストーリー
• ロゴ
• バナー
• Youtubeサムネ
• チラシ、ポスター
• 名刺

他にもたくさんあり、多くの画像制作の場面で困らないはずです。

また、『ファッション』『美容』『食べ物』『セール』などのデザインジャンルが用意されていて、作成したいイメージにより近いテンプレートを選ぶことが可能となっています。

アプリ内に『学べるトピック』も用意されていて、制作サポートが超優秀だと思いました。

生成AI「Adobe Firefly」を搭載

Adobe独自の生成AI「Firefly」が搭載されています。Fireflyは、テキストから画像を生成するAIで、言葉でイメージを伝えるだけで、高品質な画像が完成します。

Adobe ExpressのFireflyでは、主に以下の3つのことができます。

• テキストから画像を生成:
  イメージを言葉で入力するだけで、それに合った画像を生成できます。
• テキスト効果を生成:
  テキストに様々なスタイルやエフェクトを適用できます。
• 生成塗りつぶし:
  画像の一部を削除したり、別の画像で置き換えたりすることができます。

Fireflyは現在も開発が進められており、今後さらに多くの機能が追加される予定です。Adobe ExpressのFireflyを使いこなせば、Photoshopなどの高度なツールが必要なくなるかもしれません。

エフェクトやフィルターが使える！

Adobe Expressでは、本来Photoshopでしかできないようなエフェクト、フィルターやテクスチャなどを１タップ（クリック）で追加することが出来ます。

他にも『色調補正』や『ぼかし』機能などが１タップで適用解除が可能です。

やりたいことが大体できる多機能すぎる便利ツール

Adobe Expressは、画像制作をサポートする機能が豊富です。

動画制作もできるので新たに動画編集ソフトを購入する必要がありません。

『画像のサイズ変更』を使えば、さまざまなSNS投稿用のサイズに変更できるので便利です。

Adobe Expressの使い方を解説！インスタにアップする画像を作ろう！本当に10分以内に作れる？

Adobe Expressを使ってインスタに投稿する画像（1080px × 1080px）をテンプレートから簡単に効率的に作成してみます。

Web版で作成する手順になりますが、アプリ版でも作業方法は変わりません。

作成手順は下記のとおりです。

• Instagramサイズのテンプレートを選択
• 無料テンプレートからデザインを決める
• テキストを変更する
• JPEGで書き出して完了

STEP
1

Instagramサイズのテンプレートを選択

新規プロジェクトを作成画面から、作成したい画像の種類を選択。今回は『Instagram投稿』を選択する。

STEP
2

無料テンプレートからデザインを決める

左メニューから『テンプレート』を選択『無料』素材にチェックを入れ、検索窓に『digital』と入力する。表示されたテンプレートの中から気に入ったものを選択する。

STEP
3

テキストを変更する

左メニューから『テキスト』を選択。自己紹介の欄に気に入ったものがあったので選択してテキストを変更する。元のテキストはあらかじめ選択してdeleteしておく。

STEP
4

JPEGで書き出して完了

右上の『ダウンロード』から『JPG』を選択し、書き出し完了。

背景とテキストをテンプレートの中から選択して作成したので5分程度で作成することが出来ました。

詳しく手順を知りたい方は下記の動画をご覧ください。

Adobe Expressを使用するには

Adobe Expressは完全無料で使用することが出来ます。

使用には、AdobeIDの登録が必要です。

公式ページの『AdobeIDの作成方法』を参考にIDを作成してください。

AdobeIDを作成する【無料】

ブラウザ版のAdobe Expressを使用する

ブラウザ版のAdobe Expressを使用するには、Adobe公式ページからアクセスします。

Adobe Expressのページにアクセスするとすぐにテンプレートを選択して作成することが出来ます。

【ブラウザ版】Adobe Expressを使用する

アプリ版のAdobe Expressを使用する

Adobe Expressはスマートフォンやタブレットで使用できるアプリ版があります。

アプリ版で作成したデータを、ブラウザ版で共有して編集することもできます。

【iOS版】Adobe Expressをダウンロードする

【Android版】Adobe Expressをダウンロードする

SNSで成果をあげたいならAdobe Expressを使うべき！まとめ

無料で使えるデザイン制作ツール『Adobe Express』を紹介しました。

SNSに投稿する画像にこだわっていない、制作が面倒だという方はぜひ使ってみてはいかがだろうか。

個人的にオススメする理由

• 制作サポートが超優秀
• 切り抜きやエフェクトを使うだけでもOK
• さまざまな媒体やSNSに対応できる『サイズの変更』が使いやすい
• ブラウザ版とアプリ版で共有できる
• テンプレートのみを使った制作なら10分で完了する

]]> https://design.kajyublog.com/pricedesign_font/ Fri, 16 Jul 2021 08:15:42 +0000 https://design.kajyublog.com/?p=212

デザインにマッチした数字フォントが見つからない！そう思ったときに役立つ数字がきれいなフォントを紹介します！

こんにちは！広告会社でデザイナーをしている、かじゅうです！

web広告の制作案件では、料金や価格などのプライスデザインを作る機会がめちゃくちゃ多い！でも、デザインする時に『どのフォントがいいだろう？』と迷うことがあります。

大量のフォントの中から、デザインにマッチしたフォントを探すのは結構時間がかかります。気づいたらフォント探しに時間がかかりすぎた…なんてことも

ということでこの記事では、

料金や価格のデザイン表現にピッタリな数字フォントを10種選出！
数字の文字組の例も交えて紹介します！

▼無料で使えるフォントを探しているならこちら

【無料でも使える！】Adobe Fontsの登録～使い方とおすすめのフォントを紹介

Adobe Fonts（アドビフォント）の登録方法や使い方、おすすめのフォントについて詳しく紹介します。無料でも使える高品質なフォントの選び方や活用法をご紹介します。デザイン初心者やノンデザイナーの方にもAdobe Fontsはおすすめです

design.kajyublog.com

2024.02.01

Din 1451 Alt

直線が美しい機械的な『DIN系』フォント

• クセがなくどの場面でも使いやすい万能フォント
• ユニクロなどにも使われている
• 無難でフォーマル感を出したい時に便利

■『Din』フォントの使用例や文字組み
モダンで読みやすい数字なので、シンプルに配置するだけで綺麗にまとまります。縦に少し長いので、追加情報や単位を２段構成にするのもおすすめです。

▼『DIN系』はフリーフォントで似たようなフォントがDL出来ます！

• OSP DIN
• Bebas Neue

Din 1451 Alt Font | 1001 Free Fonts

Download Din 1451 Alt font for Windows and Mac. Din 1451 Alt font was ...

www.1001freefonts.com

Acumin Pro ExtraCondensed Bold

『Acumin Pro』は、形が整っていてクセがないフォント。

• DIN系フォントより、横幅がぎゅっとしている
• 細身で少し女性っぽい
• 細めのウェイトでもきれいに見えて使いやすい

■『Acumin Pro』フォントの使用例や文字組み
縦長で細身のフォントなので、余白を持たせた余裕のある配置がおすすめです。『２』や『５』など斜めにカットされている数字もあり、そういう場合は斜体にするとカッコよくなる印象があります。

『Acumin Pro』はAdobe FontsからDLできます！

ADAM.CG PRO

『ADAM.CG PRO』はしっかり太めなサンセリフ体。

• 『2』『3』『4』など鋭く尖っているのが特徴
• 万能ではないがインパクトがある
• 『３と４』などの続きは、組み合わせによっては美しく見えないものもあるから注意
• 小文字がなく使うのにコツがいるフォント

■『ADAM.CG PRO』フォントの使用例や文字組み
インパクトがある形状なので、SALEバナーなどのシンプルなデザインで使うとその形の特徴が映えておしゃれなデザインになると思います。鋭角なフォントなので、デザインの方向性と合っていればデザインパワーをあげるのに役立ちます。

個人的には先が尖っているフォントは貴重なので結構好きなフォントです。

▼「ADAM.CG PRO」はフリーでダウンロードできます。

bestoffont.com - bestoffont リソースおよび情報

bestoffont.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、besto...

bestoffont.com

Futura

『Futura』は王道中の王道のフォント。

• 『DIN』と比べてエレガントな印象
• 大人の女性向けデザインにも向いている

■『Futura』フォントの使用例や文字組み
高級感が必要な場面やカジュアルな場面でも使えるフォントなので、適切なフォントサイズやウェイトを選択して使用するのがおすすめです。

Times New Roman Bold

可読性に優れていて見出し、本文に使用しても読みやすいフォント。

• 落ち着いたデザインや高級系のデザインにマッチする
• ウェイトの『Bold』は可読性も高くオススメ

■『Times』フォントの使用例や文字組み
数字の上部や下部が大きく湾曲しているのが特徴を活かしたデザインをするのがおすすめです。『,』や『%』などの記号も特徴的な形状なので、使用する時は控えめに文字組みすると良いと思います。

斜体との相性も良いと思います。『%』がデフォルトだとすこしデブっちょなので、長体「80％」などで使うと綺麗な形になると思います。

▼購入&ダウンロードはコチラから

AFLO

フォント | Times New Roman のダウンロードはアフロモールをご利用ください。和文書体の明朝体やゴシック体、筆文字にデザイン書...

mall.aflo.com

Fireclay

『Fireclay』ちょっと変わった風味のフォント。

• アパレル、ブランディングなどの女性向けデザインに合う
• 手書き風の柔らかい雰囲気が特徴的

■『Fireclay』フォントの使用例や文字組み
Fireclayフォントは、手書き風なので、フォーマルなデザインには向かない場合があるので注意が必要です。温かみのある形状を活かして、カフェのメニューボード、雑貨店の商品タグ、ハンドメイド作品などに使用するのがおすすめです。

形が独特なので、若干可読性は落ちますが使いこなせばオシャレなデザインになるのでぜひチャレンジしてみてください。

▼『Fireclay』は無料でDL可能です。

Fireclay Font - Free Font

Fireclay is a delicate, elegant and flowing handwritten font. It has b...

ifonts.xyz

Bourbon

『Bourbon』は古いボトルのデザイン等に使われているラフなフォント。

• 古さや伝統感が出て面白いフォント
• 『since.1920』など、年号に使うのも面白い。

■『Bourbon』フォントの使用例や文字組み
Bourbonフォントは、クラシカルで洗練された印象を与えるセリフフォントです。太めのウェイトを活かして、男性的な高級感が出る様にデザインするのがおすすめです。クラシカルな装飾を施して、ヴィンテージ感を出すのもありだと思います。

『Bourbon』はAdobe FontsからDL可能です。

ITC Modern No. 216

超有名フォントメーカー『Monotype社』の欧文フォント。

• モダンで存在感のあるフォント
• 強めのカーニングでカッコよくなる

■『ITC Modern No. 216』フォントの使用例や文字組み
幾何学的な美しさがあるフォントです。安定感がある『０』の形が特徴的なのでデザインに活かしたいです。数字と数字の間隔を空けると、カッコ悪い印象があり個人的には強めのカーニングをしても面白いと思っています。

有料フォントですが、使い勝手のいいフォントなので購入する価値はあるフォントだと思います。
▼購入&ダウンロードはコチラから

403 Forbidden

designpocket.jp

Civane

『Civane』は太いウェイトながらエレガントなフォント。

• かしこまった感がない形がとてもいい
• 全体のコントラストに統一感があるのが魅力的

■『Civane』フォントの使用例や文字組み
太く力強いウェイトとエレガントな曲線が特徴的なセリフフォントです。カジュアルなデザインには向かないので、特別感を演出したいデザインで使用すると印象的だと思います。

有料フォントですが、たまにセールで安くなっていたりします。気になる方はチェックしてみてください。
▼購入&ダウンロードはコチラ

Civane Font | Webfont & Desktop | MyFonts

High atop the mountain of fonts, a new structure has been raised--one ...

www.myfonts.com

Masqualero

『Masqualero』はシャープで高級感溢れるセリフフォント。

• 丸みを帯びた形状と不均等な字幅
• ユニークな曲線と跳ね上がり

■『Masqualero』フォントの使用例や文字組み
丸みを帯びた形状と不均等な字幅が、遊び心があり、目を引きます。数字同士の適度な隙間があるので、読みやすく、軽快な印象を与えます。

『Masqualero』はAdobe FontsからDL可能です。

Adobe Fontsについて

Adobe Fontsは、adobe Creative Cloudプランに含まれ、追加料金なしでご利用できるフォントサービスです。『有償プラン』と『無料プラン』で使用できるフォントの数に差がありますが、『無料』でも約1500フォントが利用できます。

Adobe Fontsの『無料プラン』での使い方について詳しく知りたい方はこちらをご覧ください。

【無料でも使える！】Adobe Fontsの登録～使い方とおすすめのフォントを紹介

Adobe Fonts（アドビフォント）の登録方法や使い方、おすすめのフォントについて詳しく紹介します。無料でも使える高品質なフォントの選び方や活用法をご紹介します。デザイン初心者やノンデザイナーの方にもAdobe Fontsはおすすめです

design.kajyublog.com

2024.02.01

【保存版】数字が美しいフォントをまとめました

今回紹介した10種をまとめたメモを公開しています。

デザインをしている時に『どのフォントにしようかな』『あのフォントはなんだっけ』という時に役立つと思いますので是非手元に置いて活用してみてください。