えほう｜AIデザイン×Webデザイナー

GPT Image 2とNanoBanana、架空の高級スキンケア広告をイメージして比較しました。 結論：ブランド名の扱いやあしらいで差がつきます。 ※商品画像を添付でして生成すれば、商品差し替えも可能です ※曲線での2分割レイアウトの参考にどうぞ 1,2枚目：GPT Image 2（ChatGPT） 3枚目：Nanobanana プロンプトはリプ欄👇 GPT ・表現としては綺麗に生成されています。 ・また商品も出しているのでその点での訴求力はありそう ・ただそもそもですが、少し原稿の文字量が多いので、少し説明文を抑えて余白を出すと高級感がさらに出そう。 CTR訴求を置いていないので、 通常は「限定」「初回」「お試し」あたりのCTR要素を入れると クリック率は上がりそうです。 ※高級感は下がりますが NanoBanana ・ダメだと思っていましたが、割と頑張って生成してくれた。 ・GPTと違って、商品にブランド名が入らないので、この点でもGPT image2が気が利いている。 #画像生成AI #AI広告 #生成AI #デザイン

@loglogrog パンも素敵ですね！ヨーロッパの雰囲気とマッチしていて、ふんわり焼き立て湯気の表現も素晴らしいです。

焼きたてのパンから広がる、10秒のパリ旅行。

餅が横にも拡大していきますがプロンプトは以下 ※東京の部分と、キャッチのテキストを変えています。 -- [CITY] = 東京 [CITY_NAME_DISPLAY] = 東京 [FINAL_TAGLINE] = まだ見ぬ東京があなたを待つ [DURATION] = 10秒 [ASPECT_RATIO] = 16:9 炭火の上の焼き網に置かれた白い餅が、熱でぷくっと膨らみ、その膨らみが連続的に変形しながら、[CITY] のミニチュア都市へ育っていく10秒映像を作成してください。 映像は、黒い金属の焼き網の上に置かれた1つの餅のクローズアップから始まります。 餅は熱でゆっくり膨らみ、表面にはツヤ、伸びた皮、細かなシワ、やや半透明な質感、薄い焼き色、小さな焦げ目が見えます。 その膨らみは、別シーンに切り替わるのではなく、そのまま連続的に形を変えていきます。 道、屋根、橋、塔、寺社、電車、木々、川沿い、ローカルな街の要素が、すべて焼き餅の表面から自然に生まれてくるようにしてください。 生成前に [CITY] の象徴的な要素を見極め、それらを焼き餅でできた小さな街として再構成してください。 都市らしさは分かるようにしつつ、ランドマークを詰め込みすぎないでください。 最後の2秒: カメラがゆっくり引いて、完成した焼き餅の街を観光PRのように美しく見せます。 街から湯気がふわっと立ちのぼります。 そのあと、画面下に都市名「[CITY_NAME_DISPLAY]」を読みやすい字幕、またはシンプルな餅文字として表示してください。 その下に短いコピーとして、 「[FINAL_TAGLINE]」 を表示してください。 最後のフレームは、[CITY] に行きたくなる観光CMのようにしてください。 温かく、食欲をそそり、少し不思議で、記憶に残る映像にします。 重要: 変化はなめらかで連続的にしてください。 突然の切り替え、瞬間的な置き換え、ジャンプカットは禁止です。 最後の文字は最小限にし、読みやすく、正しく表示してください。 スタイル: リアルなマクロ料理映像、食べられるミニチュア都市ジオラマ、暖かい和食の光、浅い被写界深度、少し不思議だが本当に存在しそうな質感。 避けること: 風船のような質感、マシュマロ感、プラスチック玩具感、チーズのような伸び、普通のファンタジー都市、急な変化、ランドマークの詰め込みすぎ、読めない文字、都市名の誤字。

プロンプトお借りしました。 Gemini Omni での動画生成 餅が膨らんで「東京」になる！ 東京タワーや線路、陸橋、ビルなどニョキニョキと ミニチュア感と餅の質感が調和していて Gemini Omniの生成の精度が実感できます ※プロンプト東京版はリプ欄👇 このアイデアは素晴らしいです！

@loglogrog 発想が素敵ですね！お餅がミニチュアになって、しかもリアルさも融合していて。試してみます！

餅が膨らんで、10秒で京都になった！ Gemini Omniの動画生成、本当に凄いです。 炭火で焼いたお餅の表面から、なめらかにミニチュアの街が生まれていく、不思議で食欲をそそる映像。 リアリティを追求したプロンプトはリプ欄に置きます。ぜひ音付きで見てください👇 他の都市でも試せます！

