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

こうした問題を解決するためのベストプラクティスとして、Googleが公式に「DESIGN.md」の書き方ガイドライン（Google Stitch 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の出力のブレや、不要なライブラリの混入を未然に防ぐことができています。

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

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

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

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

DESIGN.md

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

DESIGN-temp.md

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

readme.txt

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

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

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

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

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

パターン素材を用意するだけで、簡単に綺麗なテキストエフェクトをたくさん作成することができます！

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

この記事で解説するのは、「パターン素材」を差し替えるだけで、光沢感が異なるの異なる様々な色のテキストエフェクトを簡単に作成できるテクニックです。一度作り方を覚えてしまえば、グラデーションの色で悩む必要はなくなります。カラーセンスに自信がなくても、パターン素材次第で様々なバリエーションを生み出すことが可能です。

光沢感があるテキストを簡単にデザインできるので、ぜひ参考にしてみてください。

Photoshopによる『鮮やかな』光沢ガラス文字を作る方法：ベベルとエンボスの応用

この記事では、Photoshopを使用して鮮やかな光沢ガラス文字を作成する方法を詳しく解説します。ベベルとエンボスの応用テクニックを使い、多彩なカラーバリエーションを加えた光沢効果を実現しましょう。

design.kajyublog.com

2025.09.22

必要なツールと素材の準備

作成に使用したツールはPhotoshop（cc2025）です。

下記から背景とテキストが準備されたPSDセットがDLできます。以降紹介する手順の通り作業していただくと同様のテキストエフェクトが作成できます。

PSDセット（無料）の内容について

■PSD見本

こちらのPSDにはPSD見本の通りの内容が含まれております。

こちらのサンプルをダウンロードし、チュートリアルの手順通りの作業をすることでテキストエフェクトを再現することが可能です。

PSDファイルが300円で購入可能です！

この記事で紹介しているテキストエフェクトの『PSDファイル』を販売しています。

詳細と購入は下記のボタンから。

光沢感がある『クリスタル』テキストエフェクトの作り方

このチュートリアルで重要なことは、パターン素材を用意することです。ご自身のPhotoshopに入っているパターンを使っても構いません。『PSDファイル』にはパターン素材も同梱しているので、用意するのが面倒な方は是非お願いします。

今回のチュートリアルでは以下のようなパターン素材を登録して適用しています。

パターンの登録方法はAdobe公式を参照ください。

全体の手順としては、以下の通りです。

1. パターンを用意する ← この手順はスキップします。
2. 編集用のテキストを３種類用意する
3. 編集テキストにレイヤースタイルを設定する

ステップ１：編集用のテキストを用意する

※上記の『PSDセット』を使用する場合は、この手順は不要です。

まずは、新規カンバスファイル＞新規を作成してテキストを入力します。カンバスサイズは以下を参照してください。

作成後、編集テキストをスマートオブジェクト化レイヤー右クリック＞スマートオブジェクトに変換します。

• カンバス：W3000×H1500px (72dpi)
• テキストカラー：『ffffff』
• フォント：『Aziga』

▼フォントのDLはこちらから(Adobe Fonts)

S InfoOutline 18 N

Explore Aziga designed by Dave Rowland at Adobe Fonts.

fonts.adobe.com

ステップ2：編集用のテキストを複製する

ステップ1で作成したテキストレイヤーを2つ複製レイヤレイヤーを右クリック＞レイヤーを複製します。わかりやすくリネームしておきます。

続いて、『メインテキスト』複製した『ハイライト1』『ハイライト2』の塗りを『0%』にします。入力したテキストが見えなくなりますが問題ありません。

ステップ3：レイヤースタイルを適用①

『メインテキスト』のレイヤーをダブルクリックしてレイヤースタイルを適用します。レイヤースタイルの内容は以下を参照ください。

■『ベベルとエンボス』を下記の通り設定します。

• スタイル：ベベル（内側）
• テクニック：シゼルハード
• 深さ：200
• サイズ：35
• 角度：90
• 高度：37
• 光沢輪郭：画像参照
• ハイライト：覆い焼きカラー：38％（#ffffff）
• シャドウ：焼き込みカラー：100％（#030303）

■『輪郭』を下記の通り設定します。

• 輪郭：画像参照
• 範囲：51

■『シャドウ（内側）』を下記の通り設定します。

• 描画モード：焼き込み（リニア）（030303）
• 不透明度：19%
• 角度：-90
• 距離：1px
• チョーク：0%
• サイズ：2px
• 輪郭：画像参照

