ABOUT

私は、BtoB/BtoC美容商材メーカーにて
UIUXデザイン・WEBディレクション・フロントエンドエンジニアを兼務しています。

これまでのキャリアのほとんどはWEBサイトの構築、マネジメント、データに基づいたUI/UX設計と構築、LPページのデザイン、マークアップ、アクセス解析によるページの最適化と幅広く業務に尽力してきました。

私自身、これからは「物を売る時代」から「サービスを売る時代」になると考えています。
デザインツール、定期宅配、インテリア家具などもサブスクリプションサービス通じて好きな時に使用することができたり、隙間の時間で仕事を容易に探せるマッチングサービスやコロナ禍により飲食店や小売店では対面を避ける為に、アプリで事前に注文したものを好きな時間にボックスから受け取ることが出来たりなど、ここ数年でもさまざまなサービスが生まれています。結論、どのようなサービスを開発するにも「ニーズとウォンツ」を理解した上で、ユーザビリティが最適化されているUIデザインを考えることがとても大事だと考え業務を推進しておりました。

今となるとスマートフォンからWEBサイトやアプリを使用するユーザーが多く、小さな画面でより使いやすくするためにも、ユーザーニーズを把握したデザイン設計に落とし込む能力・デザインスキルが今後重要になると思います。

「モバイルファースト」の重要性と、今後スマートフォンからスマートグラスのような異なったデバイスが開発されることも想定しています。時代がとてつもないスピードで進化していく中、私はWEBディレクション・UI/UXデザインスキルを活かしながら、プロジェクトメンバーと円滑にコミニュケーションを図り、必要とされるプロダクトを世の中にアウトプットしていきたいと考えております。

数値を元にした素晴らしいユーザー体験を提供していくことを使命としてWEBディレクション・UI/UXデザインを軸に、 社会の為・人の為になるような新しいサービスの開発や仕組みづくりに時間を費やしたいと思います。

SKILLS

デザイン／開発スキル
・自社ECサイト大規模リニューアルによるUI／UXデザインの進行管理
・AdobeXD、Figmaを使用したワイヤーフレーム/プロトタイプの情報設計
・Web ARサービス UXデザイン ※プロジェクトマネージャーPM
・Webサイトの制作、運用、保守
・ランディングページの企画、構成、修正指示
・コーディング（HTML5/CSS3/Jquely/JavaScript/php）WordPress/shopyfy/makeshopを使用したサイト立ち上げ、運用
・プロジェクトマネージャーとしてのARサービスの開発、ローンチ
分析／改善スキル
・Google Search Console/Google Analyticsを利用したデータ分析によるLPO施策立案
・Google Keyword Planner、KeywordMapなどを利用した市場調査
・Google Optimizeを使用したABテストによるCVR/CTR最適化
・ヒートマップツール（UserInsight）を使用したランディングページの最適化
・SEOによる集客からコンバージョンの向上施策
・新商品開発に伴う、ペルソナ、カスタマージャーニーマップの作成
・コンテンツマーケティング(ライティング指導、サイト設計)
・Webクリエイティブ広告(GDN/YDN/キーワード広告)の売上最大化
マネジメントスキル
・エンジニア2名（外部）、デザイナー（インハウス）10名リソースの配分/タスク管理
・デザインレギュレーションの策定
・コーディングガイドラインの策定
・SEOを意識したライティング指導
・業務改善を目的としたAIツールの導入、デザイナーへのトレーニング
・デザイナーへマークアップ勉強会の月次開催

UI/UX Design

85%

WebDirection

90%

HTML5/CSS3/SASS

94%

jQuery/JavaScript

70%

Photoshop/Illustrator

90%

WordPress

95%

PHP

50%

Management

85%

SEO

80%

WebAdvertisement

60%

WORKS

