ケン@Webデザイナー

大阪のWEB制作会社で勤務。 茶道 / スイーツ / 日本酒

[古性 のち @nocci_84]

大好きなフリーペーパー「メトロミニッツ」。20代デザイナーの卵だったころ、通勤の途中でよくもらっていた。各ページそれぞれデザインがとにかく凝っていて、通勤途中のたのしみだった。そしてこうしてママになった今も、駅で見つけたらウキウキ小走りにもらいにいく。

今月号のテーマは「攻撃的有給消化の旅」。
冒頭の片野さんの文章もとっても良い。

通勤のお供におすすめ。
東京メトロ駅構内でもらえます📖

[村田俊英 / Designer @kookaking]

とくにInspirationのDeck galleryは
海外のピッチデックなどが見れるので
オススメ！👍

デザインに役立つ、無料リソース&ツール30選 #note https://t.co/TECXNIETJX

[ケン@Webデザイナー @shimoken_w]

@kawai_design ほしい

[トム・イシカワ（石川 智規） @tomonorix0805]

“デザイナーが磨くべきは、手ではなく目になっていく”

至言

[ミヤマ @mmmiyama_D]

情報が多いと破綻しやすいので、シンプルにヘッダーとフォロワー数くらいまでのスクショを添えるのがオススメです😆
👇
あなたは、一流の広告クリエイティブディレクター、アートディレクター、ファッションフォトグラファー、エディトリアルデザイナー、ブランドデザイナー、UXデザイナー、マーケターです。

さらに、日本語タイポグラフィ専門の「日本のタイポグラファーエージェント」として、
コピー、タイトル、ロゴ風タイポグラフィ、文字組み、字間、行間、縦組み・横組み、長体・平体、アウトライン文字、余白、視線誘導を厳密に設計してください。

添付されたSNS投稿・スクリーンショット・LP・画像・イラストをもとに、
内容、言葉づかい、温度感、ターゲット、読者の欲望、売れる理由、ブランドの空気感、配色、感情設計を読み取り、
それをもとに、実写の美男・美女を起用した高予算エディトリアル広告ポスターを生成してください。

最重要目的は、
「きれいな広告」ではなく、
スマホで見た瞬間に手が止まり、
“なんか気になる”
“おしゃれ”
“この世界観好き”
“この先を見たい”
と思わせることです。

目指すのは、
日本の都市型ファッション広告、
感度の高いカルチャー誌の特集扉ページ、
商業施設のシーズンキャンペーン広告、
ハイセンスなWEBマガジンのキービジュアル、
この4つを融合したような、明るく、華やかで、洗練されたエディトリアル広告ポスターです。

ただし、既存の広告、雑誌、ブランド、作家、デザイナーの構図や表現をコピーしないでください。
参照するのは表層ではなく、
「写真と文字の衝突」
「明るい高彩度の空気」
「ファッション性のある人物演出」
「モダンでロゴのような日本語タイポグラフィ」
「色面と装飾による記憶に残る画面設計」
「一瞬で手が止まる広告設計」
です。

────────────────────
【入力画像の読み取り】
────────────────────

添付画像から以下を内部で分析してください。

1. 投稿・スクショの主題
2. 誰に向けた内容か
3. 読者が抱えている欲望・不安・憧れ
4. 商品・サービス・投稿者の魅力
5. 言葉づかいの温度感
6. 既存画像の配色傾向
7. 似合う広告トーン
8. 最も強く打ち出すべき感情
9. 見た人に起こしてほしい行動
10. 画面内で最初に読ませるべきコピー
11. 写真に変換したときに最も映える人物像
12. 使うべきポイントカラー
13. 使ってはいけない安っぽい表現

分析結果をそのまま説明文として画面に入れず、
写真、配色、タイポグラフィ、余白、構図、衣装、光、装飾に変換してください。

────────────────────
【絶対に避ける失敗】
────────────────────

以下のような失敗は絶対に避けてください。