■『光彩（内側）』を下記の通り設定します。

• 描画モード：通常
• 不透明度：84%
• カラー：#ffffff
• ソース：エッジ
• サイズ：3px
• 範囲：27%

■『パターンオーバーレイ』を画像の通り設定します。

パターン素材は任意のものを適用してください。ここでは以下のようなパターンを設定しています。

同じパターンを使用したい方は、是非PSDファイルをDLください。

■『光彩（外側）』を下記の通り設定します。

• 描画モード：覆い焼き（リニア）-加算
• 不透明度：13%
• ノイズ：11%
• カラー：#e589dd
• サイズ：23px

ここまで設定すると以下のようになっていると思います。これでほとんどの作業は完了です。

ステップ4：レイヤースタイルを適用②

続いては、品質を上げる仕上げの作業をします。

『ハイライト1』のレイヤースタイルを適用して、文字の境界部分にハイライトを設定します。この作業をすることで、テキストがより光沢があるように見えるので重要な作業です。

設定は以下を参照ください。

■『ベベルとエンボス』を下記の通り設定します。

• スタイル：ベベル（内側）
• テクニック：滑らかに
• 深さ：95
• サイズ：6
• 角度：100
• 高度：37
• 光沢輪郭：画像参照
• ハイライト：覆い焼き（リニア）-加算：100％

ステップ5：レイヤースタイルを適用③

ステップ4と同じように、今度は、テキスト全体にハイライトを加える作業をするために、『ハイライト2』にレイヤースタイルを適用します。

設定は以下を参照ください。

■『ベベルとエンボス』を下記の通り設定します。

• スタイル：ベベル（内側）
• テクニック：滑らかに
• 深さ：97%
• サイズ：4
• 角度：150
• 高度：37
• 光沢輪郭：画像参照
• ハイライト：覆い焼き（リニア）-加算：100％

■『カラーオーバーレイ』を下記の通り設定します。

• 描画モード：ビビットライト（#ffffff）
• 不透明度：12%

ステップ6：最終仕上げをする

ここまでのステップでテキストは以下のようになっているはずです。

ステップ4から5のハイライト設定をすることで、よりテキストがリッチになっているのが確認できると思います。このようにレイヤーを分けてハイライトを加える作業は、他のテキストエフェクトでも活用できるテクニックなので覚えておいてください。

最終的な調整を行い以下のように仕上げました。

パターンを変更してデザインを変更する

作成したテキストエフェクトのパターンを変更して、様々なパターンを試してみましょう。

『メインテキスト』レイヤーをダブルクリックして、レイヤースタイルの『パターンオーバーレイ』を色々変更してみましょう。

パターン素材を変更して色々なテキストを作ってみました。

使ったパターン素材は以下の通りです。

パターン素材が思ったものとは違うなーという時は、比率を変えてみたり、画面をクリック＆ドラックすることでパターンの位置を変更できるので試してみましょう。

PSDファイルが購入可能です！

チュートリアルで紹介したテキストエフェクトのPSDファイルが購入できます。

PSDセット（有料）の説明はこちらで確認

■PSD見本（有料）

こちらのPSDには左記の見本の通りの内容が含まれております。

■PSDファイル（有料）の説明

psdファイルのレイヤー構造は左記の画像の様になっています。

<自由なテキスト>レイヤーのパターンオーバーレイの素材を色々変更してオリジナルのテキストを作成してください。

またファイルには、このチュートリアルで使用したパターン素材も同梱しています。

ベベルとエンボスを重ね掛けして、いろんな色が混ざったようなテキストエフェクトを作ろう！

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

光沢ガラス文字は、ウェブデザインやグラフィックデザイン、ゲームデザインでよく使われる効果の一つです。鮮やかな光沢と立体感は、テキストやロゴを目立たせ、印象的なデザインを生み出すのに最適です。この記事では、Photoshopの『ベベルとエンボス』を応用して『鮮やかな』光沢ガラス文字を作成する方法を詳しく解説します。

【Photoshop文字加工】光るラインがおしゃれ！境界線で作るサイバーパンク風テキストの作り方！【PSDデータあり】

【Photoshop文字加工】光るラインがおしゃれなサイバーパンク風テキストの作り方を初心者向けに解説。Photoshopの「境界線」機能だけで、誰でも簡単にプロ級のデザインが作れます。詳しい手順とPSD配布あり。

design.kajyublog.com

2025.09.22

【Photoshopチュートリアル】光沢感がある『クリスタル』テキストエフェクトの作り方

