<p><img decoding="async" loading="lazy" class="aligncenter" src="https://images-na.ssl-images-amazon.com/images/I/61KPtQRcdKL.jpg" alt="セキュア・バイ・デザイン" width="1000" height="1286" /></p>
<p>&nbsp;</p>
<p><span class="author notFaded" data-width="181">Dan Bergh Johnsson ,<span class="contribution"><span class="a-color-secondary"> </span></span></span><span class="author notFaded" data-width="154"><span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;closeButtonLabel&quot;:&quot;著者ダイアログポップオーバーを閉じる&quot;,&quot;name&quot;:&quot;contributor-info-B09FQ8X6L1&quot;,&quot;position&quot;:&quot;triggerBottom&quot;,&quot;popoverLabel&quot;:&quot;著者ダイアログポップオーバー&quot;,&quot;allowLinkDefault&quot;:&quot;true&quot;}">Daniel Deogun</span><span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="133">Daniel Sawano<span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="99">須田智之 <span class="contribution"><span class="a-color-secondary">(翻訳)</span></span></span></p>
<h1>どんな本なのか</h1>
<p>ソフトウェア、特にインターネット上で展開されるサービスは常に危険に晒されている状態。これを如何にセキュアに出来るかは常時付き纏う課題と言えます。</p>
<p>この本には、Eric Evans のドメイン駆動設計(DDD)に基づいて確立する、セキュアなソフトウェア設計を指針や実例が記載されています。</p>
<p>「セキュリティ対策本」というよりは、「ソフトウェア設計を良くすることによって、自然とセキュアになっていること」を目指しているようです。</p>
<p>&nbsp;</p>
<h1>なぜこの本を読もうと思ったのか</h1>
<p>サービスのセキュリティを確保する際、旧来セキュリティアプライアンスに頼ることが主ですが、サービスを継続する上で、適用し辛い場面も往々にしてあります。</p>
<p>そもそもなぜセキュリティアプライアンスに頼らなければならないのかを考えた時に、セキュアなシステム企画や要件定義・設計に行き着くためです。</p>
<p>&nbsp;</p>
<h1>注目した点</h1>
<p>本書は、ほぼDDDが絡む内容となっており、DDDはソフトウェアの価値を高めるために考案されたと言えるでしょう。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Clean_Architecture_%2B_DDD%2C_full_application.svg" width="834" height="621" /></p>
<p>DDD を適用することは、旧来のように開発自体をコストとすることから、事業投資としての意識になること、また、ドメインごとの知識をエンジニアと非エンジニアで共有できることの他に、ソフトウェアの複雑さを抑えることができます。</p>
<p>特に 本書の「<strong>第7章 状態の複雑さの軽減」</strong>においては、この複雑さの軽減によりセキュアなコードやアーキテクトが出来上がることのメリットについて言及されており、「部分的普遍エンティティ」や「状態オブジェクトの導入」などのテクニックが紹介されています。</p>
<h1>まとめ</h1>
<p>セキュア・バイ・デザインを適用することで、ソフトウェアがセキュアになるだけでなく、IPA公開している <a href="https://www.ipa.go.jp/files/000055823.pdf">セキュア・バイ・デザイン入門 </a> によれば開発・運用工数の削減に言及されています。</p>
<p>スターフィールドのプロダクトにおいても、よりセキュアなシステム企画・設計をし、より価値のあるサービスを提供していきたいと思います。</p>


61KPtQRcdKL.jpg

書籍レビュー: セキュア・バイ・デザイン &#8211; 安全なソフトウェア設計 &#8211;

コードを綺麗にするために気をつけること

