バナー・広告練習 #3自己採点 3.9/5

ポテイモブログ PC周辺機器バナーセット

ポテイモブログのPC周辺機器レビュー特集を訴求するWebバナー3サイズセット(Leaderboard 728×90、Medium Rectangle 300×250、ブログ内バナー 800×200)。ウォームトーン(ゴールド/アンバー)のダークテーマで、前作とは異なるカラーパレットに挑戦。

HTML/CSSPlaywright
ポテイモブログ PC周辺機器バナーセット (1/4)
ポテイモブログ PC周辺機器バナーセット (2/4)
ポテイモブログ PC周辺機器バナーセット (3/4)
ポテイモブログ PC周辺機器バナーセット (4/4)

デザインの意図

ポテイモブログのPC周辺機器カテゴリへの導線を強化するWebバナー。3つの標準広告サイズに対応し、実際のブログ運用で使える実用的なバナーセット。前2作がクール系(#4ecdc4)だったため、意図的にウォームトーン(#e8a849 ゴールド/アンバー)に変えてカラーパレットの幅を広げる挑戦。各サイズで情報量を適切に調整し、728x90は1行キャッチ、300x250はチップ付き詳細、800x200は数値+CTAという異なるアプローチを取った。

制作の詳細

Leaderboard(728x90)は横長の制約内でキャッチコピー1行+CTAのみのミニマル構成。Medium Rectangle(300x250)は縦の余裕を活かしてカテゴリチップ(マウス・キーボード等)を並べた情報量のある構成。ブログ内バナー(800x200)は「47記事・12カテゴリ」という数値で訴求力を持たせた。共通でダークテーマ+グレインテクスチャ+アンバーアクセント。角の装飾マークはMedium Rectangleのみに適用。

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

ウォームトーン(#e8a849 ゴールド/アンバー)Dark UI透明度階層大型見出し letter-spacing: -1.2pxグレインテクスチャ + スキャンラインCTAピルボタン + カラードシャドウ角の装飾マーク情報階層の3サイズ別設計

自己評価

強み

サイズごとの情報量調整が適切、ウォームトーンの統一感、数値訴求

改善点

全バナーがテキスト主体で、実プロダクト画像やイラスト等のビジュアル要素がない