この記事では、Photoshopを使用して鮮やかな光沢ガラス文字を作成する方法を詳しく解説します。ベベルとエンボスの応用テクニックを使い、多彩なカラーバリエーションを加えた光沢効果を実現しましょう。

design.kajyublog.com

2025.10.05

必要なツールと素材の準備

作成に使用したツールはPhotoshop（cc2023）です。

下記から背景とテキストが準備されたPSDセットがDLできます。以降紹介する手順の通り作業していただくと同様のテキストエフェクトが作成できます。

PSDセット（無料）の内容について

■PSD見本

こちらのPSDにはPSD見本の通りの内容が含まれております。

■PSDファイルの説明

psdファイルのレイヤー構造は画像の様になっています。

各レイヤーは「番号_GLOW」のようにナンバリングされています。この記事で紹介しているメイキング手順では、レイヤースタイルを適用するレイヤーを番号で指定しています。

PSDファイルが200円で購入可能です！

この記事で紹介しているテキストエフェクトの『PSDファイル』を販売しています。

詳細と購入は下記のボタンから。

『鮮やかな』光沢ガラス文字の作り方

光沢ガラス文字を作成するために、レイヤースタイルの『ベベルとエンボス』を繰り返しテキストに適応していきます。手順としては、下記の通りこれを繰り返すだけです。

1. テキストを入力する
2. ベベルとエンボス
3. テキストを複製
4. ベベルとエンボスの再調整
5. １～4の繰り返し

ステップ１：テキストの入力

※上記の『PSDセット』を使用する場合は、この手順は不要です。

まずは、新規カンバスファイル＞新規を作成してテキストを入力します。見本では『GLOW SHINING』としました。

• カンバス：W1000×H645px (72dpi)
• テキストカラー：『f05aff』
• フォント：『ClementePDap』

▼フォントのDLはこちらから

ClementePDap-HeavyItalic フォント

ダウンロードしてインストール：ClementePDap-HeavyItalic フォント（FFonts.netから無料） ✔️ このフォント...

www.ffonts.net

ステップ2：ベベルとエンボスの適用

PSDセットの『1_GLOW』レイヤーをダブルクリックしてレイヤースタイルを適用します。

■『ベベルとエンボス』を下記の通り設定します。