SEVENEBAUTY AR（試し置きサービス）
プロジェクトリーダー
UI/UXデザイン
デザインディレクション
マークアップディレクション
3Dモデリング
7ビューティーUXデザイン
UI/UXデザイン
デザインディレクション
マークアップディレクション
セブンショップ美容コラム"
UI/UXデザイン
構成ディレクション
外部コンサル進行管理
チャームスティックジェルみちょぱさん
UI/UXデザイン
デザインディレクション
マークアップディレクション
チャームスティック
UI/UXデザイン
デザインディレクション
マークアップディレクション
チャームスティックニコプチ掲載
UI/UXデザイン
デザインディレクション
マークアップディレクション
チャームスティックモデルミチさん
UI/UXデザイン
デザインディレクション
マークアップディレクション
チャームスティックネオンカラー
UI/UXデザイン
デザインディレクション
マークアップディレクション
KIRIヘアミスト
UI/UXデザイン
デザインディレクション
マークアップディレクション
魔女工場
UI/UXデザイン
デザインディレクション
マークアップディレクション
ハンドエイジングケア
デザインディレクション
マークアップディレクション
オーガンテリア
デザインディレクション
マークアップディレクション
プロケアXP
デザインディレクション
マークアップディレクション
オーガニックハーブティー
デザインディレクション
マークアップディレクション
サロン開業サイト
UI/UXデザイン
デザインディレクション
マークアップディレクション
アベルナ
デザインディレクション
マークアップディレクション
LED看板
デザインディレクション
マークアップディレクション

オーガニックハーブティー LP制作

このページを見る オーガニックハーブティー（パソコン）
  • オーガニックハーブティー（スマートフォン）
  • オーガニックハーブティー（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Photoshop
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
ライター1名
カメラマン1名

✖️

アベルナ ピーリング器 LP制作

アベルナ（パソコン）
  • アベルナ（スマートフォン）
  • アベルナ（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Photoshop
ASSIGN
デザイナー1名
コーダー1名
ライター1名

✖️

店舗用品 LED看板 LP制作

LED看板（パソコン）
  • LED看板（スマートフォン）
  • LED看板（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
jQuery
Photoshop
ASSIGN
デザイナー1名
コーダー1名
カメラマン1名

✖️

開業サポートサイト構築

このページを見る 開業サイト（パソコン）
  • 開業サイト（スマートフォン）
  • 開業サイト（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
UI/UX Design
AdobeXD
HTML5
CSS3
jQuery
PHP
Photoshop
ASSIGN
デザイナー3名
マークアップエンジニア2名
メディアプランナー1名
ライター1名

✖️

業務用サロン用品通販 SEVENEBEUTY ECサイト UI/UXデザイン

このページを見る ECサイトトップページ
コンセプト

より買いやすく、より探しやすいサイトをコンセプトとしてサイトをリニューアルいたしました。ターゲット、ペルソナに合わせたデザイントンマナを作成し、レイアウトもモバイルからの流入を意識したワンカラムのレスポンシブデザインに変更いたしました。

工夫点

美容商材の新商品が月平均20商品程と多く、「エステ・鍼灸・ネイル・まつ毛エクステ・理美容」とカテゴリー毎に新商品が振り分けられ埋もれてしまう場合あるため、トップページに集約しタブでカテゴリー毎に新商品の閲覧が可能な設計にいたしました。

新着商品・ランキング

トップページのUI設計では直接詳細画面に遷移させることを意識し、新着商品やランキングはデータ上、既存ユーザーのセッションが多く、興味が高い部分で合ったため、詳細画面へ直接遷移を促すことによりCVまでのクリックを減らすことを意識しました。トップページのCVRはリニューアル前と比べてサイト全体購入をCVポイントとし、5%から8%まで引き上げることができました。

商品一覧絞り込み機能
こだわりポイント

商品一覧ページでは、絞り込み機能のUIデザインを一新しタップターゲットを意識しタップエリアを広げユーザーのタップに対してのストレスを取り除くことを意識しました。スマートフォンでの限られた画面領域内での遷移のUIデザインはとてもこだわりました。