・暗い室内オフィス写真
・グレー背景だけの沈んだ画面
・コワーキングスペース風の無難な写真
・机に座っただけのビジネスポートレート
・普通のシャツ、普通のブラウス、普通の仕事服
・白い大きな文字を左に置いただけのベタ打ち
・LPのファーストビュー風
・女性起業家のプロフィール画像風
・講座広告、情報商材広告、ニュースレター広告っぽい画面
・写真と文字が分離したレイアウト
・安全すぎる左右分割構図
・ブランドカラー1色だけに頼った単調な画面
・おしゃれだが記憶に残らない無難な広告

このポスターは、単なる「美人＋コピー＋ブランドカラー」ではありません。
写真、色、文字、装飾、余白が衝突して、ひとつの強いビジュアル体験になるようにしてください。

────────────────────
【実写写真への変換ルール】
────────────────────

添付画像がイラスト、図解、SNSスクショ、Canva風デザイン、LP、文字中心の画像であっても、
最終出力は必ず「高品質な実写広告写真」を中心にしてください。

人物は、ターゲットや世界観に合わせて、
洗練された日本人または東アジア系の美男・美女モデルを起用したように見せてください。

実在の有名人、既存モデル、特定の人物に似せないでください。
あくまで架空の広告モデルとして生成してください。

人物は過度にAIっぽくせず、
実在の広告撮影のような自然な表情、肌、髪、姿勢、服の質感にしてください。

ただし、人物を単に美しく見せるだけでは不十分です。
人物のポーズ、視線、衣装、髪型、靴、小物、身体の角度まで含めて、
画面全体のグラフィック要素として設計してください。

写真は、
高予算のファッション広告、
都市型キャンペーンビジュアル、
雑誌の巻頭特集、
商業施設のシーズン広告
のような完成度にしてください。

安いストックフォト風、量産型インフルエンサー写真、情報商材広告風、AI美女風、過度な美容広告風にはしないでください。

────────────────────
【光・明るさ・空気感】
────────────────────

画面は明るくしてください。

暗い室内、曇ったグレー、重い影、沈んだトーンは禁止です。

以下のいずれかを内容に合わせて選び、
明るく、抜けのある広告写真にしてください。

・屋外の強い自然光
・白飛び寸前のハイキーなスタジオ光
・青空を感じる爽やかな日差し
・商業施設や街中の明るい反射光
・色面背景に強い照明を当てたファッション撮影
・夏の広告のような高彩度で抜けた光

影はあってもよいですが、暗く沈ませないでください。
写真全体に、明るさ、清潔感、鮮度、華やかさ、都会的な高揚感を持たせてください。

────────────────────
【ファッションスタイリング】
────────────────────

人物のファッションは、普通のビジネス服にしないでください。

添付スクショの内容に合わせて、
個性的で、現代的で、広告映えするスタイリングにしてください。

以下の要素を必要に応じて組み合わせてください。

・鮮やかな色のジャケット、シャツ、ワンピース、セットアップ
・変形シルエットのトップス
・カラーソックス
・個性的な靴、サンダル、スニーカー
・大きめのアクセサリー
・印象的なメガネ、サングラス
・色の効いたバッグ、小物、文具
・少しだけクセのあるヘアメイク
・スクショ由来のポイントカラーを拾った衣装

ただ派手にするのではなく、
「この人の世界観がある」と一瞬で伝わるスタイリングにしてください。

服の色は、背景色、タイポグラフィ、装飾色と連動させてください。
衣装が画面の主役カラーまたは差し色として機能するようにしてください。

────────────────────
【配色】
────────────────────

配色は添付スクショから抽出してください。

ただし、スクショの色をそのまま使うのではなく、
プロのアートディレクターとして、
より洗練された広告向けの配色に再設計してください。

基本は以下の構成にしてください。

・メインカラー 1色
・サブカラー 1色
・蛍光または高彩度のアクセントカラー 1色
・小さな差し色 1色
・ニュートラルカラー 1〜2色

重要なのは、ポイントカラーを必ず入れることです。
画面のどこかに、視線を止める鮮やかな色を入れてください。

例：
・鮮やかなブルー
・ベビーピンク
・蛍光イエロー
・黄緑
・オレンジ
・赤
・ターコイズ
・ショッキングピンク

ただし、色を増やしすぎないでください。
色数は整理しながら、画面の記憶に残る色の衝突を作ってください。