<h1>要件定義とは</h1>
<p>作って欲しい人と作る人の間で「これを実現しましょう」という合意を定めることです。</p>
<p>要件を日常的な単語に置き換えると「注文（オーダー）」が妥当なものになり、</p>
<p><strong>作ってほしい人が　作る人に出す　依頼事項（リクエスト）</strong></p>
<p>ということになります。</p>
<h2>書籍　はじめよう！要件定義　〜ビギナーからベテランまで〜</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17310" src="/uploads-archive/2021/11/youken-207x300.jpg" alt="はじめよう！要件定義" width="207" height="300" srcset="/uploads-archive/2021/11/youken-207x300.jpg 207w, /uploads-archive/2021/11/youken-708x1024.jpg 708w, /uploads-archive/2021/11/youken-768x1111.jpg 768w, /uploads-archive/2021/11/youken-1062x1536.jpg 1062w, /uploads-archive/2021/11/youken-228x330.jpg 228w, /uploads-archive/2021/11/youken.jpg 1092w" sizes="(max-width: 207px) 100vw, 207px" /><br />
<a href="https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%81%8B%E3%82%89%E3%83%99%E3%83%86%E3%83%A9%E3%83%B3%E3%81%BE%E3%81%A7-%E7%BE%BD%E7%94%9F-%E7%AB%A0%E6%B4%8B/dp/4774172286/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=2LBORBVITPUQU&amp;keywords=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9&amp;qid=1636621831&amp;s=books&amp;sprefix=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%2Cstripbooks%2C291&amp;sr=1-1" target="_blank" rel="noopener">はじめよう！要件定義</a></p>
<h2>この本を読もうと思ったのか</h2>
<p>エンジニアとしてコードをかいたり、技術的なところを磨くことは大事だが、お客様が満足できるサービスを提供するいい仕事や効率のよい仕事をしようと思ったときに、最初の要件定義のところをおざなりにするとお客様にも喜んでいただく仕事ができない、最初の要件があいまいだったばっかりにせっかくつくった機能をもう一度やり直し、自分に時間的な負担もかかり、お客様に迷惑がかかるなど誰にとってもいいことがない状況になり得るので、お互いのためにいい仕事ができるようにしっかりと要件定義をできるようにしたいと思ったので読みました。</p>
<h2>なぜ要件定義をするのか？</h2>
<p>世の中には「お任せ」というオーダーやリクエストもよく見かけます。ではなぜ要件が必要なのか。</p>
<p>たとえば「美味しいものを作って」と依頼したとします。その依頼に基づいてコックさんがコックさんなりに考えた結果、ニンジングラッセを作ったとします。でもリクエストした人がニンジンが苦手だった場合、そのニンジングラッセが本当においしかったとしても決して受け入れることができないでしょう。</p>
<p>もしあなたがコックさん側だとしたら「だったら先にニンジンはNGって言っといてよ」という気持ちになると思います。そうならないように、納めるために必要な条件を後出しにするのではなく、先に提示して合意した上でその仕事を行うことが大切で</p>
<p>言わなくても伝わる「はず」という仮説のもとにお互いに仕事を依頼したりされたりし、その結果生じる困り事を事前に回避するための知恵それが要件定義です。</p>
<h3>定義すべき要件の内訳</h3>
<p><strong>・UI</strong></p>
<p><strong>・機能</strong></p>
<p><strong>・データ</strong></p>
<h4>UI</h4>
<p>UIとはUser Interface(ユーザーインターフェイス)の略です。「ユーザーに接するもの」</p>
<p>代表例は画面（スクリーン）です。PCのみならずスマートデバイスの急速な普及によってUIといえば画面の話になることが大半です。UIとは基本的に画面系である前提に話を進めます。</p>
<h4>機能</h4>
<p>機能とは「ソフトウェアにやらせる仕事」の総称です。</p>
<p>たとえば、「消費税を計算する」などが機能になります。</p>
<h4>データ</h4>
<p>3つ目がデータです。先程の「消費税を計算する」という機能の場合計算結果の消費税はデータです。また計算の基となる「売上金額」もデータです。</p>
<p>&nbsp;</p>
<p>この3つの要素「UI」「機能」「データ」が明確に定まってそこで初めてプログラマーはソフトウェアを作ることができます。つまりこの3つの要素がソフトウェア開発における要件として必要な情報になります。</p>
<h3>ゴール＝完成したソフトウェアの状態とは</h3>
<p>「完成したソフトウェア」というゴールを達成するには</p>
<p><strong>そもそも何をもって完成したと納得できるのか</strong></p>
<p>ということを考える必要があります。作り手が側がいくら「ちゃんとできました」と言っても依頼主が</p>
<p>納得しない限りは完成したとは言えません。</p>
<p>依頼主はいったい何をどうすることで完成しているかどうかを確認することができるのか、それは、</p>
<p><strong>UIを通じてソフトウェアを操作すること</strong>によってです。</p>
<p>その上で<strong>操作に対してきちんと機能が動作すること</strong></p>
<p>さらに必要なデータが保持されていることつまり、<strong>機能が必要とするデータがきちんと揃っていること</strong></p>
<p>が大事になります。</p>
<h3>この本の内容をまとめると</h3>
<p>画面遷移図を描こうになります。それ以外は要件定義そのものではなくその前後の工程で行うべき作業だということです。つまり、要件定義は上流工程ではなく中流工程であると言えます。企画と実装の間のブリッジそれが要件定義です。他の工程と混ざっているところを丁寧に削ぎ取った結果、</p>
<p>（UI、機能、データ）になり、それらを図示化したものが画面遷移図になります。</p>
<p>(例）</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17332" src="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png" alt="" width="300" height="144" srcset="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png 300w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-1024x493.png 1024w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-768x370.png 768w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-228x110.png 228w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55.png 1520w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>業務で活かせることができる点</h3>
<p>自分自身も入社前に自らのポートフォリオ作成を設計から経験し、アプリケーション詳細設計書、画面遷移図、テーブル定義書、ER図、ワイヤーフレームなど制作しましたが、</p>
<p>画面遷移図に関してはこのページにこのボタンがあって、押すとデータが作成され、別の画面に遷移する。作成が失敗すると元の画面でバリデーションメッセージを表示させるなど、遷移図を描こうとしたら一つ一つの機能をしっかりイメージでき、把握していないとできないと思いました。</p>
<p>画面遷移図はアプリケーション開発の実装中に、ここはどうだったかな？どれくらいの機能をつくる必要があるのか、期間はこれくらいかかるかななど、その都度自分が迷わないための道標的な役割を果たし、依頼者にご満足いただけるものを提供することにもつながるのかなと思いましたので、業務でも実践していきたいです。</p>


youken-768x1111.jpg

要件定義とは？を解決する。

BEM×SASSってもう古いの？？モダンCSSを試してみる(styled-components編)

<p>前期個人OKRで本「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読みました。</p>
<p><div id="attachment_8841" style="width: 224px" class="wp-caption alignnone"><a href="https://www.amazon.co.jp/Atomic-Design-%EF%BD%9E%E5%A0%85%E7%89%A2%E3%81%A7%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%82%92%E5%8A%B9%E7%8E%87%E8%89%AF%E3%81%8F%E8%A8%AD%E8%A8%88%E3%81%99%E3%82%8B-%E4%BA%94%E8%97%A4-%E4%BD%91%E5%85%B8-ebook/dp/B07CJ5TLK2"><img aria-describedby="caption-attachment-8841" loading="lazy" class="wp-image-8841 size-medium" src="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png" alt="AtomicDesign01" width="214" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png 214w, /uploads-archive/lc/2021/11/AtomicDesign01.png 568w" sizes="(max-width: 214px) 100vw, 214px" /></a><p id="caption-attachment-8841" class="wp-caption-text">出典：Amazon</p></div></p>
<p><span style="font-size: 16px;">本の内容を要約すると</span><span class="md-plain md-expand" style="font-size: 16px;">全部６章で、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第１、２章はUI設計における現状の問題とコンポーネントベースUI開発が必要な理由など、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第３章では、Atomic DesignによるUIコンポーネント設計についての具体的な内容が、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第４、５、６章は前回のブログで紹介した「storybook」と言うUI管理ツールを用いた実践・テスト及び現場における開発ポイントなどで構成されています。</span></p>
<p>今回は、第２、３章元にコンポーネントとAtomic Designの話を少ししたいと思います。</p>
<h2>コンポーネント単位で開発する理由・メリットは？</h2>
<p>コンポーネント化したUIを組み立ていく開発は建築や自動車などにも似ています。大規模であるにもかかわらず、利用者が触れる部分（UI）は、部品単位で組み立てているので、ほとんど不具合はありません。</p>
<ul>
<li class="md-end-block md-p md-focus"><span class="md-plain">コンポーネント単位でテストできる</span></li>
<li class="md-end-block md-p"><span class="md-plain">不具合のリスクを減らせる</span></li>
<li class="md-end-block md-p"><span class="md-plain">メンテナンスがしやすくなる</span></li>
<li class="md-end-block md-p"><span class="md-plain">解決する問題が小さくなる</span></li>
</ul>
<h2>Atomic Designとは？</h2>
<p><a href="https://bradfrost.com/"><span class="md-plain md-expand">アメリカのWebデザイナーBrad Frost氏</span></a><span class="md-plain md-expand">が提唱した、小さいUIコンポーネントを組み合わせて、より大きなコンポーネントを作っていくための<strong>UIデザイン手法(方法論)</strong>です。Atomic Designの「Atomic」は「原子の〜」の意味で、化学からヒントと得たそうで、「Design」は見た目のデザインよりは「設計」の意味が強いです。</span></p>
<p><div id="attachment_8842" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8842" loading="lazy" class="wp-image-8842" src="/uploads-archive/lc/2021/11/AtomicDesign02.png" alt="AtomicDesign02" width="600" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign02.png 1015w, /uploads-archive/lc/2021/11/AtomicDesign02-300x150.png 300w, /uploads-archive/lc/2021/11/AtomicDesign02-768x384.png 768w, /uploads-archive/lc/2021/11/AtomicDesign02-600x300.png 600w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8842" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<p class="md-end-block md-p"><a href="https://atomicdesign.bradfrost.com/table-of-contents/">Atomic Design</a>においては、「Atoms（原子）」「Molecules（分子）」「Organisms（有機体）」「Templates（テンプレート）」「Pages（ページ）」の5つのコンポーネントを作り上げることでWebサイトを完成させます。それぞれのコンポーネントについて<span class="md-plain md-expand">各層の役割分担を説明します</span>。</p>
<h3 class="md-end-block md-p"><span class="md-plain">Atoms(原子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">デフォルトUI、スタンダードなUI、レイアウトパタン、セマンティックなデザイン要素（見出し、アイコンなど同じ意味を持つコンテンツに常に同じ見た目を）などはこの層で管理します。デザインの統一性を支える部分となります。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Molecules(分子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">ユーザーの動機に対する機能（検索、メッセージフォームなど）を提供します。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Organisms(有機体)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">独立して成立するコンテンツを提供します。</span><span class="md-plain">分子との分界が少し曖昧ですが、</span></p>
<p class="md-end-block md-p"><span class="md-plain">分子は、 独立して存在できるコンポーネントではなく、他のコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント</span></p>
<p class="md-end-block md-p"><span class="md-plain">有機体は、独立して存在できるスタンダードアローンなコンポーネントです。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Templates(テンプレート)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">その名の通りページの雛形です。雛形なので具体的なコンテンツは持ちませんが、原子〜有機体層のコンポーネントを実際サービスのページと同様に配置して、レイアウト構造を集中して確認できます。ワイヤの役割だと思います。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Pages(ページ)</span></h3>
<p class="md-end-block md-p md-focus"><span class="md-plain">テンプレート層のコンポーネントに実際のコンテンツを流し込んだ物がページです。つまり、ユーザーが実際に触るプロダクトになります。</span></p>
<p>&nbsp;</p>
<p><div id="attachment_8843" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8843" loading="lazy" class="wp-image-8843" src="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png" alt="AtomicDesign03" width="600" height="399" srcset="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png 1024w, /uploads-archive/lc/2021/11/AtomicDesign03-300x200.png 300w, /uploads-archive/lc/2021/11/AtomicDesign03-768x511.png 768w, /uploads-archive/lc/2021/11/AtomicDesign03-600x399.png 600w, /uploads-archive/lc/2021/11/AtomicDesign03.png 1133w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8843" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<h2 class="md-end-block md-p"><span class="md-plain">終わりに</span></h2>
<p class="md-end-block md-p md-focus"><span class="md-plain">Atomic Designって絶対的な正解ではなく、場合によって従来の画面ごとにUIデザインをした方がいい時もあると思うので、現状に合わせて合うものを取り入れたり、柔軟性を持つのが大事だと思います。究極的な目標は同じく堅牢で使いやすいかつ効率よく作ることなので。</span></p>


コンポーネントとAtomic Design


<p>2021年11月09日、信金中央金庫様主催の「Shopee」出品サポートに係る越境EC活用セミナーに登壇させていただきました。</p>



<p>弊社は、Shopee出品施策を活用したのち、プラスアルファでできる施策として、自社サイト越境ECと補助金・助成金を活用したご提案をさせていただきました。</p>



<p>日本の中小企業様が、海外展開や越境ECに挑戦をするためのヒントになりましたら幸いです。</p>


【信金中央金庫様主催】越境EC活用セミナーに登壇させていただきました。

<p>2021年10月28日、Lazada Japan様（以下、Lazada）、アジアンブリッジ株式会社様（以下、アジアンブリッジ）をお招きして、東南アジア越境ECセミナーを開催しました。今回は、そのダイジェスト版を実際にセミナーで用いられたスライド（一部抜粋）を使ってご説明いたします。</p>
<ol>目次</p>
<li>東南アジアを縦横無尽 &#8211; Lazadaがお手伝いします。</li>
<li>ブランドの「顔」となるECサイトを作ろう！自社で行うアジア越境ECの戦略と注意点</li>
<li>越境ECを開始する際の進出形態とその注意点</li>
<li>事業黒字化は戦略次第！海外販売計画の作り方</li>
</ol>
<h2>１．東南アジアを縦横無尽 &#8211; Lazadaがお手伝いします。</h2>
<p>第１部では、Lazadaのアナン様より、東南アジアの市場について、そして東南アジアで1億人が利用しているLazadaのサービスについてお話しいただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8814" src="/uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9.png" alt="" width="1560" height="875" srcset="/uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9.png 1560w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-300x168.png 300w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-1024x574.png 1024w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-768x431.png 768w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-600x337.png 600w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-1536x862.png 1536w" sizes="(max-width: 1560px) 100vw, 1560px" /></p>
<p>Lazadaは、アリババグループ傘下の東南アジア各国で展開をされているECマーケットプレイスです。アリババグループのノウハウを駆使して、購入者にとってもセラーにとっても使いやすいサービスを提供されています。</p>
<p>例えば、購入者1人1人に合わせたおすすめ商品が表示されたり、ECの買い物以外にも航空券の予約や、タクシーの配車等もLazadaアプリ上で行うことができます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8815" src="/uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0.png" alt="" width="1565" height="881" srcset="/uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0.png 1565w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-300x169.png 300w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-1024x576.png 1024w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-768x432.png 768w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-600x338.png 600w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-1536x865.png 1536w" sizes="(max-width: 1565px) 100vw, 1565px" /></p>
<p>また、Lazadaは初めて越境ECを行うセラー様にとっても使いやすいサービスです。日本の倉庫から東南アジアの各購入者へ輸送することのできる、自社物流を展開しています。東南アジアでメジャーな代引決済にも対応可能です。</p>
<h2>２．ブランドの「顔」となるECサイトを作ろう！自社で行うアジア越境ECの戦略と注意点</h2>
<p>第2部では、弊社の綛谷より、越境ECをECモールと自社サイトで併用するメリットや、初期コストを抑える補助金のご提案などをさせていただきました。</p>
<p>今回のセミナーのタイトルにもありますが、「ECモール」 or 「自社サイト」ではなく、どちらも併用して、複数チャネルを活用することで、中長期的な越境EC事業の成功を見込みましょうというご提案をさせていただきました。ECモールと自社サイトは強み、弱みが大きく異なり、それぞれの強みを生かすという意味でも、併用することはメリットがあります。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8820" src="/uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6.jpg" alt="" width="960" height="540" srcset="/uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6.jpg 960w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-300x169.jpg 300w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-768x432.jpg 768w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-600x338.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>また、ECモールに比べ、自社サイトの構築は初期投資が大きいですが、補助金や助成金を活用することで、負担を減らすことが可能です。上記、実際に2021年度にIT導入補助金を活用して、越境ECサイトを制作した事例です。</p>
<h2>３．越境ECを開始する際の進出形態とその注意点</h2>
<p>第3部では、アジアンブリッジの嶋様より、海外進出の形態と、越境ECの注意点についてお話しいただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8816" src="/uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b.jpg" alt="" width="1320" height="909" srcset="/uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b.jpg 1320w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-300x207.jpg 300w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-1024x705.jpg 1024w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-768x529.jpg 768w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-600x413.jpg 600w" sizes="(max-width: 1320px) 100vw, 1320px" /></p>
<p>まず初めに、嶋様がタイ在住ということで、現地事情について簡単に教えていただきました。タイなど、東南アジア各国では、主要なショッピングモールにて日本の製品が多数販売されています。また、バンコクに新しくできたスシローは3時間待ちの列ができるなど、その人気の高さも伺えます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8817" src="/uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d.png" alt="" width="1318" height="911" srcset="/uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d.png 1318w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-300x207.png 300w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-1024x708.png 1024w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-768x531.png 768w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-600x415.png 600w" sizes="(max-width: 1318px) 100vw, 1318px" /></p>
<p>そして、越境ECスタート前に事前調査・検討するべき事項についても、お話しいただきました。現地事情を把握した上で、どのような戦略を立てることができそうなのか、検討する必要があります。</p>
<h2>４．事業黒字化は戦略次第！海外販売計画の作り方</h2>
<p>最後には、アジアンブリッジの濱崎様より、越境ECの成功するポイント、販売計画の立て方や、実際の事例についてご紹介いただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8818" src="/uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0.png" alt="" width="1319" height="914" srcset="/uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0.png 1319w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-300x208.png 300w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-1024x710.png 1024w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-768x532.png 768w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-600x416.png 600w" sizes="(max-width: 1319px) 100vw, 1319px" /></p>
<p>まず初めに、海外販売が成功されている企業様の特徴として、いくつかのポイントをご紹介いただきました。中長期的な目標の中で、現場の意思決定がはやい企業様の方が、成功されているそうです。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8819" src="/uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42.png" alt="" width="1318" height="913" srcset="/uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42.png 1318w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-300x208.png 300w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-1024x709.png 1024w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-768x532.png 768w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-600x416.png 600w" sizes="(max-width: 1318px) 100vw, 1318px" /></p>
<p>また、ECモールと自社サイトを併用したケースでの事例をお話しいただきました。自社ECへの誘導広告への露出を増やすと、自社ECでもECモールでも売上が上がる相関関係があることが分かります。このような複数チャネルでの販売施策を、越境ECを検討する段階で、検討事項に入れておいても良いでしょう。</p>
<h2>最後に</h2>
<p>終了時刻が過ぎても、たくさんの方が質問をお寄せくださり、大変盛り上がるセミナーとなりました。少しでも、東南アジア越境ECをご検討中の企業様のお役に立つ情報が提供できましたら幸いです。</p>
<p>今回のセミナー内容や、各社サービスに関してご質問がございましたら、各社にお問い合わせください。</p>


越境EC in 東南アジア！複数の販路を活用し、効果的に売り上げを伸ばす戦略＆費用大公開！セミナーレポート

51MgH8Jmr3L-3.jpg

わかりやすいコードを書くシンプルなテクニック


<p></p>



<h2>はじめに</h2>



<p class="crayon-selected">「越境ECでどんな商品が売れているの？」というのは非常によく聞かれる質問ですが、とても答えるのが難しい質問でもあります。</p>



<p>そんななか、「お菓子」を詰め合わせて “毎月１回・定額” で届けるサブスクリプションボックスが越境ECでたいへん伸びているので、こちらでシェアします！</p>



<h2>お菓子詰め合わせの定期便がすごい</h2>



<h3>高級路線のBokksu（ボックス）</h3>



<p>2016年に日本のお菓子をサブスクリプションで提供するサービスをアメリカで開始。コロナ渦で売上を前年比3倍に伸ばし、年間継続売上高は250万ドル（約28億円）に。</p>



<p>月額サブスクで49.95ドル（約5500円）。</p>



<p>日本のスナックを寄せ集めたモノではく、日本の地方メーカーによる名産お菓子を毎月テーマごとにキュレーションし、作り手の職人の物語とともに「体験」として届けています。</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="482" height="596" src="/uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec.png" alt="" class="wp-image-8757" srcset="/uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec.png 482w, /uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec-243x300.png 243w" sizes="(max-width: 482px) 100vw, 482px" /></figure>



<h3>スナック菓子のTokyo Treat Shop</h3>



<p>コンビニやスーパーで見かけるようなスナック菓子の詰め合わせを米国を中心に120か国に向けて越境ECをしています。毎月テーマを決めて、そのテーマに合わせたお菓子やドリンクを詰めています。2021年9月には 「Okinawa」と書いてあって、関東住みの私も知らないようなお菓子までありそうです。</p>



<p>月額のサブスク代は3,800円ほど。</p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="1024" height="523" src="/uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1024x523.png" alt="" class="wp-image-8791" srcset="/uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1024x523.png 1024w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-300x153.png 300w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-768x392.png 768w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-600x306.png 600w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1536x784.png 1536w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91.png 1755w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<h3> 世界中のお菓子が毎月届くTreat </h3>



<p>アメリカ・カリフォルニア州サンフランシスコに拠点を持つ企業が運営しているようです。毎月異なる国のお菓子の詰め合せが入っています。地域は「アジア」「ラテンアメリカ」「オーストラリア」「ヨーロッパ」「アフリカ」「北アメリカ」とまさに世界中が対象。お菓子と一緒に、そのお菓子の解説や、その国の特徴などが書かれたカードも同封されています。</p>



<p>【 STANDARD BOX 】<br>・ 月額 13.95ドル（約 1570円）※アメリカ国内は送料無料。<br>・毎月1回お届け<br>・毎月異なる国のお菓子が4〜6個届く</p>



<p>【 PREMIUM BOX 】<br>・ 月額 25.95ドル（約 2910円）※アメリカ国内は送料無料。<br>・ 毎月1回お届け<br>・毎月異なる国のお菓子が8〜12個届く</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="900" height="600" src="/uploads-archive/lc/2022/01/original-1.jpg" alt="" class="wp-image-9310" srcset="/uploads-archive/lc/2022/01/original-1.jpg 900w, /uploads-archive/lc/2022/01/original-1-300x200.jpg 300w, /uploads-archive/lc/2022/01/original-1-768x512.jpg 768w, /uploads-archive/lc/2022/01/original-1-600x400.jpg 600w" sizes="(max-width: 900px) 100vw, 900px" /></figure>



<h2>海外の反応</h2>



<figure class="wp-block-embed is-type-rich is-provider-埋め込みハンドラー wp-block-embed-埋め込みハンドラー wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="The ULTIMATE Japanese Snacks TASTE TEST! - Tokyo Treat Snack Box REVIEW! Kit Kat, Oreo + MORE!" width="500" height="281" src="https://www.youtube.com/embed/SFNN--S-tZ8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p>楽しそうです^^</p>



<h2>まとめ メリットと新規参入時の課題</h2>



<p>これまでの日本発の越境ECの成功事例は、化粧品やサプリメントの単品リピート通販が多くありました。このモデルが成功した理由としては、<strong>原価が安い、重量が軽いため郵送費が安い、定期なのでマーケティング費用が比較的抑えられる、日本製という強みを活かせる</strong>、などがありました。</p>



<p>この成功の要因が、お菓子のサブスクリプションにはすべて当てはまります。</p>



<ul><li>原価：メーカーから直接仕入れて<em>20%</em>以下に抑えているのではないでしょうか。</li><li>輸送コスト：海外配送費は箱の大きさではなく重さで決まるため、スナック菓子などの軽いお菓子は有利です。<em>500g</em>以下に抑えていると思われます。</li><li>定期便：将来的な売り上げ予測が立てやすく、利益も残しやすいです。</li><li>日本製：「わざわざ越境ECで買わなくてはいけない（日本のものでなくてはいけない）」理由が明確です。</li></ul>



<p>このように考えると、お菓子のサブスクリプションは越境ECにはまる商品として非常に有効です。<br>しかも参入障壁も低いため、新たに進出しようとされる方もいるかもしれません。</p>



<p>しかしながら、このビジネスモデルはアメリカの大手メディアでも特集が組まれるほどで、これから市場に出るのでは後発組と言えます。先行している企業から顧客を奪うには、質・量ともにハイレベルなマーケティングが求められるでしょう。加えて、すぐに仕入れられる商品がゆえに、商品の差別化に苦労すると思われます。</p>



<p>実は私の知人も数年前にお菓子のサブスクを海外向けに行っていたのですが、そこはいつの間にか撤退していました。詳しい理由は把握していませんが、一筋縄ではいかないことは間違いないと思います。</p>



<blockquote class="wp-block-quote"><p>季節やテーマも大事なのですが、珍しいフレーバーや限定商品など、いかにインパクトのある商品を入れるかという部分も意識しています。常に卸やメーカーと連絡を取り合い、発売情報や終売情報をいかに前倒しで入れるかが重要ですね。テーマとラインナップ、そして予算組み。結構こまごまとした調整が必要なんですよ。</p><cite><a href="https://ecnomikata.com/original_news/20941/">Tokyo Treat Shop 担当者のインタビュー</a></cite></blockquote>



<p>上記のインタビューにもあるように、細かな気配り、いわゆる<strong>おもてなし</strong>が求められるのでしょう。</p>


<p><small> 《参考・画像出典》<br />参考：<a href="https://www.bokksu.com/" target="_blank" rel="noopener">BOKKSU</a> , <a href="https://tokyotreat.com/" target="_blank" rel="noopener">tokyo treat</a></p>
<p></small></p>

【2021越境ECトレンド】<br>「お菓子×サブスク×越境EC」がすごい


<h2>はじめに</h2>



<p>ECで海外展開をするときに気を付けるべき返品ルール特集、第3弾は中国です。巨大ECモールが複数あり、非常に発達したEC市場を持つ中国の返品事情は、前回紹介したドイツとは大きく異なります。</p>



<h2>2013年消費者権益保護法改正</h2>



<p>驚異のスピードで近年巨大市場に成長した中国のEC市場ですが、その中で返品関連の大きな動きといえば、まず2013年に消費者権益保護法が改正されたことでした。これにより、インターネットショッピングにおいて、購入者は7日間は理由なく返品する権利を有すると定められました。<br>しかし、適用範囲などの詳細な規定がなかったため、結局返品をめぐるショップと消費者間のトラブルは、数多く発生し続けたようです。</p>



<h2>「返品理由を問わない7日以内のネット通販購入品返品に関する暫定弁法」</h2>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="683" src="/uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1024x683.jpg" alt="" class="wp-image-8790" srcset="/uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1024x683.jpg 1024w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-300x200.jpg 300w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-768x512.jpg 768w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-600x400.jpg 600w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1536x1024.jpg 1536w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>そのような問題をものともせず、ダブルイレブン（独身の日）を始めとしたECショッピングフィーバーも年々勢いを増していき、日本のニュースでも度々取り上げられるようになったのはご存じの通りです。<br>そんな中、2017年1月に「返品理由を問わない7日以内のネット通販購入品返品に関する暫定弁法（网络购买商品七日无理由退货暂行办法）」が公布、同年3月に施行されました。<br>この法律は、ネット販売者が購入者に対して、1回の購入ごとに「購入の確認」を行う必要があるが、もし「購入の確認」が購入者から得られないまま、購入者が7日以内に返品した場合、それがどのような理由であったとしても、原則その返品を拒絶することができないというものです。そして返品をする場合は、購入者は7日間以内（商品を受け取った日の翌日から計算）にショップ側に対して申し立てをしなければなりません。</p>



<p>「購入の確認」というのがピンとこないのですが、こちらの<a href="https://ameblo.jp/puki2018/entry-12662082538.html?frm=theme" target="_blank" rel="noopener">淘宝網（タオバオ）で買い物をしている方のブログ</a>によると、商品到着後に商品を受け取ったことを知らせる（＝取引完了とする）ボタンを押す必要があるそうなので、中国現地ECでは、何かしらの形で「購入確認」ができるようにしなければならないものと思われます。</p>



<p>モールやサイトによるようですが、「購入確認」をしたか否かで、返品のしやすさや返品時の送料負担額が変わってくるようなので、購入者としては注意が必要ですね。もちろんショップ側も、「商品販売過程において、明確な「手続きの流れ」を設けなければならない」と定められているので、モール出店時やECサイト構築時にはきちんと弁法に基づいた返品ルールを定め、それを明示しなければなりません。</p>



<h2>返品できない商品は？</h2>



<p>上記は原則であり、7日間以内でも返品できない商品やケースもあります。この点が明記されたのも、消費者権益保護法改正との大きな違いです。<br>ショップ運営者は、販売する商品が返品不可商品に該当するか事前に確認したうえで、返品ルールを定めるといいでしょう。内容としては日本のクーリングオフ制度に近しいものがあると思います。<br>以下、返品できないものや事例の一例です。</p>



<p><ul>
<li>特注品（オーダーメイド商品）</li>
<li>腐敗しやすい生鮮食品</li>
<li>コンピュータのソフトウェアなどのデジタル製品</li>
<li>開封後に品質が変わってしまうような商品</li>
<li>起動または試用すると、価値が大幅に下がる商品</li>
<li>販売時に品質保証期間が迫っている商品</li>
<li>「完全な状態」でなくなってしまった場合（傷をつけたり、付属品を紛失してしまった場合など）</li>
</ul></p>



<h2>まとめ</h2>



<p>今回は中国の返品ルールについて紹介しました。<br>ルールが明文化されたことで、以前に比べると返品トラブルや返品による販売者・メーカーの負担は減っているとされていますが、問題が解決したとはいいがたいです。特にダブルイレブンなどで安さと熱気につられて衝動買いした購入者が、商品受け取り後に不用品として返品することは少なくありません。また、AIをサクラとして用いて大量買いをし、販売規模を拡大させ、後日返品するといった返品ルールを悪用する販売者もいるらしく、プラットフォーマー側が取り締まりに乗り出すこともあるとか。<br>しかしこの問題がある程度解決していけば、中国EC市場はさらに発展していくことでしょう。</p>


<p><small> 《参考・画像出典》<br />参考：<a href="https://kuno-cpa.co.jp/china_blog/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%81%A7%E3%81%AE%E8%B3%BC%E5%85%A5%E5%95%86%E5%93%81%E3%81%AE7%E6%97%A5%E9%96%93%E7%84%A1%E7%90%86%E7%94%B1%E8%BF%94%E5%93%81%E6%9A%AB/" target="_blank" rel="noopener">中国進出ブログ</a>　<a href="http://j.people.com.cn/n3/2017/0321/c94475-9192990.html" target="_blank" rel="noopener">人民網日本語版</a>　<br /></small></p>

harry-cao-532CMXLd7zg-unsplash.jpg

越境ECでも要注意！中国における返品ルールとは

<div>
<div>スターフィールドでは、ソースコードの開発管理に <a href="https://github.com/">GitHub</a> を使っています。</div>
<div>GitHubでは、ソースコードを管理するだけではなく、開発物の承認ですとかサーバーへのデプロイも実行できるのですが、その一連の流れを実施してくれる、<a href="https://github.co.jp/features/actions">GitHub Actions</a>  があります。</div>
</div>
<div></div>
<div>
<div>GitHub Actions については、公式ドキュメント以外にも、ClassmethodさんのDevelopers.IOにて、<a href="https://dev.classmethod.jp/tags/github-actions/">詳しく解説</a>をされているので、 そちらをご覧いただくとして、</div>
<div>この記事では、「GitHub Actions 初心者」としての感想などを書いてみたいと思います。</div>
<div></div>
<h2>どういうことをしたいのか</h2>
<div>PHP のソースコードを書いて、静的コード解析ツールを通して評価する Workflow を作成します。</div>
<div>静的コード解析ツールには、 <a href="https://phpstan.org/">PHPStan </a> を用います。</div>
<h2>実験</h2>
</div>
<div></div>
<h3>Workflowの作成</h3>
<div>
<div>PHPStanは、GitHub Packagesにコンテナが公開されているので、それを利用します。</div>
<div>


		<div id="crayon-64954036ed79d922599881" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
ghcr.io/phpstan/phpstan</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed79d922599881-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed79d922599881-1"><span class="crayon-i">ghcr</span><span class="crayon-sy">.</span><span class="crayon-i">io</span>/<span class="crayon-i">phpstan</span>/<span class="crayon-i">phpstan</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>また、作成するWorkflow の一部には、 Greg Bowler氏による PHP Actionsを利用させていただきました。</div>
<div>https://github.com/php-actions/phpstan</div>
</div>
<div></div>
<div></div>
<div>Workflowは、 .github/workflow/phpstan.yaml として保存しました。</div>
<div>


		<div id="crayon-64954036ed7a1591821963" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">YAML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
name: phpstan

on: [push, pull_request]

jobs:
  php-stan-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: pwd; find  ./
      - run: docker run --rm -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-4">4</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-6">6</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-8">8</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-10">10</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a1591821963-1">name<span class="">: phpstan</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-2">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-3">on<span class="">: [push</span><span class="crayon-o">,</span><span class="crayon-h"> </span>pull<span class="crayon-sy">_</span>request<span class="crayon-o">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-4">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-5">jobs<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-6"><span class="crayon-h">&nbsp;&nbsp;</span>php-stan-test<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>runs-on<span class="">: ubuntu-latest</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>steps<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>uses<span class="">: actions/checkout@v2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: pwd; find&nbsp;&nbsp;./</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: docker run --rm -v `pwd`</span><span class="">:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>対象とするPHPのコードは、<a href="https://phpstan.org/">PHPStanのトップページ</a>にあるコードです…。</div>
<h3></h3>
<h3>PHPStan Config(neon)の作成</h3>
<div></div>
<div>


		<div id="crayon-64954036ed7a3942773136" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">YAML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
parameters:
    paths:
        - ../src/php_src/
    level: 8</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a3942773136-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a3942773136-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a3942773136-1">parameters<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>paths<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a3942773136-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span><span class="crayon-o">.</span><span class="crayon-o">.</span>/src/php<span class="crayon-sy">_</span>src/</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>level<span class="">: 8</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>とても短いneonですが、これで十分な動作をします。</div>
<div></div>
<div>
<div>PHPStan には、0〜9までの <a href="https://phpstan.org/user-guide/rule-levels">Rule Level</a>  がありますが、</div>
<div>最高レベルの level: 9を指定すると、</div>
<div></div>
<div>


		<div id="crayon-64954036ed7a4530306882" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
Level config file phar:///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a4530306882-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a4530306882-1"><span class="crayon-e">Level </span><span class="crayon-e">config </span><span class="crayon-e">file </span><span class="crayon-i">phar</span><span class="crayon-sy">:</span><span class="crayon-c">///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>とのエラーが発生しました。Dockerイメージの中には、level:9 の neon ファイル用意されていないようです。</div>
<div></div>
<div>そのため、level: 8 を指定しました。</div>
</div>
<div></div>
<h3>Workflowの実行</h3>
<div>GitHub Actions の Workflow を通して、PHPStanを実行した結果です。</div>
<div></div>
<div>level:8 だと、</div>
<div><img decoding="async" loading="lazy" class="alignnone wp-image-17230 size-medium" src="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png" alt="" width="300" height="146" srcset="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png 300w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-228x111.png 228w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628.png 651w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>最低レベルの level: 0 だと、</div>
</div>
<div></div>
<div><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17231" src="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png" alt="" width="300" height="127" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png 300w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-228x96.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08.png 642w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>level:8 の方が手厳しく指導されてますね！</div>
</div>
<div>そもそも、level:8 で、まともなコードと言えるでしょう。</div>
<div>静的コード解析は、最高レベルで実施するに限ります。</div>
<div></div>
<div>
<h2>まとめ</h2>
<div>コードの品質を保つには、静的コード解析ツールを実行する他にも、コードレビューを確保する必要がありますが、GitHub Actionsを使って、コードが更新されるたびに静的コード解析ツールが実行されると、品質の悪いコードが入り込む余地がありません。</div>
<div>お客さまが触れる製品サービスの品質をあげていく上でも、また、エンジニアの負担軽減のためにも、このようなGitHub Actionsを活用していきたいです。</div>
</div>

Octocat-768x638.png

GitHub Actions を使って静的コード解析を行うのがとても便利

cssのみで実装できる！モーフィングアニメーション


<h2>はじめに</h2>



<p>まだ見ぬ海外のEC関連事業を少しずつ調べてご紹介しています。今回はアメリカ発のフルサービスEコマースを謳う「<a href="https://fastspring.com/" target="_blank" rel="noreferrer noopener">FastSpring</a>」を紹介します。</p>



<h2>「FastSpring」社について</h2>



<p>会社の概要情報はLinkedinの方が詳しく記載がありますので、またLinkedinからの引用になります。</p>



<p><meta charset="utf-8">FastSpring社は、2005年創業でアメリカのサンタバーバラ、オランダのアムステルダム、カナダのハリファックスに拠点を置く未上場企業です。サンタバーバラはカリフォルニア州ではありますが、IT企業が集まるサンフランシスコまでは500km以上離れていて、ここでも地方都市に拠点を置くあるあるに当てはまります。</p>



<h2>フルサービスEコマースって何？</h2>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="629" src="/uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-1024x629.png" alt="" class="wp-image-8677" srcset="/uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-1024x629.png 1024w, /uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-300x184.png 300w, /uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-768x472.png 768w, /uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-600x369.png 600w, /uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience-1536x944.png 1536w, /uploads-archive/lc/2021/10/About-FastSpring-Enabling-Total-Flexibility-in-Your-Digital-Shopping-Experience.png 1702w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>タイトルでも記載しましたが、<meta charset="utf-8">FastSpring社は、フルサービスEコマースを謳っており、その名の通り、Eコマース領域を全方位的にサービス範囲としています。</p>



<h3>製品例</h3>



<ul><li>決済代行</li><li>サブスクリプション管理</li><li>定期課金（サブスクリプション管理とは分けているようです）</li><li>VAT、税管理</li><li>不正利用の管理</li><li>アフィリエイトネットワーク</li></ul>



<h3>ソリューション例</h3>



<p>上記の製品を組み合わせて以下をソリューションとして提供しています。</p>



<ul><li>デジタルコンテンツ販売</li><li>ソフトウェア販売</li><li>SaaS販売</li><li>BtoB</li></ul>



<p>SaaSを販売するというのがイメージしにくいですが、導入企業からその詳細を考えてみました。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1007" height="317" src="/uploads-archive/lc/2021/10/FastSpring-Digital-Commerce-Platform-for-Software-SaaS-1.png" alt="" class="wp-image-8679" srcset="/uploads-archive/lc/2021/10/FastSpring-Digital-Commerce-Platform-for-Software-SaaS-1.png 1007w, /uploads-archive/lc/2021/10/FastSpring-Digital-Commerce-Platform-for-Software-SaaS-1-300x94.png 300w, /uploads-archive/lc/2021/10/FastSpring-Digital-Commerce-Platform-for-Software-SaaS-1-768x242.png 768w, /uploads-archive/lc/2021/10/FastSpring-Digital-Commerce-Platform-for-Software-SaaS-1-600x189.png 600w" sizes="(max-width: 1007px) 100vw, 1007px" /></figure>



<h3>SaaSサービスの課金を担っている</h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="994" src="/uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9-1024x994.png" alt="" class="wp-image-8680" srcset="/uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9-1024x994.png 1024w, /uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9-300x291.png 300w, /uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9-768x745.png 768w, /uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9-600x582.png 600w, /uploads-archive/lc/2021/10/50bb6fed2bcc23837e44181f326ceff9.png 1177w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>例えば、SketchはUIデザインツールとして有名なサービスですが、Sketchの有料会員の管理を、Fastspringのソリューションが担っていると考えられます。Sketch内のメンバーは、営業業務を行わずに、Sketchそのものの開発に専念ができるといった具合です。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="697" src="/uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1024x697.png" alt="" class="wp-image-8682" srcset="/uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1024x697.png 1024w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-300x204.png 300w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-768x523.png 768w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-600x408.png 600w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome.png 1259w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>もう一つ分かりやすい事例を紹介します。上記は、メールソフトで、今ではGmailで完結している人も少なくないかと思いますが、OutlookやThunderbirdと同じようなインストール型のメーラーです。こちらも、一度だけの決済と年間の課金のプランが用意されており、MailBirt Businessを選択した状態が下記になります。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="991" height="1024" src="/uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1-991x1024.png" alt="" class="wp-image-8681" srcset="/uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1-991x1024.png 991w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1-290x300.png 290w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1-768x794.png 768w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1-600x620.png 600w, /uploads-archive/lc/2021/10/Mailbird-Pricing-Mailbird-Personal-is-great-Mailbird-Business-is-Awesome-1.png 1322w" sizes="(max-width: 991px) 100vw, 991px" /></figure>



<p>ポップアップが上がり、（MailBird本体サイトは翻訳されていないのに）日本語に翻訳されたFastspringの決済画面が立ち上がり、年間のサブスクリプションと消費税10%と表示されています。日本の消費税の計算までされた金額での決済が可能になっています。</p>



<h2>FastSpringのBtoBカートとしてのポジショニング</h2>



<figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="928" height="1024" src="/uploads-archive/lc/2021/09/zoeyreviews-928x1024.png" alt="" data-id="8670" data-full-url="/uploads-archive/lc/2021/09/zoeyreviews.png" data-link="https://launchcart.jp/contents/ekkyo_ec-btob_zoey_america/attachment/zoeyreviews/" class="wp-image-8670" srcset="/uploads-archive/lc/2021/09/zoeyreviews-928x1024.png 928w, /uploads-archive/lc/2021/09/zoeyreviews-272x300.png 272w, /uploads-archive/lc/2021/09/zoeyreviews-768x848.png 768w, /uploads-archive/lc/2021/09/zoeyreviews-600x662.png 600w, /uploads-archive/lc/2021/09/zoeyreviews.png 1070w" sizes="(max-width: 928px) 100vw, 928px" /></figure></li></ul></figure>



<p>前回に続き<a rel="noopener" href="https://www.softwarereviews.com/categories/b2b-ecommerce?fbclid=IwAR2dkCxabpLg8kd9hOAopAR0vP3P3ddGYX8O0xsHtRdk3E9Z9MzZN9bfWwA" target="_blank">SoftwareReviews</a>の記事でご紹介します。</p>



<p>BtoB Ecommerce Platformsのポジショニングマップにおいては、Salesforceと肩を並べ、上場企業であるBigCommerceやShopifyよりも高く評価され、マーケットのリーダーであることがわかります。</p>



<h2>Fastspringの価格</h2>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="537" src="/uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-1024x537.png" alt="" class="wp-image-8685" srcset="/uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-1024x537.png 1024w, /uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-300x157.png 300w, /uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-768x403.png 768w, /uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-600x315.png 600w, /uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce-1200x630.png 1200w, /uploads-archive/lc/2021/10/Pricing-Do-More-with-FastSpring-Full-Service-Ecommerce.png 1357w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>価格は公表されておりません。デモ環境も全て問い合わせベースとなっております。前回ご紹介したBtoBカートのZoeyも価格は公表しておりませんので、BtoC向けのカートとは大きく異なるところなのでしょう。</p>



<h2>まとめ</h2>



<p>Fastsrpingはソフトウェア企業やBtoB企業、または決済代行のみといった、Eコマース上のあらゆるフェーズや業種に対応するまさにフルサービスEコマース企業でした。</p>



<p><small><br>《参考・画像出典》 <a rel="noopener" href="https://www.softwarereviews.com/categories/b2b-ecommerce?fbclid=IwAR2dkCxabpLg8kd9hOAopAR0vP3P3ddGYX8O0xsHtRdk3E9Z9MzZN9bfWwA" target="_blank"><meta charset="utf-8"></a><a rel="noopener" href="https://www.zoey.com/" target="_blank"><meta charset="utf-8"></a><a rel="noopener" href="https://www.zoey.com/" target="_blank"><meta charset="utf-8"></a><a rel="noreferrer noopener" href="https://fastspring.com/" target="_blank">FastSpring</a></small>, <small><a rel="noopener" href="https://www.softwarereviews.com/categories/b2b-ecommerce?fbclid=IwAR2dkCxabpLg8kd9hOAopAR0vP3P3ddGYX8O0xsHtRdk3E9Z9MzZN9bfWwA" target="_blank">SoftwareReviews</a><br></small></p>

FastSpring-Digital-Commerce-Platform-for-Software-SaaS.png

海外ECカート企業を独自解説！アメリカ発フルサービスEコマースFastSpring

<h2>はじめに</h2>
<p>EC（越境EC）を始める際に、どういった形でオンライン上に出店するべきか、考えられるでしょう。<br />
ECでの出店する方法として、大きく分けて2つ「自社ECサイト」と「ECモール」の手法があります。<br />
かつては、「どちらか１つを選ぶ」ということで、自社ECサイトとECモールは競合にあたると見られていたのですが、ここ最近は「併用」することで効果的に売り上げが上がるというエピソードが多々見受けられます。<br />
今回は、越境ECを始めるなら、自社ECサイトとECモールのどちらが良いかというお話ではなく、「どちらも使った方が良い理由」についてご説明します。</p>
<h2>自社ECサイトとECモールの違い</h2>
<p>まず、自社ECサイトとECモールの併用のお話をする前に、それぞれの特徴や、強み・弱みについてお話します。</p>
<h3>ECモールとは？</h3>
<p>ECモールとは、日本いう「楽天」「Amazon」「Yahoo!ショッピング」のようなマーケットプレイスのことです。<br />
越境ECにおいては、中国の「天猫（T-mall）」「京東（JD）」、東南アジアの「Shopee」「Lazada」、欧米では「ebay」といったサービスが有名です。1つの売り場に、何社ものセラー（売主）が&#8221;出店&#8221;や&#8221;出品&#8221;をするスタイルで、オンライン上のショッピングモールというイメージがピッタリかもしれません。</p>
<h3>自社ECサイトとは？</h3>
<p>一方、自社ECサイトとは、自社商品が販売されているサイトのことです。<br />
ユニクロやABCマートなどは、実店舗のほかに、自社でECサイトを運営されているのを見たことがある方も多いのではないのでしょうか。<br />
自社ECサイトは、別名「オウンドEC」「独自ドメイン（自社でドメインを取得するため）」「Direct to Consumers（D2C）」などと呼ばれたりもします。<br />
※弊社のLaunchCartは、自社ECサイトを制作する際にご利用いただくカートシステムです。</p>
<h2>自社ECサイトとECモールの強み・弱み</h2>
<p><img loading="lazy" class="alignnone size-large wp-image-8593" src="/uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-1024x576.jpg" alt="" width="1024" height="576" srcset="/uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-1024x576.jpg 1024w, /uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-300x169.jpg 300w, /uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-768x432.jpg 768w, /uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-600x338.jpg 600w, /uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-1536x864.jpg 1536w, /uploads-archive/lc/2021/10/xps-Gi3iUJ1FwxI-unsplash-2048x1152.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
ここまで見ると、どのような形態、売り場で販売を行いたいか、<br />
つまり、自社ECサイトとECモールのどちらにするか、というだけな気がしてしまいます。<br />
しかし、自社ECサイトとECモールは、それぞれ得意な分野が異なるため、強み・弱みの部分について見ていきましょう。</p>
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33%;">自社ECサイト</td>
<td style="width: 33%;"></td>
<td style="width: 33%;">ECモール</td>
</tr>
<tr>
<td style="width: 33%;">ある程度工数が必要</td>
<td style="width: 33%;">販売の始めやすさ</td>
<td style="width: 33%;">手軽◎</td>
</tr>
<tr>
<td style="width: 33%;">広告施策を回さないと難しい</td>
<td style="width: 33%;">集客</td>
<td style="width: 33%;">ECモール既存利用者にアプローチできる</td>
</tr>
<tr>
<td style="width: 33%;">起こりにくい</td>
<td style="width: 33%;">価格競争</td>
<td style="width: 33%;">起こりやすい</td>
</tr>
<tr>
<td style="width: 33%;">独自の世界観を前面に出せる</td>
<td style="width: 33%;">他ブランドとの差別化</td>
<td style="width: 33%;">少し難しい</td>
</tr>
<tr>
<td style="width: 33%;">高い</td>
<td style="width: 33%;">利益率</td>
<td style="width: 33%;">低め（販売手数料がかかる）</td>
</tr>
<tr>
<td style="width: 33%;">取得できる</td>
<td style="width: 33%;">顧客情報</td>
<td style="width: 33%;">取得できない</td>
</tr>
</tbody>
</table>
<h3>集客</h3>
<p>ECモールが圧倒的に強いのは、「集客」の部分です。ECモール内の検索に引っかかったり、関連商品などで紹介されるため、ECモール内のユーザーにアクセスすることが比較的容易です。<br />
また、初めて買う商品だとしても、普段利用しているECモールであれば、ちゃんと届くのだろうか、という心配は自社ECサイトに比べて低いと考えられます。<br />
事業者様にとっても、ECモール側が用意しているテンプレートに、商品の写真や文章を入力するだけで、販売することができる手軽さも嬉しいですね。</p>
<h3>ブランディング</h3>
<p>一方、自社ECサイトが強みとしているのは、「ブランディング」です。<br />
利用されるカートシステムによって違いはあるものの、ECモールに比べると、遥かにデザインを自由に組み立てることができ、サイト全体でブランドの魅力を伝えることができます。<br />
商品の制作工程や、作り手の想いなどを載せたり、食材であればオススメメニューなども一緒に分かりやすく表示することで、商品の魅力を精一杯引き出すことができます。<br />
ECモールで購入される前に、検索エンジンで自社サイトの情報を見つけることができれば、より購入意欲を高めることができます。</p>
<h3>ルール</h3>
<p>ルールの部分でECモールと大きく異なるのは、「販売手数料」と「顧客情報の取得」です。<br />
多くのECモールでは、販売手数料を事業者様からいただいて運営しているため、事業者様にとっては売れれば売れるほどコストがかかることになります。<br />
またECモールでは、顧客の情報（メールアドレスや電話番号等）を取得してマーケティング活動を行うことができないため、一度ご購入いただいたお客様が定着しにくいという問題があります。<br />
自社サイトでは、こういった「販売手数料」や「顧客情報の取得」といった部分での問題が解決できます。</p>
<h2>自社ECサイトとECモールを併用するのがベストな理由</h2>
<p><img loading="lazy" class="alignnone size-large wp-image-8594" src="/uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-1024x683.jpg" alt="" width="1024" height="683" srcset="/uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-1024x683.jpg 1024w, /uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-300x200.jpg 300w, /uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-768x512.jpg 768w, /uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-600x400.jpg 600w, /uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-1536x1024.jpg 1536w, /uploads-archive/lc/2021/10/brendan-church-pKeF6Tt3c08-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
強みと弱みを見てきたところで、なんとなく併用することがベストな理由がお分かりになりましたでしょうか？</p>
<p>ECモールは手軽さや集客に強みがあるものの、商品の訴求や顧客情報の取得といった部分がマイナスポイントです。<br />
一方、自社サイトでは、豊富な情報が提供できるものの、ECモールの持つ集客力を得るには、広告施策がマストになってくるでしょう。(もちろん、ECモールへ出店する場合もある程度の広告施策は必要になりますが。)<br />
自社サイトとECモールを併用することで、どちらの弱みもカバーすることができます。</p>
<p>購入者目線では、<br />
また、少なからずECモールでしか買わない層がいたり、ブランドのファンだから自社サイトでリピート購入して、サンプルやそのブランドの割引クーポンが欲しい人もいらっしゃいます。<br />
お客様が何をお得と感じるのかは、人それぞれなので、少なくとも2つの選択肢を用意しておくことで、幅広いニーズに応えることができます。</p>
<h2>まとめ</h2>
<p>今回は、自社ECサイトとECモールを併用した方が良い理由についてまとめてみました。<br />
実際に、自社サイトとECモールで販売し、成功されている越境EC事業者様のお話を聞いても、裾野を広げるためには複数のチャネルで販売することを意識されていたり、チャネルごとにオファーを変えて購入者のニーズに寄り添られていたりします。<br />
越境ECを始めるとなったら、ゆくゆくはECモールも自社サイトも運営するつもりで、計画を立てるのはいかがでしょうか。</p>
<p>※LaunchCartをご利用いただいている企業様のインタビューです。併せてご覧ください。<br />
  <div class="lcLink">
    <a href="https://launchcart.jp/case/bizki_forit/">
      <figure class="lcLink__figure"><img src="/uploads-archive/lc/2021/06/a8ec8799b27d11c7c4720ce366133fa4-300x169.jpg" alt="株式会社ビズキ様×株式会社フォーイット様"></figure>
      <div class="lcLink__text">
        <h3 class="lcLink__title">株式会社ビズキ様×株式会社フォーイット様</h3>
        <div class="lcLink__info">
          <p class="lcLink__category"></p>
          <p class="lcLink__date">2021.6.23</p>
        </div>
      </div>
    </a>
  </div><br />
  <div class="lcLink">
    <a href="https://launchcart.jp/case/sakura-forest/">
      <figure class="lcLink__figure"><img src="/uploads-archive/lc/2020/11/sakura-forest-ke-300x170.jpg" alt="さくらフォレスト株式会社様"></figure>
      <div class="lcLink__text">
        <h3 class="lcLink__title">さくらフォレスト株式会社様</h3>
        <div class="lcLink__info">
          <p class="lcLink__category"></p>
          <p class="lcLink__date">2021.1.9</p>
        </div>
      </div>
    </a>
  </div></p>
<p><small><br />
《参考・画像出典》<br />
<a href="https://www.j-grab.co.jp/news/eczine-cross-border-trade-20200610/" rel="noopener" target="_blank">JGrab</a>, <a href="https://netshop.impress.co.jp/node/9105" rel="noopener" target="_blank">impress</a>, <a href="https://precs.jp/blog/?p=2933" rel="noopener" target="_blank">D2C・定期通販ノウハウ講座</a><br />
</small>

erik-mclean-nfoRa6NHTbU-unsplash.jpg

越境ECするなら、<br>自社ECサイト×ECモールの併用が効果的だった。<br>どちらか一択ではできない戦略とは。

<h1>TCP/IPとは</h1>
<p>TCP／IPとは通信プロトコルの総称です。インターネットは別々に発達してきた様々な通信技術を組み合わせたものです。そのような組み合わせを実現するための応用力を持つ技術がTCP／IPです。</p>
<h3>プロトコルって何？なぜ必要？</h3>
<p>プロトコルとはコンピューターとコンピューターがネットワークを利用して通信するために決められた<strong>「約束ごと」</strong>になります。</p>
<p>メーカーやCPUやOSが違うコンピューター同士でも同じプロトコルを使えば互いに通信することができます。逆にいうとプロトコルを使用しなければ通信することはできません。</p>
<p>プロトコルにはいくつもの種類があり、それぞれ仕様が明確に決められていて、コンピューター同士が互いに通信するためには、両者が同じプロトコルを理解し、処理できなければなりません。</p>
<p>人間なら知能、応用力、理解力を持っているので、ある程度ルールから外れても意思疎通を図ることができますが、</p>
<p>コンピューターによる通信の場合は、コネクタの形状のような物理的なレベルからアプリケーションの種類のようなソフトウェアのレベルまで、様々な部分で明確な「<strong>約束ごと」</strong>を決めてそれを守るようにしなければ正しく通信することができません。</p>
<h2>マスタリングTCP/IP入門編</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17193" src="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png" alt="" width="209" height="300" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png 209w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-228x328.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1.png 445w" sizes="(max-width: 209px) 100vw, 209px" /></p>
<p><a title="amazonマスタリングTCP/IP入門編" href="https://www.amazon.co.jp/%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0TCP-IP%E2%80%95%E5%85%A5%E9%96%80%E7%B7%A8%E2%80%95-%E7%AC%AC6%E7%89%88-%E4%BA%95%E4%B8%8A-%E7%9B%B4%E4%B9%9F/dp/4274224473/ref=asc_df_4274224473/?tag=jpgo-22&amp;linkCode=df0&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvpone=&amp;hvptwo=&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623&amp;psc=1&amp;th=1&amp;psc=1&amp;tag=&amp;ref=&amp;adgrpid=72867581430&amp;hvpone=&amp;hvptwo=&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623" target="_blank" rel="noopener">マスタリングTCP/IP入門編(書籍)</a></p>
<p>TCP/IPについてコンピューターとネットワーク登場の背景から、コンピューターとネットワークの発展の歴史とそれにまつわるTCP／IPについてOSI参照モデルの機能分類にTCP／IPの機能を当てはめる形で一つ一つ詳しく解説されています。</p>
<p>通信に必要な機能について多くの通信のプロトコルはOSI参照モデルの7層のどれかに当てはめて考えることができます。</p>
<p>詳細を知るには、個々のプロトコルの仕様書をその都度読む必要がありますが、おおよその役割はこの階層モデルのどの層に当たるかで見当をつけることができます。</p>
<h3>なぜこの本に興味をもったのか</h3>
<p>業務での通信エラーなどでプロトコルについて幅広く知識をつけておくことで原因を特定しやすくなるのではないかと思ったことと、ネットワークについて歴史的な発展とともに発達してきた技術について背景を知った方が今後の技術習得がスムーズになると思ったので読みました。</p>
<h2>OSI参照モデル7層の各層の役割</h2>
<h6>7.アプリケーション層</h6>
<p>アプリケーションの中で通信に関係する部分を定めていて、ファイル転送や電子メール、遠隔ログイン(仮想端末)などを実現するためのプロトコルがある。</p>
<h6>6.プレゼンテーション層</h6>
<p>機器固有のデータ表現形式（データーフォーマット）などをネットワーク共通のデータ形式に変換する役割がある。</p>
<h6>5.セッション層</h6>
<p>コネクション（データの流れる論理的な通信路）の確立や切断、転送するデータの切れ目の設定などデータ転送に関する管理を行います。</p>
<h6>4.トランスポート層</h6>
<p>宛先のアプリケーションにデータを確実に届ける役目がある。通信を行う両端のノードだけで処理され途中のルーターでは処理されません。</p>
<h6>3.ネットワーク層</h6>
<p>宛先までデータを届ける役割を持ちます。宛先は複数のネットワークがルーターにつながった先にある場合もあり、そのためのアドレス体系決めやどの経路を使うかなどの経路選択の役割を持ちます。</p>
<h6>2.データリンク層</h6>
<p>直接接続された機器間でのデータフレームの識別と転送。0と1の数字の列を意味のあるかたまり（フレーム）に分けて相手に伝えます。（フレームの生成と受信）</p>
<h6>1.物理層</h6>
<p>ビットの列（0と1の数字の列）を電圧の高低や光の点滅に変換したり、逆に電圧の高低や光の点滅をビットの列に変換したりします。</p>
<h3>TCP/IPのアプリケーション層</h3>
<p>TCP／IPのプロトコルは4層に分けて説明されますが、その中のアプリケーション層をOSI参照モデルに当てはめると、第5層、第6層、第7層のすべての機能が埋め込まれます。<br />
通信コネクションの管理などのセッション層の機能や、データフォーマットの変換というプレゼンテーション層の機能、相手ホストのとのやり取りというアプリケーション層の機能はすべてアプリケーションプログラムが担っています。</p>
<h3>学んだこと</h3>
<p>OSI参照モデルでの一つ一つの紹介はここでは長くなるので割愛しますが、業務でSSLの更新などに携わることがあり、工程としてアプリケーション層での遠隔ログインと呼ばれるSSH接続をします。</p>
<p>以前には遠隔ログインシステムにはTELNETというものもあり、TELNETではログイン時でのパスワードが暗号化されずに送信されるので、通信を盗聴されると不正侵入される危険性があり、SSHという通信内容が暗号化される遠隔ログインシステムが登場し普及したなど、当時はTELNETというシステムが一般的だったのが、システムの脆弱性から新しい技術が発展し、今SSHが普及しているなど、今の技術に至るまでの歴史的な背景や仕組みなどが図になって説明されていたのですごく理解が深まりました。</p>
<h4>業務で活かせることができる点</h4>
<p>今、安心安全とされている技術であっても数年後には脆弱性が見つかり使われなくなったりするので、（SSHにはバージョン1とバージョン2が存在しバージョン1には脆弱性があり、バージョン2の利用が推奨されているなど）エンジニアとして常に新しい技術に対してキャッチアップしていきながら、今使用している技術に対して満足することなく問題がないかを確認し、問題がある場合は日々更新、改善していく意識を忘れずにもつことが大事だなと改めて感じました。</p>


スクリーンショット-2021-10-12-10.08.38-1-1.png

よく聞くけど知らない？TCP/IPについて

<h3><span class="md-plain md-expand">前書き</span></h3>
<p>全Qの個人OKRで、UIUX関連の本「Atomic Design」を読みました。本ではコンポーネントベースでのUI開発を提唱していて、実践の際にツールとしてstorybookを使います。そこでstorybookを知り、使ってみたり、調べてみたりして、すごい良いツールだと感じました。調べてみたらデザインシステムのこともたくさん出てましたので、一緒にブログにまとめました。コンポーネントベースでのUI開発のメリットなど、本の詳しい内容は次回に共有したいと思います〜</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">デザインシステムとは？</span></h2>
<p>デザインシステムとは、デザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのスタイルガイド、UIコンポーネントライブラリ、そしてそれらの管理・運用ルールや、<strong>コード化されたUIコンポーネントの管理ツール</strong>など、さまざまな構成要素で成り立つ「仕組み」です。</p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">※参考になるブログ記事</span></p>
<p class="md-end-block md-p md-focus"><a href="https://www.uxpin.com/studio/jp/blog-jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E4%BE%8B%E3%83%88%E3%83%83%E3%83%97%EF%BC%98/"><span class="md-plain md-expand">デザインシステム例トップ８</span></a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">なぜ管理ツールが必要なのか？</span></h4>
<p class="md-end-block md-p"><span class="md-plain">もちろん、適しているものに対しての話ですが、システム開発に置いて必須要素ではないですがものすごい生産性を高めることができると思います。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">まず、コンポーネントベースのUI開発の最大目的は複雑なUIを確実に組み上げることです。でも、いくら再利用可能なコンポーネントが作成しても文書化管理されていないと意味がないと思います。なので、デザインと開発の生産性をアップするための文書化管理ができるツールが必要になってきます。メリットとしては、UIコンポーネントのカタログとして視覚的に確認できることで、認識の齟齬を無くしたり、再利用可能になるなどがあります。</span></p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">Storybook とは？</span></h2>
<p>UIコンポーネントの管理・テストをすることが出来るオープンソースツールです。React、Vue、Angular、などのJavaScriptフレームワークをサポートしています。</p>
<p>※<a href="https://storybook.js.org/">Storybook公式サイト</a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適しているもの</span></h4>
<ul>
<li>継続的にリリースしていくアプリ</li>
<li>同じプランドの複数のwebサイト</li>
</ul>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適していないもの</span></h4>
<ul>
<li>デザインの統一性が重要ではないもの</li>
<li>一度作れば終わりで継続的にUIを管理する必要がないもの</li>
</ul>
<h3 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">環境インストール</span></h3>
<p>※<a href="https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/">公式サイトのチュートリアル</a></p>
<h4 class="md-end-block md-p"><span class="md-plain">大きな流れ</span></h4>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Create React App プロジェクトを生成する</span></p>
<p class="md-end-block md-p"><span class="md-plain">フレームワークに既にセットされているプロジェクトで、インストールする必要があるため、先にReactプロジェクトを生成します。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Storybookを導入</span></p>
<p class="md-end-block md-p"><span class="md-plain">二つの方法があるらしいです。基本機能が揃っているのをインストールするか、必要な機能を一個ずつインストールする方法です。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">コンポーネントを作る</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">実行</span></p>
</li>
</ol>
<p class="md-end-block md-p md-focus"><span class="md-plain">興味がある方は試してみてください〜</span></p>


Storybookでデザインシステムを始めましょう！

JavaScriptのモダンなオブジェクトの構文・演算子

<h2>はじめに</h2>
<p>台湾では、10月8日から新型コロナウイルスで落ち込んだ消費の刺激策である振興券「五倍券」の利用が始まりました。この記事では、「五倍券」の受け取り方法やECサイトでの利用可否について紹介します。</p>
<h2>五倍券とは</h2>
<p><div id="attachment_960" style="width: 510px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-960" loading="lazy" src="/uploads-archive/lc/2021/10/2021-10-08-10-1024x469.png" alt="" width="1024" height="469" class="size-large wp-image-8505" srcset="/uploads-archive/lc/2021/10/2021-10-08-10-1024x469.png 1024w, /uploads-archive/lc/2021/10/2021-10-08-10-300x137.png 300w, /uploads-archive/lc/2021/10/2021-10-08-10-768x352.png 768w, /uploads-archive/lc/2021/10/2021-10-08-10-600x275.png 600w, /uploads-archive/lc/2021/10/2021-10-08-10-1536x703.png 1536w, /uploads-archive/lc/2021/10/2021-10-08-10.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-960" class="wp-caption-text">【出典】行政院振興五倍券</p></div></p>
<p>「五倍券」は、台湾当局が8月に発表した消費刺激策で、台湾全国民(永久居留権（永住権）を有する外国人や外国人配偶者らも含む)を対象に、5000台湾ドル(約2万円)分の振興券を配布するものです。振興券は現金の代わりとして飲食店や小売店、ホテルなどで利用できますが、公共料金や保険料など一部対象外のものもあります。ECサイトでの扱いについては、後半で解説します。</p>
<p>昨年配布された「三倍券」は1000台湾元を支払うと3000台湾元の消費ができるというものでしたが、今回は自己負担なしで利用できます。当初、前回のように1000台湾ドルの自己負担が検討されていたこともあって、「五倍券」という名称になっています。</p>
<p>日本で2020年4月に実施された「特別定額給付金」は現金10万円が配られました。一方、台湾では振興券となっています。振興券は現金の代わりとして使うことができますが、2022年4月30日までという使用期限があります。振興券自体にもその期限は印刷されています。定額給付金は現金での給付でしたので、その多くが貯蓄にまわったという話もありますが、振興券ではその心配がないというわけです。経済効果として2000億台湾元(8000億)を見込んでいるそうです。</p>
<h2>受け取り方法</h2>
<p><div id="attachment_960" style="width: 510px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-960" loading="lazy" src="/uploads-archive/lc/2021/10/2021-10-08-9-1024x577.png" alt="" width="1024" height="577" class="size-large wp-image-8506" srcset="/uploads-archive/lc/2021/10/2021-10-08-9-1024x577.png 1024w, /uploads-archive/lc/2021/10/2021-10-08-9-300x169.png 300w, /uploads-archive/lc/2021/10/2021-10-08-9-768x432.png 768w, /uploads-archive/lc/2021/10/2021-10-08-9-600x338.png 600w, /uploads-archive/lc/2021/10/2021-10-08-9-1536x865.png 1536w, /uploads-archive/lc/2021/10/2021-10-08-9.png 1854w" sizes="(max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-960" class="wp-caption-text">【出典】行政院振興五倍券</p></div></p>
<p>「五倍券」の受け取りは実態のある紙幣として受け取る方法とクレジットカードや電子マネーなどのデジタル上で受けとる方法の2種類があります。</p>
<p>デジタル上で受け取る場合は、「五倍券」の<a href="https://hpm.5000.gov.tw/cp.aspx?n=299" target="_blank" rel="noopener">公式サイト</a>から、クレジットカードや電子マネーなどとの紐づけを行います。</p>
<p>紙幣として受け取る場合は、3つの方法があります。</p>
<ul>
<li>公式サイトで予約する方法。カードリーダーで健康保険カードを読み取るか「健保快易通」アプリによる認証コードの入力をします。</li>
</ul>
<ul>
<li>コンビニなどのマルチメディア機で予約をする方法。</li>
</ul>
<p>この2つの方法では、コンビニ店舗、スーパーマーケット、ドラッグストアでの受け取りが可能です。</p>
<ul>
<li>中華郵政（郵便局）で予約する方法。中国郵政のホームページや窓口で予約をし、郵便局で受け取ることができます。</li>
</ul>
<p>このようにデジタルを活用した受け取り方法が充実しているのは、台湾ならではでしょう。</p>
<p>政府は、デジタル方式での受け取り方法を推進したいようで、デジタル上で紐づけを行った先着400万人に外食で使える500台湾元（約2,000日本円）分の「好食券」を配布するそうです。また、銀行各社は自社のクレジットカードの利用に繫げようと、様々なキャンペーンを実施しています。</p>
<h2>ECで使える？</h2>
<p><div id="attachment_960" style="width: 510px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-960" loading="lazy" src="/uploads-archive/lc/2021/10/2021-10-08-12-1024x491.png" alt="" width="1024" height="491" class="size-large wp-image-8507" srcset="/uploads-archive/lc/2021/10/2021-10-08-12-1024x491.png 1024w, /uploads-archive/lc/2021/10/2021-10-08-12-300x144.png 300w, /uploads-archive/lc/2021/10/2021-10-08-12-768x368.png 768w, /uploads-archive/lc/2021/10/2021-10-08-12-600x288.png 600w, /uploads-archive/lc/2021/10/2021-10-08-12-1536x736.png 1536w, /uploads-archive/lc/2021/10/2021-10-08-12.png 1878w" sizes="(max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-960" class="wp-caption-text">【出典】MOMOwebページ<br /></p></div></p>
<p>では、「五倍券」はECサイトで使えるのでしょうか。結論からいうと、使うことができます。ただし、海外のECサイトでは利用できません。つまり、日本で運営されているモールや自社サイトでは残念ながら利用することができません。台湾向けの越境ECのサイトも運営が日本などになっている場合利用できないと思われます。</p>
<p>2020年に配布された「三倍券」は、大きく落ち込んだ実店舗での消費を刺激することが優先されたため、台湾国内のECサイトでも使うことはできませんでした。今回も当初、売り上げが一定以上の大手ECサイトでの利用は認めない方針でした。しかし、EC業者が振興券用の専用ページを設け、台湾の店や小規模農家などに販売の場を提供することを条件に利用を認めることとなりました。</p>
<p>各モール型ECサイトでは、「五倍券」にあわせたキャンペーンを打ち出しています。例えば、台湾の大手ECサイトMOMOでは対象商品を「五倍券」で購入すると2%バックするキャンペーンを実施しています。</p>
<h2>まとめ</h2>
<p>今回は、2021年10月8日から利用が開始された「五倍券」について紹介しました。「五倍券」はECサイトでも利用できるとあって、さらなる国内消費の盛り上がりが期待できそうです。越境ECでは利用できないですが、この消費の盛り上がりに便乗して、売り上げを伸ばす施策を考えてみても良いかもしれませんね。</p>
<p><small><br />
《参考・画像出典》<a href="https://5000.gov.tw/" rel="noopener" target="_blank">行政院振興五倍券</a>、<a href="https://www.momoshop.com.tw/edm/cmmedm.jsp?npn=1vEHmBSWVgLj&#038;n=1" rel="noopener" target="_blank">MOMO</a>、<a href="https://jp.taiwantoday.tw/news.php?unit=150&#038;post=207833&#038;unitname=%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9-%E6%94%BF%E6%B2%BB&#038;postname=%E3%82%B3%E3%83%AD%E3%83%8A%E7%A6%8D%E3%81%8B%E3%82%89%E3%81%AE%E7%B5%8C%E6%B8%88%E7%AB%8B%E3%81%A6%E7%9B%B4%E3%81%97%E3%81%B8%E3%80%815%2C000%E5%85%83%E6%8C%AF%E8%88%88%E5%88%B8%E3%81%AE%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3" rel="noopener" target="_blank">TAIWAN TODAY</a><br />
</small></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2021/11/27

2021/11/26

2021/11/18

2021/11/12

2021/11/11

2021/11/10

2021/11/08

2021/11/05

2021/11/02

2021/11/02

2021/10/30

2021/10/30

2021/10/27

2021/10/27

2021/10/21

2021/10/16

2021/10/12

2021/10/12