商品一覧絞り込み機能

なるべく画面スクロールをさせずに、絞り込み条件をファーストビューで提示。絞り込んだ条件はアイコンとして表示させ、条件を変更したい場合もアイコンタップで条件を簡単に外すこともできるようにデザインしました。

商品詳細セット買い 商品詳細合わせ買い
こだわりポイント

詳細ページでは、アップセル対策として関連するセット商品、まとめ買い商品などを新機能としてファーストビュー内に収めるようにしました。結果としてユーザー1人あたりの購入単価がリリースの2ヶ月後には約40%程アップいたしました。

マイページ
こだわりポイント

マイページでは、アクセス解析をしユーザーの使用する部分をリスト化。優先順位を決め各要素をファーストビューで完結するような設計に落とし込みました。
オフライン店舗のPOS連携をさせるために会員様毎のバーコードを配置。またポイントの使用を促したい為、現在のポイント数と会員様のランクをファーストビュー内に配置いたしました。

注文履歴
こだわりポイント

リピーターへの再購入を促せるよう、注文履歴ページ•マイページでは過去の注文毎（カート毎）ボタンをクリック後、画面遷移せずカートインが可能になるよう設計いたしました。

7ビューティーフロントデザイン
  • 7ビューティーフロントデザイン（スマートフォン）
  • 7ビューティーフロントデザイン（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
UI/UX Design
HTML5
CSS3
JavaScript
Photoshop
AdobeXD
ASSIGN
デザイナー5名
マークアップエンジニア3名
マーケティングディレクター1名
SEOコンサル2名（外部）
フロントエンドエンジニア2名（外部）
バックエンドエンジニア2名（外部）

✖️

オーガンテリア ブランドページ

このページを見る オーガニック化粧品シリーズ
コンセプト

一般のユーザーに向けたtoCのオーガニック認証成分を配合した化粧品シリーズ。お肌に負担をかけることなく、しっかり実感できるスキンケアライン。健やかで美しい肌へと導くことをコンセプトとし、ナチュラルテイストのデザインに落とし込みました。

オーガニック化粧品シリーズ

自然の恵みで“揺らぎ”を解き放つ。心身的にも疲れている方に心からリラックスしていただけるような、ナチュラルなビジュアルを多様しました。

工夫点

オーガニック成分を明確にし、香りも女性が好むラベンダーとゼラニウムを取り入れている為、香りを伝えるためにもビジュアルで訴求しました。

オーガニック化粧品シリーズ ラベンダーとゼラニウムの香り オーガニック化粧品シリーズ オーガニック認証成分

また、自宅でもお使いいただくためにもメソッドをイラストで提案することにより、使い方を伝えてみました。

オーガニック化粧品シリーズ メソッドのご提案 オーガニック化粧品シリーズ 商品一覧

スクロールアニメーションも取り入れ、キャッチや商品をアニメーションさせ、スクロール率と滞在時間を上げることに成功しました。

オーガンテリアオーガニック化粧品（パソコン）
  • オーガンテリアオーガニック化粧品（スマートフォン）
  • オーガンテリアオーガニック化粧品（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
AdobeXD
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
カメラマン1名

✖️

業務用エステ複合機LP

このページを見る 業務用エステ複合機
コンセプト

ターゲットがtoBのエステサロンに向けた商品。一人ひとりに合わせた、理想のボディラインへ導くトータル・メイクプロポーションを提案することをコンセプトにし、高級感のあるデザインに仕上げました。

デザインコンセプトも容器がとても高級感があり、使用感も心地よいとの声が多かったので「高級感」と「癒し」を取り入れたデザインの方向性で進めました。

業務用エステ複合機の使い方動画
工夫点

ファーストビューでは、この機器を使用することにより理想のボディラインへ導くことがイメージを想起させる為にも、くびれた女性像を配置。使用後のafterイメージを訴求しました。

