## はじめに
エンジニアにとって、デザインツールは「見るもの」であって「操るもの」ではありませんでした。しかし、**Claude Code**の登場でその境界が壊れようとしています。 
 
今回は、AIネイティブなデザインツール **<a href="https://www.pencil.dev/" target="_blank" rel="noopener noreferrer">Pencil</a>** と、定番の **<a href="https://figma.com" target="_blank" rel="noopener noreferrer">Figma</a>** をClaude Code経由で連携させ、実際のUIコンポーネントを移植・比較検証した記録をシェアします。 

---

## 1. なぜ「Pencil」なのか？
Figmaは登場から安定な人気を誇っており、エンジニアやデザイナーに広く利用されています。 
しかし、エンジニアがAI（LLM）を使ってデザインを自動生成・修正しようとしたり、デザインをHTMLなどのプログラムコードに変換しようとすると、Figmaの複雑なデータ構造が壁になることがあります。 

そこで注目したのが**Pencil**です。 
* **JSONベース:** デザインがコード（.penファイル）として管理できる。
* **Git親和性:** デザインの差分が**git diff**で見える。
* **Claude Code連携:** CLIから「このボタンを赤くして」でデザインファイルが直接書き換わる。

今回は、Figmaで作成したUIをPencilに移植する検証と、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。 

---

## 2. 【検証】FigmaからPencilへの「移植」実験
実際に、Figmaで作成した「かえるさん」の投稿リストUIを、Claude Codeを使ってPencilへ移植してみました。 
今回は、デスクトップ版のFigmaを使用し、MCPサーバ経由でデータを取り込む方法を選択しました。 
PencilはVisual Studio Codeの拡張機能版を利用しました。 
詳しいインストール方法やセットアップは<a href="https://www.pencil.dev/downloads" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>を参照してください。 

### Figmaでの事前準備

FigmaのMCPサーバでClaude Codeに情報を取り込む際は、Figmaデスクトップアプリを利用します。 
このとき、Claude Codeに渡すリンクは**DEV Mode用のリンク**を使用してください。デザイン共有用のリンクよりも正確なCSSプロパティを取得できます。 
また、移行したい画像は、Figma上でエクスポートの設定をしておくと、Pencilへの画像の移植がスムーズになります。 
 