@Aizawa_dev これはとても目から鱗な発想でした！試してみます！ バージョンログとかも取らせて、比較機能とかもいれたら、デザインやUI選定がはかどりそうです。

最近気付いたんですが、 UIの微調整でClaude Codeと延々会話するくらいなら調整用エディタを作らせた方が早い時があります👀 スライダーやカラーピッカーで実際の画面を見ながら調整してリアルタイムでアプリに反映もできる🙌 #個人開発 #アプリ開発 #claudecode

グッドパッチのUI/UXデザイナーがClaude Codeを使って ・フロント実装にも挑戦 ・要件整理、実装、レビューをAIで効率化 ・非デザイナーのUI品質チェックも仕組み化 などを行った話ですが、そこから デザイナーエリアからある意味越境したからこそ、あらためてデザイナーのコアである ・最後に体験を評価し、意思決定するのは人間 ・AI時代ほど、デザイナーの「審美眼」と「ユーザー理解」が重要になる という点が明確になったという内容です。 AIによる各担当の能力拡張で職種境界が無くなりつつある現状で、 大事にすべきもの・磨いておくべきもののが何かという事を教えてくれる良い例だと思います。 越境して見えてくるものは、個々のデザイナーのスキルセットや経験で変わると思いますので、 どんどん越境してみると良いと思います。 特にいろいろ実装が自分でできるのは楽しいですし。 #生成AI #ClaudeCode #UXデザイン #デザイン

【Figmaユーザーは全員使うべき】 先日リリースしたFigma のCheck Design 機能はかなり便利です。 ファイルを選択して、Check Designを実行すると Colors Dimensions（radiusや空きの設定） Typography Components をデザインシステム（ライブラリ）からレコメンドしてくれる 当たって無い設定はApplyボタンで一発反映！ ただし、色のレコメンドなどけっこうアバウトなところもあるので ノールックで適用するのは危険です。 念のため人間のチェックを入れる事をおすすめします。

ここで確認しました。 openai.com/ja-JP/index/co…

Sites 機能もそうですが、クリエイティブ制作プラグインというのが出ているので、デザイナー陣は念のためチェック推奨。Figma / Canva と連携できるようです。 サイトデザインというよりは、ヒーロー画像やサムネ、バナーあたりのワークフローかな。

X上で847回デザインが死んだといわれたのかは不明ですが、Figma からのデザインについての見解が出ていました。 どれくらい本気の見解かは不明ですが。デザインも死なないしデザイナーも死なない、という意味で理解するなら、そう思います。 比喩なのか英文表現でふざけているのかは、わかりにくいですが、挙げられている、ちょっとしたいろいろな場面（例えばメニュー、会議キャンセルの通知） デザイナーがチェックしているか、していないかで情報の読みやすさ、伝わりやすさは変わるので。 まだまだデザイナーがやるべきことはたくさんあります。 ーー 以下 訳： 私たちはみんなで、 「デザインは死んだ」と嘆いている。 Xによれば、今年だけでおよそ847回もそう言われているらしい。 それでもなお、 どれだけ何度「デザインは終わった」と宣言されても、 デザインは生きている。 デザインはあらゆる場所にある。 駅で「乗り過ごしたかも」と不安になったとき、 地下鉄の路線図がすっと理解できること。 「ソレルは野菜なのか、それとも新しいパスタの形なのか」と迷うときでも、 夕食メニューがちゃんと読めること。 そして、会議がキャンセルされたと知らせてくれる、 あの少しうれしい通知にも。 デザインは死なない。 それは、流行だから壊されるものでも、 新しい技術に置き換えられるものでもない。 デザインとは、 何かが「ちゃんと動くか」だけでなく、 それによって人がどう感じるかを大切にすることなのだ。 だから、デザインに乾杯しよう。 何度も「もう終わった」と言われながら、 何度もその予想をくつがえし続けるデザインに。

神降臨！ 先日の素敵なライブ動画の作り方が公開されています。 動画制作のハードルは劇的に下がっているので 今の時代はwebデザイナーも「動画だから、、」とか壁を作らずに こういうのはできるだけまず触って、新しい表現の幅を広げていくのをお勧めします。