複合機のため、機能の紹介や使い方が複雑と感じるユーザーも居ることを想定し、ページのデザインは必要最低限の説明でテキスト量もコントロールしシンプルに作りました。

機能が多いため、プロープ毎に動画で機能を紹介させていただき、再生ボタンなどもページのデザインコンセプトに合わせてデザインしました。

業務用エステ複合機の施術メニュー例

エステサロンでもメニューの導入イメージを沸かせるよう機器を使用する施術メニュー例を提案することにより、エステサロンの導入を促進できるコンテンツに仕上げました。

プロケアXP（パソコン）
  • プロケアXP（スマートフォン）
  • プロケアXP（スマートフォン）
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
AdobeXD
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
カメラマン1名

✖️

ハンドエイジングスパシリーズ

このページを見る ハンドエイジングケアシリーズOMDプロフェッショナルスパ
コンセプト

ネイルサロン向けの商材として開発されたハンドケアシリーズでしたが、アクセス解析とユーザーアンケートを行なった結果、エステサロンでのハンドケア・フットリフレクソロジー商材としてターゲットを変更を提案し、「極上のハンドケア」をコンセプトとしリピート率を上げるハンドケアラインとして訴求するデザインへ一新しました。 また、ハンドケアを推すためキービジュアルも手と足が入っているイメージを使い、どこに使う化粧品かと言う事を視覚的に表現しました。

ハンドエイジングケアシリーズOMDプロフェッショナルスパ
工夫点

ハンドケアを推すためキービジュアルも手と足が入っているイメージを使い、どこに使う化粧品かと言う事を視覚的に表現しました。

ハンドエイジングケアシリーズOMDプロフェッショナルスパ導入メリット

導入のメリットをページ上部でストレートに訴求しました。導入の参考例とメリットを明確化し、ユーザーにどんな商品かということを興味を持っていただくようなレイアウトにしました。

ハンドエイジングケアシリーズOMDプロフェッショナルスパ

商品の容器がとても高級感がある為、商品一覧などでは余白を多めに設定し視覚的に容器に目がいくようなレイアウトで進めました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
AdobeXD
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
カメラマン1名

✖️

チャームスティックジェル2022AW

チャームスティックジェル2022AW
コンセプト

池田美優さんを専属モデルとして採用した自社オリジナルブランドOMDチャームスティックジェル2022秋冬カラーのランディングページとなります。

チャームスティックジェル2022AW
工夫点

秋冬のトレンドカラーが新色として5色追加発売開始となり、ワイヤーをFigumaで作成し、訴求ポイント等の構成案をワイヤーを制作したベースに制作ディレクターに作成をいただき、デザイナーと密に擦り合わせながら、秋冬に合わせた落ち着いたトンマナを採用し秋冬の新色カラーの認知をいただけるようファーストビュー直下で新色の案内を訴求。結果として新色の一部がCVまでつなげる事ができました。

チャームスティックジェル2022AW

みちょぱさんのイメージだけには寄せずに、チップの仕上がりイメージをピックアップとして掲載。ユーザーは仕上がりのイメージを想起できるように訴求いたしました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
制作ディレクター1名
デザイナー1名
コーダー1名
メディアプランナー1名
外部カメラマン1名

✖️

チャームスティックジェル

このページを見る チャームスティックジェル｜はがせるジェルネイル
コンセプト

池田美優さんにに掲載しないLPとしてABテストを実装いたしました。結果としては池田美優さんを掲載しない方がCVRが高く、商品購入に繋がりました。

チャームスティックジェル｜はがせるジェルネイル
工夫点

みちょぱさんを掲載していないため、ユーザーには一回当たりの単価訴求、商品のこだわりポイント訴求、信頼性を伝えるためにインスタグラムにご投稿を頂いたUGCを掲載など工夫を凝らし、より初回ユーザーへの購入ハードルを下げるように注力をいたしました。

チャームスティックジェル｜はがせるジェルネイル