配色は、
高彩度でも下品にしない。
淡色でも弱くしない。
大人っぽいけど地味にしない。
かわいいけど甘すぎない。
売れるけど情報商材っぽくしない。

スクショがカラフルな場合は、
色数を整理して、上品な広告配色に変換してください。

スクショが地味な場合は、
内容に合う範囲で、記憶に残る差し色を必ず追加してください。

色は背景、衣装、タイポグラフィ、色面装飾に連動させ、
写真と文字が同じ世界にあるようにしてください。

────────────────────
【タイポグラフィ】
────────────────────

日本語タイポグラフィを最重要要素として扱ってください。

日本のタイポグラファーエージェントとして、
添付スクショの内容から最も強い言葉を抽出し、
広告ポスターとして美しく成立するメインコピーに再構成してください。

メインコピーは、
短く、強く、記憶に残る言葉にしてください。

重要：
メインコピーのベタ打ちは禁止です。
白い太字文字を普通に並べただけの表現は禁止です。
既存フォントをそのまま置いたような文字は禁止です。

日本語は、ロゴのように設計されたモダンなタイポグラフィにしてください。
単なるテキスト配置ではなく、
文字そのものがビジュアルの主役になるようにしてください。

文字は以下の技法を内容に応じて組み合わせてください。

・巨大アウトライン文字
・極太ゴシックのロゴ風タイポ
・長体ゴシックのシャープな都市型タイポ
・一部の文字だけ巨大化
・縦組みと横組みのミックス
・画面をまたぐ文字配置
・人物や身体に文字を重ねる
・文字を画面端で切る
・文字の一部を色面や装飾で隠す
・字間を広めに取ったサブコピー
・小さな欧文を添えた雑誌風の情報設計
・タイトルをロックアップ化し、記号のように見せる
・可読性を補うための小さな再掲コピー

メインコピーは、読むためだけでなく、
画面を構成するグラフィック要素として扱ってください。

文字は写真の上にただ置くのではなく、
人物の身体、視線、余白、背景の色面、装飾と関係を持たせてください。

読めない文字、崩れた日本語、意味不明な英語、雑なフォント、テンプレート感のある文字配置は禁止です。

ただし、メインタイポは多少大胆でよいです。
「読めるけれど、ただの文字ではない」
「文字そのものが広告の印象として残る」
状態を目指してください。

────────────────────
【構図】
────────────────────

スマホSNSで見ても一瞬で止まる構図にしてください。

安全な左右分割レイアウトは禁止です。
人物を右、文字を左に置いただけの構図は禁止です。
下に斜め帯を入れただけのLP風レイアウトは禁止です。

以下のいずれかを、内容に合わせて選択してください。

A. 巨大タイポ × 実写人物
人物写真の上に、巨大な日本語タイポを大胆に重ねる。
文字と人物が衝突するような、広告らしい緊張感を作る。

B. ハイキー色面 × ファッションポートレート
明るい色面背景、強い照明、個性的な衣装で人物を撮影し、
文字をポスターの構造として重ねる。

C. 都市型キャンペーン
街、駅、ビル、商業施設、青空、カフェ、歩道橋、屋上などを背景に、
人物と文字をポスター的に配置する。
都会的で行動したくなる空気を作る。

D. 雑誌特集扉ページ
人物のポートレートと、縦組み・横組みの文字を組み合わせる。
カルチャー誌やライフスタイル誌の巻頭ページのように見せる。

E. 色面グラフィック融合
写真の上に、丸、帯、余白、切り抜き風の色面、アウトライン文字を重ねる。
ただし装飾は少なく、意味のある形だけにする。

F. 反復・分割構図
同じ人物や同じシーンを上下または左右に反復させ、
雑誌的・ポスター的なリズムを作る。
単なる写真1枚ではなく、紙面としての面白さを作る。

構図には必ず、どこかに「違和感」を入れてください。
違和感とは、奇抜すぎることではなく、
視線が一瞬止まるズレ、重なり、切れ、反復、余白、色の衝突のことです。

────────────────────
【装飾・色面】
────────────────────

装飾は多すぎないようにしてください。
ただし、無難で寂しい画面にもしてはいけません。

丸、帯、ライン、吹き出し、フレーム、穴あき形状、アウトライン図形、切り抜き風の色面などを、
内容に合わせて少量だけ使ってください。

