架空LP案件
爬虫類処 瞳月
ジャンル： ランディングページ
web公開中
PC画面
スマホ画面
| 作品名 | 爬虫類処 「瞳月（どうげつ）」ランディングページ（架空案件） |
|---|---|
| 担当範囲 | コンセプト設計、要件定義、デザインカンプ（Figma）、コーディング（WordPressテーマ「Arkhe」＋追加CSSカスタマイズ） |
| 制作期間 | 約1.5ヶ月（デザイン・要件定義に3週間 / 実装・速度最適化に3週間） |
| 使用ツール | Figma / WordPress（Arkhe） / HTML5 / CSS3 / Affinity Designer |
Design Style
Typography
Noto Sans JP / Yuji Syuku（手書き風）
Color Palette
Design Assets
ワイヤーフレーム、店舗ロゴ、掲載画像・バナー一式（すべてFigma / Affinityにて自作・加工）
コンセプト・デザインの意図
「珍しさ」を競う世界から、純粋な「愛おしさ」を育む聖域へ。
マニア中心になりがちな爬虫類の世界において、「未経験者や初心者が安心して一歩を踏み出せる場所」を目指した和モダン爬虫類ショップの架空LPです。
「インディゴナイト」と「紺紫」の深いグラデーションをベースに、満月の光を思わせる「金」をアクセントに採用。和モダンな空間の中で生き物の瞳と静かに対話する、凛とした品格のある世界観を表現しました。
クライアントの想いと要件定義
ご要望と引き出した想い
架空オーナーとのヒアリングを設定し、「マニア向けではなく、初めて爬虫類を飼う人が『可愛い』『愛おしい』と思える安心感を提供したい」「隠れ家のような静かで上質な和モダンの空間をWeb上で表現してほしい」というコアな想いを抽出しました。
ただのショップ紹介に留めず、生き物と目が合うファーストビューのインパクトや、初心者の不安を解消するためのステップ（飼育相談の導線など）を設計し、ビジネスの課題解決に直結するコンテンツ配置（ワイヤーフレーム）を自作しました。
技術検証とパフォーマンスの最適化
今回の独特な世界観をWeb上で100%再現するため、標準機能の枠を超えた自由な設計ができるブロックテーマ「Arkhe」を選定しました。
一度は「子テーマ」の導入を検討した試行錯誤
実装追加CSSにて完成したがなんとなく読み込みが重い、将来的な運用やアップデートの影響を考慮し、子テーマを作成してCSSでガリガリと制御する手法を検証しました。
しかし、実際に3週間におよぶ技術検証を行う中で、「既存の完成されたシステム（Arkhe）を壊すリスクを冒してまで子テーマを導入する手間は、このLP単体の構造においてコストに見合わない」と判断。最初から子テーマ仕様で設計するのではなく、現状の安定した基盤を活かす方向のままを選びました。
出した答え：「追加CSS」の徹底的な最適化
記述の重複や不要なコードを極限まで削ぎ落とし、CSSを見直すことで、サイトの軽量化と表示速度の大幅な改善（重さの解消）を達成しました。
テーマのバージョンアップに左右されない強固な設計を担保しつつ、スマホ実機での1px単位の余白調整や、ボタンの文字改行バグ（white-space: nowrapによる制御）を完全にクリアした、実用に耐えうる高品質なレスポンシブコーディングを実現しています。