・曲線での2分割レイアウト ・ゴールドのフレアや装飾のあしらい を制御できるのがポイントです。 またプロンプトで女性の向きや髪型を制御していないので 良い意味でガチャが楽しめます。 参考にして、試してみた感想を聞かせてください またプロフの「メディア」から過去作成の画像も公開中 （以下プロンプト本文） --- 以下のプロンプトで画像生成 日本語・英語を正確にすること === 掲載する文字 === - メインタイトル：EHOU LUMIÈRE - サブタイトル：Special Care Experience - キャッチコピー：触れるたびに、変わっていく - ボディコピー：肌が喜ぶ瞬間を、毎日のルーティンへ。 厳選成分が角層深くまで浸透し、 しっとりとした質感とツヤ感を一日中キープします。 - 会社名・ブランド名：EHOU LUMIÈRE - 注釈：※浸透は角層まで。※保湿によるうるおい・ツヤ感のこと。※効果には個人差があります。 概要 高級感のあるエレガントな広告バナーデザイン、左半分にシャンパンゴールドの背景と優雅に微笑む美しい女性、右半分は深い黒の背景、上部にエレガントなセリフ体の洗練されたブランドロゴプレースホルダー、中央に日本語テキスト用の洗練されたプレースホルダー、下部にラグジュアリーなスキンケア化粧品（エッセンスボトル、セラムのスポイトボトル、クリームジャー）の3点セット、大理石の円形スタンドの上に配置、全体にゴールドのきらめきと光のフレア、ラグジュアリーで洗練された雰囲気、プロフェッショナルなグラフィックデザイン、高解像度 【トーン＆マナー】 最高級感、ラグジュアリー、エレガント。大人の女性向けのハイエンドなスキンケア・コスメティックスを想起させる、洗練された都会的かつ艶やかな雰囲気。 【レイアウト構成】 左右非対称の分割レイアウト。左側に人物（メインビジュアル）、右側に情報を整理したテキストエリアを配置。画面を緩やかな曲線（弧）で左右に二分割した構図。 左側： ブランドのイメージを伝えるモデル（人物）を大きく配置。 右側： ブランドロゴ、キャッチコピー、商品（3点セット）を縦のラインに沿って整然と配置。 下部には商品を際立たせるための円形ステージ（トレイ）が置かれ、安定感を生み出しています。 【配色】 リッチなゴールド、漆黒（ディープブラック）、肌馴染みの良いシャンパンベージュの3色をベースにした高級感漂うカラーパレット。光と影のコントラスト（明暗差）が非常に強く、商品と人物にスポットライトが当たっているような立体感を演出しています。 【タイポグラフィの扱い】 ブランドロゴ領域： 伝統と洗練を感じさせる、細身の優美なセリフ体（明朝体）を最上部に大きく配置。 コピー領域： ロゴの下には小さめのスタイリッシュな英語サブタイトル。さらにその下には、可読性と美しさを兼ね備えた細身の日本語フォント（明朝体）のプレースホルダー。大小の文字サイズ（ジャンプ率）にメリハリがあり、余白を広く取ることで気品を持たせています。 【グラフィック・あしらい】 背景： 左側は美しいドレープ（光沢のある布）のようなゴールドのグラデーション背景。右側は重厚感のある黒。 境界線： 左右を分ける境界に、細く美しいゴールドの曲線ライン。 装飾： ロゴ上部にクラシックな飾り罫、商品周辺にはきらめく光の粒子（グリッター）と、高級感を底上げするレンズフレアの効果。 商品台： 黒い大理石風の円形スタンド。 【推奨パラメーター / アスペクト比】 --ar 1:1

GPT Image 2とNanoBanana、架空の高級スキンケア広告をイメージして比較しました。 結論：ブランド名の扱いやあしらいで差がつきます。 ※商品画像を添付でして生成すれば、商品差し替えも可能です ※曲線での2分割レイアウトの参考にどうぞ 1,2枚目：GPT Image 2（ChatGPT） 3枚目：Nanobanana プロンプトはリプ欄👇 GPT ・表現としては綺麗に生成されています。 ・また商品も出しているのでその点での訴求力はありそう ・ただそもそもですが、少し原稿の文字量が多いので、少し説明文を抑えて余白を出すと高級感がさらに出そう。 CTR訴求を置いていないので、 通常は「限定」「初回」「お試し」あたりのCTR要素を入れると クリック率は上がりそうです。 ※高級感は下がりますが NanoBanana ・ダメだと思っていましたが、割と頑張って生成してくれた。 ・GPTと違って、商品にブランド名が入らないので、この点でもGPT image2が気が利いている。 #画像生成AI #AI広告 #生成AI #デザイン