装飾は余白埋めではなく、
コンセプトを翻訳するために使ってください。

例：
・学びなら、ノート、付箋、線、図形、余白を抽象化
・AIなら、グリッド、カーソル、ウィンドウ、光の反射を抽象化
・デザインなら、トンボ、余白、カラーチップ、文字組みを抽象化
・暮らしなら、日用品、布、紙、窓の光を抽象化
・キャンペーンなら、チケット、封筒、カード、リボンを抽象化

装飾、色面、タイポグラフィは、写真の上にただ乗せるのではなく、
人物や背景と絡ませてください。

────────────────────
【感情設計】
────────────────────

このポスターは、情報を説明するためではなく、
見た人の感情を動かすために作ってください。

添付スクショの内容に応じて、
以下の感情のうち最も合うものを中心に設計してください。

・憧れ
・安心
・高揚感
・発見感
・知的好奇心
・自分ごと感
・少し背伸びしたくなる感じ
・かわいいけど甘すぎない感じ
・都会的で洗練された感じ
・今すぐ見てみたい、受け取りたい、申し込みたい感じ
・明るいのに少し引っかかる感じ
・品があるのに退屈ではない感じ

安っぽい煽り、不安を過剰に刺激する表現、情報商材っぽい強調、過度なキラキラ感は禁止です。

────────────────────
【入れる要素】
────────────────────

以下を画面内に自然に入れてください。

・メインコピー
・サブコピー
・ブランド名または企画名
・必要に応じた日付、CTA、キャンペーン情報
・小さな英字サブコピー
・添付スクショから抽出した世界観に合う象徴的なビジュアル要素
・美しく設計された日本語タイポグラフィ
・高品質な実写人物写真
・スクショ由来の洗練された配色
・必ず1つ以上の鮮やかなポイントカラー
・個性的で広告映えするファッションスタイリング

ただし、情報を詰め込みすぎないでください。
スマホで見たとき、最初の1秒で読ませる文字は1〜2要素に絞ってください。

────────────────────
【禁止事項】
────────────────────

以下は禁止です。

・Canvaテンプレート風
・情報商材バナー風
・LPのファーストビュー風すぎる画面
・安いストックフォト風
・AI美女感の強い不自然な人物
・顔や手の破綻
・暗い室内オフィス
・グレー背景だけの沈んだ画面
・普通のビジネス服
・ただ机に座っているだけの人物
・白文字のベタ打ちタイトル
・既存フォントを置いただけのタイポグラフィ
・過度にキラキラした装飾
・読めない日本語
・意味不明な英字
・ただ文字を並べただけのデザイン
・スクショの構図をそのままコピー
・既存広告や雑誌表紙の模倣
・写真と文字が分離した素人っぽいレイアウト
・過剰な情報量
・古いチラシ風
・地方イベント告知風
・美容クリニック広告風
・怪しい副業広告風
・無難すぎて記憶に残らない広告

────────────────────
【セルフチェック】
────────────────────

生成前に、内部で以下を必ずチェックしてください。

1. 画面は暗くないか
2. 光に明るさと抜け感があるか
3. ポイントカラーが効いているか
4. ファッションが普通すぎないか
5. タイトル文字がベタ打ちになっていないか
6. 日本語タイポグラフィがロゴのように設計されているか
7. 写真と文字が分離していないか
8. LP風・情報商材風になっていないか
9. スマホで見て一瞬で手が止まるか
10. 「きれい」だけでなく「なんか気になる」違和感があるか

問題がある場合は、出力前に内部で改善してください。

────────────────────
【仕上げ品質】
────────────────────

最終的に、
一流広告代理店のアートディレクターが制作したような、
高予算で洗練された実写エディトリアル広告ポスターにしてください。

写真は明るく、光が美しく、肌と服の質感が自然で、構図に緊張感があること。

タイポグラフィは日本語の文字組みとして美しく、
ロゴのように記憶に残ること。

配色は添付スクショを起点にしながら、
広告として品があり、スマホでも目を引くこと。

ポスター全体に、
「おしゃれ」
「明るい」
「信頼できる」
「世界観がある」
「見たことがありそうで、でも新しい」
「この先を知りたい」
と感じる完成度を持たせてください。

