バナー・広告練習 #16自己採点 4.1/5

夏のデスクワーク快適化 バナーセット

ポテイモブログ用「夏のデスクワーク快適化」プロモーションバナー3サイズセット。テラコッタ×クリームのウォームパレットで夏の温もりを演出し、CSSキーボード・マウスアイコンでガジェット感を表現。

HTML/CSSPlaywright
夏のデスクワーク快適化 バナーセット (1/3)
夏のデスクワーク快適化 バナーセット (2/3)
夏のデスクワーク快適化 バナーセット (3/3)

デザインの意図

ポテイモブログのPC周辺機器カテゴリ向け夏季プロモーションバナー。前回のクールティール系から一転、テラコッタ(#D4654A)とクリーム(#FFF8F2)のウォームパレットで夏の温かみを表現。Outfit+Zen Maru Gothicのフォントペアリングで親しみやすさと読みやすさを両立。リネン風テクスチャと有機的ブロブで人間的な温かみを加えた。

制作の詳細

3サイズ展開: 800x200(ブログ内バナー)、300x250(ミディアムレクタングル)、728x90(リーダーボード)。各サイズで情報階層を最適化。800x200は斜めカットの大胆な構図、300x250は曲線セパレーターと数字フォーカス、728x90はコンパクトな横並びレイアウト。共通CTAボタンはダークチャコール×ピルシェイプで統一。

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

テラコッタ×クリームのウォームパレット(#D4654A × #FFF8F2)Outfit + Zen Maru Gothic フォントペアリングリネン風SVGテクスチャ(前作ドットグリッドと差別化)有機的border-radius ブロブ装飾CSSキーボード・マウスアイコン描画葉SVGのナチュラルアクセント3サイズ別情報階層設計