チャームスティックジェルを購入する前の疑問点を解消すべく、Q&Aとして社内開発メンバー含めご意見をいただき掲載いたしました。使用時長く持たせるコツを使い方ワンポイントとして伝え購入時の懸念点を徹底的に解消するように意識いたしました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
制作ディレクター1名
デザイナー1名
コーダー1名
メディアプランナー1名
外部カメラマン1名

✖️

チャームスティックジェルブランドサイト（ニコプチ掲載）

このページを見る チャームスティックジェルブランドサイトニコプチ
コンセプト

チャームスティックジェルが小学生向けファッション誌ニコ☆プチとコラボすることになり、チャームスティックジェルをショッピングモール等で無料で体験いただけるイベントが開催されるにあたり、WordPressで運用しているブランドサイトへキッズ親子向けLPとして制作をいたしました。

チャームスティックジェルブランドサイトニコプチ
工夫点

今まではtoBやtoC向けの美容商材がメインでWEBページ等を制作してきましたが、今までの経験値としてターゲットユーザーが30代〜40代の女性が多かったので、小学生やその親御様向けにランディングページを作成するのにメンバーとは試行錯誤をしながらも競合他社なども調査しつつフォントの使い方、色使い、装飾のデザインなど細かく擦り合わせをしながら制作をいたしました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
制作ディレクター1名
デザイナー1名
コーダー1名
カメラマン1名
商品企画1名

✖️

チャームスティックジェル2023春

チャームスティックジェル2023春ミチさん
コンセプト

チャームスティックジェルの2023春の新色発売と合わせて、モデルの「ミチさん」を採用し春カラー訴求のランディングページを作成いたしました。

工夫点

春に合わせた新色ということで、チップの色もとても淡く春を感じる綺麗な色のため、新色のトンマナを継承し、春っぽい明るいデザインに作成をしていただきました。ミチさんのイメージ素材も素敵なものが多く制作はとてもスムーズでした。

チャームスティックジェル2023春ミチさん

ミチさんを認知しているユーザー層としては20代となるため、セルフネイルよりもより手軽に試せる「ペン型のはがせるジェルネイル」を若年層に訴求するように超簡単という商品ベネフィット訴求を意識をしました。

チャームスティックジェル2023春ミチさん

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
制作ディレクター1名
デザイナー1名
コーダー1名
カメラマン1名
商品企画1名

✖️

チャームスティックジェルネオンカラー

チャームスティックジェルネオンカラー
コンセプト

チャームスティックジェルをダンサーの「IBUKIさん」を起用し、若年層に向けたチャレンジとして、メイクアップアーティスト富澤のぼるさんと共同開発したビビット系の新色のランディングページになります。

チャームスティックジェルネオンカラー
工夫点

新色の色がビビットなため、トンマナや配色などは比較的スムーズに決める事ができました。

チャームスティックジェルネオンカラー チャームスティックジェルネオンカラー

ダンサーIBUKIさんのイメージカットのバリエーションも豊富で、ランディングページ内にイメージカットをたくさん盛り込む事ができたのは良かったです。発色がビビットなため、若いユーザー層に反応があり、オフラインイベント時にもお子様達にも大好評でした。

チャームスティックジェルネオンカラー

チップを選ぶ際にも、幅広いユーザー層に選んでいただきやすいUIも意識をいたしました。好きなチップをタップ後の自動カートイン機能などjavascriptをデザイナーへ提供し、より購入までのステップを減らして色も選びやすいように設計いたしました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
制作ディレクター1名
デザイナー1名
コーダー1名
カメラマン1名
商品企画1名

✖️

KIRIヘアミスト

このページを見る KIRIヘアミスト
コンセプト

従来のヘアミストはセット力が弱めのものが多く、ヘアミストのみでセットを完了するのが難しいという問題があり、社内の理美容商材開発担当者とメイクアップアーティストの冨沢ノボルさんと共同で何度も調合試作を重ね、自社オリジナルブランドとして「KIRIヘアミスト」の発売にあたり、ランディングページを作成いたしました。

