テラ - Webデザイン図鑑

いいWebデザインの、いいところを。つくる人の視点で、すこしずつ紹介しています。見るだけで、つくるヒントになるものを。

[テラ - Webデザイン図鑑 @terasu_design]

これ、ただ世界中のいいサイトが集まってるだけじゃない…。

色・業種・サイトタイプ・LP・スマホ版まで、細かく絞り込めるのがすごいんです👨‍💻

しかも登録サイトが6000件以上あるから「美容室の参考だけ」みたいなピンポイント検索でも、ちゃんと複数見つかります！

みんなもぜひ活用してみてね〜

https://t.co/FqPoKnaReh

[テラ - Webデザイン図鑑 @terasu_design]

めっちゃセンスのいい日本WEBデザインを集めてるサイト見つけたから共有します…！

これ色・フォント・業種でも絞れるから、狙った雰囲気の参考が一瞬で見つかる📷

いつでも見返せるように保存もしておいてね！

https://t.co/gDv5DzVsdf

[テラ - Webデザイン図鑑 @terasu_design]

「アニメーション、コードほしい…」って人「Animista」がめちゃくちゃ良いです…！

いろんなCSSアニメーションを選んで、動きの速さや種類をいじるだけで、そのままコピペできるコードが手に入るんです👍️

WEB制作してるなら、実装もラクに☺️
ぜひ活用してみてね！

https://t.co/z73jz0HtMe

[テラ - Webデザイン図鑑 @terasu_design]

デザイン性があるだけで、あなたの見え方が変わる…。

「Slideland」は大手企業のデザイン性が高いプレゼン資料も複数あるので、是非参考に🙆

眺めるだけでも、あなたのデザイン力が更に一段階レベル上がります…！

[テラ - Webデザイン図鑑 @terasu_design]

「アニメーション、コードほしい…」って人「Animista」がめちゃくちゃ良いです…！

いろんなCSSアニメーションを選んで、動きの速さや種類をいじるだけで、そのままコピペできるコードが手に入るんです👍️

WEB制作してるなら、実装もラクに☺️
ぜひ活用してみてね！

https://t.co/z73jz0HtMe

[テラ - Webデザイン図鑑 @terasu_design]

このサイトで見つけた超センスがいいLP👨‍💻
デザイン性から統一感まですべてが洗礼されてる！

本当にみんなに見てほしい…！

https://t.co/44BT9Yor2e

[テラ - Webデザイン図鑑 @terasu_design]

デザインセンスのいい日本のLPだけ見たいなら「SANKOU!」が最高👍️

ギャラリーの王道SANKOU!の中でも、質の高いLPだけを厳選して見られるんです。

眺めるだけで勉強になる！
見返せるように保存してね！！

https://t.co/4HsHrybGxU

[コンドウハルキ｜7/15初出版/ズルいほど稼げるデザイナーの仕事術 @halukik_0520]

Fable5に丸投げで作った
『リキッドグラス』も結構いい感じ。

[テラ - Webデザイン図鑑 @terasu_design]

@slideland229 全体のバランスが美しいです！！

[テラ - Webデザイン図鑑 @terasu_design]

@keimaru25design う、うまい！勉強になります！！

[テラ - Webデザイン図鑑 @terasu_design]

デザインセンスのいい日本のLPだけ見たいなら「SANKOU!」が最高👍️

ギャラリーの王道SANKOU!の中でも、質の高いLPだけを厳選して見られるんです。

眺めるだけで勉強になる！
見返せるように保存してね！！

https://t.co/4HsHrybGxU

[テラ - Webデザイン図鑑 @terasu_design]

Webデザイナー向けのLP参考なら、「ランディングページ集めました」が地味に便利です！

国内のLPを16ジャンル・カラー別に整理してくれてて、狙った雰囲気のLPをすぐ見つけられます！

ニッチな業種のLPまで揃ってるから、ぜひ使ってみてね〜👍

https://t.co/S08VYpZIuX

[テラ - Webデザイン図鑑 @terasu_design]

日本語フォント選びが一気にラクになる
サイト「ためしがき」

好きな文字を打ち込むだけで、いろんな日本語フォントでまとめて表示してくれるんです。

「この言葉、どのフォントが合う？」がその場で見比べられるから、フォント迷子がなくなる！

https://t.co/KkFZ0fwR5k

[テラ - Webデザイン図鑑 @terasu_design]

ま、まって！！すっごいサイト見つけたので共有します！
「https://t.co/JzFzIfFR9d」がめっちゃいいです！

このサイトのすごいところは、掲載の『基準』にあります。
特別な予算や条件がなくても「よく考えられてるな…！」「見えにくい部分まで工夫されてるな…！」と感じるサイト、つまり“制作者が日々の仕事で参考にしやすいサイト“を優先して載せてくれてるんです。

レイアウトの整合性、情報の分かりやすさ、導線の設計、ビジュアルとのバランスなど。そういう「デザインも設計も本当に良いサイト」だけが集約されてる。

僕も実際に見てみたけど、参考になるサイトばかりでした…！
みんなもぜひ眺めてみてね〜〜👍️

[テラ - Webデザイン図鑑 @terasu_design]

一発で制作してみたけど制度めっちゃ高い〜〜！
予想以上の美男子になったけど、神プロンプトでした！

[ミヤマ @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デザイン図鑑 @terasu_design]

実際みんな使ってみた？
テラは「紅梅」「勿忘草」「灰桜」「白緑」とかめっちゃ好きだった！
よかったらみんなの好きな色も共有してね〜👍️

[テラ - Webデザイン図鑑 @terasu_design]

和の雰囲気を出した色を探すとき「NIPPON COLORS」が最高です！

日本の伝統色が250色まとまってて、色名もカラーコードも一発で分かるんです！

和風デザインの配色に迷ったら、まずここを見てください👍️

https://t.co/rbbLAifsyj

[テラ - Webデザイン図鑑 @terasu_design]

@shi_ma_ya_su お返事嬉しいです！！
こちらこそ素晴らしい指示文の共有、感謝です☺️

[テラ - Webデザイン図鑑 @terasu_design]

しまやすさんのプロンプトを使ってみました！
おしゃれなポスターが完成？！✨

[しまやす｜AI×デザインの先生 @shi_ma_ya_su]

SNSプロフを読み込ませて、
昭和レトロビール風ポスター作ってみた。
使い方はこんな感じ👇

[テラ - Webデザイン図鑑 @terasu_design]

@designnokoto これはかわいい😍

[テラ - Webデザイン図鑑 @terasu_design]

和の雰囲気を出した色を探すとき「NIPPON COLORS」が最高です！

日本の伝統色が250色まとまってて、色名もカラーコードも一発で分かるんです！

和風デザインの配色に迷ったら、まずここを見てください👍️

https://t.co/rbbLAifsyj