今ここまで出来る！というレベル感把握として絶対見ておいた方が良い映像です。 ショッピングモールのライブスペースから始まり、 モール内を歌いながら回遊 途中エスカレーターやエレベーターもあり ライブスペースに戻る ドローン的な多角的なアングルもあり しかも2分半の長さできれいな映像になっていて ここまでできるのか、という驚きのクオリティです。

Claude code を触ってみたい人にとって、個人的にわかりやすい記事でした。 また、初期段階でやるべき事の内容としては整理されていて実用的で素晴らしいです。 ただし、コーディングなどに慣れていないデザイナーやその他非エンジニアには、 Terminalやclaude.md、skill.md　も全て呪文に思えるので、 初心者用ではなく、ほんの少しだけ触ったことがある初級者レベルくらいの内容でしょうか （ファイル構成やskillの具体例も挙げられているので、実用性はかなり高い内容です） 個人的には、初心者は Terminal から入るとファイル構成が見えず何が起こっているかわからなくなるので、 ClaudeとCursor あたりを単月でも良いから課金して Cursorのエージェントに聞きながらセットアップするとラクです。 デザイナーがClaude code 使えるようになると Figma にデザイン起こしたり、Figmaからデザインシステム作ったり 画像系の生成サービスと連携して画像生成自動化したり、 記事作成自動化できたりと能力の幅が広がるので今後必須のツールです。

シズル感を出す上でいちばん効いたのは「トンマナ指定」の部分。 ここを変えるだけで雰囲気がガラッと変わるので、参考にしてください。 他にも多数バナー/サムネ事例とプロンプト公開中 （以下プロンプト本文） --- 以下のプロンプトで画像生成 日本語を正確にすること === 掲載する文字 === - メインタイトル：牛香燕カレー - サブタイトル：SPICY CURRY - キャッチコピー：あの味が、また食べられる。数量限定で復活！ - ボディコピー：牛肉をもっとおいしく食べるために生まれた、香り豊かなスパイスカレー。 - ポイント①：牛香燕肉飯にも合う！ - ポイント②：香燕カレーソース - 会社名・ブランド名：香燕（KAEN）監修 - 問い合わせ情報：テイクアウトできます - その他：※数量限定・なくなり次第販売終了／※写真はイメージです。 【概要】 食品の広告バナー、中央に半分ご飯と半分カレーで牛肉のスライスがトッピングされた大皿の俯瞰写真、マスタードイエローの質感のある布の背景に置かれている。右側にはクローブやカルダモンのようなホールスパイスが散らばっている。グラフィックレイアウトのオーバーレイ：右上に暗い背景の太字の縦書きテキストブロック、左下に六角形のバッジグラフィック、右下に円形のインセット画像バッジ、一番下に大きな横書きのメインタイトルテキストエリア。高コントラスト、温かみのある照明、食欲をそそる、豊かな色彩、スパイシーな雰囲気、プロの料理写真と力強いグラフィックデザインの融合、--ar 1:1 【トーン＆マナー】 力強く食欲をそそる、スパイシーで温かみのある雰囲気。シズル感を強調したダイナミックなデザイン。 【レイアウト構成】 中央にメインとなる料理の俯瞰写真を大きく配置。右上には縦方向の帯状テキストエリア、左下には六角形のアイキャッチ要素、右下には円形のサブ画像要素を配置し、視線が中央から周囲へと広がる構成。最下部には大きな横長のメインタイトルエリア。 【配色】 ベースカラーはスパイスを連想させる鮮やかなマスタードイエロー。料理のブラウンとホワイトがコントラストを生み出している。テキストエリアの背景にはダークブラウンや黒を使用し、文字の白を際立たせて視認性を高めている。 【タイポグラフィの扱い】 力強く太いフォントを中心に構成。右上の要素は縦書きの複数のブロックでリズム感を出しており、最下部のメインタイトルは最も大きなウェイトで安定感を与えている。 【グラフィック・あしらい】 背景には布地のようなテクスチャを使用。右端には実写のホールスパイスが散りばめられ、臨場感を演出している。左下の六角形や右下の円形など、幾何学的なバッジデザインが情報のメリハリをつけている。 【推奨パラメーター / アスペクト比】 --ar 1:1

