Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
FORCE-R株式会社・クリエイティブ資料
Search
谷口 海人
February 06, 2024
Design
69
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
FORCE-R株式会社・クリエイティブ資料
谷口 海人
February 06, 2024
Other Decks in Design
See All in Design
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.8k
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
3
180
柔軟性のあるUIで、多くの環境でアプリを活躍させる/iOSDC26
noppefoxwolf
0
690
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
4k
Luna's Light
shemeetscity
0
130
デザインハーネスをつくるハーネス|誰でも自社らしいデザインをつくれるようにする仕組み
katakai
0
850
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
200
Webデザイナー中田美穂_ポートフォリオ
omy
0
130
明日から真似できる、AIでデザインシステムを活用する方法
vivion
0
650
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
設計の進め方と 品質特性品質特性
harakeishi
0
1.3k
タイル紹介サイト「タイルだもんで」
calpin
0
190
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
エンジニアに許された特別な時間の終わり
watany
109
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
610
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
440
Why Our Code Smells
bkeepers
PRO
340
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
GitHub's CSS Performance
jonrohan
1033
470k
Ethics towards AI in product and experience design
skipperchong
2
380
Transcript
2024 FORCE-R クリエイティブチーム サービス説明資料
FORCE-R のご紹介
▪社名 ▪従業員数 ▪主な取引先業様 ▪所在地 ▪主要銀⾏ ▪設⽴ ▪顧問社会保険労務⼠ ▪取締役 ▪顧問会計⼠ FORCE-R
株式会社 41 名 ・グーグル合同会社 ・ヤフー株式会社 ・アマゾンジャパン合同会社 ・楽天グループ株式会社 ・パナソニック株式会社 ・株式会社ビタブリッドジャパン ・株式会社⽇商エステム ・株式会社トウ・キユーピー ・近鉄グループホールディングス株式会社 ・株式会社富⼠フイルムヘルスケアラボラトリー 東京都中央区東⽇本橋 2 丁⽬ 1 ー 5 東⽇本橋セントラルプレイス 5F 三井住友銀⾏ 楽天銀⾏ 2015 年 7 ⽉ 30 ⽇ Petraf 社会保険労務⼠事務所 代表取締役 CEO 飯塚 涼太 取締役 COO ⾼尾 徹 税理⼠法⼈ヒダ 檜⽥公認会計⼠事務所 会社概要
175,000,000 350,000,000 525,000,000 700,000,000 0 1 期 2 期 3
期 4 期 5 期 6 期 7 期 8 期 ▪累計ご契約社数 ▪平均契約継続率 312 94 社 ▪平均売上増加率 189% % 取引社数
プライム上場から中⼩企業様まで累計300 社を超えるEC ⽀援実績 取引実績
02 対象モール:楽天市場 明確な実績: SOY2015,2017,2020 受賞 インクのチップス様 ▪⼊⼝商品設計: https://item.rakuten.co.jp/chips/fukubag/ 主に、 ・注⽂を
1 商品に集中させることによるランキング獲得 ・新規ユーザーが低価格で購⼊する為の⼊り⼝商品 ⽬的として、福袋を登録。 本商品を⼊⼝商品として構え、リピートユーザーにはセット品(出⼝ 商品)をメルマガや LINE で訴求する流れで 新規獲得とリピーター拡⼤、客単価向上を実現。 ▪購⼊導線の最適化 ⼀般的に楽天ユーザーは検索➡商品ページを起点に購⼊しますが、 クライアントは型番商品であ ることや、ショップブランディングも進めていたことから、 TOP ページへの流⼊も多かったです。 TOP に遷移したユーザーは⾃社 EC と同様、「 TOP ➡カテゴリページ➡商品詳細ページ」という流 れで遷移しますが、 どれだけスムーズに⾃分が欲しい商品ページまでたどり着けるかは、総合通 販の UI/UX において最重要ポイント。 ユーザーアンケート調査によると「インク型番から調べるユーザー」と「プリンター型番から調べ るユーザー」 両⽅が存在した為、 TOP のファーストビューにはどちらからでもたどり着ける導線 を設置。 TOP ページ流⼊ユーザーからの CVR 増加に⼤きくつながりました。 ▪先⾏逃げ切り型の MD 戦略 価格競争が激しく、商品型番数が多いオフィスサプライ品市場において、 商品登録スピードや、 登録後の広告戦略、⼝コミ戦略は⾮常に重要な施策です。 各商品の仕⼊れスケジュールを⾒た上 で、強化すべき型番のピックアップから広告予算配分をご提案。 結果的に新たな売れ筋商品は全 てランキング、 SEO 上位を独占しました。 【実施施策】 実績
02 対象モール:楽天市場 明確な実績:運⽤開始約半年で売上 2.5 倍増加 キユーピーウエルネス様 ▪モール特性を理解した施策の実施 モールで売上を上げる際、いかに「モールの特性」を理解し、売上を作れるポイントを増やせる かが重要になります。 楽天においては、スーパーセールやお買い物マラソンなどの強いセールへの積極的な出稿や、
メルマガや LINE での CRM によるリピート顧客の拡⼤、休眠会員の掘り起こしが⾮常に重要です。 参加すべきセールの⾒極めや参加対応、メルマガ /LINE のコンテンツ配信を重点的に実施した所、 メルマガ /LINE 経由の売上が⽉間数⼗万単位で積み上がり、上記の SEO ・広告施策も相成り全体の 売上が 2.5 倍まで伸⻑しました。 ▪ SEO ・広告の最適化 サービス導⼊時は、楽天 SEO 対策が⾏われておらず、モール内検索での上位表⽰が乏しい状態でし た。また RPP 広告でも本来狙うべき KW での出稿ができていなかった為、 ・商品名 ・商品ページ内テキスト ・ RPP 広告 の最適化⾏いました。 具体的には、対象商品のキーワードマイニングの実施をし、商品名以外でユーザーが検索する関 連キーワードのあぶり出しを⾏い、商品名や商品情報、 RPP の出稿を実施。 新規客へのアプローチが推進され、対象商品のアクセス数が半年で 5 倍に増加し、売上も 1.8 倍伸 ⻑しました。 【実施施策】 実績
02 対象モール: Amazon 明確な実績:開始から約 1 年で⽉商 1,500 万円超え 健康美⼈研究所様 ▪ブランド特性を⾒極めたクリエイティブ制作
複数の美容ブランドを展開しているクライアント様でしたが、 Amazon 上できちんとブランドコン セプトが伝わるようなクリエイティブを出せておりませんでした。 左のような Amazon のブランドページや、各商品ページのクリエイティブを⾒直し、 ⾃社 EC よりも商品の関⼼度が強いと⾔われる Amazon ユーザーに響きやすいキャッチやデザイン を再作成し、よりブランド・商品の魅⼒が伝わりやすいコンテンツに仕上げました。 ▪単品リピート商品の転売対策 定期通販をメインで展開している D2C 事業者様は、往々にして EC モールサイドに出品する転売屋 に悩まされることが多々あります。本クライアント様も同様の状態になっており、そもそもカート が獲得できていない状態が続いておりました。 弊社の転売排除スキームを活⽤し、カート取得率が 90 %以上まで回復。 上記施策も相成り、もともと売上がほぼ⽴っていなかった状態から、約 1 年で⽉商 1,500 万円以上 まで成⻑することができました。 ▪⼝コミの創出・拡⼤ Commerce INSIGHT . 導⼊時のアンケート結果に「⼝コミが⾜りないのでどんな商品なのか、商品の 良さはなにか?が伝わらない」という内容が多くありました。 そこで、ユーザーの⼝コミを増やせるような取り組みを SNS やアンケート施策で実施。 ※ステマ規制には配慮しております。 結果的に、実際に商品を使⽤した感想のレビューが各ブランド多数創出し、 CVR 増に貢献しました。 【実施施策】 実績
02 納品形式: WordPress ( CMS ) 対応デバイス: PC. スマホ ・カスタマイズが容易
・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい https://contents.kohnan-eshop.com/ ・導⼊と UI 設計が同時にできる コーナン商事株式会社様(オウンドメディア) 実績
02 納品形式: WordPress ( CMS ) 対応デバイス: PC. スマホ ・カスタマイズが容易
・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい https://comipro-live.com/ ・導⼊と UI 設計が同時にできる comipro 様(企業・サービスサイト) 実績
02 納品形式: WordPress ( CMS ) 対応デバイス: PC. スマホ ・カスタマイズが容易
・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい https://value-works.jp/ ・導⼊と UI 設計が同時にできる VALUE WORKS 様(オウンドメディア) 実績
02 納品形式: WordPress ( CMS ) 対応デバイス: PC. スマホ ・カスタマイズが容易
・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい https://www.human.or.jp/ ・導⼊と UI 設計が同時にできる Human Stage 様(企業・サービスサイト) 実績
02 納品形式:WordPress (CMS ) 対応デバイス:PC. スマホ ・カスタマイズが容易 ・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい
https://commerce-insight-project.force-r.co.jp/ ・導⼊と UI 設計が同時にできる FORCE-R 株式会社(サービスサイト) 実績
02 納品形式:WordPress (CMS ) 対応デバイス:PC. スマホ ・カスタマイズが容易 ・デザインの⾃由度が⾼い ・導線設計されており 訪れたユーザーが迷いにくい
https://force-rtest.com/recruit/ ・導⼊と UI 設計が同時にできる FORCE-R 株式会社(採⽤サイト) 実績
納品形式:ショップサーブ・ WordPress ( CMS ) 対応デバイス: PC. スマホ ・カスタマイズが容易 ・デザインの⾃由度が⾼い
・導線設計されており 訪れたユーザーが迷いにくい https://contents.kohnan-eshop.com/ ・導⼊と UI 設計が同時にできる ユーレックス株式会社様( EC サイト) 実績
02 弊社がクリエイティブ制作する際に 重視するポイント
UI とは? まずはじめにサイト全体の UI ・ UX ・ CX の設計を 正しく⾒直すこと。
そもそも UI ・ UX ・ CX とは…?
UI ・UX ・CX とは? UI UX CX ユーザーインターフェース ユーザーエクスペリエンス カスタマーエクスペリエンス
UI とは、サービスやプロダクトとユーザーの接点を表す⾔ 葉。たとえば、Web サイトやアプリにおけるユーザーのUI を考えるならば、サイトのデザインやフォントなど、ユー ザーの視界に触れる情報はすべてがUI となります。また、 UI はユーザーとサービスやプロダクトのタッチポイントを 表す⾔葉なので、web 上の情報だけでなく、PC やスマー トフォンなどのデバイス本体の外観なども含まれます。 UX とは、ユーザーがサービスやシステムの利⽤を通して 得る顧客体験のことで、ユーザーが商品を通して得たすべ ての体験のことを⽰します。顧客体験には、ユーザーがサ ービスやプロダクトを認知して購⼊し、使⽤したのちに 「また購⼊したい」「いい商品だった」といった感想を持 つまでの過程が含まれます。つまり、UX デザインとはサ ービスやプロダクトを通じたユーザーの顧客体験のすべて をより良くするために設計を⾏うことを意味します。 CX とは、2000 年ごろから注⽬され始めたマーケティング や経営戦略のコンセプトで、商品やサービスの機能・性 能・価格といった「合理的な価値」だけでなく、購⼊する までの過程・使⽤する過程・購⼊後のフォローアップなど の過程における経験「感情的な価値」の訴求を重視するも のです。⽇本語では「顧客経験価値」「顧客体験価値」と いう⽤語が使われています。
UI・UX・CXの設計が不⼗分な場合のデメリットとは? UI とは? 導線設計が崩れることでサイト内でユーザーが迷いやすく離脱率が⾼まる 01 プロダクトの魅⼒を浸透、理解させることが難しいため、購⼊率の低下に繋がる 02 顧客満⾜度が下がった結果、リピートされずにレビューの評価が下がる 03
サイト制作をした後に訪れたユーザーがストレスを感じたり⽬的を達成できない場合。 サイト⾃体が負の遺産になる 可能性が⾼くなります。 UI とは?
⽬指すべきサイト設計とは? ⾃社製品の魅⼒を簡潔にわかりやすく伝えることができていること ユーザーが訪れたときに機能不⾜によるストレスを感じさせないこと サイト全体の構成に意図があり、⽬的が明確であること
実際にどう制作するのか?
貴社と弊社でワークショップを⾏い、サイトイメージやコンセプトをより具体的に⾔語化して、 全体の制作フローとして活⽤するためのロードマップを作成します。 制作の流れ
サイトマップをベースに簡易的なワイ ヤーフレームを制作し、掲載情報に問 題がないかクライアント様とすり合わ せを⾏います。 トップページ 商品詳細 商品⼀覧 特集ページ マイページ カート
Q&A サイトマップ 制作の流れについて トップページ同様に他のページのワイヤーフレームも 制作していきます。 制作の流れ
02 今回サイトデザインイメージとしてご提供いただ いたサイトのトーンに近く、商品の⾼品質さや洗 礼された様⼦が⼀⽬でよくわかるため選定いたし ました。程よく余⽩を使い分けることで、どこに どの⾒出しがあるかわかりやすい点も参考にすべ きです。 https://philipstein.jp/ サイトデザインの参考 サイトデザインの参考
02 ファッションを扱う EC サイトであるため、着⽤イ メージやウエアの雰囲気が明確に伝わるよう、写 真を有効活⽤する必要があります。また、メンズ とレディース共に扱っていることがわかるように 偏った写真にならないよう意識することで、商品 の魅⼒をより伝えることが可能です。 https://www.goldwin.co.jp/ellesse/
サイトデザインの参考 サイトデザインの参考
ワイヤーフレームの内容に問題がなければ、実際のデザインに落とし込んでいきます。 トップページの ワイヤーフレーム 完成したデザイン ? ? サイトデザインの参考
02 ⿊と⽩をベースにデザインされているため、⾼級 感や⼤⼈らしさを与えている印象です。全てを参 考に制作してしまうと、貴社の独⾃性や競合他社 との差別化が難しくなるため、貴社の商品をどう 魅⼒的に伝えることができるか考えながら制作す る必要があります。 https://www.markandlona.com/c/top サイトデザインの参考 サイトデザインの参考
例えばこんなデザインの制作が可能です。
02 実⾏プロセス
02 2024 年◦⽉中 制作したデザインをコーディングし、 実際にサイトが動作するところまでテ ストします。テスト後、動作に問題が なければ、そのまま納品いたします。 コーディング・サイトテスト 2024 年◦⽉中
サイトの⾒た⽬となるデザインを制作 していきます。このタイミングで貴社 からいただける、写真やテキスト等の 必要な素材全て共有いただくよう、進 めていきます。 デザイン制作 2024 年◦⽉中 まずは現状背景や、クリエイティブ製 作で何を達成するべきかについてワー クショップを通じて⾔語化します。ワ ークショップの内容を元にヒアリング シートを詳細に確定させ、デザインと コーディングする前のWF を完成させ ていきます。この時点で、レイアウト や順番は確定しますので、WF 完成後 の⼤幅変更はできません。 ワークショップ・WF 制作 制作スケジュール 実⾏プロセス
02 制作管理シートによる 徹底した制作管理体制 クリエイティブ完成 お客様の本質課題を ヒアリング クリエイティブの制作⽅法 実⾏プロセス
02 FORCE-R は戦略設計からリリース後の運⽤ / 改善まで トータルサポートできる組織体制をとっています。 他社さまの場合 FORCE-R (弊社)の場合 04
SEO 対策・運⽤保守 03 サイト制作 02 コンセプト⽴案 01 現状分析 05 アフターサポート 01 現状分析 02 サイト制作 03 サイト公開 弊社の強みと特徴
広告依頼する企業 広告代理店 A コンサル会社 A 仲介⼿数料 仲介⼿数料 会社や関係者が多くなる 製作代⾏ コンサル代⾏
広告代理店の場合、他社を経由して製作する必要があるため、仲介⼿数料によって製作費⽤の総額が⼤きくなります。 また、関係者が多いため、修正対応や⾒積算出を急遽対応してほしいときにレスポンスよく適宜対応することができません。 弊社の強みと特徴
FORCE-R の場合、⾃社で全て対応可能な内部体制を取っており、 1 名の窓⼝担当が、⾒積算出、 Web ディレクション、 Web 製作対応を全て対応しているため、レスポンス良く制作進⾏におけるやり取りが可能です。 広告依頼する企業 FORCE-R
(弊社) 制作代⾏費⽤ 担当者 1 名で全て完結 弊社の強みと特徴
ECサイト制作・コンサルティング 01 その他Webサイト制作全般 03 コンテンツ製作 05 グラフィックデザイン 07 トータルブランディング 09
ECモールコンサルティング 02 市場調査、サイト分析 04 SEO対策 06 SNSコンサルティング 08 Webマーケティング 10 お客様のニーズに合わせてトータルサポートが可能です。 弊社の強みと特徴
02 ご契約前からご契約後の流れ ご検討期間 制作会社の選定 契約書の締結 初回キックオフ 制作ヒアリング 制作スケジュール の確定 制作開始
サイト完成・納品 保守・運⽤ STEP01 STEP02 STEP03 STEP04 STEP05 STEP06 STEP07 STEP08 ※お客様とのやりとりを通じながら適正なフローを再設定することがあるため、状況に応じて流れの順番が変わったり、 ⼿順が増える可能性がございます。 ご契約前からご契約後の流れ
02 弊社ではお客様の本質的な課題改善を⾒出し、改善までトータルサポートいたします。 価格以上のサービス提供ができるよう務めますので、何卒ご検討いただけますと幸いです。 東京都中央区東⽇本橋 2 丁⽬ 1 ー 5 東⽇本橋セントラルプレイス
5F FORCE-R 株式会社 少しでもサービスに興味をお持ちいただけましたらお問い合わせください。 電話のお問い合わせ メールのお問い合わせ 050-1807-0235
[email protected]