東京都江東区で、独自に研究開発した高品質なラボグロウンダイヤモンド技術を活かして、毛髪・遺毛からメモリアルダイヤモンドを作る「MEMORIA」様のホームページを制作しました。

プロジェクトの目的

•  「メモリアルダイヤモンド」という繊細なテーマを、上質で落ち着いた世界観の中で安心して読める形に整理

• 初めての方が感じやすい不安（愛するペットの毛だけで作られるのか、他のペットの毛と混ざらないのか、納期や流れはどうか）を情報設計で解消

• 「毛髪・遺毛から作る」という新しい価値を、初見でも誤解なく伝える。

• 信頼の根拠（技術、工程、実績、運営体制、トレーサビリティ）を押しつけずに伝え、検討の背中をそっと押す。

• 料金の目安・サービス範囲を明確にし、問い合わせの質を上げる。

• ブログ（お知らせ）運用の土台を整え、公開後の情報発信・SEO施策を継続できる状態にする。

• SEO基盤構築として、CMSブログ立ち上げと内部・外部SEO施策で自然検索流入増加を促す施策を実施

• 公開後の改善に向けて、GA4で「どのページから来て、どのように回遊し、送信に至ったか」を可視化する土台を整える。

プロジェクト概要

設計・機能のポイント

• 導線の整理

ナビゲーションとヒーローにCTAを配置し、どのページからでも「相談」へ戻れる設計しました。

• 1ページ完結型トップ

共感 → 理解 → 安心 → 予約の流れで、訪問者が安心してサービスの情報を理解・確認できるように設計しました。

• 用途別の問い合わせ設計

相談／見学／その他など、目的を迷わず選べるようにフォーム内の分岐・説明も含めて整理しました。

• フォームUX

日付ピッカー(「日付のみ」「日時指定」)、ユーザー操作に応じて項目を表示するなど、「必要な人にだけ必要な項目」、クリッカブル電話番号で入力と発信のストレスを低減しました。

• サイト内検索（UI）

検索導線を分かりやすく配置し、視認性と操作性を担保しました。

• 計測設計（GA4）

お問い合わせの「送信」を中心に、回遊〜送信までを見える化する探索レポートを整備しました。

デザインと配色設計

• ベースカラー：オフホワイト

落ち着いた白系の背景にて落ち着いて情報を読める基盤を作成しました。

• キーカラー：ネイビー

MEMORIAのテーマカラーとして高貴さを演出しました。

• 差し色：パウダーブルー

高貴さをそっとサポートする差し色として使用しました。

アニメーション演出

控えめな動きで上質さを担保：派手な演出は避け、読み進めやすさを優先しました。

• ボタン・ホバーの反応

操作の手応えを出しつつ、世界観を壊さない範囲で設計しました。

• スクロール時の見せ方

情報ブロックが自然に目に入るよう、視線誘導のための演出に留めて設計しました。

• フォーム内の条件表示

急にガツンと出さず、自然に見せて入力体験をなめらかに出現するように設計しました。

• 動きは強調したい場所だけ

操作の手応えを出しつつ、世界観を壊さない範囲で設計しました。

担当業務一覧

• ヒアリング＋Zoomでの要件定義（目的・導線・優先順位の明確化）
• ディレクション／情報設計（サイトマップ／ページ構成／コンテンツ整理）
• UIデザイン（ワイヤー／レイアウト設計、コンポーネント設計）
• キーワード選定とサイト構成
• 実装（レスポンシブ対応、CMS構築、スタイル設計）
• HTML・CSS・jQuery・JavaScript コーディング
• サーバーSEO対策・内部SEO施策
• フォームUX設計（項目設計／日付、時刻ピッカーの導入、用途別分岐／入力ストレス低減）
• スマホ向けクリッカブルTEL 実装
• お問い合わせフォーム (バリデーション・reCAPTCHA)
• Google Analytics (GA4) 設置
• 計測設計・設定（GA4：イベント／キーイベント、ファネル探索、スナップショットカードで「ぱっと見」化）
• Google Search Console 紐付け・設定

制作を通じて

MEMORIAのHP制作では、訪問者が抱える不安を言語化し、安心に置き換える設計に焦点を当てて制作しました。

今回の制作では、技術・工程・体制といった信頼の根拠を、理解、共感、納得できる順番で配置し、ショールーム（対面）とオンライン相談の導線を整えることで、検討中の方が安心して次の一歩へ進めるサイトを目指しました。

短期制作スケジュールでも、訪問者の心の痛みに寄り添ったサービス提供を誠実に説明し、SEO基盤とアナリティクスによる視認性の高いレポート作成を高次元で両立。

クライアントからは、「運用しやすく、問い合わせが増えた」　と高評価をいただき、中長期のコンテンツマーケティング基盤も整備できました。

早速、編集のしやすさを活かして、運用されています。

Link to