シズル感・迫力・商品名訴求を狙うバナー GPT Image 2とNanoBananaで架空のカレーブランドを比較。 1,2枚目：GPT Image 2（ChatGPT） 3枚目：Nanobanana プロンプトはリプ欄👇 架空のカレーブランドでバナー作成しました。 料理なので、シズル感やインパクトを出しつつ、情報も伝えるという バランスが難しいケースです GPT はシズル感と商品名の迫力が強く、飲食広告として目を止める力は高い。 一方で情報量が多いのをうまくまとめているが、スマホでは細かいコピーが埋もれやすい。 この点で、CTRを上げるなら「数量限定復活」と「テイクアウト予約はこちら」をもっと大きくした方がよさそう。 （まとめ方はきれいですが） NanoBananaも一見シンプルなんですが、 変な余白があいたり、文字組みが変だったりバランス悪いですね。 情報量多いときのNanoBananaの弱さがでています #AI画像生成 #バナーデザイン #AIデザイン

手順とプロンプトはこちら ※Chat GPT で画像生成します １．変更したい画像をアップロード ２．以下のプロンプトを入れて画像生成 ---- 添付の画像を以下の雰囲気に変更 # 変更トンマナ 海外アニメ映画風の明るい3Dキャラクターイラスト。丸みのある形、表情豊かな顔、大きく動く眉と口、親しみやすいデザイン。ライティングは柔らかく、色はカラフル。怖い敵も少しコミカルで、ファミリー映画のような雰囲気。

【保存推奨】 バナーを海外アニメ風に変えて、クライアントを驚ろかそう。 数行のプロンプトを変えるだけで、テイストを一発変換できる。引用元のバナーが添付のように劇的に変身！ 海外アニメ風 / シネマ風 / ホラー風—— 皆さんはどのスタイルに変えてみたいですか？ （手順とプロンプトはリプ欄👇） #AIデザイン #画像生成AI

毎回違う髪型になるガチャ「ガチャ」を楽しみながら 気に入った組み合わせを見つけてください。 またプロフの「メディア」から過去に投稿したバナー/サムネ案も見れますのでご覧ください （以下プロンプト本文） --- 以下のプロンプトで画像生成 日本語を正確にすること === 掲載する文字 === - メインタイトル1行目：AIと一緒に、 - メインタイトル2行目：もっと楽しくつくろう。 - キャッチコピー：センスなし・知識なし・時間なし、でも大丈夫。 - その他：7/8(火) 12:00 YouTubeライブ配信 | プレミアムプラン1ヶ月無料 【概要】 水彩画風のアニメスタイルのWebバナーテンプレート、分割レイアウト。左側：ノートPCを持つ笑顔の眼鏡のアニメ風の女の子。右側：太字の大きなタイポグラフィ用の余白。白背景、ティール、黄色、ピンクのパステルカラー。浮かぶ3Dの星、ハート、紙吹雪、幾何学的な円。ポップでエネルギッシュな雰囲気、クリーンなUIデザイン。 【トーン＆マナー】 水彩画風のポップで親しみやすい、明るくカジュアルなアニメ調。 【レイアウト構成】 左右分割レイアウト。左側にキャラクターイラスト、右側に大きなメインテキストエリアを配置。 【配色】 白背景をベースに、ティールブルー、イエロー、パステルピンクをアクセントに使用。 【タイポグラフィの扱い】 太字のゴシック体をメインに、ジャンプ率（大小のメリハリ）を高く設定。 【グラフィック・あしらい】 背景に大小の円形パターン。3Dの星、ハート、紙吹雪、UIカード風の浮遊パーツを散りばめている。 【推奨パラメーター / アスペクト比】 --ar 16:9

GPTはポップ。NanoBananaはさみしい。 架空のYouTubeのライブ配信告知バナーを 水彩画風・アニメスタイルで作ってみた比較です。 1-3枚目：GPT Image 2 / 4枚目：Nanobanana プロンプト,2-4枚目はリプ欄👇 --- こういうスタイルのバナーって、 YouTubeのセミナー・勉強会・Vtuberイベントなどで 実際にニーズがあります。 AIで作れれば告知バナーの準備コストが大幅に下がるので配信者・主催者に知っておいてほしい使い方。 GPT Image 2： 水彩タッチとバナー情報の見やすさが両立している◎ Nanobanana： 描画の雰囲気は良いがテキストが黒一色になってしまった。 トンマナ統一のためテキスト装飾は必要。 なお髪型を指定しないと毎回違う髪型になるガチャが発生します。 皆さんはこういうスタイルのバナー、使いたい場面がありますか？ #AIデザイン #YouTube #バナーデザイン