工夫点

素材は商品開発案当社とカメラマンでやり取りをし、外部カメラマンとモデルを手配し撮影をいたしました。ファーストビューで使用後のイメージを連想させるようなカットでインパクトを出しつつ、コピーでは一般ユーザーに伝わりやすいように「誰でも手軽にスタイリングができる」と伝えるようなキャッチコピーを採用し、商品の世界観を引き出すことができたと思います。

KIRIヘアミスト特徴

商品の特徴も6つあり、特徴を閲覧していただきたい思いもあり、スクロールアニメーションで動きを持たせるように作成していただきました。

KIRIヘアミスト KIRIヘアミスト

商品の世界観が表現できているイメージカットが多く、ビジュアル一枚でランディングページで商品の世界観をエンドユーザーに届ける事ができたのではないかと思っております。

KIRIヘアミスト使用方法

使用イメージも写真ではなく、スタイリングの動画として、様々なヘアースタイルに合わせたスタイリング動画を配置し、よりスタイリストさんなどにもご使用をいただきやすいように構成いたしました。

USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
商品企画1名

✖️

韓国コスメ｜魔女工場(Manyo Factory)

このページを見る 韓国コスメ｜魔女工場
コンセプト

魔女工場とは、自然原料だけを使用し、健康的な美しい肌へ導く韓国化粧品ブランドになります。当社が日本の販売代理店となり、韓国では有名なmanyoをtoCユーザーに向けて販売促進を強化するにあたり、ランディングページを作成いたしました。

韓国コスメ｜魔女工場特徴

商品パッケージやラベルのデザインもブランディングされているため、ブランドに影響のないようにデザインもシンプルに表現をしていただきました。

KIRIヘアミスト特徴 KIRIヘアミスト特徴

ガラクトミセス培養液という、ビタミンとミネラル、酵母ペプチド、アミノ酸、有機酸などが豊富でお肌の中で生成させる自然保湿因子と似た性質を持つ有名な成分を配合しているシリーズもあり、Google自然検索でも急上昇していたキーワードでしたので、ガラクトミセスのベネフィットを具体的に伝えるよう意識しました。

KIRIヘアミスト特徴
USE SKILL
DesignDirection
ProgramDirection
HTML5
CSS3
AdobeXD
ASSIGN
デザイナー1名
コーダー1名
メディアプランナー1名
商品企画1名

✖️

SEVENBEAUTY AR（試し置きサービス）

このページを見る SEVENBEAUTY AR（試し置きサービス）
コンセプト

開業を検討しているサロン様に向けて、自分の店舗にベッドやチェアなど店舗空間に配置した際のサイズ感が分かりにくいという課題がございました。
実際に東京・大阪・福岡で運営しているショールームまで足を運んでいただき実際のサイズ感などを試していただいておりましたが、地方にお住まいの方はショールームまで足を運ぶのは遠方のため難しく、ECサイト内でスマホをかざすだけで自分の店舗空間に商品を配置するサービスの企画から弊社代表へ立案し、稟議を通し、PLとしてARサービスをローンチさせることができました。

WEBブラウザで表示が可能

誰でもスマホをかざすだけでご自宅や店舗で商品を配置する事を可能としました。ネイティブアプリになるとインストールまでのハードルがあり、手軽にサービスをご利用いただけないケースがあるため、幅広くユーザー様にお使いいただきたい思いで、WEBブラウザ（safari、chrome）でAR表示が対応をするようプロジェクトを進めました。

ご利用方法 AR対象商品

AR対象商品は美容サロンで使用する人気のマッサージベッドやリクライニングチェアなど約40点ほど3DモデリングをAR開発会社と連携し制作をいたしました。3Dスキャニングがうまくいかない商品などは採寸を細かく測ったりなどとても苦労はしましたが、いざ3Dデータが仕上がりスマートフォンでAR表示ができた時は感動をいたしました。現在では沢山のユーザー様にお使いいただいております。

