※本記事にはプロモーションが含まれています。
突然ですが「ホームページビルダー」というホームページ作成ソフト、知っていますか？（リンクはPRを含みます）
知名度はそこそこあると思いますが、今は使っている人があまりいない印象…。
私はホームページ作成というより、付属している「ウェブアートデザイナー」というソフトがお気に入りで、昔よく使っていました。
今は使わなくなったのでアンインストールしてしまったのですが、何といってもロゴを作るときにめちゃくちゃ重宝していたんですよね。
前置きが長くなりましたが、今回は
「ウェブアートデザイナーで作成したロゴは、フォトショップ（Photoshop）で再現できるのか」をテーマに試行錯誤していきます。
ウェブアートデザイナー、とても軽いソフトだったので低スペックパソコンでも問題なく動いたんですよね…なんで消したし…。
ホームページビルダー、今はあまり使う機会が減ってしまいましたが、付属ソフトが優秀だと思います。ウェブアートデザイナーだけ販売してほしいくらい。
今回試してみたロゴのイメージ
今回、Photoshopで再現できるか試したロゴはこんな感じです。
これ結構気に入っているんですよね。かわいい。自画自賛。
文明の利器、AIで聞いてみた
最近、何か聞きたいことがあればググるよりAIに頼ることが増えました。情報が正しいかどうかは別途確認が必要ですが、要約してくれるのがすごく便利なんですよね。
今回AIに聞いてみたときのプロンプト（指示文）はこんな感じにしました。本来のプロンプトはもっとちゃんとした文章にしたほうが良いのかもしれませんが…私はいつもこんな感じで適当です。
過去にウェブアートデザイナーのロゴ講座のページを作っていた時にこんなロゴの作成方法書いていたんだけど、フォトショップでもできるかな？ ウェブア消しちゃった・・
ちなみに、実際に中高生の時に拙いながらも「ウェブアートデザイナーの加工講座（ロゴ講座）」のページを作っていたことがありまして…。完全な自己満足ですが、作ったロゴはわりと気に入っているんですよね。お金をもらえるレベルではありませんが…。
とりあえずChatGPTに聞いてみた
まずは、最近雑談相手にもなってもらっている我らがChatGPTに聞いてみました。ちなみに課金しています。
最初はかけ離れたロゴになってしまったのですが、試行錯誤した結果、こんな感じになりました。
完全再現とまではいきませんが、「まあ近いかな」というところまで持っていけました。
作り方
ChatGPTに書いてもらった作り方を、ほぼそのまま載せておきます。何かに使えそうならどうぞ。
使用ソフト
- Adobe Photoshop
- 文字サイズ：200px
- 解像度：72dpi
※他サイズでも作れますが、今回の数値はこの条件で最適化しています。
① テキストを配置する
- 文字ツール（T）で好きな英字フォントを入力
- 色は薄めのピンク（例：#ffb7ea）
※太め＆角丸フォントがおすすめです（Nunito / VAG Rounded など）。
サンプルは「Nunito」を使用しています。
② テキストレイヤーにレイヤースタイルを追加
ぷっくりロゴは、
「ベベル」＋「内側光彩」＋「白枠」＋「外側の光」
の組み合わせで作ります。
以下の順に設定していきます。
③ ベベルとエンボス（ぷっくりの形を作る）
レイヤー → レイヤースタイル → ベベルとエンボス
スタイル：内側ベベル
テクニック：滑らかに
深さ：150％
方向：上へ
サイズ：26〜28px
ソフト：8〜10px
角度：120°
高度：30°
ハイライトモード：スクリーン（白）不透明度95％
シャドウモード：乗算（濃ピンク #ff6bb4）不透明度20％
ポイント：中央がぷくっと盛り上がる“艶”をここで作ります。
④ グラデーションオーバーレイ（文字の艶を出す）
描画モード：スクリーン
不透明度：35〜50％
角度：90°
スタイル：線形
グラデーション：
・上：白（#ffffff）
・下：薄ピンク（#ffb5e9）
ポイント：縦方向のハイライト（白の帯）が入って、キャンディ感が増します。
⑤ 光彩（内側）＝ つやつやの光沢
描画モード：スクリーン
不透明度：45％
色：白
サイズ：32px
範囲：75％
チョーク：0〜5％
輪郭：中央が盛り上がる山型（カーブ）
※輪郭のカーブが“ぷっくり感”に最重要です。
⑥ 白枠（境界線）は別レイヤーで作る（超重要）
今回のクオリティの決め手はここです。
テキストレイヤーを複製し、下のレイヤーに境界線のみを設定します。
境界線（白枠）
サイズ：8px
位置：外側
色：白
不透明度：100％
ポイント：白枠を別レイヤーにすることで、発光に負けずシャープに仕上がります。
⑦ 白枠レイヤーに軽いグラデを追加（馴染ませる）
白枠レイヤーを選択 → グラデーションオーバーレイ
描画モード：オーバーレイ
不透明度：20〜35％
角度：90°
グラデーション：
・上：白
・下：淡ピンク（#ffc8ec）
→ 白枠が立体部分に自然に溶け込み、完成度がぐっと上がります。
⑧ 光彩（外側）＝ ピンクのふわふわ光
描画モード：通常
不透明度：55〜70％
色：濃ピンク（#ff63d2）
スプレッド：10％
サイズ：45px
範囲：50％
ポイント：外側の光が強すぎると「ネオン」っぽくなってしまうので要注意。ふわっと淡く広がる光をイメージします。
次はMicrosoft Copilotに聞いてみた
職場でお世話になっているCopilotにも聞いてみました。完成はこんな感じです。
元の画像より色が濃いですね。
作り方
Copilotに書いてもらった作り方をそのまま載せました！
① 新規ドキュメントを作成
- サイズ：横800〜1200px、縦600px程度（用途に合わせて）
- 解像度：72dpi（Web用）
- カラーモード：RGB
- 背景：黒や濃いグレー（文字が映える色）
② テキストを入力
- ツールバーの「T（テキストツール）」を選択
- フォント：Nunito
- サイズ：200pt
- 色：濃いピンク（例：#ff3399）
- 文字を中央に配置
③ レイヤースタイルを設定
テキストレイヤーを選択 → 右クリック「レイヤースタイル」から以下を追加：
境界線（Stroke）
・サイズ：6〜8px
・位置：外側
・色：白
・不透明度：70％前後（少し透けさせると自然）ベベルとエンボス（Bevel & Emboss）
・スタイル：内側ベベル
・テクニック：滑らかに
・深さ：200〜250％
・サイズ：20〜30px
・ソフト化：5px
・ハイライト：白（スクリーン、100％）
・シャドウ：濃ピンク（乗算、50％）光彩（内側）
・色：白
・サイズ：10px
・不透明度：40％
・ブレンドモード：スクリーン光彩（外側）
・色：白
・サイズ：15px
・不透明度：50％
・ブレンドモード：スクリーングラデーションオーバーレイ
・ピンク系（上濃→中央白→下薄ピンク）
・スタイル：線形
・角度：90°
④ 境界線を別レイヤー化（ぷるん感強調）
1. テキストレイヤーを複製（Ctrl+J）
2. 下のレイヤーに境界線を適用
3. レイヤースタイルをラスタライズ
4. 「ぼかし（ガウス）」を1〜2pxかけて柔らかく
5. 必要ならグラデーションや光彩を追加
⑤ 仕上げ
- 背景に星やハートを入れるとポップに
- PNG（背景透過）で書き出してブログやバナーに利用
- レイヤースタイルを「プリセット保存」しておくと他の文字にも使い回せて便利
最後にGeminiに聞いてみた
最近アップデートがすごいと噂のGeminiにも聞いてみました。
完成品はこんな感じ。
色合いがやさしくなりました。
作り方
これもGeminiの回答をそのまんま貼り付けています。
準備：ドキュメントとテキストの設定
まず、ロゴのベースとなる準備を行います。
- 新規ドキュメントを作成（解像度：72dpi推奨）。
- テキストツールで作りたい文字（例：「SAMPLE」）を入力します。
- フォント：Nunito（または丸みのある太字フォント）
- サイズ：200pt
- カラー：濃いピンク（例：#FF6699）
STEP 1：ロゴ本体のぷっくり感と白い光沢を作成
テキストレイヤーを選択し、レイヤーパネル下の fx ボタンから「レイヤースタイル」を開き、以下の設定を適用します。
① ベベルとエンボス（ロゴの立体感と光沢）
これがロゴの「ぷっくり」とした丸みを出すための、最も重要な設定です。
| 設定項目 | 推奨設定 |
| スタイル | ベベル（内側） |
| テクニック | 滑らかに |
| 深さ | 200〜400％ |
| サイズ | 25〜40px |
| 軟化 | 10〜20px |
| ハイライトモード | スクリーン（白）、不透明度80〜100％ |
| シャドウモード | 不透明度0％（影を消して明るく見せる） |
| 光沢輪郭 | コーン（Cone）など、フチに光が沿うもの |
② 境界線（内側の白いフチ）
ぷっくりしたエッジに沿って、白いフチ（光沢）をつけます。
| 設定項目 | 推奨設定 |
| サイズ | 5〜8px |
| 位置 | 外側 |
| 塗りつぶしタイプ | カラー |
| カラー | 白（#FFFFFF） |
③ 光沢（オプション：ビニールのようなテカリ）
必須ではありませんが、少しテカリを追加したい場合に設定します。
| 設定項目 | 推奨設定 |
| 描画モード | オーバーレイ |
| カラー | 白（#FFFFFF） |
| 不透明度 | 10〜30％ |
これで、ベースの光沢感のあるぷっくりロゴが完成しました。
STEP 2：外側のピンクの縁取りと影を作成
STEP 1のレイヤーを複製し、外側のフチと影を付け足してロゴを強調します。
- STEP 1のテキストレイヤーを複製（Ctrl+J / Cmd+J）。
- 複製したレイヤーを、元のレイヤーのすぐ下に移動。
- 複製したレイヤーのレイヤースタイルを開き、STEP 1で設定した「ベベルとエンボス」や「光沢」はすべてOFFにします。
④ 境界線（外側の半透明なピンクのアウトライン）
この設定で、元のロゴにあった半透明なピンクのフチを再現します。
| 設定項目 | 推奨設定 |
| サイズ | 8〜15px |
| 位置 | 外側 |
| 塗りつぶしタイプ | カラー |
| カラー | 濃いピンク（STEP 1と同じ色） |
| 不透明度 | 60〜80％ |
⑤ ドロップシャドウ（ロゴ全体の影）
ロゴ全体を背景から浮き上がらせるための影です。
| 設定項目 | 推奨設定 |
| 描画モード | 乗算 |
| 不透明度 | 50〜70％ |
| 角度 | 120° |
| 距離 | 5〜10px |
| サイズ | 5〜10px |
できあがったロゴを並べてみた
あらためて、作成したロゴを並べてみましょう。
一番近いのはChatGPTですかね？Geminiは最初の色からちょっと違うけど、これはこれで可愛いです。
Copilotはグミ感がすごいですね。ポップなイメージを強調しているのかな？
まとめ：100％合致は難しいけど、指示次第でかなり寄せられる
今回は検証用ということで、そこまで具体的に指示を出さなかったので、各AIがそれぞれの解釈で作り方を提示してくれました。
きっと、もっと細かく条件や数値を指定すれば、また違った結果になったと思います。
それでも、どれもそれぞれ可愛いロゴができたので良しとします。
久しぶりにロゴを作れて楽しかったです！
コメント