サイト「LED脱毛機charme」のPC及びSPのモックアップ

LED脱毛機charme

https://led-epilator.com/

プロジェクト概要

 LED脱毛機charmeの公式サイトを、Figmaを用いたデザイン設計からWordPressでの構築まで一括して担当しました。 WordPressテーマ「SWELL」をベースにカスタムCSSを適宜追加し、スマートフォンなどモバイル端末でも使いやすいデザインを実現しました。加えて、GA4とGoogle サーチコンソールの設定を行い、アクセス解析やSEO対策もサポートしました。スマートフォン表示時は画面下部にお問い合わせボタンを設置し、ユーザーのアクションを促しやすいレイアウトに仕上げています。

【担当業務】

  • デザイン作成
  • サイト作成
  • ランディングページ制作

【制作年月】

2023年12月

【工夫したポイント】

Figma + Photoshop の連携:
 サイト全体のデザインラフをFigmaで作成し、必要な画像はPhotoshopで作りこみました。色調やサイズを統一しつつ、製品の魅力が際立つよう画像を最適化しています。

シンプル&信頼感のあるUI:
 LED脱毛機という製品特性に合うよう、ホワイト×淡いカラーを基調としたクリーンなレイアウトにしました。不要な情報は極力削ぎ落とし、コンバージョンにつながりやすい導線(CTAボタン)を目立たせています。

WordPressテーマ「SWELL」+カスタムCSS:
 投稿や固定ページの追加・編集がしやすいテーマを選定し、クライアント側でページ更新が可能な体制を構築しました。細部のデザイン差異を埋めるため、カスタムCSSを活用し、オリジナルデザインの雰囲気を崩さず仕上げました。

アクセス解析・SEO設定:
 GA4(Googleアナリティクス4)とGoogleサーチコンソールを導入し、検索流入やユーザーの行動を可視化しました。ベーシックなSEO対策を施しつつ、OGPやメタ情報を最適化しています。必要に応じて各ページのディスクリプションを調整できるようにしました。

スマホ時の「お問い合わせボタン」:
 画面下部に常時ボタンを配置し、ユーザーがどのページを閲覧していてもワンタップで問い合わせページへ移動できる設計にしました。結果的にコンバージョン(問い合わせ)率の向上に寄与すると期待されています。

制作物の画像

サイト「LED脱毛機charme」のPCモックアップ画像
サイト「LED脱毛機charme」のSPモックアップ画像
Back