縦長4:5。
SNS広告・Instagram投稿・X投稿画像に適した比率。
高解像度。
明るい実写広告写真。
日本語タイポグラフィ重視。
エディトリアルデザイン。
都市型カルチャー広告。
ファッション広告品質。
ポイントカラー必須。
ベタ打ちタイトル禁止。
暗い室内禁止。
普通のビジネス服禁止。

[ケン@Webデザイナー @shimoken_w]

@akn_don 特典ください！

[あかね｜エンシエラ CEO & RELAY LABO @akn_don]

【お待たせいたしました✨】
330名以上の方に
ご応募いただきました🙇‍♀️

わたしのFigma生データ付き
Xポストバナーアーカイブ集を
再配布します✨

AI時代に淘汰されない
実務に強いデザイナー育成サロン
RELAY LABO近日再オープン記念🎉
来週から無料相談も開始します☺️
またみんなと話せるの楽しみ！

[あかね｜エンシエラ CEO & RELAY LABO @akn_don]

無料プレゼント🎁✨
第2弾応募開始します。

今回は2025年12月に投稿した
デザインのまとめと一部Figmaデータを
配布します🤲

欲しい方はフォローした後に
リポストとコメントお願いします🙇‍♀️

今回も頑張って作ったのと
4/15〜始めるサロンの情報も
載せてますので
もらってくれたら嬉しいです！

[Frostify @Frxstify]

Designers!

I made a pack filled with leaks, glows, and flares!

Today I’m giving it away for FREE for the next 24 hours!

If you want it, like and reply “glows” and I’ll shoot you the link!

[Alex Tudun @AlexTudun]

One of the best account to follow as a designer, hands down.

[ケン@Webデザイナー @shimoken_w]

@akn_don いつも投稿見て学びになってます✨
ぜひいただきたいです！

[こぎそ @kgsi]

https://t.co/CHsyXEsHar

[仁井田 | 中庸 @noriniita]

宿むけnote。自身でも宿立ち上げ〜運営をやり、今は旅館の価値を世界に広める活動をされてる大崎さん。
その宿集客全ノウハウnoteで一番好きなのは以下。

＝＝＝＝
宿の本質はサービス（食事・お風呂・部屋・接客など）であり、価値があるからこそコミュニケーションが効くと考えています。

無理に盛って集客しすぎると、
誇大広告 → 集客過多 → サービス低下 → 口コミ悪化 → 負の遺産が溜まる
という悪循環が起きます。ここだけは本当に注意してください。
＝＝＝＝

宿向けnoteとなってますが、「宿」の部分を別の商品に変えればほとんどの分野で使える内容だと思ってます。おすすめです。

ティザーサイトの部分、企画、ライティング、私も携わらせていただきました！私は私でこれからも頑張りやす。

[ケン@Webデザイナー @shimoken_w]

@dezainaz_ceo イメージ

[しょうへい｜デイトラ代表 @showheyohtaki]

この記事、ぜひ一読しておくべきです。
（Xのアルゴリズムに最適化されたフックで、反感を買いやすい書き方になっているのが勿体無いなと思いましたが...）

AIの進化によって「まずデザインを作り、認識を合わせてから実装」のワークフロー自体が変わってきています。例えば👇

① LP制作
【Before】
ワイヤー作成 → Figmaでビジュアルデザイン → コーディング → 本番反映。

【After】
テキスト要件だけ渡してAIにLPを直接実装させる → 実ページを見ながら文言・デザインを微修正。

②画面デザイン
【Before】
Figmaで画面デザイン → 関係者で認識合わせ → その後に実装。

【After】
Claude Codeなどで先に動くUIを生成 → 触りながら認識合わせ＆デザイン微調整。

③ デザインシステム
【Before】
Figmaでコンポーネントを作成・整理 → それを見ながらエンジニアがコードに落とす。

【After】
デザインルールとdesign tokens（色・余白・タイポグラフィなど）をmdに定義 → AIがそれを元にコンポーネントコードを生成し、デザイナーもコード側を直接調整。

④ モーション・インタラクション
【Before】
Figmaやプロトタイピングツールでモーション案を作る → 実装側がそれを再現。

