ゼロから始めるU.S.プロダクト | Product Design Meetup #0

Transcript

1. 2023-10-13 Product Design Meetup #0 ゼロから始めるU.S.プロダクト 髙橋 遼太郎 デジタルプロダクトデザイン / フロントエンド @_tararira
2. プロダクトの海外進出 どうですか イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
3. 日本語人口 1 億人 英語人口 15 億人 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
4. デザインは？ イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
5. イントロ 世界にも進出している日本発プロダクトはデザインを変えている 1/3 US https://www.mercari.com/ US JAPAN https://jp.mercari.com/ イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
6. イントロ 世界にも進出している日本発プロダクトはデザインを変えている 2/3 English https://www.smartnews.com/en Japanese https://www.smartnews.com/ja イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
7. イントロ 世界にも進出している日本発プロダクトはデザインを変えている 3/3 English https://studio.design/ Japanese https://studio.design/ja イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
8. 日本プロダクトに染まったデザイナーが、既存の日本プロダクトから グローバルプロダクトを作るためにやったこと、気づいたこと ゼロから始める U.S.プロダクト
9. tararira / たらりら @_tararira Careers 過去に長期インターンやアルバイトでtoC事業会社メインに3社。 現在業務委託でtoC事業会社2社でリードデザイナーをやりつつ、お手伝いで 2社ほどデザイナーをしています。 Who 東京工業大学 情報通信系4年 量子情報 / 量子秘密分散 専攻 Digital Product Designer / Web Frontend Developer Likes デザインシステム 情報アーキテクチャ設計 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
10. コエフォントというAI音声プラットフォーム おしゃべりひろゆきメーカーで知っている人がいるかも...？ We are a Voice Hub We are a Cross-Lingual Platform We are a Life Changer イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
11. グローバル化の課題 単純な i18n だけじゃない、やることがめちゃ多い！ 国が違えばカラーに対するイメージ も違う ブランディングガイドラインを 英語圏向けに用意 どんなフォントが最適？ NotoSansでほんとにいいの？ 通貨違うよね マーケティングも日本的な ものは刺さらない ライティングも配慮が必要だから 全部見直しが必要 海外リサーチチームが必要？ 日本とは違う法規制 対応もしないと 英語圏へのカルチャー 理解が必須 英語圏でのミーム的表現や キャッチフレーズへの理解も必要 LGBTへの考え方など 価値観も違う イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
12. グローバル化の課題 単純な i18n だけじゃない、やることがめちゃ多い！ 国が違えばカラーに対するイメージ も違う ブランディングガイドラインを 英語圏向けに用意 どんなフォントが最適？ NotoSansでほんとにいいの？ 通貨違うよね マーケティングも日本的な ものは刺さらない ライティングも配慮が必要だから 全部見直しが必要 海外リサーチチームが必要？ 日本とは違う法規制 対応もしないと 英語圏へのカルチャー 理解が必須 英語圏でのミーム的表現や キャッチフレーズへの理解も必要 LGBTへの考え方など 価値観も違う イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira やるぞ... !
13. グローバル化の課題 どこから決める？ リサーチ ブランド 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
14. リサーチ拠点 リサーチ拠点をつくる リサーチ ブランド 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
15. リサーチ拠点 リサーチ拠点をつくる € U.S. Culture Native な人を巻き込みたP € U.S.の市場規模や競合企業の動` € U.S.の消費者の実態や受け入れられる趣向、傾向な% € U.S.でのリサーチ、ユーザーインタビュー € 日本から現地に住む人にインタビューを頻繁に行うのは 結構難しP € 現地の感覚でU.S.の消費者の実態を知りたP € リサーチは、言語にnativeなだけでなく、
 cultureにnativeな人でないと意味がない € 社内のコミュニケーションはすべて英語に イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
16. ブランディング U.S.向けのガイドラインをつくる リサーチ ブランド 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
17. ガイドラインのグローバル対応 U.S. Culture Native の人と一緒に作る Notionができました！ ˜ カラーやロゴなどのクリエイティ‡ ˜ 我々のミッション、立i ˜ ブランドのパーソナリティd ˜ 表記、使用法、日本語の用語との対e ˜ 数字の表記Y ˜ ... など多岐に渡る内容。 ひろゆきの取り扱い USでの呼び方を、 「AI Voice」 から、「Digital Voice」 に変更。 緑に対しては、白地に緑は病院のような つまらない印象を抱く。AIクリエイティ ブなイメージと逆。 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
18. ガイドラインの社内認知向上 全社員を対象に、 ガイドラインの社内認知向上をする。(Marketing teamにやっていただきました) プロダクト開発チームだけでなく、マーケティングやCSに も社内認知をひろげる Purposv l Create a common understanding of who we are, so that every team member has the same mental image of the brand˜ l Create a global standard communication guideline so that CoeFont can be accepted and create a positive impression for its future development in the global market˜ l Create common brand wording and rules so that when creating and updating services and web pages in English in the future, the messaging will be consistent as a company. イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
19. グローバル化の課題 開発の方針を決める リサーチ ブランド 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
20. 開発方針 日本とU.S.でプロダクトをどこまで作り分けるかどうか？ 問題 1/2 USでダメ 楽 既存の日本プロダクトを 単純に翻訳してリリース 保存する JP Save US US&JPベスト 運用もかなり大変 既存の日本プロダクトを残しつつ U.S.向けに新しく作る 保存する JP Save US New USベスト 比較的大変 新しくU.S.向けプロダクトを作り 日本語に翻訳して日本に逆輸入 保存する JP New Save US New イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
21. 開発方針 日本とU.S.でプロダクトを作り分けない。 あくまでプロダクトは とし、U.S.プロダクトを作って日本に逆輸入する。 1つ 1/2 USでダメ 楽 既存の日本プロダクトを 単純に翻訳してリリース 保存する Save US&JPベスト かなり大変 既存の日本プロダクトを残しつつ US向けに新しく作る 保存する Save USベスト 比較的大変 新しくU.S.向けプロダクトを作り 日本語に翻訳して日本に逆輸入 保存する JP New New Save US New イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira 理由 Í 日本的デザインはU.S.では のに対して、
 U.S.的デザインは、日本人は と仮定。 受け入れられない 比較的馴染める Vue2 -> 3移行のタイミングでもあり、Next.jsで書き換えたい機運もありました
22. 開発方針 まずは、日本デザインのまま単純翻訳で爆速リリース。 その後スプリントに乗せて、画面ごとに新しいUSデザインで置き換え。 2/2 既存の日本プロダクトを単純に翻訳してUS版をリリース 保存する JP Save US Release 新しくUSデザインを画面単位で作り 日本語に翻訳して日本に逆輸入 Save Release US 保存する Release JP 同時にrelease 最初に爆速リリースをしたのは、USでの認知獲得のため。 また、Analytics情報を早めから貯めておきたいため。 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
23. グローバル化の課題 ロゴのカラー変更、デザインシステムの刷新、LPなどをリデザイン リサーチ ブランド 開発方針 デザイン 巨大すぎるので一部だけ話します イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
24. ロゴのカラー変更 ロゴは、vividなgreenとpinkからモノクロに  クリエイティブなAI音声プラットフォームとしてのブラ ンドを高めるため、LPではダークを下地にI  白地に緑は、病院のようなつまらないイメー0  ロゴはモノクロに イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
25. デザインシステム刷新 デザインシステム刷新 1/3 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira U.S.も日本と同じで、 小さな積み重ねが、プロダクトの印象を決める。 例えばフォントが汚いと、「このプロダクトは私達はメインのユーザーではない んだな」という疎外感を感じてしまう。
26. デザインシステム刷新 Semantic Color を変更。Primaryを黒系に。 2/3 ’ Black系統をUI要素の Primary Colorにg ’ Green系のコントラスト調整 を行って、UI要素で用いるこ とができるようにし、ブラン ディングが失われないよう に。 無料で始める Voices 音声 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
27. デザインシステム刷新 Typography を変更。USは Poppins 、JPは引き続き Noto Sans JP 3/3 † U.S.プロダクトを幅広くリサーW † CoeFontのブランディングイメージと合うようなフォン€ † 外国のリサーチチームとも相談 Font Regular Medium Bold Noto Sans JP Regular Medium Bold Poppins Regular Medium Semi Bold The quick brown fox jumps over the lazy dog. すばしっこい茶色の狐は、怠け者の犬を飛び越える。 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
28. LP LPやCorpisteもテスト中（仮） English https://www.coefont.com/en English https://coefont.cloud/en Japanese https://coefont.cloud/ イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
29. その他やったこと イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
30. UXライティング ネイティブにレビューをもらって感覚を身につける ChatGPTを活用する イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
31. デザインファイル “_US”, “_JP_JA”, “_JP_EN” でそれぞれFrameをつくる 仕様もライティングもそれぞれ違うので明記する Toast/Error/NGwords_US Failed to generate audio Includes prohibited words. Toast/Error/NGwords_JP_JA 音声を生成できませんでした NGワードが含まれた文章です Toast/Error/NGwords_JP_EN Failed to generate audio Includes prohibited words. フォントや仕様が違う場合があるので区別 イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
32. Variablesの活用 Variablesは積極的に使う ただし、日本語と英語のModesは今のところコスパが悪いので一部のみ c 検索タグの日英対応とか c 日本語と英語のModesを使わない理由として、
 エンジニア視点で、気づきづらいという問題もある。 c Font周りでも早くつかいたい イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
33. まとめ
34. まとめ ゼロから始めた U.S.プロダクト、でも...？ リサーチ ブランド 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
35. まとめ U.S.でのリサーチ/ブランド以外は 今までやってきた日本プロダクトと同じ手法で十分戦える リサーチ ノウハウを貯めていく ブランド ノウハウを貯めていく 開発方針 デザイン イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
36. まとめ 0じゃなかった！ イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira
37. おわり Thank you! 11月から、NY在住の2人目のプロダクトデザイナーがJoinしてくれることになりました まだまだ募集中ですので、グローバルプロダクトに興味ある方は気軽にお声掛けください！ イントロ 自己紹介 リサーチ拠点 ブランディング 開発方針 デザイン やったこと まとめ @_tararira