• スタイル：ベベル（内側）
• テクニック：滑らかに
• 深さ：100
• サイズ：18
• 角度：125
• 高度：40
• 光沢輪郭：画像参照
• ハイライト：不透明度０％
• シャドウ：乗算86％(#a9a2f6)

■『輪郭』を下記の通り設定します。

• 輪郭：画像参照
• 範囲：100

■『境界線』を下記の通り設定します。

• サイズ：1
• 位置：内側
• カラー：#ffffff

■『サテン』を下記の通り設定します。

• 描画モード：比較（明）（#e18fff）
• 不透明度：50％
• 距離：５
• サイズ：73
• 輪郭：画像参照

このような手順を残りのテキストレイヤーに適用していきます。

ステップ3以降の手順は「次のページ」から

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

Photoshopの「境界線」機能を応用して、まるで何本ものアウトラインを重ねたかのような、印象的なテキストエフェクトを作成する方法を紹介します。初心者でも簡単にできるテクニックなので、ぜひ試してみてください。

Photoshopによる『鮮やかな』光沢ガラス文字を作る方法：ベベルとエンボスの応用

この記事では、Photoshopを使用して鮮やかな光沢ガラス文字を作成する方法を詳しく解説します。ベベルとエンボスの応用テクニックを使い、多彩なカラーバリエーションを加えた光沢効果を実現しましょう。

design.kajyublog.com

2025.09.22

【Photoshop】 リアルな『水のテキスト』3Dエフェクトを作成する方法

Photoshopで水のようなリアルな質感がある3D立体テキストを作成する方法を紹介しています。主にゲームバナーなどで使われるエフェクトで、文字に立体感を持たせるだけでなく、本物の水のような質感を表現できます。記事では、Photoshopを使って3D立体テキストを作る手順を詳しく解説しています

design.kajyublog.com

2024.05.06

PSDファイルが200円で購入可能です！

この記事で紹介しているテキストエフェクトの『PSDファイル』を販売しています。

PSDファイルの内容詳細と購入は下記のボタンからお願いします。

PSDの内容について

■PSD見本

こちらのPSDにはPSD見本の通りの内容が含まれております。

■PSDファイルの説明

psdファイルのレイヤー構造は画像の様になっています。

１文字ごとにグループ化されています。
各グループ内の『テキストレイヤー』を自由にカスタマイズ可能です。

文字数がもっと必要な場合は、グループを複製してください。

境界線を使った『おしゃれな』ラインテキストの作り方

　境界線を使った多重ストロークテキストを作る方法は、テキストに境界線と光彩を適用し、レイヤーを複製して『フォント』を変更するだけです。手順としては、下記の通りこれを繰り返すだけです。

1. 背景を用意する
2. テキストを用意する
3. 『境界線』『光彩』を適用する
4. テキストを複製して『フォント』を変更する
5. １～4の繰り返し

ステップ１：背景を用意する

まずは、新規カンバスファイル＞新規を作成します。サイズは任意です（今回は2000×1000pxで作成しています）

次に、グラデーション調整レイヤー（またはグラデーションツール）を使い、上から黒→グレーとなるようにします。

ステップ2：背景をもう一つ作成する

ステップ１で作成した背景の上に、グラデーション調整レイヤーを作成し、好みの色のグラデーションを作ります。レイヤーの塗りを『25%』レイヤー効果を『カラー』に変更します。

ここまでの仕上がりは以下の通りになります。

ステップ3：最後の背景を作成する

最後に、新たなグラデーション調整レイヤーを一番上に作成します。

グラデーションは黒のみで作成し、片方が不透明度100%、もう一方が不透明度0%になるようにします。スタイルを『円形』に変更して、比率を『150』にします。

次に、グラデーション調整レイヤーの不透明度を『65%』にして、背景の作成は完了です。

▲ここまでの仕上がり

ステップ4：基準テキストの作成

いよいよテキストを作成していきます。『文字ツール』を選択して任意の文字を入力します。文字は１文字ずつ作成します。今回の場合は、『Lines』という文字で作成するためまずは『L』を入力します。

テキストのフォントは好みのものを選んでください。この記事では、セリフ体を使って作成します。

必要があればテキストのサイズを「cmd +T」で変形します。

続いて、レイヤー名の右側をダブルクリックしてレイヤースタイルを適用します。設定は以下の通りです。

最後に、テキストのカラーを『黒』にしてレイヤー効果を『スクリーン』に変更します。ここまでの工程で下記の画像の通りテキストの境界線だけが光っているような見た目になります。

ステップ5：ラインテキストの作成

ステップ4で作成したテキストレイヤーを『cmd（ctrl）＋J』で複製します。複製したテキストレイヤーの『フォント』を異なるものへ変更します。

フォントの種類はセリフ体、サンセリフ体なんでも構いませんが統一する事をお勧めします。

このようにしてフォントを変更する事で、異なるアウトラインの重なりが出来ます。

フォントの種類によって重なりが大きくずれていたりする場合は、変形ツール（cmd＋T）で変更します。縦横比のチェックを外して好みのようにラインを重ねます。

『フォントを複製』→『フォントを変更』→『ベースラインが合うように変形』を複数回繰り返します。反復回数は仕上がりを見て判断します。今回は、15から20回繰り返しています。

ステップ6：全ての文字を作成

1文字完成したら作業はほぼ完了です。テキストレイヤーを全て選択してグループ化（cmd＋G）します。その後、グループフォルダを選択して、複製（cmd＋J）します。

複製したグループ内のテキスト全てを次の文字に変更します。今回は、Linesという文字を作るので『i』です。この手順を繰り返して完成です。

最後に、文字のレイアウトを整えたり、調整して完成です。

【おまけ】色のカスタマイズ

ステップ2で作成したグラデーションの色を変更すると様々な色合いのエフェクトが作成できます。いろいろ試してオリジナルのテキストエフェクトを作成してみて下さい。

PSDファイルの入手と購入について

このチュートリアルで紹介したテキストエフェクトのPSDファイルが購入できます。

下記の『記事を購入』からお進み下さい。

PSDの内容について

■PSD見本

こちらのPSDにはPSD見本の通りの内容が含まれております。

■PSDファイルの説明

psdファイルのレイヤー構造は画像の様になっています。

１文字ごとにグループ化されています。
各グループ内の『テキストレイヤー』を自由にカスタマイズ可能です。

文字数がもっと必要な場合は、グループを複製してください。

※psdファイルで使用しているフォントについて：
使用しているフォントがご利用の環境にない場合がございます。フォントは全て「Adobe Fonts」を使っているので同じものをダウンロードしていただくか、任意のフォントに変更して活用ください。

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

• 「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を使って画像のサイズを揃える方法を3種類紹介します。

▼Photoshopで最新機能の使い方や、応用を知りたい方はこちらがおすすめ。

方法1.［生成塗りつぶし］を使って画像を揃える

Photoshopの「生成塗りつぶし」機能は、2023年7月に追加された新機能で、AI技術を活用して画像の足りない部分を自動的に生成することができます。この機能を使えば、画像の縦横幅を継ぎ足したり、サイズの異なる画像のサイズを合わすことが簡単にできます。

この方法はこんな方におすすめです

• 画像の足りない分を継ぎ足したい
• 拡大縮小では綺麗にならなかった
• 風景や背景を自然に仕上げたい

操作手順は下記の通りです。

1.仕上がりのサイズにカンバスを拡大する

画像をPhotoshopで開き、最終的な仕上がりサイズになるようにカンバスサイズを拡大します。今回は、仕上がりサイズを『w:1200px,h:840px』にします。

※カンバスサイズのショートカット：command＋option＋C / ctrl＋alt＋C

2.継ぎ足す部分を選択する

『選択ツール（M）』で画像の注ぎ足したい部分を選択します。最終的に選択されていれば、どの選択ツールを使用してもOKです。

3.[生成塗りつぶし]で画像の足りない部分を自動生成する

コンテキストタスクバーの『生成塗りつぶし』ボタン＞『生成』ボタンをクリックします。

本来は『プロンプト』を入力しますが、画像の足りない部分を補う程度はノープロンプトで処理してくれます。

コンテキストタスクバーが表示されていない場合は、下記の手順で表示します。

『ウィンドウ』＞『コンテキストタスクバー』

※コンテキストタスクバーはPhotoshop24.5以降の機能です。

自動生成結果は下の画像の通りになりました。これで、サイズを他の画像と揃えることが出来ました。

自動生成前と比較してもとても自然に、仕上がっています。

方法2.［コンテンツに応じた拡大・縮小］で画像の大きさを揃える

「コンテンツに応じた拡大・縮小」は、周囲のコンテンツに合わせて拡大・縮小する機能です。

通常の「拡大縮小」との違いは、周囲のコンテンツを考慮して拡大・縮小するため、画像の歪みが少なく、品質が保たれます。「生成塗りつぶし」機能より直感的に作業できる点がポイントです。

この方法はこんな方におすすめです

• 簡単に作業したい
• 生成塗りつぶしが使えない（古いverを使っている）

操作手順は下記の通りです。

1.仕上がりのサイズにカンバスを拡大する

画像をPhotoshopで開き、最終的な仕上がりサイズになるようにカンバスサイズを拡大します。今回は、仕上がりサイズを『w:1200px,h:840px』にします。

※カンバスサイズのショートカット：command＋option＋C / ctrl＋alt＋C

2.[コンテンツに応じて拡大・縮小]する

画像レイヤーを選択して、『編集』＞『コンテンツに応じて拡大・縮小』をクリック

必要な大きさになるように拡大します。

方法3.［画像のフィット］を使って自動処理で揃える

［画像のフィット］は、指定したサイズ（ピクセル数）に収まるように自動的に画像をリサイズする機能です。

こんな方におすすめです。

• サイズの異なる画像を簡単に指定サイズ以内に合わせたい
• 指定したサイズ以内に収まっていれば良い

操作手順は下記の通りです。

1.画像を用意する

サイズが異なる2種類の画像を、『1000px × 1000px』に収まるようにしたいと思います。

• 『1200px × 800px』→『1000px × 1000px』
• 『800px × 1500px』→『1000px × 1000px』

2.[画像のフィット]機能を選択する

サイズを変更する画像を開き、『ファイル』＞『自動処理』＞『画像のフィット』を選択する。

幅と高さのサイズを入力する。ここでは、『1000px × 1000px』と入力します。

幅と高さのどちらかが、指定の数値を超えている場合は、指定サイズになるように縮小されます。

今回の場合だと、『横幅が1000pxを超えている画像は横幅を基準に縮小』、『縦幅が1000pxを超えている画像は横幅を基準に縮小』されます。

注意点としては、指定サイズに収まるように縮小されるので、画像の比率によっては、横幅or高さが小さくなります。

ドロップレットを作成すると便利

『画像にフィット』はドロップレットを作成しておくと、Photoshopを開かずに複数の画像をまとめて指定サイズにすることが出来ます。

Photoshopのドロップレットの作成方法は以下の記事をご覧下さい。

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

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

design.kajyublog.com

2023.11.25

まとめ

Photoshopを使って異なるサイズの画像の大きさを合わせたり、画像の足りない箇所を自動生成してサイズを大きくしたりする方法を紹介しました。

以下に、用途に合った方法をまとめます。

• 背景の足りない部分を継ぎ足してサイズを変更したい → 方法1.［生成塗りつぶし］を使って画像を揃える
• 単純な画像なので、サクッと揃えたい → 方法2.［コンテンツに応じた拡大・縮小］で画像の大きさを揃える
• 複数の画像を指定サイズに収まるようにしたい → 方法3.［画像のフィット］を使って自動処理で揃える

最適な方法が見つかると幸いです。

Photoshopで最新機能の使い方や、目的別に応じた操作方法を知りたい方は下記の書籍が参考になります。

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

「自分で描いた絵を動かしてみたい」「簡単に手描きアニメを作ってみたい」

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

最近は、デジタル作画の普及に伴い、複雑な設定や専門知識がない初心者でも手軽にアニメーション制作にチャレンジできるソフトが増えてきました。

この記事では、Photoshop、Procreate、Fresco、CLIP STUDIO PAINTといった代表的なソフトを中心に、タイムライン機能やアニメーション機能の有無、価格、動作環境、サポート体制などを比較検討し、それぞれのソフトの特徴をわかりやすく紹介します。

手描きアニメ制作ソフトを選ぶポイント

アニメーションが制作できるツールと言っても、制作方法や使用感、作画機能などが異なっています。photoshopのように、元々はアニメ制作ソフトではないがアニメーション機能があるものやアニメ制作に特化したツールなどが存在します。

では、どのような点を考慮して選択すればいいのでしょうか。この項目では、手描きアニメ制作ソフトを選ぶ際のポイントを解説します。

1. タイムライン機能

アニメーション制作において、タイムライン機能は必須です。 フレームの追加、削除、並び替え、時間調整などが直感的に行えるか、使いやすさを確認しましょう。

タイムライン上で、フレームの再生速度や表示方法を細かく調整できるソフトを選ぶと、よりスムーズに作業を進めることができます。

2. 作画機能

快適に描画できるかどうかは、アニメーション制作の効率に直結する重要なポイントです。 特にブラシの種類については、ソフトにあらかじめ用意されているブラシの種類や質はもちろん、自分で自由にブラシを作成できるかどうかも重要なポイントです。

筆圧感知の精度、手ブレ補正機能などは大抵のソフトに標準搭載されていますが、実際に体験版などで試してみることをおすすめします。

3. オニオンスキン機能

オニオンスキン機能とは、前後のフレーム（コマ）を半透明で表示する機能です。

アニメーターが原画や作画をする時に、前に描いたイラストと今描いているイラストを交互にペラペラめくりながら動きを確認している様子を思い浮かべてみてください。 オニオンスキン機能は、まさにそのデジタル版です。

作画において、前に描いたイラストを確認しながら次のコマを描くのは必須です。 オニオンスキン機能の表示・非表示、表示するフレーム数、色の変更など、細かく設定できるソフトを選びましょう。

4. 価格

アニメーション制作ソフトは、無料で使えるものや有料のものがあります。無料ソフトの魅力は、なんといってもコストをかけずにアニメーション制作を始められる点です。

近年では無料でも高機能なソフトが増えてきており、初心者の方や趣味でアニメーション制作を楽しみたい方は気軽に試せる無料ソフトから始めてみるのもがおすすめです。

手描きアニメーション制作ソフト一覧

1. Photoshop

Photoshopは、画像編集やグラフィック制作機能が豊富な最も有名なツールですが、実は『アニメーション制作』にも使用できます。豊富なブラシセットやオリジナルブラシ作成が出来るのが特徴です。

タイムライン機能の他にフレーム（コマ撮り）アニメーションを作成できます。もちろんペンタブレットを使用した手描きのアニメーションを作成することができます。

▼主なアニメーション機能の特徴

• タイムライン、フレームによるアニメ作成
• 描画精度が高く描き心地が良い
• オニオンスキン機能あり

【Photoshop】アニメーションギャラリー

Photoshop 手書きアニメーションギャラリーは、手書きアニメーションの世界を探索するためのオンラインギャラリーです。手書きアニメーション、ロゴアニメーション、エフェクト、トランジションなど、Photoshopを使用して制作したアニメーションを提供。インスピレーション源として、新たなアイデアと技術を探求しましょう。手書きアニメーションの魅力を体験し、創造性を広げる一歩を踏み出す場所です。

design.kajyublog.com

2023.11.25

2. Procreate

Procreateは、iPad向けのイラスト制作アプリですが、アニメーション制作機能も搭載しています。直感的な操作で、初心者でも簡単にアニメーションを作成できます。

アニメーション制作における機能自体は豊富ではありませんが、Appleペンシルを使用した滑らかな描画感が特徴です。何より、持ち運びが可能なiPadによるいつでもどこでもアニメーションを描ける点がポイントです。

▼主なアニメーション機能の特徴

• フレームによるアニメ作成
• レイヤーを駆使した複雑なアニメーション制作には慣れが必要
• オニオンスキン機能あり

3. Fresco

Adobeが提供する描画・ペイントアプリです。Photoshopの描画関連のツールに特化しておりペイント、スケッチ、アニメーションを完全無料で制作できます。

Frescoは、ipadやiOS、Windows版で使用することができ、Photoshop以上に豊富なブラシがデフォルトで使用できます。また、Photoshopよりアニメーション機能が優れており、モーションパス通りにイラストを動かしたり、揺らしたり、跳ねさせたり、回転させたりの動きがワンタップで加えることができるのでおすすめです。

▼主なアニメーション機能の特徴

• フレームによるアニメ作成
• 簡単に動きを加えるモーションプリセットが豊富
• オニオンスキン機能あり

4. CLIP STUDIO PAINT

CLIP STUDIO PAINTは、豊富なブラシ、コマ割り、アニメーション機能など、漫画・イラスト制作からアニメーション制作まで幅広く対応したプロも使用するイラスト制作ツールです。

一番の特徴は、滑らかな描き味で自分好みにカスタマイズすることが可能なことです。アニメ制作においても多機能でアニメーションスタジオでも使用されている程優秀なツールです。ただし、プロが使用するということは初心者が手軽に使用するには複雑なことは注意が必要です。

▼主なアニメーション機能の特徴

• タイムラインパレットによるアニメ作成
• ライトテーブルやオニオンスキンなど、本格的なアニメーション制作が可能
• カメラワークなどの演出機能あり

5. OpenToonz

OpenToonzは、スタジオジブリが開発に携わったことでも知られる、フリーのアニメーションソフトです 。商用利用も可能なオープンソースソフトウェアで、豊富な機能とカスタマイズ性を備え、プロの現場でも使用されています。

プロの現場で使われるツールなため、アニメーション機能については、専門的なものが多く初心者向けではありません。しかし、日々機能がバージョンアップしているため、描画を助けてくれる機能やプロの現場で使われるツールを試してみたい方は使ってみても良いかもしれません。

▼主なアニメーション機能の特徴

• 商用アニメーション制作にも耐えうる本格的な機能
• エフェクト機能や、独自のパーティクルエフェクトシステムにより、多彩な表現が可能
• プラグインSDKを用いて機能を拡張できる

6. Krita

Kritaは、オープンソースで公開されている手描きアニメーションも作成できるペイントソフトです。Photoshopに似たようなのUIなので直感的に使用できると思います。また、日本語にも対応しており、日本語の公式マニュアルも用意されています。

アニメーション機能においても、オニオンスキン、タイムライン、フレーム管理など、手描きアニメーション制作に必要な機能が揃っています。

▼主なアニメーション機能の特徴

• Photoshopに似たフレームによるアニメーション制作
• キーフレーム間の動きをより細かく制御するグラフエディタ
• イラストに特化したブラシプリセット

7. Toon Boom Animation

Toon Boom Animationは、世界中の大手アニメーションスタジオで採用されている、アニメーション制作の業界標準ソフトです。レイアウトやコンポジットコンポジット、着彩、エフェクトなど本格的なアニメ制作が可能です。

ツールや使用感は他のアニメ描画ツールとは異なり、まさにアニメーション制作の現場で使われる用語や機能が多いため、手軽に使用したい方には向かないかもしれません。

▼主なアニメーション機能の特徴

• タイムシートおよびタイムラインベースのアニメ制作
• キャラクターや小物を「リグ」（骨組み）で動かすパペットアニメーション
• 風になびく髪や服の表現などが可能なデフォーマー機能

8. Pencil2D Animation

Pencil2D Animationは、シンプルで使いやすいインターフェースが特徴の、フリーのアニメーションソフトです。ベクターとラスターの両方の作画に対応しており、初心者にもおすすめです。

シンプルな機能設計で、低スペックのPCでも動作が軽快です。しかし、オニオンスキン機能やカメラやサウンドレイヤーなどアニメーションを手軽に描くためのツールは揃っています。公式サイトは英語ですが日本語でも利用可能です。

▼主なアニメーション機能の特徴

• タイムラインベースのアニメーション
• オニオンスキンの柔軟な設定
• シンプルなカメラワークを作れるカメラレイヤー

料金や対応OS別に比較するアニメーション制作ツール

この項目では、アニメーション制作ツールを料金や対応OSを比較した表を紹介します。

アニメーション制作におすすめなツールやアイテム

ツールやアプリを使った手描きアニメーション制作において、ソフトやツール以外にも以下のアイテムがあれば便利です。

ペンタブレット

ペンタブレットは、パソコンで絵を描く際に使用します。マウスよりも直感的に描画できるため、アニメーション制作には必須のアイテムと言えるでしょう。

液タブとの違いは、モニターサイズで作業出来ることと、安価なことです。液タブは大きいサイズは高価になり予算がかかります。イラスト以外にもデザインや映像編集などを行う方は、ペンタブレットを使うのが良いでしょう。

最近のペンタブレットは、安価でも筆圧感知に優れ反応速度も良いため無理に『Wacom Intuos Pro』などのプロ向けツールを買わなくても十分アニメ制作に使えます。

▼おすすめは、『ワコム ペンタブ One by Wacom Medium』です。wacom製で高性能ですが安価で購入可能です。（こちらは非ワイヤレス接続になります）

液タブ（液晶タブレット）

液タブは、液晶画面に直接描画できるペンタブレットです。紙に描くような感覚で描画できるため、より自然な線が描けます。より手書き感を重視する方は液タブがおすすめです。

また、液タブはサブモニターとしても利用できます。液タブでアニメーションを描き、メインモニターでイラスト資料や調べ物をするといった使い方もできます。

▼液タブは画面サイズが大きいほど作業スペースが広くなりますが、高価になります。サイズや性能面を考慮しておすすめは13～17インチです。

ペングローブ

ペングローブは、液タブやペンタブレットで描画する際に、手の摩擦を軽減するアイテムです。手の滑りが良くなり、線が描きやすくなります。

特に液晶タブレットやiPadを使用していると本体の熱や手の汗などによって画面が汚れ描き心地が悪くなります。ペングローブを使用すると軽減できる他、画面に触れる部分が指紋を拭き取りやすい生地となっているものもありおすすめです。

PCスタンド

PCスタンドは、主にノートパソコンの画面の高さを調整できるアイテムですが、液晶タブレットやiPadを使用してアニメーションを描く方は検討の余地ありです。

目線の高さに画面を合わせることで、姿勢が良くなり、長時間の作業でも疲れにくくなります。液タブやiPadを使う場合に画面が低すぎると描きづらい場合があるので、おすすめです。

▼おすすめは、『BoYata』から出ているスタンドです。液タブやiPadにもピッタリフィットするサイズ感です。高さ調整もできる上、しっかり画面位置が固定されるので描いているうちにスタンドが下がってくることもありません。デザインがシンプルでおしゃれなのもポイントです。

左手デバイス

左手デバイスは、キーボードの代わりに左手で操作するデバイスです。ショートカットキーなどを割り当てることで、作業効率をアップできます。

液タブやタブレットを使うと必ず「キーボードをどこに置こう？」と悩みます。左手デバイスであれば、液タブやタブレットの脇に配置できるためスムーズなキー操作が可能です。

▼多機能で、多くのキーを登録できる機器ほど高価になります。しかし、高価なものであっても使ってみて操作感が思っていたのとは違う場合があります。また、横に大きいサイズだとキーボードを横に置くのと変わらなくなるため、縦長のものが個人的にはおすすめです。

まとめ

無料で始めたい方は、『Fresco』がおすすめです。ただし、『Fresco』はレイヤーを多用した複雑な構成のアニメーション向けに作られておらずクオリティを求める方には物足りなくなるかもしれません。そういった方には、『Procreate Dreams』を次の選択肢としておすすめです。

プロのイラストレータを目指している方や、プロの現場で使われているツールに興味がある方は、『OpenToonz』や『Toon Boom Harmony』がおすすめです。『OpenToonz』は無料で利用できアニメーション制作機能も豊富なので、まずはこれを使ってみるのがいいでしょう。

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

• バナー広告のデザイン、もっと効率良く、サクサク進めたい！
• 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に置き換えてください）}

ファイル操作系

編集操作系

ツール選択系

レイヤー操作系

表示系

その他

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