SNS画像練習 #5自己採点 4.5/5

AIエージェントが変える開発フロー

X投稿用ビジュアル。タイポグラフィを主役に据え、126pxの「変える」をブリックテラコッタで強調。右側にPlan→Agent→Code→Deployのフロー図を配置し、テーマと視覚を直結させた。リソグラフ風版ずれとグレインテクスチャでアナログ感を演出。

HTML/CSSPlaywright
AIエージェントが変える開発フロー

デザインの意図

やましんのX投稿用SNS画像。AIエージェントによる開発フロー変革をテーマに、タイポグラフィ主役化パターン(study-design 2026-04-10)を実践。テック系トピックに対し冷たいブルーではなくブリックテラコッタ(#B8533A)を選び、クリーム背景(#F5F0E8)で温かみのある知的な雰囲気を目指した。右側のフロー図(Plan→Agent→Code→Deploy)でメッセージを視覚的に補強。リソグラフ風版ずれ(mix-blend-mode: multiply)とグレインテクスチャ(baseFrequency: 0.72)でデジタルの清潔さを意図的に崩した。

制作の詳細

1200×675px(X投稿用)。Space Grotesk + Noto Sans JPのフォントペアで前作のInterから差別化。hero-line2の「変える」を126px/font-weight:900/letter-spacing:-0.05emで文字をビジュアル要素化。有機的border-radius(48% 52% 55% 45%)の装飾円、微回転(rotate -0.4〜0.3deg)の各テキスト行で手作業感を演出。透明度は0.38/0.22/0.15/0.06と非均一な4段構成。

適用したデザインパターン

タイポグラフィ主役化(126px hero text)リソグラフ風版ずれ(mix-blend-mode: multiply)1色アクセント集中(ブリックテラコッタ#B8533A 3箇所)グレインテクスチャ(baseFrequency: 0.72)有機的border-radius微回転による手作業感

自己評価

強み

タイポグラフィの大胆な使い方、テーマと連動したフロー図、前作と異なるフォント・色・テクスチャパラメータの選択

改善点

写真/イラスト要素がない(タイポグラフィ主役化の意図的選択だが、バリエーションとして次回は試したい)