【After】
「どう動いてほしいか」をmdやテキストで記述 → AIがその説明からアニメーションのコードを生成。

⑤ ブランド改定
【Before】
ブランドガイドライン更新 → Figmaの全画面を修正 → 実装も追随して修正。

【After】
ブランドルールをmd/design tokensとして更新 → AIがコンポーネントと画面スタイルを一括で再生成。

--------------------------

こんなふうに、AIの進化によって「まずデザインを作ってから実装」という前提そのものが崩れつつあります。

これからは、コードとテキスト（md・design tokens）を起点に、少人数のチームがAIと一緒に「先に動くもの」を作り、触りながら認識合わせとデザイン調整をしていくワークフローが主流になるでしょう。

一見デザイナーの仕事を奪うようにも見えますが、見方を変えれば「手を動かす工程」をAIに任せて、本来デザイナーがやるべきリサーチ・コンセプト設計・体験全体の設計といった、よりクリエイティブで本質的な仕事に集中できるようになる転換期でもあります。

だからこそ、デザイナーもClaude CodeやGemini、Antigravityなどのツールを積極的に触り、「自分の創造性を、より効率的に発揮する方法」を早めに体感しておくことが重要だと思っています。

[村田俊英 / Designer @kookaking]

📝フォントラボ

THE SPOTLIGHT | 音更電設
https://t.co/ogXPTmlXD1

欧文フォント『Albert Sans』
・デンマークのデザイナー Andreas Rasmussen によって設計され、Google Fonts で公開されている現代的な ジオメトリック（幾何学的）・サンセリフ
・20世紀初頭の北欧、特にデンマークの街頭サインなどに見られるタイポグラフィからインスピレーションを得ており、「クリーンな機能性」と「どこか温かみのある北欧モダン」 が絶妙にブレンドされている
・Futura のような厳格な幾何学性を持っていますが、文字の懐（ふところ）がわずかに広く、視覚的な「硬さ」が取り除かれている。これにより、モダンでありながら親しみやすい印象を与える
・非常にニュートラルでありながら、そこはかとなく漂う「洗練された北欧感」が、質感を一段階引き上げる

日本語フォント『Noto Sans JP』
・現代の日本のウェブサイトやアプリケーション設計において、事実上の「標準（デファクトスタンダード）」としての地位を確立している
・直線的なクリーンさと、筆の運びを意識したわずかな曲線が共存しており、誠実でニュートラルな印象を与える書体
・施工実績や事業紹介の見出しに太いウェイトを使うことで、インフラを担う企業としての「力強さ」と「確信」をユーザーに印象付ける
・このサイトのように、line-height（行送り）を 1.7〜2.0 程度と広めに取る ことで、専門的な内容であっても圧迫感を与えず、ユーザーが「じっくりと信頼を確認できる」余裕を生み出すことができる

[山口翔平｜アートディレクター @yamaguchidesign]

1/10のジンフェスで販売した「効率厨デザイナーのイラレ魔改造時短術50」のデジタル版を販売開始しました！

山口の自作イラレスクリプトや、便利だけどあまり知られていないデフォルト機能などたくさん盛り込んだ効率爆上がり本です！
https://t.co/T1jgmMKR0j

[こぎそ @kgsi]

UIデザインのインスピレーションを探すとき、Dribbbleだと「コンセプト止まり」のものが多くて、実際にプロダクションで使われてるかわからない問題がある。

「Spotted in Prod」はその名の通り、本番環境で動いてるiOSアプリのUIだけを集めたサイト。「実装されて、ユーザーに届いてるデザイン」だけが並んでるのが信頼できる。

[エムハンド 広報 @mhand_PR]

✍️M-HAND DESIGN FORMAT✍️

📌ボタンデザインまとめ vol.5
--
ボタンはユーザーを自然に導き、成果を左右する重要要素。色や形、余白の設計次第でクリック率も大きく変わります。当社の制作実績から様々なボタンデザインをまとめました。
--
過去の投稿はリプライで👇

[【公式】Solomaker@個人開発で稼ぐ知見が集まるサイト @Solomaker_dev]

https://t.co/zecYB2r7Ca