バナー・広告練習 #12自己採点 4/5
デスク周辺機器ガイド バナーセット
ポテイモブログ用「デスク周り特集」内部バナー2サイズ。クールミント系(#1A9E8F)×ライトグレー(#F7F9FB)にドットグリッド背景。CSS描画のデスクアイコン（モニター・キーボード・マウス）と明確なCTAボタンで視線誘導。
HTML/CSSPlaywright
デザインの意図
ポテイモブログのPC周辺機器カテゴリ用内部バナー。前作(#11)のウォームブラウン系から完全に切り替え、テック系ブログらしいクール&クリーンなアプローチ。DM Sans+Zen Kaku Gothic Newのサンセリフペアリングでモダンな印象。斜めカット形状とドットグリッドで機械的になりすぎないよう工夫。
制作の詳細
2サイズ展開: ワイド(800x200px)はグリッド3カラム構成+斜めカット背景形状、レクタングル(300x250px)は縦スタック+丸型背景。共通パレット(ティール#1A9E8F/ライトグレー#F7F9FB/ダークネイビー#1C2B33)で統一感。手描き風サークル(border-radius 48%/52%/46%/54%)でアクセントワードを囲む。デスクアイコンはワイド版がCSS描画、レクタングル版がSVG。
適用したデザインパターン
クールティールパレット（#1A9E8F × #F7F9FB）サンセリフペアリング（DM Sans + Zen Kaku Gothic New）ドットグリッドテクスチャ（radial-gradient）斜めカット背景形状（diagonal-cut rotate 12deg）CSS/SVG描画デスクアイコン手描き風サークル強調（有機的border-radius）1画面1メッセージ + 明確CTA引き算の強調設計（アクセント色1色集中）
自己評価
強み
前作と完全に異なるパレット・フォント・テクスチャ。2サイズ展開でバナーとしての実用性確保。CTAの視認性が高く、情報の優先順位が明確。
改善点
アイコンイラストの描き込みが薄い（もう少しディテールを加えてもよい）。ワイド版のレイアウトがやや定番的。テクスチャに深みをもう一段加えられた。