商品詳細ページARリンクの設置

ECサイトの商品詳細画面にバナーやリンクをファーストビュー内に設置し、ご利用いただけるよう工夫をいたしました。PC、スマートフォンで3Dデータで商品を360°閲覧することことも可能で、ARモードではお手持ちのスマートフォンSafari/chromeで表示することができます。色味やテクスチャーなどの表現は外注をさせていただき、3Dモデラーの方とAR開発会社の方と協力し制作をいたしました。

3D表示

AR表示を行った後の商品購入までをGTMで計測タグを仕込み、計測を行ったところCVRが6%前後が平均でしたが、月次計測で15%まで引き上げることができました。自宅などにARで商品を表示し体験をすることにより、心理的な購買意欲が上がる傾向があるなどARという機能を使ったUXデザインに携わり、ARサービスとしてローンチをすることができ、早い段階で導入コストを回収でき、結果がすぐに出せたプロジェクトでもありました。

3D表示
USE SKILL
ProjectLeader
DesignDirection
ProgramDirection
HTML5
CSS3
AdobeXD
ASSIGN
lPデザイナー1名
lPコーダー1名
3Dモデラー2名（内部1名/外部1名）
AR開発担当2名（外部）

✖️

コスメ・雑貨EC SEVEN SHOP 美容コラム

このページを見る コスメ・雑貨EC SEVEN SHOP 美容コラム
コンセプト

toC向け美容・雑貨を取り扱うECサイト内に美容ブログを展開。スキンケア、ネイルケア、ボディケアなどの美容のお悩み解消としてコンテンツマーケティング施策を実施。

セルフジェルネイル基本の方法

記事監修欄

月間検索ボリューム1万～10万の『セルフジェルネイル』を対策ワードとして、外部コンサルティングとタッグを組み、コンテンツマーケティングを実施いたしました。
社内メンバーと外部メンバーで密にコミュニケーションを図り、ターゲットユーザーに向けた解像度の高いペルソナとジャーニーマップを作成することができました。また、EATの要素として、記事監修欄をFV直下に設置し、クローラーへ権威性を伝えることも意識をしました。ネイル業界でも有名なMIKA先生に記事の内容も確認いただきフィードバックを受け記事監修者として公開をさせていただきました。

商品リンクも追加

ECサイトということもあり、セッションが目的でもありますが、CVが見込めるアイテムがある場合は、CTAリンクも追加し記事に流入するユーザーに向けて関連商品の訴求をおこないました。

簡単ステップとしてレイアウト

ケアの手順もわかりやすく簡単ステップとしてレイアウトを組みました。また、他の記事ページでも流用できるワイヤーフレームを作成し、複数のコーダー、デザイナーが運用しやすいようにメンテナビリティ性も意識しながら、コーダーへ指示をおこなっていました。
記事コンテンツとしたHTMLはGoogleに意味を伝えるセマンティックコーディングでコーディングを実装いたしました。

関連商品へのリンク

セルフジェルネイルに必要な商品は当社で展開している各商品へのリンクも設け、コンバージョンの意識もした記事コンテンツとすることにより、結果コンバージョンが発生する記事とする事ができ、当社内でも成功した記事コンテンツとなりました。

セルフジェルネイル記事まとめ

サイトへの流入セッションを目的とし、月間平均25000セッションを獲得し、60500回というキーワードボリュームで1位を取ることができ、プロダクトとして社内のメンバーの自信とモチベーションも向上することができた業務となりました。

USE SKILL
ProjectLeader
DesignDirection
ProgramDirection
HTML5
CSS3
Figma
ASSIGN
構成メンバー3名
市場調査マーケター1名
記事コンテンツコーダー1名
外部コンサル担当者1名

✖️

CONTACT

お問合わせは下記のボタンかSNSリンクからご連絡をください。

MESSAGE ME