こんにちは、ロコです。
ついに、目標としていたポートフォリオへの「6作品掲載」を達成することができました！コツコツと積み上げてきた成果が形になり、大きな節目を迎えたと感じています。
今回は、その6作品目となる最新の架空案件、和モダン爬虫類ショップ「瞳月（どうげつ）」のランディングページ（LP）について、制作の背景やデザインの意図、そして実装時の技術的な試行錯誤のプロセスを詳しくご紹介します。
企画の背景：マニア向けの世界から、純粋な「愛おしさ」の聖域へ
最近、ペットとして密かに人気が高まっている爬虫類。
しかし、実際の市場やWebサイトを見渡すと、どこかマニア志向が強く、ダークでトゲトゲしい、あるいはクールすぎるデザインが多い現状に、生き物好きとして一歩引いた違和感を感じていました。
「爬虫類って、
本当はもっと可愛くて、
愛おしくて、
親しみやすい生き物なのに。」
そんなアタシの生き物好きとしての原点から生まれたのが、この「瞳月（どうげつ）」です。 「珍しさ」を競うようなクローズドな世界ではなく、未経験者や初心者が安心して一歩を踏み出し、純粋な「愛おしさ」を育める聖域のような場所を目指して、企画・デザインを立ち上げました。
クライアントの想いと要件定義（ロジックの設計）
制作にあたり、架空オーナーとのヒアリングを想定して要件定義を深く掘り下げました。
- 引き出したコアな想い：
- マニア向けではなく、初めて爬虫類を飼う人が「可愛い」「愛おしい」と思える安心感を提供したい。
- 隠れ家のような、静かで上質な和モダンの空間をWeb上で表現してほしい。
これらを単なるイメージに留めず、ビジネスの課題解決に直結するコンテンツ配置（ワイヤーフレーム）へと落とし込みました。 具体的には、サイトを開いた瞬間に生き物と目が合うファーストビューで強烈なインパクトを与え、その後、初心者が抱く不安を一つずつ解消していくためのステップ（飼育相談への導線など）を戦略的に設計しています。
コンセプト・デザインの意図
品格と、初心者を包み込む「安心感・サポート」の両立
カラーパレットと世界観：
深い夜を思わせる「インディゴナイト」と「紺紫」のグラデーションをベースに採用。そこに満月の光を思わせる「金」をアクセントとして配置しました。和モダンな空間の中で、生き物の美しい「瞳」と静かに対話するような、凛とした品格と静けさを表現しています。
ビジュアルと導線から生まれる「安心感」：
爬虫類ショップにありがちな「トゲトゲしさ」や「ダークな敷居の高さ」を徹底的に排除しました。ただ美しい空間を見せるだけでなく、サイト全体を通して「お迎え前からお迎え後まで、ずっと寄り添うパートナーであること」が視覚的に伝わるデザインを意識しています。
徹底した「サポート体制」の可視化：
未経験の方が最も不安に思う「本当に自分に育てられるだろうか」「体調を崩したらどうしよう」という心理的ハードルを解消するため、コンテンツの配置に徹底的にこだわりました。 具体的には、飼育に関する疑問をすぐに解消できる相談窓口へのスムーズな導線設計や、個体に合わせた飼育ステップの解説など、「いつでも頼れる場所がある」という確固たるサポート体制をWeb上で可視化。
「品格のある美しい世界観」で魅了しながらも、中身は「圧倒的な優しさと安心感」で初心者のファーストステップを力強く支える。そんな2つの要素が美しく同居するLPを目指しました。
技術検証とパフォーマンス最適化
この独特な世界観をWeb上で100%再現するため、標準機能の枠を超えた自由な設計が可能なブロックテーマ「Arkhe」を選定しました。実装フェーズでは、運用の安定性とパフォーマンスを巡り、深い技術検証を行いました。
（WordPress実装の舞台裏）
追加CSSでの実装か？「子テーマ」の導入か？
実装を進める中で、追加CSSを重ねるうちに「なんとなく読み込みが重い」という課題に直面。将来的なアップデートの影響や運用のしやすさを考慮し、一時は「子テーマを作成して、CSSでガリガリと制御する手法」への切り替えを検討しました。
しかし、実際に3週間におよぶ技術検証を行う中で、アタシはある結論に達しました。 「既存の完成されたシステム（Arkhe）を壊すリスクを冒してまで、このLP単体の構造において子テーマを導入する手間は、コストに見合わない。」
最初から子テーマ仕様で設計するのではなく、現状の安定した基盤（親テーマ）を活かす方向が最善であると判断したのです。
「追加CSS」の徹底的な最適化
子テーマを使わないと決めた以上、重さの解消は必須です。
そこで、記述の重複や不要なコードを極限まで削ぎ落とす「CSSの徹底的な見直し（最適化）」を敢行しました。
結果として、サイトの軽量化と表示速度の大幅な改善（重さの解消）を達成。テーマのバージョンアップに左右されない強固な設計を担保することができました。
さらに、ディテールにも妥協せず、以下の実装を完全にクリアしています。
- スマホ実機での1px単位の余白調整
- ボタンの文字改行バグを防ぐ、
white-space: nowrap;による厳密な制御
実用に耐えうる、高品質なレスポンシブコーディングを実現しました。
制作を終えて：6作品の節目に
今回の「瞳月」の制作を通じて、デザインの美しさはもちろんのこと、「コストとリスクを天秤にかけ、実用性において最適な技術的判断を下す」という、エンジニアリング視点での大きな成長を実感できました。
ただ見た目が綺麗なものを作るだけでなく、クライアントの「伝えたい想い」をデザインと技術の力で正しくユーザーに届ける。そんなデザイナーであり続けたいと思います。
ぜひ、新しくなったポートフォリオサイトで実際の作品をご覧いただけると嬉しいです！
コメント