| ⭕️ | ❌ |
| :---: | :---: |
| DEV Mode 用のリンク | デザイン共有用のリンク | 
| ![DEV Mode 用のリンク](https://cont.sterfield.co.jp/uploads/figma_dev_mode_link_de1a34f2f1.png) | ![デザイン共有用のリンク](https://cont.sterfield.co.jp/uploads/figma_design_link_5cbfb1ad90.png) | 
 
### 比較結果
| 項目 | 元のFigma | 移植後のPencil |
| :--- | :--- | :--- |
| **レイアウト** | オートレイアウトで緻密に構築 | ほぼ完璧に構造を再現 |
| **画像** | 縦長のカスタムクロップ | アスペクト比が微妙に変化 |
| **パーツ** | 星評価、ハート、トグル | 意図を汲み取って配置済み |
| **余白感** | デザイナーによる微調整 | 少し詰まった「AI翻訳」感 |
| **インタラクション** | ⭕️ | ❌ |
| **スクリーンショット** | ![crop-on-figma.png](https://cont.sterfield.co.jp/uploads/crop_on_figma_0881c65190.png) | ![pencil-on-vs-code.png](https://cont.sterfield.co.jp/uploads/pencil_on_vs_code_6979519cdd.png) |

### 判明したClaude Codeの挙動
検証の結果、Claude Codeは単にAPIでデータをコピーしているのではないことが分かりました。 
 
![VS Code 上の Pencil](https://cont.sterfield.co.jp/uploads/pencil_on_vs_code_6979519cdd.png)
1. **MCPで構造（Metadata）を取得:** レイヤー名から「これはリスト」「これはボタン」と意味を理解。 
2. **Visionで詳細を補完:** スクリーンショットを画像解析し、色や形状のディテールを「見たまま」再現。 
3. **ハイブリッド生成:** 構造と見た目を統合して.penファイルを書き出す。 

---

## 3. FigmaとPencilのHTML/CSS変換精度比較
次に、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。 

| 元のFigmaデザイン | FigmaからHTML | PencilからHTML | Pencil + FigmaからHTML
| :---: | :---: | :---: | :---: |
| <a href="https://cont.sterfield.co.jp/uploads/figma_bcbbdf37b7.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/figma_bcbbdf37b7.png" alt="元のFigmaデザイン" width="240"></a> | <a href="https://cont.sterfield.co.jp/uploads/figma_to_html_5749440802.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/figma_to_html_5749440802.png" alt="Figmaからの変換結果の拡大" width="240"></a> | <a href="https://cont.sterfield.co.jp/uploads/pencil_to_html_eb04d40093.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/pencil_to_html_eb04d40093.png" alt="Pencilからの変換結果の拡大" width="240"></a> | <a href="https://cont.sterfield.co.jp/uploads/pencil_to_html_with_figma_a9fe9e5dd9.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/pencil_to_html_with_figma_a9fe9e5dd9.png" alt="PencilとFigmaのデータを参照して仕上げた結果の拡大" width="240"></a> |

- **FigmaからHTML** 
 インタラクションなどの動きは再現できた反面、細かいレイアウトやスタイルの崩れが目立ちました。 
- **PencilからHTML** 
 Figmaからの変換に比べてレイアウトの崩れが少なく、忠実度が高い結果となりました。ただし、細かいスタイルの再現にはまだ課題が残ります。 
- **Pencilからの変換後、Figmaのデータも参照して仕上げた結果** 
 Figmaからの変換に比べてレイアウトの崩れが少なく、忠実度が高い結果となりました。ただし、細かいスタイルの再現にはまだ課題が残ります。 

---

## 4. Figmaに慣れている筆者が感じたリアルな所感
実際に使ってみて感じた、正直な感想です。 

### 気になったところ：エディタとしての使いづらさ
Figmaに慣れすぎた体には、Pencilのエディタはまだ「手が縛られている」感覚があります。 
* **画像のクロップ制限:** 自由なトリミングが難しい。
* **絶対配置（Absolute）の不在:** Flexbox的な制約が強く、自由な重ね合わせに苦労する。
* **操作感:** Figmaほどの滑らかなキャンバス操作には及ばない。

### いいと思ったところ：AIエージェントとの「共鳴」
驚いたのは、別スレッドで「階層を整理したFigmaデータ」を渡した際、Claude Codeが**ローカルにある既存のPencilファイルに自律的に気づき、それをベースに改修を始めた**ことです。

これは、AIが単なる「変換ツール」ではなく、コンテキストを共有する「開発パートナー」として機能していることを示唆しています。Figmaが「デザインの完成図」なら、Pencilは「AIが理解・編集しやすい中間設計図」として機能し、Claude Codeがその間を繋ぐハブになる。この体験は、これまでのデザインワークフローにはなかった新感覚のものです。

---

## 5. 考察: 「Figma → Pencil → HTML」がうまくいった理由

今回の検証で最も興味深かったのは、**直接Figmaからコードを生成するよりも、一度Pencilを介した方が最終的なHTML/CSSの精度が高まった**という点です。

その理由を考察します。

1. **AIにとっての「解像度」の最適化**:
 Figmaの生データはノードの詳細情報が多すぎて、AIがコード化する際に「どこを重視すべきか」の判断が難しくなります。一度Pencilに変換することで、デザインがAIにとって理解しやすいセマンティックな構造に整理（正規化）されます。
2. **Dev Modeがもたらす「設計図」の精度**:
 FigmaをDev Modeに設定することで、Claude Codeは単なる「見た目」だけでなく、CSSプロパティとしての数値を正確に把握します。これにより、Pencilへの移植精度が劇的に向上し、結果としてそこから出力されるコードも堅牢になります。
3. **インタラクションのハイブリッド補完**:
 Pencilが苦手とする「動的な挙動」については、Claude CodeがFigmaのコンテキストを再度参照することで補完できます。これは、Git管理可能なPencilの「堅実さ」と、Figmaの「表現力」のいいとこ取りです。

---

## 6. まとめ

今回の検証を経て出した結論は、 **「エンジニアが主導するプロジェクトにおいて、PencilはFigmaをIDE（開発環境）へ繋ぐ橋渡し役」** として活躍しそうということです。 
 
確かに、エディタとしての使い勝手はまだFigmaに及びません。しかし、以下のようなワークフローが組めるようになった価値はとても大きいと感じます。 
 
1. **デザイナー**がFigmaで「正解」を作る。
2. **エンジニア**がClaude Codeを使って、Figma（Dev Mode）からPencil（.pen）へ高精度に翻訳する。
3. **AIエージェント**がその .pen ファイルをGitで管理しつつ、HTML/CSSへと落とし込む。
 
AIの進化は著しく、この記事を書いた1ヶ月後にはFigmaデータからHTML/CSSへの直接変換で何の問題もなくなっている可能性もありますが、 
色々な可能性を探して、試していき、新しい発見があったら共有していきたいと思います。 

## 参考
- <a href="https://code.claude.com/docs/ja/overview" target="_blank" rel="noopener noreferrer">Claude Code Docs</a>
- <a href="https://www.pencil.dev/" target="_blank" rel="noopener noreferrer">Pencil</a>
- <a href="https://figma.com" target="_blank" rel="noopener noreferrer">Figma</a>

large_eyecatch.jpg

medium_eyecatch.jpg

small_eyecatch.jpg

thumbnail_eyecatch.jpg

eyecatch.jpg

定番デザインツールのFigmaと注目のAIネイティブなデザインツールPencilのClaude Code連携を検証してみました

## はじめに
2026年、東南アジアや台湾のEC市場は「検索して探す」場所から、動画を見て欲しくなる「発見型コマース」へと完全にシフトしました。特に日本製品への信頼が厚い台湾、シンガポール、マレーシアでは、静止画だけでは伝わらない商品の魅力を「動画」で伝えることが売上最大化の必須条件となっています。

本記事では、24時間集客を自動化する「Shopee Video」と、爆発的な成約を作る「Shopee Live」を組み合わせた、2026年最新の勝ちパターンを解説します。

## 第1章：Shopee Videoで「認知」を広げ、24時間売れる仕組みを作る
Shopee Videoは、TikTokのような短尺動画で商品をアピールできる機能です。最大の利点は、フォロワー外への強力な拡散力にあります。

### 1-1. 「15秒の接客」が24時間、勝手に歩き回る
一度投稿した動画は、AIアルゴリズムによって「日本製品に興味がありそうな潜在顧客」へ自動でレコメンドされます。あなたが寝ている間も、15秒の動画が世界中で何千回と「勝手に接客」をし続けてくれるため、集客コストを抑えながら認知を広げることが可能です。

### 1-2. 国別の「刺さる」動画のトレンド
- 台湾： 「日本限定」や「高品質」を証明する開封動画（Unboxing）が好まれます。
- シンガポール： タイパ（時短）重視。15秒で利便性を伝える実用的な内容が効果的。
- マレーシア： 親近感が鍵。現地のライフスタイルに馴染む演出が、保存数（Wishlist）を伸ばします。

[Shopee Video](https://docs.google.com/presentation/d/1Layi0IASeFyo9LwLda9wem1z1k97xDvz-lh_mNtMQbM/edit?slide=id.g35413562e8a_0_0#slide=id.g35413562e8a_0_0)

## 第2章：Shopee Liveで「信頼」を築き、その場で完結（クロージング）させる
Videoで興味を持ったユーザーを、最終的に「決済」まで導くのがShopee Liveの役割です。

### 2-1. ライブ限定バウチャーという「最強の着火剤」
2026年のトレンドは、Shopee公式が発行する「ライブ視聴者限定の50%OFFバウチャー」の活用です。この強力な割引をフックに、「後で買おう」を「今すぐ買わなきゃ」という熱狂に変え、短時間で爆発的な注文数を作り出します。

### 2-2. 越境ECの壁「不安」をリアルタイムで解消
海外からの買い物には「本物？」「サイズは？」という不安がつきまといます。ライブなら、チャットでの質問にその場で答える「情報の透明性」により、日本ブランドへの信頼を確信に変え、成約率（CVR）を劇的に高めることができます。

[Shopee Live](https://shopee.jp/edu/article/13740)

## 第3章：ライバー依頼と報酬の仕組み｜AMS（アフィリエイト）の活用
ライブ配信には、自社スタッフによる「セラー配信」と、現地の「プロライバー（KOL）依頼」の2パターンがあります。

### 3-1. 自社配信 vs ライバー依頼の使い分け
- 自社配信： 低コストで専門的な説明が可能。長期的なブランドファン作りに適しています。
- ライバー依頼： 現地の人気KOLを起用。メガセール時などの短期的な認知拡大と売上爆発に最適です。

### 3-2. 報酬体系とAMS（Affiliate Marketing Solution）
ライバーへの報酬は「固定出演料 ＋ 成果報酬」が一般的ですが、現在はShopee公式のAMS（アフィリエイト・マーケティング・ソリューション）の活用が推奨されています。
- 自動決済システム： AMSを利用すれば、ライブ経由で売れた金額に対し、設定した報酬（数%〜20%）が自動で計算されます。
- 手間とリスクを削減： 報酬はセラーへの売上入金時に自動で差し引かれるため、複雑な海外送金の手続きは不要です。また「売れた分だけ」支払うため、広告費の赤字リスクも最小限に抑えられます。

## まとめ：Videoで種をまき、Liveで収穫する
2026年のShopee攻略に欠かせないのは、「Videoで認知を広げ、Liveでクロージングする」という相乗効果の設計です。
- Shopee Video： 24時間休まず、潜在顧客に魅力を伝える「動く看板」
- Shopee Live： 限定バウチャーと接客で、その場での「即決」を促す「対面店舗」
特にモバイル利用率の高い台湾、シンガポール、マレーシアでは、この動線が確立されているセラーが市場を独占しています。まずはスマホ一台、15秒の動画投稿から、貴社の越境ECを次のステージへ進めてみませんか？



【2026年版】Shopee越境EC成功の鍵「Shopee Video & Live」徹底活用ガイド｜台湾・シンガポール・マレーシア攻略戦略

## はじめに
2026年現在、日本の観光地はかつてない活気に満ち溢れています。2025年の訪日外国人数は約4,268万人に達し、旅行消費額は9.4兆円という過去最高記録を塗り替えました。街を歩けば多種多様な言語が飛び交い、飲食店や小売店は連日大盛況です。
しかし、多くの日本企業が「旅ナカ（日本滞在中）」の消費対応に追われる一方で、大きな利益の源泉を見落としています。それが、観光客が自国に帰った後の消費、すなわち「旅アト」の越境ECです。
歴史的な円安が続き、日本製品の「割安感」と「品質の高さ」が世界中で再評価されている今、訪日客を「一度きりの観光客」で終わらせるか、「生涯のファン」に変えるかの分岐点に私たちは立っています。本記事では、なぜ今、旅アト対策としての越境ECが有利なのか、その理由解説します。


## データで見るインバウンドの状況
まず、現在の市場環境を整理しましょう。2025年のインバウンド数は4,200万人を突破。
前年比15.8％増となり、過去最高を更新しています。
![インバウンド数の推移.png](https://cont.sterfield.co.jp/uploads/_4118fcf5d8.png)

2025年のインバウンド消費額は9.4兆円を突破。
コロナ前に比べて約2倍の規模となり、今後もさらにインバウンド消費額が伸びる見込みです。
![インバウンド消費額推移.png](https://cont.sterfield.co.jp/uploads/_ccb2c6592c.png)


### 円安の追い風
2026年に入っても、為替相場は円安基調を維持しています。海外からの旅行者にとって、自国通貨での買い物は「全品30%オフ」のような感覚です。
![為替レート.png](https://cont.sterfield.co.jp/uploads/_45e6f80d55.png)

この「安くて良いものが買える」という成功体験が、帰国後の「またあの商品が欲しい」という動機に直結します。

## なぜ「旅アト」なのか？ 越境ECが有利な3つの理由
インバウンド対策といえば「免税対応」や「店頭での多言語接客」が想起されますが、それだけでは不十分です。なぜ旅アトの越境ECが重要なのか、その理由に迫ります。

### ① 「手ぶら観光」ニーズとの合致
訪日客の不満として常に上位に挙がるのが「手荷物」です。 「このお酒を10本買いたいが、スーツケースに入らない」「この工芸品は持ち帰る際に壊れそうで不安」という理由で諦める機会損失は、想像以上に膨大です。 「帰国後、同じ価格（または近い価格）でオンライン購入できる」という選択肢を提示することは、その場での購買決定を後押しし、さらに帰国後の継続購入を生む土壌となります。

### ② 信頼（ブランド体験）の醸成
見知らぬ海外のサイトでいきなり買い物をするのはハードルが高いものです。しかし、「一度日本で実際に手に取り、品質を確かめた商品」であれば、心理的障壁は劇的に下がります。 「日本で食べたあの味」「日本で使って感動した化粧品」という直接的な体験は、どんなウェブ広告よりも強力なコンバージョン（購入）の引き金となります。

### ③ 越境ECへの高い関心
調査によると、訪日後の越境ECを希望する割合は、8割以上に達しています。 一度日本を訪れた人は、帰国後も「日本産の品質」と「日本での思い出」を求めています。この「余韻」が消えないうちにチャネルを確保することが、LTV（顧客生涯価値）を最大化する鍵です。

## 「旅アト」を成功させる3ステップ戦略
旅アトを成功させるには、店頭（旅ナカ）からオンライン（旅アト）へスムーズに誘導する設計が必要です。

### ステップ1：店頭での「デジタル接点」の確保
帰国してから「あの店、なんて名前だっけ？」と思われては手遅れです。
- SNSのフォローを促す： InstagramやWeChatの公式アカウントへ誘導。
- クーポン付チラシの配布： 「帰国後に使える越境EC限定10%OFFクーポン」を商品に同梱、またはレジで手渡す。
- QRコードの活用： 店頭のPOPや値札に、越境ECサイトへ直接飛べるQRコードを設置。

### ステップ2：越境ECのインフラ整備
海外発送は難しそう、というイメージは過去のものです。現在は、国内倉庫に送るだけで海外配送・決済・カスタマーサポートを代行してくれるサービスやECモールでの販売スキームが充実しています。

### ステップ3：帰国後の「思い出」へのアプローチ
SNSやメルマガを通じた継続的なコミュニケーションを行います。
- 季節性の提案： 「日本はいま桜の季節です。春限定の商品が入荷しました」といった、日本の四季を感じさせるメッセージは訪日経験者の心に響きます。
- リピート購入の簡便化： 前回の購入履歴から簡単に注文できる仕組みを作ります。


## 円安を「輸出」のチャンスに変える
円安は日本経済全体には光と影がありますが、「日本の価値を海外に売る」ビジネスにとっては、これ以上ないボーナスタイムです。
訪日客が日本滞在中に「このクオリティでこの価格は信じられない！」と感じる体験は、帰国後も続きます。たとえ送料がかかったとしても、円安の恩恵によって「日本から直接取り寄せる価値がある」と判断されるのです。

特に、以下のジャンルは越境ECとの相性が抜群です。
- 化粧品・スキンケア： 消耗品のためリピート率が高い。
- 菓子・食品： 日本独自のフレーバーが人気で、まとめ買い需要がある。
- 伝統工芸品・文房具： 「日本でしか買えない」という希少価値が高い。

## おわりに：今すぐ始めるべき「インバウンド×越境EC」の融合
訪日観光客が激増している今、店舗の売上だけで満足するのはもったいない話です。店舗を「販売の場」としてだけでなく、「世界中の顧客と出会い、体験を提供するショールーム」と再定義してください。
旅ナカで種をまき、旅アトで収穫する。この循環を円安という強力な追い風に乗せて回し始めることで、世界市場へと羽ばたくことができるはずです。



## **[お問合せはこちら](link)**

large_インバウンドからの勝ちパターン eyecatch.jpg

medium_インバウンドからの勝ちパターン eyecatch.jpg

small_インバウンドからの勝ちパターン eyecatch.jpg

thumbnail_インバウンドからの勝ちパターン eyecatch.jpg

インバウンドからの勝ちパターン eyecatch.jpg

インバウンドからの勝ちパターン：「旅アト」越境ECでリピーターを掴む方法

## はじめに

Sass を使っていると、次のような警告が表示されることがあります。

```
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
```

これはエラーではありませんが、将来的に使えなくなる機能であることを知らせる警告です。
Sass の公式コンパイラである Dart Sass では、@import が非推奨となり、3.0.0 で削除される予定です。
この記事では、なぜ @import が廃止されるのか、そしてどのように対応すればよいのかをわかりやすく解説します。

## なぜ @import は廃止されるのか？

**1. グローバルスコープの問題**

```scss
@import "variables";
```

このように書くと、読み込んだファイル内の変数や mixin がすべてグローバルに展開されます。

その結果、

- 名前の衝突が起こりやすい
- プロジェクトが大きくなると管理が難しい

といった問題が発生します。

**2. 重複読み込みの可能性**

同じファイルを複数回 @import すると、CSS が重複して出力される場合があります。
意図しないスタイルの増加につながることもあります。

**3. モジュール設計に適していない**

現在の開発では、ファイルごとに役割を分ける「モジュール設計」が一般的です。
しかし @import には名前空間の仕組みがなく、この考え方に合っていません。

## これからは @use / @forward を使う

新しい書き方は @use です。

```scss
@use "variables";

body {
  color: variables.$primary-color;
}
```

@use を使うと、自動的に名前空間が付与されます。
そのため、どのファイルの変数なのかが明確になります。

### 名前空間のカスタマイズ

実務では、名前空間を短くしたり、省略したりすることがよくあります。

**1. as でカスタマイズ**

```scss
@use "variables" as vars;

body {
  color: vars.$primary-color; // 短縮できる
}
```

**2. as * でグローバル展開**

```scss
@use "variables" as *;

body {
  color: $primary-color; // 名前空間なしで使える
}
```

`as *` を使うと、名前空間なしで変数を使えますが、
名前の衝突リスクがあるため、慎重に使う必要があります。

## @forward とは？

```scss
@forward "variables";
```

@forward は、他のファイルにまとめて公開したいときに使います。
共通スタイルやライブラリ構成で便利です。

### @use と @forward の違い

- **@use** は、そのファイル内で使うために読み込む
- **@forward** は、他のファイルに再公開するために読み込む

### 具体的な利用例

例えば、複数の設定ファイルをまとめる `_index.scss` を作る場合：

**ファイル構成**

```
styles/
  ├── _variables.scss
  ├── _mixins.scss
  ├── _functions.scss
  └── _index.scss
main.scss
```

**各ファイルの内容**

```scss
// styles/_variables.scss
$primary-color: #3498db;
$font-size: 16px;
```

```scss
// styles/_mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

```scss
// styles/_functions.scss
@function double($value) {
  @return $value * 2;
}
```

**@forward でまとめる**

```scss
// styles/_index.scss
@forward "variables";
@forward "mixins";
@forward "functions";
```

**メインファイルで使う**

```scss
// main.scss
@use "styles"; // _index.scss を読み込む

body {
  color: styles.$primary-color; // variables の内容にアクセス
  font-size: styles.double(8px); // functions の内容にアクセス
  
  .container {
    @include styles.flex-center; // mixins の内容にアクセス
  }
}
```

**@forward を使わない場合との比較**

```scss
// @forward を使わない場合
@use "styles/variables";
@use "styles/mixins";
@use "styles/functions";

body {
  color: variables.$primary-color;
  font-size: functions.double(8px);
  
  .container {
    @include mixins.flex-center;
  }
}
```

@forward を使えば、複数のファイルを 1 つにまとめて公開でき、
インポート文を減らしてコードをシンプルに保てます。

## 既存プロジェクトの対応方法

**1. @import を @use / @forward に変更**

自分のファイルで使う場合は `@use` を使います：

```scss
@import "variables";
```

⬇

```scss
@use "variables";
```

他のファイルに再公開する場合は `@forward` を使います：

```scss
// _index.scss
@import "variables";
@import "mixins";
```

⬇

```scss
// _index.scss
@forward "variables";
@forward "mixins";
```

**2. 変数の書き方を修正**

```scss
color: $primary-color;
```

⬇

```scss
color: variables.$primary-color;
```

このように、ファイル名を付けて参照します。

## まとめ

@import がなくなるのは、ただのルール変更ではありません。
Sass が「モジュール」という考え方にしっかり変わるための、大事なステップです。

@use / @forward を使うことで、

- コードを直しやすくなる
- 同じコードを何回も読みこまなくてよくなる
- 変数やファイルの使う場所がはっきりする

という良い点があります。

これからの Sass を、もっと安全でわかりやすく使うために、@use / @forward を使うことをおすすめします。

Sass の @import は廃止へ — Dart Sass 3.0.0 に向けた対応方法

## はじめに
台湾とのビジネスを始めて、気づけば13年の月日が流れました。

2013年に初めて台湾を訪れ、そこから現地調査、現地駐在、現地でのビジネス、越境でのビジネスと、何度も台湾へ行き、台湾ビジネスを推進してきました。
しかし、実は大きな声では言えないコンプレックスがあります。

それは、「台湾華語（中国語）が話せない」ということです。

日常業務などでは台湾人メンバーが日本語できますし、台湾の方は親日家が多く英語も堪能なため、ビジネスや生活自体は成立してきました。
しかし、私はこのタイミングで一つの決意をしました。

### **「今年中（2026年中）に、台湾華語の公認検定『TOCFL』のLevel 1に合格する」**

今回は、私自身の挑戦の決意表明も兼ねて、日本ではまだ馴染みの薄い「TOCFL」という試験について、そしてなぜ中国語検定ではなくTOCFLなのかを詳しく解説します。


## そもそも「TOCFL」とは何か？
まず、読み方から。TOCFLは「トックフル」（Test of Chinese as a Foreign Language）と読みます。日本語では「華語文能力測験」と呼ばれます。

一言で言えば、「台湾の教育省（文部科学省に相当）が実施している、外国人向けの公式な中国語能力試験」です。

世界基準の言語能力指標であるCEFR（ヨーロッパ言語共通参照枠）に準拠しており、現在、世界60カ国以上で実施されています。台湾での進学や就職、永住権の申請時などにも、このTOCFLのスコアが公的な証明として活用されています。


#### TOCFLの最大の特徴
TOCFLの大きな特徴は、なんといっても **「台湾で使われている中国語」に特化している点** にあります。

**1. 繁体字（はんたいじ）を使用**
　中国大陸で使われる簡略化された「簡体字」ではなく、画数の多い伝統的な「繁体字」で出題されます。

**2. 台湾特有の語彙や言い回し**
　同じ中国語でも、大陸と台湾では使う単語が異なることが多々あります。TOCFLでは、台湾の日常生活やビジネスシーンで実際に使われる表現がベースになっています。
 
 
 
## 中国語検定、HSK、そしてTOCFL。何が違う？
 中国語を学習しようとすると、必ずと言っていいほど「どの試験を受ければいいの？」という疑問にぶつかります。主な3つの試験の違いを、わかりやすく表にまとめてみました。
 
 
![スクリーンショット 2026-02-12 15.47.25.png](https://cont.sterfield.co.jp/uploads/2026_02_12_15_47_25_d673f8cbf0.png)
 
 **英語の「英検」と「TOEFL」の関係に似ている**

これを英語の試験に例えると、非常にわかりやすくなります。

- ****中国語検定（中検） ≒ 英検****

日本国内での知名度が高く、学習のステップアップとして非常に優秀ですが、海外での評価には繋がりづらい側面があります。

- ****TOCFL ≒ TOEFL / IELTS****

海外の大学への入学や、公的なビザ申請、グローバルなビジネスシーンで通用する「国際標準」の試験です。

つまり、「日本で自分の実力を測りたいなら中検」、「台湾現地で評価されたい、あるいはグローバルな基準で証明したいならTOCFL」という使い分けになります。



## 私の「Level 1」への挑戦

冒頭でもお伝えした通り、私は今年中にTOCFLの「Level 1（入門基礎級）」を受験し、合格することを目指します。

「13年も台湾ビジネスをやっていて、今さら入門レベル？」と思われるかもしれません。正直、自分でも少し気恥ずかしさはあります。しかし、これこそが「地に足をつけた」学び直しだと考えています。

#### TOCFLのレベル構造
TOCFLは、3つのバンド（A, B, C）と6つのレベルに分かれています。

- Band A（入門基礎級）：Level 1, Level 2

- Band B（進修独立級）：Level 3, Level 4

- Band C（流利精通級）：Level 5, Level 6

私が挑む「Level 1」は、語彙数約500語、日常生活で最低限必要なコミュニケーションができるレベルです。

これまでの13年間、私は「なんとなくの雰囲気」と「まわりのみなさんの力」で台湾と向き合ってきました。しかし、自分自身の言葉で「謝謝」のその先を伝えたい。レストランや屋台で、メニューが読めなくて適当に指をさすのではなく、自分の食べたいものを正しく注文したい。そんな小さな「自立」の積み重ねが、ビジネスのさらなる深化に繋がると信じています。

large_Gemini_Generated_Image_5p11cg5p11cg5p11.png

medium_Gemini_Generated_Image_5p11cg5p11cg5p11.png

small_Gemini_Generated_Image_5p11cg5p11cg5p11.png

thumbnail_Gemini_Generated_Image_5p11cg5p11cg5p11.png

Gemini_Generated_Image_5p11cg5p11cg5p11.png

「TOCFL」に挑戦します

スターフィールド株式会社はShopeeジャパンの公式パートナーとして新規出店の案内をほぼ毎日行っています。
そんな中で最近はTikTokショップの話が出ることが少しですが増えてきました。TikTokショップはライブコマースが主ですので継続型のShopeeとは性格が異なるのですが、データとして違いを見て頂く必要が引き続き有り、且つ直近は動きが少々活発なので5月に続き最新情報をまとめてみました。
今回も前回に引き続き、
1. アクセス数
2. 会員数
3. 流通総額

に分けて調べ、総合得点でランキング化することにしました。

### アクセス数ランキング

| 国 | 1位 | 2位 | 3位 |
| ---- | ---- | ---- | ---- |
| 台湾 | Shopee | momo | Coupang |
| マレーシア | Shopee | TikTok Shop | Lazada |
| フィリピン | Shopee | TikTok Shop | Lazada |
| ベトナム | Shopee | TikTok Shop | Lazada |
| インドネシア | Shopee | Tokopedia | Lazada |
| シンガポール | Shopee | Lazada | Amazon |
| タイ | Shopee | TikTok Shop | Lazada |

### 会員数

| 国 | 1位 | 2位 | 3位 |
| ---- | ---- | ---- | ---- |
| 台湾 | Shopee | momo | PChome |
| マレーシア | Shopee | TikTok Shop | Lazada |
| フィリピン | Shopee | TikTok Shop | Lazada |
| ベトナム | Shopee | TikTok Shop | Lazada |
| インドネシア | Shopee | Tokopedia | Lazada |
| シンガポール | Shopee | Lazada | Amazon |
| タイ | Shopee | TikTok Shop | Lazada |

### 流通総額

| 国 | 1位 | 2位 | 3位 |
| ---- | ---- | ---- | ---- |
| 台湾 | Shopee | momo | PChome |
| マレーシア | Shopee | TikTok Shop | Lazada |
| フィリピン | Shopee | TikTok Shop | Lazada |
| ベトナム | Shopee | TikTok Shop | Lazada |
| インドネシア | Shopee | Tokopedia | Lazada |
| シンガポール | Shopee | Lazada | Amazon |
| タイ | Shopee | TikTok Shop | Lazada |

### まとめ
今回も大きな変化がありました。前回調査が7月分だったので半年ぶりの調査結果となります。
個人的に大きな動きと思う3つに分けました。

[1]
台湾でCoupang (酷澎)が躍進している。
急成長の韓国勢。 2024年からの大規模投資が実り、日用品・ベビー用品のシェアでPChomeを抜き去りトップ3に定着。

[2]
マレーシア、フィリピン、ベトナム、タイで前回3位以下であったTikTok Shopがそれぞれ2位に急上昇。 動画視聴からそのまま購入する流れが若年層〜中年層に定着。2026年にはLazadaを脅かす存在に成長。

[3]
インドネシアではTiktokが規制されたためTiktok ShopもTokopediaの合弁会社として運営中。急速に成長している



TikTok Shopの動きが強く、既に存在感で言うとLazadaを上回っているようです。
ランキングとしては
1位 Shopee 2位TikTok Shop 3位Lazadaというのが定着しつつあるように感じました。
越境ECもできるようになるのはほぼ確実と思いますので今後のTikTok Shopの動きに注目しなければならないですね。







large_Gemini_Generated_Image_4ifp4k4ifp4k4ifp.jpeg

medium_Gemini_Generated_Image_4ifp4k4ifp4k4ifp.jpeg

small_Gemini_Generated_Image_4ifp4k4ifp4k4ifp.jpeg

thumbnail_Gemini_Generated_Image_4ifp4k4ifp4k4ifp.jpeg

Gemini_Generated_Image_4ifp4k4ifp4k4ifp.jpeg

【Shopee】各国でのランキングを調べてみた (2026年1月時点)

日本ブランドが世界へと羽ばたく際、まず足がかりとすべきは台湾・香港・シンガポールを中心とした「中華圏」市場です。 
これらの地域でブランド認知を確立し、EC売上を最大化させるための具体的なSNS戦略とアクションプランを解説します。

---

## 1. 地域別：主要SNSプラットフォームの役割分担

中華圏といっても、地域ごとにユーザーが好むSNSは異なります。各プラットフォームの特性を理解し、役割を明確に分けることが重要です。

| ターゲット地域 | 主要プラットフォーム | 主な役割・活用法 |
| :--- | :--- | :--- |
| **全地域共通** | **小紅書 (RED)** | **認知・信頼の獲得。** 「口コミ検索」のインフラとして、商品の深いストーリーを伝える。 |
| **台湾** | **LINE / Instagram** | **接客・リピート。** 親日層に向けた密なコミュニケーションと、購買への直接誘導。 |
| **香港** | **Facebook / Instagram** | **トレンド拡散。** 洗練されたビジュアルと最新トレンドに敏感な層へのアプローチ。 |
| **シンガポール** | **TikTok / Lemon8** | **若年層リーチ。** 英語と中国語を交えた動画コンテンツで、ライフスタイルを提案。 |

---

## 2. 具体的な3ステップ・アクションプラン

ブランド立ち上げから安定運用まで、以下のフェーズで進めていくことを推奨します。

### ステップ①：小紅書（RED）による「種まき」と信頼構築
まずは「検索」に引っかかる状態を作ります。
* **ストーリーテリング:** 単なる商品スペックではなく、「なぜ日本で作られたのか」「どんな悩みを解決するのか」という背景を、現地の言葉（繁体字・簡体字）で発信します。
* **KOC（一般消費者）の活用:** 大手インフルエンサーだけでなく、一般消費者に近いKOCに本音レビューを依頼。リアルな口コミを蓄積し、信頼の基盤を作ります。

### ステップ②：動画とライブコマースによる「疑似体験」の提供
写真だけでは伝わらない価値を、動きと音で伝えます。
* **ライブ配信の実施:** ShopeeやLazadaのライブ機能、あるいはDouyin(中国本土用TikTok)を活用。日本の店舗や製造現場から配信し、ユーザーの疑問にリアルタイムで答えることで「安心感」を提供します。
* **活用シーン紹介動画:** 15〜30秒の短尺動画で、その商品を使った後の「理想の生活（ビフォーアフター）」を視覚的に表現します。

### ステップ③：SNS内決済（ソーシャルコマース）の統合
「欲しい」と思った瞬間の熱量を逃さない動線を構築します。
* **シームレスな購入体験:** WeChatミニプログラムや各SNSのショップ機能を活用し、アプリを切り替えずに決済まで完了できる仕組みを導入します。
* **現地化されたCS:** チャットでの即時レスポンス体制を整え、購入前の不安をその場で解消します。

---

## 3. 日本ブランドが勝つための「差別化」ポイント

競合他国や現地ブランドに打ち勝つために、以下の3点を強調したコンテンツ制作が不可欠です。

1. **「数値」による圧倒的信頼:** 「高品質」という言葉だけでなく、成分、検査データ、受賞歴をビジュアルで分かりやすく提示します。
2. **日本独自の「情緒的価値」:** パッケージの美しさ、梱包の丁寧さ、細部へのこだわりなど、日本の「おもてなし精神」をブランドストーリーの核に据えます。
3. **ローカル・インサイトの反映:** 「シンガポールの湿気に耐えるヘアケア」「台湾の食生活に合わせたサプリメント」など、現地の気候や文化に寄り添った訴求を行います。

---

## まとめ

2026年のアジアEC戦略において、SNSは単なる「広告媒体」ではなく、ブランドと顧客が深くつながる「店舗そのもの」です。 
おすすめとしては、まずは台湾からの販売です。
その後、時間を掛けてそれぞれのプラットフォーム上にコンテンツを増やし、香港、シンガポールへと波及させていくことが重要です。 
プラットフォームごとの特性を使い分け、信頼を積み上げることで、日本ブランドの価値は中華圏全域に広がっていくでしょう。

越境ECスタートをスターフィールドがサポートします！ 
お気軽にお問い合わせください！

large_Gemini_Generated_Image_mip7aamip7aamip7.png

medium_Gemini_Generated_Image_mip7aamip7aamip7.png

small_Gemini_Generated_Image_mip7aamip7aamip7.png

thumbnail_Gemini_Generated_Image_mip7aamip7aamip7.png

Gemini_Generated_Image_mip7aamip7aamip7.png

アジア進出の鍵！中華圏EC攻略のためのSNS活用アクションプラン（2026年最新版）

## はじめに
2025年から2026年にかけて、台湾のEC市場をリードしてきた「Shopee」は、大きな変化の時期に入っています。高いシェアを持っている一方で、「手数料の上昇により不安」や「配送ルールの厳格化」、「中国資本背景への懸念」により、台湾現地セラーの離脱と消費者の不信感が加速しています。Shopeeに依存しない方法を探し始めています。
特に、日本から台湾へ越境ECを行う企業にとっては、「台湾では翌日配送が当たり前」になっていることが、新しいハードルが一つ増えています。

## 1. セラーに厳しくなるShopeeの方針
 ![](https://cont.sterfield.co.jp/uploads/2021_09_08_1_21_44_e1631078561774_2e4485f74a.png) 
現在、Shopeeは「成長」よりも「利益」を重視する方向に変わっています。セラーへの条件はとても厳しくなっています。

### 24時間以内発送のルール
受注後、24時間以内に発送できない場合、2％の追加手数料がかかります。副業セラーや受注生産のセラーには、かなり厳しいルールです。

### 手数料の増加
送料無料プログラムなどに参加すると、実質の販売コストが売上の20％を超えるケースも珍しくありません。

1. 2025年より、出荷までに 2日以上を要する商品（プレオーダー） につきましては追加で3％の手数料が発生いたします。

2. 2025年より、決済およびシステム処理手数料は2％から2.5％へ引き上げられます

3. 2026年1月1日より、代金・送金および電子発票対応発行サービス費用：請求書1枚あたりの手数料が2元から2.5元へ改定されます。全体的にコストが上がっています。

### アカウント凍結・停止のリスク
些細なコミュニケーションミスでアカウントが永久凍結されるなど、セラーは常に不安定な立場に置かれています。

## 2. 物流スピードを重視するShopeeと手数料高騰の背景
![](https://cont.sterfield.co.jp/uploads/Adobe_Stock_462475861_759ac65b16.jpeg) 
ニュースにより、Shopeeの親会社である Sea Limited は、2025年四半期の決算を発表しました。創業者兼CEOのフォレスト・リー氏が、台湾の「店到店」受取拠点が正式に2,500か所を突破したと説明しました。

台湾市場では店舗受け取り(蝦皮店到店）がShopeeの重要な物流手段になっており、全配送量の70％以上を占めていると強調しました。

### 物流コストの転嫁？
店舗受け取り(蝦皮店到店）の受取拠点を運営するには多くの家賃や人件費がかかるため、その負担をセラーに回す形で販売手数料が大きく引き上げられました。商品カテゴリーによっては、決済手数料を含めて30％以上になるケースもよくあります。

### 翌日配送が当たり前に
スマートロッカー（智取櫃）がよく使われています。多くの商品は、注文した翌日に受け取ることができます。「蝦皮店到店・隔日到貨！（翌日配送）」というShopeeのサービスが広まり、台湾の消費者は「商品はすぐ届くもの」と考えるようになりました。

### 越境セラーへの影響
日本から発送する場合、7〜14日かかる国際配送は、「遅い」と感じられるようになっています。購入率が下がる傾向があります。

## 3. 「チャイナリスク」と消費者の心理的変化
![](https://cont.sterfield.co.jp/uploads/Adobe_Stock_489460410_ca63c15036.jpeg) 
近年、台湾と中国の関係は大きく変化しています。中国の「一つの中国」原則と台湾の自立志向という根本的な対立構造の中で、政治的緊張の激化と経済的相互依存という相反する要素が絡み合い大きく変化しています。

その影響で、台湾では「中国資本」の企業を避ける動きが徐々に強まっています。Shopeeの親会社である「Sea Limited」の資本背景やデータ管理の不透明さは、台湾現地のニュースによると、すでに経済の問題を超え、「国家安全保障」の議論にまで発展しています。

昨年、台湾政府機関である監察院は「Shopeeには中国資本の関与が疑われる」とする内容の発表を行いました。国の安全や経済に影響する恐れがあるとして調査を開始しました。

[國人慣用之蝦皮購物平台疑具中資背景 影響我國資安及經濟主權 監察委員賴振昌及賴鼎銘申請自動調查](https://www.cy.gov.tw/News_Content.aspx?n=795&s=32926)

[蝦皮新規傷賣家及電商業 業者促政府嚴防管制](https://www.epochtimes.com/b5/25/8/17/n14575352.htm)


### ★主なポイントは以下の通りです
1. データセキュリティへの不安で、中国資本との関係に対する政治的・社会的な警戒感が高まり、個人情報の流出を懸念する消費者が、他のプラットフォームや自社サイトへ移行しています。

2. 中国セラーによる「擬似ローカル発送」問題、
台湾・桃園空港周辺の倉庫を拠点に、中国製品を「台湾から発送された商品」のように見せて販売する行為が問題になっています。このような産地や発送元を偽る販売方法は、現在、台湾国内でも重要な課題として認識されています。

 
 ![](https://cont.sterfield.co.jp/uploads/Adobe_Stock_96197051_27b88f59ea.jpeg) 
 
この影響で、「越境＝不透明」というイメージを避けるため、台湾消費者は 「本当の越境販売の商品なのか？中国からの偽物？」や「信頼できる独自ブランドサイト」 を求める傾向が強まっています。


## 4. 現地セラーの新しい動き
![](https://cont.sterfield.co.jp/uploads/2026_01_08_191131_858058019e.png) 
Shopeeは台湾のネットショッピングに欠かせない存在ですが、最近の変化を受けて、台湾のセラーはShopeeだけに頼らない方法を考え始めています。

### 自社公式サイト
高い手数料を払う必要がなくなり、特定のプラットフォームに依存しない運営ができます。利益率を守りつつ、顧客データも自社で管理できます。

### SNSによる直接集客
Instagram や Threads から LINE公式アカウントへ誘導し、プラットフォームを介さずに、銀行振込やコンビニ物流を使った直接取引へ移行します。

### 台湾ECプラットフォームの利用拡大
7-11（セブンイレブン）の「賣貨便」や、全家（ファミリーマート）の「好賣＋」は、
Shopee よりも出店ルールがやさしいため、小規模なセラーを中心に台湾国内のECプラットフォームを使うセラーが増えています。

## まとめ
![](https://cont.sterfield.co.jp/uploads/Adobe_Stock_595596217_f716c56f6e.jpeg) 
2026年の台湾EC市場は、「Shopeeに出店していれば自然に売れる」時代ではなくなっています。消費者は「すぐに手元に届くこと（スピード）」「信頼できる販売元から購入したいという安心感」この2つの欲求を同時に求めるようになっています。

今後の越境ECでは、特定のプラットフォームに依存しない複数の販売チャネルの活用と、台湾市場のスピード感に合った物流体制が、今後の越境EC成功の鍵となります。

台湾市場を現地で見てきた経験から、特定の視点に偏らず、市場全体の変化を客観的に把握することが重要だと感じています。

large_AdobeStock_334217588.jpeg

medium_AdobeStock_334217588.jpeg

small_AdobeStock_334217588.jpeg

thumbnail_AdobeStock_334217588.jpeg

AdobeStock_334217588.jpeg

台湾Shopeeの現場から見る、プラットフォーム支配とセラーの生存戦略

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2026年

2026/03/13

2026/03/06

2026/03/02

2026/02/19

2026/02/13

2026/01/30

2026/01/16

2026/01/09