ポテイモブログ 新トップページLP
ポテイモブログ（やましん運営）のトップページリニューアルデザイン。在宅ワーカー向けPC周辺機器レビューブログとして、温かみのあるオフホワイト×ディープティール×ハニーマスタードのウォーム×クールハイブリッドパレットを採用。エディトリアルマガジン的な構成で、6セクション（ヒーロー/統計バー/カテゴリ/最新レビュー/著者紹介/ニュースレター）の充実したLP。
デザインの意図
前作（バナー・コーラル+クリーム / SNS・ダーク+赤）と完全に異なる方向性として、温かみと冷静さを両立した『ガジェットマガジン』感を狙った。ティールはコーポレートテックの定番ブルーを避けて深い緑寄りに調整（#1F4F4D）、アクセントのハニーマスタードがポテイモブランドの『甘さ』を表現。Bricolage Grotesque+Lora+Noto Sans JPの3フォント混用で英語見出しと日本語本文の温度差を作り、エディトリアルらしい『読み物感』を出した。Awwwards/Tezlogなどテック系ブログ事例を踏まえつつ、テンプレート的な単一ヒーロー型を避けて非対称グリッド+カードスタックで人間的タッチを加えた。
制作の詳細
1440px固定幅、フルページ高さ約4900px。6セクション構成: ①ヘッダー(ロゴはさつまいも風カスタムアイコン+ナビ) ②ヒーロー(非対称1.4fr/1fr、3枚カードスタック+手書きメモ風デコ、見出しに波線アンダーライン) ③統計バー(ダークインク背景、4指標) ④カテゴリ3カード(1枚featured大型ティール背景+CSS描画キーボード/マウス/デスクアイコン) ⑤エディトリアル最新レビュー(1.6fr/1fr、メイン記事はキーボードCSSモック画像+5件サイドリスト) ⑥著者紹介About(やましん丸円アイコン+4指標リスト) ⑦ニュースレター(ダーク背景+巨大背景タイポ装飾) ⑧フッター。テクスチャはbaseFrequency:0.92のフィルムノイズ+ウォームトーンcolorMatrix。border-radiusは14px/22px/24px/28px/999pxを用途別に使い分け、ブランドマークは14px 18px 22px 14pxの非対称角丸でハンドメイド感。
適用したデザインパターン
自己評価
強み
前2作（コーラル+クリーム、ダーク+赤）から完全に脱却したパレット選択。ティール+ハニーの組み合わせが『甘いガジェット日記』というポテイモブランドに合致。3フォント混用と非対称グリッドが量産系AIっぽさから明確に離れている。CSS描画キーボードモックは情報量豊富で実機写真の代替として機能している。エディトリアルセクションの破線セパレーター+ナンバリングがマガジン感を出している。
改善点
実機写真がないためゾーンによってはまだ平面的。次回はCSS描画よりも実際の写真素材を組み合わせると信頼感が増す。ヒーローのカードスタックがやや左に寄っており、もう少し右側のスペースを使えた。スクロール時のセクション間の余白統一（100px）が機械的なので、コンテンツ密度に応じて調整するとよかった。