## はじめに
先日、基本情報技術者試験の受験をしてきましたので、後に続く人に有益な情報を残すため、<br>
本記事では、基本情報技術者試験の攻略方法についてをまとめたいと思います。

## 基本情報技術者試験の実施概要
基本情報技術者試験には、午前中に実施する「科目A 試験」と、午後に実施する「科目B 試験」があります。制限時間や問題数などについては、以下のようになります。<br>
 ![](https://cont.sterfield.co.jp/uploads/2024_01_05_13_10_54_6d03b4b0e6.png) 
試験は、CBT方式で行います。(テストセンターでPCパチパチするやつです)<br>
### 科目A 試験の概要
「科目A 試験」は出題数が全部で60問あり、四肢択一式です。<br>
情報処理分野（テクノロジ系）、マネジメント分野（マネジメント系）、経営・会計分野（ストラテジ系）から出題されます。<br>
プログラミングに関する部分だけではなく、マネジメントや経営など、幅広く勉強しなくてはなりません。<br>
 ![](https://cont.sterfield.co.jp/uploads/2024_01_05_13_12_45_1b7095f228.png) 
### 科目B 試験の概要
「科目B 試験」は、多肢選択の長文読解式で20問出題されます。出題分野は、「アルゴリズムとプログラミング」と「情報セキュリティ」となり、以下のカテゴリで構成されています。<br>
- プログラミング全般（既存プログラムの解読及び変更やプログラムのテストなど）
- プログラムの処理の基本要素（型や変数など）
- データ構造及びアルゴリズム（グラフや整列など）
- プログラミングの諸分野への適用（数理やデータサイエンスなど）
- 情報セキュリティの確保（脆弱性管理バックアップなど）

## 試験の内容
*の数で重要度が表現されています。
### 1.コンピュータ構成要素
- [情報の表現](https://tamotech.blog/2022/10/16/amount-of-information/)**<br>
- [コンピュータの構成](https://tamotech.blog/2022/10/16/computer/)<br>
- [CPU](https://tamotech.blog/2022/10/22/cpu/)<br>
- [CPUの動作原理](https://tamotech.blog/2022/11/12/addressing-method/)<br>
- [CPUの高速化技術](https://tamotech.blog/2022/11/12/cpu-pipline/)<br>
- [半導体メモリ](https://tamotech.blog/2022/11/17/rom-ram/)*<br>
- [補助記憶装置](https://tamotech.blog/2022/11/26/auxiliary-storage/)<br>
- 入出力装置<br>
- [入出力インターフェース](https://tamotech.blog/2022/11/27/input-output-interface/)<br>

### 2.ソフトウェアとマルチメディア
- ソフトウェア*<br>
- [ジョブ管理とタスク管理](https://www.youtube.com/watch?v=CPCZ8hgtPl0)*<br>
- 記憶管理*<br>
- ファイル管理*<br>
- [マルチメディア](https://www.johoka.jp/digital#h.9uo4whoso8hx)<br>

### 3.基礎理論
- 基数変換**<br>
- 補数と固定小数点<br>
- [浮動小数点](https://tamotech.blog/2023/05/02/%e3%80%90ieee754%e3%80%91%e6%b5%ae%e5%8b%95%e5%b0%8f%e6%95%b0%e7%82%b9%e3%81%ae%e8%a1%a8%e7%8f%be%e8%a6%8f%e6%a0%bc%e3%81%a8%e3%81%9d%e3%81%ae%e5%a4%89%e6%8f%9b%e6%96%b9%e6%b3%95/)<br>
- 誤差<br>
- シフト演算*<br>
- 論理演算**<br>
- 半加算器と全加算器<br>
- [計測と制御](https://www.johoka.jp/digital)**<br>
- オートマトン*<br>
- AI**<br>
- 線形代数*<br>
- 確率統計**<br>

### 4.アルゴリズムとプログラミング(B)
- アルゴリズム**<br>
- 配列**<br>
- リスト*<br>
- キューとスタック**<br>
- 木構造*<br>
- データの整列*<br>
- データの探索*<br>
- アルゴリズムの計算量<br>
- プログラムの属性*<br>
- プログラム言語とマークアップ言語*<br>

### 5.システム構成要素
- [システム構成](https://tamotech.blog/2022/12/04/system-configuration/)*<br>
- [クライアントサーバシステム](https://tamotech.blog/2022/12/12/crient-server-system/)*<br>
- [RAIDと信頼性設計](https://tamotech.blog/2022/12/30/raid-level/)*<br>
- システムの信頼性設計*<br>
- システムの信頼性評価**<br>

### 6.データベース技術
- データベース*<br>
- データベース設計*<br>
- データの正規化*<br>
- [トランザクション処理](https://tamotech.blog/2023/01/14/data-transaction-consistency/)**<br>
- [データベースの障害回復](https://tamotech.blog/2023/01/15/roll-forward-and-roll-back/)*<br>
- データ操作とSQL**<br>
- SQL(並べ替え・グループ化)*<br>
- SQL(副問合せ)<br>
- [データベースの応用](https://tamotech.blog/2023/01/28/nosql/)*<br>

### 7.ネットワーク技術
- [ネットワーク方式](https://www.foresight.jp/fe/column/lan-wan/)*<br>
- [通信プロトコル](https://zenn.dev/itpassport/articles/03bd090fa135ba)*<br>
- [ネットワーク接続機器](https://qiita.com/pieceofmysoul1225/items/fb42aeceb0b423e1895d)**<br>
- [IPアドレス](https://zenn.dev/itpassport/articles/acefa57f6d2b76)**<br>
- [IPアドレスのクラス](https://qiita.com/pieceofmysoul1225/items/b75f5d00ca40de49b8b8)**<br>
- [ネットワーク管理とインターネットの応用](https://qiita.com/pieceofmysoul1225/items/143c3c743bca15d65625)*<br>

### 8.情報セキュリティ(B)
- 情報セキュリティと情報セキュリティ管理**<br>
- 脅威とマルウェア**<br>
- サイバー攻撃**<br>
- 暗号化技術**<br>
- 認証技術**<br>
- 利用者認証とネットワークセキュリティ**<br>

### 9.システム開発技術
- 情報システム戦略とシステム企画*<br>
- ソフトウェア開発**<br>
- オブジェクト指向**<br>
- 業務モデリング*<br>
- ヒューマンインターフェース*<br>
- モジュール分割<br>
- テスト手法*<br>

### 10.マネジメント系
- プロジェクトマネジメント*<br>
- 工程管理*<br>
- ITサービスマネジメント*<br>
- システム監査**<br>

### 11.ストラテジ系
- ソリューションビジネスとシステム活用促進**<br>
- 経営組織と経営マーケティング戦略*<br>
- 業績評価と経営管理システム<br>
- 技術開発戦略<br>
- ビジネスインダストリ**<br>
- 品質管理<br>
- 会計財務*<br>
- 知的財産権とセキュリティ関連法規**<br>
- 労働・取引関連法規と標準化*<br>
- オペレーションズリサーチ<br>

※ youtubeで解説してくれている人がいたので、何かわからない事があれば見てください<br>
https://www.youtube.com/@kihonzyouhou/videos

## 攻略方法について
### 基礎的なIT知識をおさえる
基本情報技術者試験の勉強を効果的にするには、まず基礎的なIT知識をおさえましょう。<br>
基礎的なIT知識が身についていなければ、先に進んでも理解が深まりません。<br>
はじめて基本情報技術者試験の勉強をする人は、テキストを何度も読み、用語の意味を理解して、基礎をしっかり身につけましょう。テキストを読むごとに、基礎知識は定着していきます。<br>

### 過去問題を繰り返し解く
基本情報技術者試験の勉強は、過去問題を繰り返し解くことも大切です。<br>
「科目A 試験」の勉強には、変更前の午前試験の過去問題を活用できるため、繰り返し解いて試験対策をしましょう。<br>
できるだけ多くの過去問題を解くことで有利になります。<br>
過去に何度も繰り返し出題されている問題は、重要な問題であることが多いため試験対策に活かしましょう。<br>

「基本情報技術者過去問道場」の活用<br>
https://www.fe-siken.com/fekakomon.php<br>
解説も出てくるので、理解しやすい！<br>

## まとめ
50~100時間くらい勉強時間を確保しましょう。<br>
あとは、集中するだけです。<br>

ちょっと難しいなと思う人は、難易度の低い「ITパスポート試験」を受験してみてもいいかもしれません。<br>

large_9784297131302.jpg

medium_9784297131302.jpg

small_9784297131302.jpg

thumbnail_9784297131302.jpg

9784297131302.jpg

【基本情報技術者試験】効率的な攻略方法について

## はじめに
農林水産省は、訪日外国人が帰国後も、日本で楽しんだ食を再体験できるような環境づくりを目的として、日本産農林水産物・食品の輸出拡大につなげていく「食かけるプロジェクト」を進めています。

その中で、地域の食文化・食体験の魅力を伝える「商品」を越境ECにより販売するプロジェクトを行なっています。

このプロジェクトでは、全国から商品を募集します。選ばれた商品は磨き上げ商品として、各種専門家のアドバイス（商品開発、商品発信など）を受けられるそうです。 以前「食かけるプロジェクト」の概要について詳しく紹介した記事もございます。

[食品の越境ECを農水省が支援！食かけるプロジェクト](https://sterfield.co.jp/blog/ekkyo-ec_ministry-of-agriculture/)

<img src="https://cont.sterfield.co.jp/uploads/chanhee_lee_d_BO_0_Crt4q_C8_unsplash_b8c338949e_6267135e9b.jpg" alt="" width="300" height="200"><br>
今回は、その磨き上げ商品が選定されていたので、一部紹介します。

## 磨き上げ商品のご紹介
### 宇和島じゃこ天（有限会社安岡蒲鉾店：愛媛県）
<img src="https://cont.sterfield.co.jp/uploads/_f6ce1bec8e.jpg" style="display: block; margin: auto;" />


> ほぼ愛媛県内でしか水揚げされない「ほたるじゃこ」を一匹一匹手作業で魚肉解体し、昔ながらに石臼ですり身を練り、菜種油で揚げて作る愛媛県宇和島市の郷土料理。

### 山柿庵やま柿（國和産業株式会社：岡山県）
<img src="https://cont.sterfield.co.jp/uploads/_86039d819e.jpg" alt="" width="400" height="300" style="display: block; margin: auto;">

> 干し柿をひらいて巻いた、伝統茶菓「柿巻」をスライスした干し柿のお菓子。干し柿そのものの味を楽しめ、食べやすい一口サイズで個包装された商品。

### サクラパスタ（有限会社玉谷製麺所：山形県）
<img src="https://cont.sterfield.co.jp/uploads/_ea28551a6b.jpg"
style="display: block; margin: auto;" />

> 日本の代表的な花である「サクラ」を象ったパスタ。独自製法により茹でても形が崩れず、モチモチの食感を楽しむことができる。サラダ、煮物、スープ等に添え、ワンポイントとして使える一品。

### 藤屋おろしわさび『粗』 藤屋おろしわさび『生』（藤屋わさび農園有限会社：長野県）
<img src="https://cont.sterfield.co.jp/uploads/_f094f02127.png" style="display: block; margin: auto;" />

> 安曇野の豊かな湧水により、自社で育てたわさび原料を使用した練りわさび。自社でわさび原料を生育し、加工、製造を一貫して作り上げた一品。

### 木桶仕込み醤油（株式会社伝統デザイン工房：群馬県）
<img src="https://cont.sterfield.co.jp/uploads/_68f75aa111.jpg" style="display: block; margin: auto;" />

> 赤ワインと白ワインを食事によって飲み分けるように、「醤油の個性に応じて醤油を使い分けると、食はもっと楽しくなる」という視点で、日本各地の醬油メーカーの木桶仕込み醤油をセットにした商品。

そのほかの商品は[こちら](https://www.eatmeetjapan.jp/ec/shohin)

## 選定された商品から分かること
「地域の食文化・食体験を訴求できる商品」が対象となる商品の要件になっているだけあり、地域の名産品が選ばれていました。

さらには、サクラパスタやグルテンフリー 宮崎辛生麺などひと工夫を加えた商品も目立ちます。


また驚いた点もいくつかあります。まず1つ目は冷蔵品であるじゃこ天が選ばれていることです。

このじゃこ天の賞味期限は、30日間（冷蔵）    のようです。海外消費者に直接発送する狭い意味の越境ECを行うのは、難しい商材だと思います。国際配送（郵便）で冷蔵はコストが高く採算が合わないからです。
どのような戦略で販売をするのか注目です。

2つ目は比較的安価な商品が多く選ばれている点です。数百円〜千円程度の商品が主流のようです。これについては、磨き上げ商品に選ばれた商品だけでなく、他の関連性の高い商品とセット販売をするなどして、決済単価を上げる必要があるでしょう。海外送料を考えたとき、千円台の商品をわざわざ買う消費者は少ないと思われるからです。

また、単品LP販売を除いて、EC店舗で1つの商品のみを売ることはあまりありません。  複数商品のまとめ買いを促し、決済単価を上げていくような施策を打っていくのが王道です。

そういった状況を踏まえると、この単一の商品だけでなく、他の商品とどう絡めていくかがポイントになるのではと思いました。

##### 参考
農林水産省　食かけるプロジェクト
https://www.maff.go.jp/j/shokusan/eat/eatmeet/syokukakeru.html

thumbnail_logo.jpg

logo.jpg

農林水産省が選定した10商品！「食かけるプロジェクト」磨き上げ商品決定

## はじめに

皆さんは、商品を買うときにどうやって情報を得ますか？昔はお店に行ったり、テレビや雑誌、新聞などのマスメディアでチェックしていたものです（おそらく）。今はネットで調べる人が多くなってきたのではないでしょうか。
特にオンラインショッピングの場合、お店で実物をチェックできないことがほとんどです。
現代の人々はどうやって情報を収集しているか、リサーチした記事を見つけたので紹介したいと思います。

## ヨーロッパ人の98％が使うのは…

オンライン決済サービス等を提供するMollie社（オランダ）が行った「[The European Ecommerce Report 2023](https://www.mollie.com/news/european-ecommerce-report-summary-2023)」によると、この1年でオンラインショッピングの方法が変わったと実感している人は、なんと99％に上るそうです。
この調査はドイツ、イギリス、フランス、オランダ、ベルギーの5,000人の消費者を対象に行われたものですが、消費行動が去年と変わらなかったと答えたのは、たった41人でした。

さらに約98％の人が、商品を探すのにソーシャルメディアを利用すると回答しました。多くの買い物客が好んで利用するのは、YouTube（47％）、次いでFacebook（43%）、Instagram（40％）、という結果になったとのことです。

## 日本人がよく使うのは…

ファッションのECサイトで購入する日本人がどのように情報収集しているのかを調べた[アンケート](https://sui-sei.jp/columns/ux/post-2536/)も見つけたのでご紹介します。

「通販サイト以外でファッションに関する情報収集する方法は何がありますか？（複数回答）」という質問に対して、「TwitterやInstagramなどのSNS」が22.8％で一番多く、次いでYoutubeなどの動画が13.6％という結果になったとのことです。数字的にはヨーロッパよりは低いものの、ソーシャルメディアから一番情報を得ているという点は共通しています。

3位が「友人・知人から」で、「雑誌や書籍」は9.5％とSNSの半分以下の数字に。雑誌などの公式SNSを見ている人もいるでしょうから、厳密に区別するのは難しいかもしれませんが、オフライン情報をメインにしている人は、多くはないと言えそうです。

ちなみに、同調査では「ファッション通販サイトの商品ページで、最もじっくり見るところはどこですか？（複数回答）」という質問もしています。「商品の特徴や詳細」と「商品写真」という回答は、どちらも36～38％とほぼ同じ割合で上位を占めています。

その一方で、「他の人のレビュー、口コミ数など」が10.2％と、思いのほか少ない数字に。
先日ドイツのZalandoがレビュー機能を削除したことを驚きをもって紹介しましたが、レビューが参考になる期待値が減っているのかもしれません。

その代わりに、YouTuberやインスタグラマー、その投稿につくコメントなど、SNSでレビューに類した情報を得ているとも考えられるので、まだレビュー機能が不要とは判断できませんが。


参考：https://ecommercenews.eu/98-of-shoppers-use-social-media-to-find-products/



small_adem-ay-Tk9m_HP4rgQ-unsplash.jpg

thumbnail_adem-ay-Tk9m_HP4rgQ-unsplash.jpg

adem-ay-Tk9m_HP4rgQ-unsplash.jpg

オンラインショッピングの情報収集トレンド

## はじめに

2023 年には、CSS にいくつかの新しい機能が追加されましたので　このブログでは、2023年の新しいCSSの機能について紹介したいと思います。

最新のCSS技術や仕様は、ウェブページが早く読み込まれ、表示される速さや効率を良くすることを目指しています。

新しいCSSの機能やツールは、開発者がコードをより効果的に書き、管理するのに役立ちます。

Web 開発者は、より個性的で魅力的な Web ページを作成できるようになります。
すべてのブラウザでサポートされているわけではありません。ただし、ほとんどの主要なブラウザでは、これらの機能がサポートされています。

今回以下の新しい　CSS について説明します。

1. inset
2. Accent-color
3. Gap Property for Flexbox
4. -webkit-line-clamp
5. Small Viewport Units(svh)
6. Transform Properties

## 1. inset

CSS insetは、要素をその親要素の端に対して配置するためのプロパティです。通常の配置ではなく、要素が親要素からはみ出るようなデザインを作成する際に便利です。

**前**
```
element {
  top: 80%;
  right: auto;
  bottom: auto;
  left: 50%;
}
```
このコードはtop、right、bottom、left の各プロパティを個別に指定しています。

**現時**
```
element {
  inset: 80% auto auto 50%;
}
```
現時は inset プロパティを 使て　1 行で指定できるようになりました。

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/inset_browser_support_69d35a4768.png) 


## 2. accent-color

accent-colorプロパティとは、ラウザが提供するデフォルトのフォーム要素（チェックボックスとラジオボタンとか）の背景色を変更することができるものです。ただし、このプロパティを使用すると、フォームの見た目はブラウザによって統一的に管理されるため、その点に注意が必要です。accent-colorは、2023年からすべてのブラウザにサポートされました。


**html**
```
<input type="checkbox" class="custom" checked />Checkbox
```

**css**
```
.custom{
  accent-color: yellow;
}
```

***Result***

 ![](https://cont.sterfield.co.jp/uploads/checkbox_result_c9839aff27.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/accent_color_browser_support_4483e6b598.png) 


## 3. Gap Property for Flexbox

Gap プロパティは、flexbox レイアウトで各アイテムの余白を指定するプロパティです。
余白を指定すると　margin も使う人が多いですが、gap と　margin の違いがあります。

**Gap**
* flexbox レイアウトでのみ使用できます。
* 単一の値または 2 つの値で指定できます。
  ```
  gap: 10px;/* 行と列の両方に同じギャップ */
  gap: 10px 20px;/* 行に10px、列に20pxの異なるギャップ */
  ```
* 余白を指定すると、最初と最後の要素余白も範囲されません。
  :not()や:nth-childなどの擬似クラスを使用する必要がなく、CSSのコードがシンプルになります。

**Margin**
* 任意のレイアウトで使用できます。
* 単一の値、2 つの値、または 4 つの値で指定できます。
  ```
  margin: 10px;/* すべての辺に同じマージン */
  margin: 10px 20px;/* 上下には10pxのマージン、左右には20pxのマージン */
  margin: 10px 20px 15px 5px;/* 上、右、下、左それぞれ異なるマージン */
  ```
* 余白を指定すると、最初と最後の余白も範囲されます。

**html**
```
<div class="flexbox">
  <div class="flex-item">div1</div>
  <div class="flex-item">div2</div>
  <div class="flex-item">div3</div>
  <div class="flex-item">div4</div>
  <div class="flex-item">div5</div>
  <div class="flex-item">div6</div>
  <div class="flex-item">div7</div>
  <div class="flex-item">div8</div>
  <div class="flex-item">div9</div>
</div>
```

**css**
```
.flexbox {
  display: flex;
  gap: 10px;
  width: 500px;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-item{
  background: yellow;
  width: 30%;
  color: #000;
  padding: 10px 0;
  text-align: center;
}
```

**Result**

 ![](https://cont.sterfield.co.jp/uploads/gap_image_ee5a78ad50.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/gap_browser_support_c840b87e6a.png) 

## 4. -webkit-line-clamp

-webkit-line-clamp は、CSS の属性で、テキストの表示行数を決める機能です。この機能を使うと、テキストの折り返しを管理して、簡潔で読みやすいテキストブロックを作成することができます。

**html**
```
<p class="truncate-text">
    This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property. This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property.
</p>
```

**css**
```
.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; 
  width: 200px;
}
```

**Result**

 ![](https://cont.sterfield.co.jp/uploads/webkit_line_clamp_result_b8921f908a.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/line_clamp_browser_support_7a35bf934f.png) 


## 5. Small Viewport Units(svh)

Small Viewport Units (svh)は、ユーザーに表示される最小のビューポートの高さを表す単位です。最小のビューポートの高さは、ユーザーエージェントによってすべてのインターフェース要素が除外されます。
要素の高さを簡単に調整できます。アドレスバーが含まれるため、要素の実際の高さが異なることもあります。

**html**
```
<div id="container">
  <label>Top Full Height Example(svh)</label>
  <p>Bottom Full Height Example(svh)</p>   
</div>
```

**css**
```
#container {
  background-color: green;
  height: 100svh; 
  position: relative;
}
p{
  position: absolute;
  bottom: 0;
}
label{
  position: absolute;
  top: 0;
}
```
上記の　コード によると　divの高さを 100svh としているので　モバイルの場合アドレスバーの上に表示するようになりました。

div　の　高さを 100vh とすると　下のテキスト(Bottom Full Height Example(svh))が見えなくなります。

**Result**

 ![](https://cont.sterfield.co.jp/uploads/svh_7979a9aefa.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/svh_browser_support_f32c6b0d96.png) 


## 6. Transform Properties

CSS の transform プロパティは、要素の位置、回転、スケール、傾きなどを変更するために使用されます。

**前**
```
.target {
  transform: translateX(50%);
  transform: rotate(50deg);
  transform: scale(1.5);
}
```
このコードは、3 行にわたって、translateX()、rotate()、scale() の各関数を指定しています。

**現時**
```
.target {
  transform: translateX(50%) rotate(50deg) scale(1.5);
}
```
このコードは、1 行だけで、translateX()、rotate()、scale() の各関数を指定出来るようになりました。

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/individual_transfrom_browser_support_4f7d36d0a1.png) 


## まとめ

将来、新しいCSSの機能がますます広くサポートされることで、開発者は安定してこれらの機能を活用できるようになります。
新しい機能を使うと、開発者はもっと効率的に作業できて、コードを書くことがスムーズになるでしょう。

日々のプロジェクト開発において、新しいCSSを取り入れて活かしていきたいです。

ただし、新しいCSS機能を利用する前に、ご希望の機能がブラウザでサポートされているか確認するために、このリンク（https://caniuse.com/ ）から確認してください。

## 参考

* https://www.w3.org/Style/CSS/all-properties.en.html
* https://developer.mozilla.org/ja/docs/Web/CSS


2023 年の新しい CSS 機能

## はじめに
コロナも明け、日本に外国人観光客が戻ってきています。
これからの冬シーズンで人気なのはやはりスキー・スノーボード。
日本のスキー場は外国人にも人気です。
有名なのは北海道のニセコ、長野の白馬、野沢温泉あたりでしょうか。

今年の冬、初めて野沢温泉へ行くのですが、予約をした宿の人は日本語ができなくて英語でのやり取りオンリー。
無事予約できたものの、じゃあ支払いはオーストラリアの口座へ・・・と言われました。
野沢温泉、そんなに外国人が増えているの？！とビックリしました。
野沢温泉に外国人旅行客が増えているのには、理由がありました。

## 野沢温泉
野沢温泉は長野県の北部にある下高井郡野沢温泉村です。　日本で唯一、「温泉」と付く村だそうで、13の共同浴場巡りが人気の温泉街です。
人口3,700人程度の村に、コロナ前の2018年は約140,000人の外国人観光客が訪れる人気エリアです。
 ![](https://cont.sterfield.co.jp/uploads/1c60f9f7217a99fc7831eeadb753e1cf78e184e7_df0132f7f8.jpg) 
標高1,650メートルに位置する野沢温泉スキー場は、上質なパウダースノーを味わえ、外国人旅行客にも人気です。

## 外国人観光客が増えたきっかけ
野沢温泉村に外国人旅行客が増えたのは、2000年代からです。
 ![](https://cont.sterfield.co.jp/uploads/2023_12_07_154225_912bc48120.png) 
1998年の長野オリンピックを契機に、同じ長野県で上質なパウダースノーを
目玉にした海外向けのPR活動の結果、オーストラリアをはじめとした多くの外国人旅行客が増えました。
野沢温泉に魅了されて移住してきた外国人も増え、その移住者が旅行客を呼び込んだこと、新幹線開通によるアクセス改善等から、訪問者は右肩上がりに増えました。

そんな中で、課題が見えてきました。

## 現金しか受け付けない飲食店・小売店
 ![](https://cont.sterfield.co.jp/uploads/images_1f300793c2.png) 
外国人旅行客はクレジットカード決済を希望する方が多いのですが、当時、野沢温泉の飲食店や小売店の8割は「現金のみ」でした。
また、海外発行の銀行カードで現金を引き落とせるATMほぼありませんでした。

食べたい・飲みたい・買いたいという外国人旅行客に対してのチャンスロス、売り逃しが起きてました。

そこで、商工会主導でキャッシュレス決済の導入を進め、且つ、地銀とも協力し海外発行銀行カードでも現金を引き出せるATMの設置を進めました。

2019年時点で、6割～7割の飲食店がキャッシュレス決済導入しているようです。

## まとめ
あらゆる施策で集客をしてお客様を集めることができたとしても、お客様の望む決済手段がないと、売り上げは立たないということは、ECでも同じ。

穴の開いたバケツではもったいないということです。

野沢温泉、どんな町（村）か楽しみです。




small_NEWS000000534701.jpg

thumbnail_NEWS000000534701.jpg

NEWS000000534701.jpg

外国人が殺到 野沢温泉が行ったある施策とは

## はじめに
越境ECで海外に販売しようとしていた商品が、ワシントン条約の規制対象にあたり輸出できなかった！なんてことはありませんか？
ワシントン条約とは何なのか、ワシントン条約の対象になるものはどのようなものがあるのかをご紹介します。

 ![](https://cont.sterfield.co.jp/uploads/cites_otter_post_218c549bf2.jpg) 


## ワシントン条約(CITES)とは
経済産業省の説明によると、ワシントン条約（Convention on International Trade in Endangered Species of Wild Fauna and Flora（**絶滅のおそれのある野生動植物の種の国際取引に関する条約**））は、自然のかけがえのない一部をなす野生動植物の一定の種が過度に国際取引に利用されることのないようこれらの種を保護することを目的とした条約としています。

設立の経緯としては、1972年にストックホルムで開催された「国連人間環境会議」において、絶滅のおそれのある野生動植物の種の保護を図るため、野生動植物の輸出入等に関する条約採択会議の早期開催が勧告されたことがきっかけとなります。
これを受け、アメリカ合衆国の主催により1973年にワシントンにおいて南アフリカ共和国、コスタ・リカ等81か国が参加して「野生動植物の特定の種の国際取引に関する条約採択のための全権会議」が開催され、同年3月に「絶滅のおそれのある野生動植物の種の国際取引に関する条約」が採択されました（本条約は、ワシントンにおいて採択されたことから、ワシントン条約と呼ばれています。）。本条約は、1975年4月2日に所定の発効条件を満たし、同年7月1日に効力を生ずることとなりました。

ちなみに日本は上記会議に出席し、1973年４月30日に本条約に署名しましたが、その後国内関係者の調整等を経て、1980年4月25日第91回通常国会において本条約の締結が承認され、1980年11月4日から発効しました。

本条約には、先進国及び発展途上国の多くが加盟しており、2022年3月現在で183ヵ国及び欧州連合(EU)が締約国になっています。


## ワシントン条約の対象となるもの
ワシントン条約は、絶滅のおそれのある動植物を保護するものです。生きている動植物以外に、はく製や革製品、化粧品、楽器、漢方薬などの加工品であっても規制対象になります。この規制対象となる動植物は、絶滅のおそれの度合いによって条約の附属書Ⅰ、Ⅱ、Ⅲに区分されており、以下のように附属書ごとに輸入規制の内容が異なります。

 ![](https://cont.sterfield.co.jp/uploads/_8c06ec120d.png) 

ワシントン条約が規制する動植物かどうかを調べるにあたっては、まず、種の学術名を特定する必要があります。ワシントン条約規制対象種に該当する場合は、その種が附属書Ⅰ、Ⅱ、Ⅲのいずれに掲載されているかを調べます。なお、学術名はラテン語の国際的に共通の名称を調べる必要があります。

（参考）
付属書リストの確認（動物）
https://www.meti.go.jp/policy/external_economy/trade_control/02_exandim/06_washington/download/20231125_appendix_fauna.pdf

付属書リストの確認（植物）
https://www.meti.go.jp/policy/external_economy/trade_control/02_exandim/06_washington/download/230223_revised231125_appendix_flora.pdf


## まとめ
今回はワシントン条約の概要についてご紹介しました。越境ECで絶滅の危機にある動植物を販売することはないかと思いますが、加工品なども規制対象となるため注意が必要です。事前のチェックをしっかりと行って、安全な取引をするためにワシントン条約の理解をしていきたいものですね。経済産業省のHPに詳しい情報が掲載されておりますので、是非見てみてください。


medium_zouge_mitsuryou.png

small_zouge_mitsuryou.png

thumbnail_zouge_mitsuryou.png

zouge_mitsuryou.png

ワシントン条約とは（概要編）

2021年1月1日から、国際郵便の世界に大きな変化が訪れました。万国郵便連合の新たな規則により、物品を含む国際郵便物に対する通関電子データの送信が義務化されたのです。これは、国際郵便の迅速かつスムーズな通関手続きを目指す重要な一歩と言えるでしょう。
そして、3年が経ち、その対象範囲は米国から始まり、2022年にヨーロッパ拡大されてから、ついに全世界へと広がりました。
            
当時の記事は以下をご参照ください。
申請登録サイトの紹介などもしています。

[2021年1月1日施行!
「通関電子データ送信義務化」
について](https://sterfield.co.jp/blog/ekkyo-ec_data-trafficing/)

[2022年6月20日施行!
ヨーロッパ向け郵便「通関電子データ送信義務化」について](https://sterfield.co.jp/blog/ekkyo-ec_data-trafficing-2022/)
## 2024年3月1日からの大きな変更
 ![](/uploads/20240301_1_68c37ec9ef.png) 
特に注目すべきは、2024年3月1日から施行される新たな規則です。これにより、物品を含む全ての国際郵便物に対して、通関電子データの送信が必須となります。これまでの手書きラベルでの差し出しは、通関電子データが送信されないため、受け入れられなくなるのです。
 ![](/uploads/20240301_2_6186737dd4.png) 

さらに、通関電子データの送信対象となる郵便種別も拡大され、より多くの郵便物がこの規則の対象となります。

## ヨーロッパへの郵便物に新たな要求
 ![](/uploads/DALL_E_2023_11_30_13_20_26_A_wide_illustration_for_the_second_paragraph_of_a_blog_article_showing_the_significant_changes_taking_effect_from_March_1_2024_The_image_depicts_a_608a0efd77.png) 
2023年9月22日からは、一部ヨーロッパ国・地域宛ての郵便物に対して、内容品のHSコード類の通関電子データ送信が推奨されるようになります。これは、通関遅れや返送、さらには過大な関税の支払いリスクを避けるための措置です。HSコード類の正確な送信は、国際郵便物の円滑な通関を助ける重要な要素となります。

## 通関電子データの役割と重要性
 ![](/uploads/DALL_E_2023_11_30_13_20_30_Wide_illustration_for_the_third_paragraph_of_a_blog_article_focusing_on_the_new_requirements_for_postal_items_to_Europe_from_September_22_2023_The_a8db71de29.png) 
通関電子データには、差出人の住所・氏名、受取人の住所、内容品名、総重量、郵便物番号などの情報が含まれます。これらの情報は、名宛国の税関による輸入可否の判断や関税等の税額算定に不可欠です。つまり、通関電子データは、国際郵便物が目的地に迅速かつ確実に届くための鍵となるのです。

## 米国およびヨーロッパ宛ての特記事項
米国宛ての郵便物に関しては、「STOP Act」により、通関電子データの送信が無い場合、米国側で返送される可能性があります。また、ヨーロッパなどの一部地域では、通関電子データの要求が強化されており、送信がない場合には返送されるリスクが高まっています。

## 通関電子データ送信の方法
 ![](/uploads/DALL_E_2023_11_30_13_20_58_A_wide_illustration_for_the_fourth_paragraph_of_a_blog_article_depicting_the_role_and_importance_of_electronic_customs_data_in_international_postal_s_506ab9fb1e.png) 
通関電子データの送信方法としては、「国際郵便マイページサービス」の利用が推奨されます。このサービスを通じてラベルを作成することで、通関電子データが自動的に送信されるため、手間を省くことができます。

## 注意点とまとめ
通関電子データの内容が不十分または不正確であると判断された場合、追加情報の提供を求められることがあります。これによる遅延は料金返還の対象外となるため、正確な情報の提供が非常に重要です。

この通関電子データ送信義務化は、国際郵便の新たな時代を象徴しています。2024年3月1日からは、全ての国・地域宛ての物品を含む郵便物に対して通関電子データの送信が必須となります。この変化に適応し、適切なデータの送信を行うことで、通関遅れや返送、高額な関税の課税などのリスクを避けることができるでしょう。国際郵便を利用する際は、これらの新しい規則に注意して、スムーズな郵便物の送受信を心がけましょう。

large_DALL·E 2023-11-30 13.02.10 - A captivating wide image featuring a globe at the center, surrounded by imagery of international mail. The globe is depicted in tones of blue and gree.png

medium_DALL·E 2023-11-30 13.02.10 - A captivating wide image featuring a globe at the center, surrounded by imagery of international mail. The globe is depicted in tones of blue and gree.png

small_DALL·E 2023-11-30 13.02.10 - A captivating wide image featuring a globe at the center, surrounded by imagery of international mail. The globe is depicted in tones of blue and gree.png

thumbnail_DALL·E 2023-11-30 13.02.10 - A captivating wide image featuring a globe at the center, surrounded by imagery of international mail. The globe is depicted in tones of blue and gree.png

DALL·E 2023-11-30 13.02.10 - A captivating wide image featuring a globe at the center, surrounded by imagery of international mail. The globe is depicted in tones of blue and gree.png

2024年3月1日施行!全世界「通関電子データ送信義務化」 について

## はじめに

世界的に問題になっているファッション業界が与える環境負荷の高さは依然として解決の見通しが立っていません。今も多くの商品が、購入者の手に渡ることなく、廃棄されたり、倉庫で眠ったままになっています。今回は、そのような在庫を減らすために生まれたプラットフォーム「Smatch」を紹介します。


## 過剰在庫の与える影響

世界的にECにおけるリサイクル（ユーズド）市場が拡大しているというニュースをよく見かけるようになってきました。環境意識や価格の安さから積極的に中古品を買う購入者も増えてきています。

その一方で、やはり一度人の手に渡ったものを好まないという人も一定数いますし、中古品との出会いは一期一会であり、買い逃しの可能性もあり、また必ずしも気に入るものが見つかるわけでもありません。

購入者に機会損失を与え続けると、売上としても、ブランドイメージとしてもマイナスです。そうなると、メーカー側としてはたくさんの在庫を抱えておくという判断をせざるをえません。

しかしその結果として、過剰在庫は大きな経済損失を招いてしまっています。2020年における世界全体の年間負担は、3兆ユーロにも上るというデータもあるようです。また、環境にも重大な影響を与えています。毎年生産されるアパレル商品のうち約25%は、一度も着用されることがないというのです。そしてこれが海洋でのマイクロプラスチック汚染のおよそ7%を引き起こしている計算になります。

## 過剰在庫を商流に戻すプラットフォーム「Smatch」

2022年にドイツで生まれた「[Smatch](https://www.smatch.com/)」は、この問題に取り組むために生まれたBtoBプラットフォームです。

毎年、ヨーロッパだけで580万トンの繊維製品が廃棄されており、Smatchは、この分野に大きなプラスの影響を与えたいという理念のもと立ち上げられました。
「私たちはブランドと小売業者のニーズに応え、各商品が理想的な顧客を見つけ、収益性とブランド価値の両方を最大化することを約束する」とSmatchの共同創業者であるMax Groberg博士は述べています。

Smatchでは、ブランドやメーカー、小売店は売り手として余剰在庫の商品情報に加え、どのような相手に売りたいか、対応地域や販売チャネルはどうするかといったことを選択することができます。オークション形式で販売価格を決めることもできるため、できるだけ利益を確保しながら負債となっている在庫を減らすことができるというのが大きな利点です。

また買い手側は、新しい取引先を開設できるとともに、 AdidasやNikeといった有名ブランドの新品の正規品を通常より安く仕入れることができるようになります。手数料は売り手側負担となるため、取引を開始しやすいのもメリットの一つです。

同社はプラットフォーム立ち上げ以来、すでに数億ユーロに相当する額の取引を処理したと伝えています。

## まとめ

これまでいくつか紹介してきたとおり、環境保全やSDGsといった考え方のもと、様々なサービスが立ち上がっています。こういった取り組みがビジネスとして成り立ち、環境や経済に良い影響を長く与え続けていくことが望まれます。

参考：
https://www.smatch.com/
https://ecommercenews.eu/smatch-launches-platform-to-tackle-overstock/
https://www.smatch.com/




small_francois-le-nguyen-pouTfHUG430-unsplash.jpg

thumbnail_francois-le-nguyen-pouTfHUG430-unsplash.jpg

francois-le-nguyen-pouTfHUG430-unsplash.jpg

ファッションの過剰在庫を減らすプラットフォーム「Smatch」

## はじめに
スターフィールド株式会社では、上記のように週に一度メルマガを配信しています。
このメルマガは、１週間の越境ECニュースをピックアップして紹介するものです。
そこで今回は、メルマガのクリック数を元に、どんな記事が人気なのかを調べてみました。
主に購読者は越境ECに関心がある方々なので、トレンドが分かるのではと思います。


## よく読まれた記事ランキング
 調査対象期間は、2023年4月から11月です。
### 第三位　[越境ECのビィ・フォアードが中古車販売大手のネクステージと連携](https://ecnomikata.com/ecnews/38836/)
 ![](/uploads/38836_thumbnail_top_f0c8376c3d.png) 
> 株式会社ビィ・フォアード（本社：東京都港区、代表取締役：山川博功、以下「ビィ・フォアード」または「同社」)は、株式会社ネクステージ（本社：愛知県名古屋市、代表取締役：浜脇浩次）との車両情報連携の開始について公表した。


多くの海外ユーザーが利用している「beforward.jp」にネクステージの扱う商品を掲載することにより、元々ネクステージに掲載しているサプライヤーの販路が広がります。中古車の越境ECの取り組みは珍しいので、注目されたのでしょうか。

### 第二位
[Tmall（天猫）、500以上のブランドが新製品を約20億円以上販売](https://ecnomikata.com/ecnews/38724/)
 ![](/uploads/38724_thumbnail_2020_1109_1001_ef97c20fe3.jpg) 

> アリババグループ（以下「アリババ」または「同社」）は、中国のZ世代消費者が同社のTmall（天猫、Tモール）において新しいニッチ商品の消費を促進していることが、同プラットフォームから収集した豊富なデータにて明らかになったと発表した。

新しいニッチ商品の消費とは何かちょっと分かりにくい記事ではあるなと思いましたが、この記事が２位でした。やはり中国に関する記事はよく閲覧される傾向にありました。    

### 第一位
[越境ECにおける関税とは？関税の基礎と国別の関税体系を紹介](https://ecnomikata.com/ecnews/39172/)
 ![](/uploads/39172_thumbnail_9_dc4880ea9a.png) 

> 越境ECに初めて挑戦する場合はもちろんのこと、国を広げる際も注意しなければならない問題に「関税」が挙げられます。関税は国によって異なり、知識がなければ多額の税金を徴収されてしまう可能性もあるため、越境ECを始める前に対象国の関税や法律について把握しておくことが大切です。

越境ECを始める上で、関税関係は気になるもの。圧倒的に閲覧されていました。

## まとめ
これからも有益な情報をお伝えできるように、続けていきたいと思いますので、ぜひメルマガのチェックをお願いいたします。

large_6759db0688159fac885f9210dc401a79.png

medium_6759db0688159fac885f9210dc401a79.png

small_6759db0688159fac885f9210dc401a79.png

thumbnail_6759db0688159fac885f9210dc401a79.png

6759db0688159fac885f9210dc401a79.png

どのような越境ECニュースに興味がある？メルマガからランキング形式でご紹介

## はじめに
先日、東京ビッグサイトで開催されたGoogle Cloud Next Tokyo '23のDay2に参加してきました。

 ![](/uploads/PXL_20231116_001744341_2_90d59a9df4.jpg) 

全体としては生成AIに関するトピックが盛り上がってましたが、セキュリティに関するセッションもいくつかあり、その中で私は下記のセッションに参加して話を聞いてきました。

- [セルフで行う Google Cloud 環境のセキュリティ チェックの方法](https://cloudonair.withgoogle.com/events/next-tokyo?talk=d2-di-04)
- [Google Cloud のセキュリティ機能、基本のキ｜Security Command Center で実現するリスク管理](https://cloudonair.withgoogle.com/events/next-tokyo?talk=d2-sec-02)

どちらのセッションでもSecurity Command Centerを使うことでGoogle Cloudを安全に運用できるという内容でした。
こちらをもとに本記事では、Google Cloudを利用しているがSecurity Command Centerは使ったことがない人向けに、Security Command Centerを使い始めるための設定方法と簡単な使い方の解説します。

## Security Command Centerとは
Security Command CenterはGoogle Cloud上の脆弱性や脅威となりうる設定を検知してくれるサービスです。

有効化しておくと自動で利用しているサービス、リソースを認識して、それらを対象に設定内容をスキャンしてくれるため運用に負荷がかからないのが特長です。また有償版のプレミアムティアーのみの機能となりますが、ISO 27001やPCI DSSのような業界標準への遵守状況も確認できるなどスキャン以外にも様々な機能があります。

今回は無償版のスタンダードティアーでも利用可能なSecurity Health Analytics機能を使って、Google Cloudの設定ミスの診断を試してみました。

## 実際に適用してみた結果
ありがちなユースケースとして、組織の管理権限はもってないが開発環境のプロジェクトだけ変更権限だけを持つユーザーが、Security Command Centerを使ってプロジェクトの脆弱性を診断してみるというシナリオでやってみました。

1. Security Command Centerの有効化
  - まず最初にコンソールでプロジェクトを選択した状態でSecurity Command Centerを開いて有効化を行います。スタンダードとプレミアムの2つのティアーを選択する画面になるので、無償版であるスタンダードを選んで次へを押します。すると、どの機能を有効化するか設定するダイアログが表示されます。すべてデフォルト値のままで進めます。

     ![](/uploads/249ce2bfaa98636550da620a_d3f7f1273a.png) 
      (引用：https://zenn.dev/cloud_ace/articles/scc_standard#security-command-center(%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89)%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)

  - 詳細な手順は公式ドキュメントで解説されているのでそちらを参照してください。
  https://cloud.google.com/security-command-center/docs/activate-scc-for-a-project?hl=ja#project-activation-scc-inactive-in-org

2. 診断結果の確認
  - 設定が完了すると自動で脆弱性のスキャンが行われますが、初回のスキャンは少し時間がかかります。今回の例だと24時間ほど待つ必要がありました。
  - 完了するとダッシュボードにスキャン結果が表示されます。脆弱性ページで脆弱性の種類、件数などが確認できます。

     ![](/uploads/scc_1_762224c8e4.png) 
    

3. 脆弱性の対応
  - ここではデフォルトのまま使っていると必ず検出されるOpen RDP portを対象として、実際に対応する場合の流れを解説します。

  - 詳細を開くと脆弱性の詳細や、対象のリソースの情報が確認できます。更に次のステップのところに対応方法が示されます。
    ![](/uploads/scc_2_0a09b3e035.png) 

  - それに従って、ファイアウォール ルールのdefault-allow-rdpの設定を変更します。IPの範囲が0.0.0.0/0がまずいとのことなので削除して35.235.240.0/20を設定します。
     ![](/uploads/scc_3_4f9c670868.png) 

  - なお、ルール自体を無効にしてしまえばIP範囲は変更しなくてよさそうに思えますが、この対応ではだめでした。脆弱性の判断基準としてルールが無効かどうかは関係ないようです。現時点で実害があるかどうかではなく、潜在的な脆弱性として指摘しておくポリシーなのかもしれません。

4. 対応結果の確認
  - 初回スキャンと同様に対応後の確認も特に操作は不要で、自動で再チェックが行われて脆弱性ページの件数が1=>0になります。初回スキャン時と異なり、設定変更後の再スキャンはほぼ即時反映のようで数分後には対応済みになりました。
  - 対応済みの脆弱性を確認したい場合、脆弱性ページ上からは見られなくなってしまいますが、検出結果ページのクエリ編集画面で下記のとおりクエリを変更すると確認可能になります。
    ```
    変更前）
    state="ACTIVE" AND NOT mute="MUTED"

    変更後）
    state="INACTIVE" AND NOT mute="MUTED"
    ```
     ![](/uploads/scc_4_19e81badad.png) 

## まとめ
- Security Command Centerは有効化するだけで特に設定も不要かつ無料で始められるので、使ってみることをおすすめします。
- 検出された脆弱性ごとの対応方法まで案内されるので非常に親切だが、今すぐ対応すべき問題かどうかは利用者自身が判断する必要があります。そのため、まったく知識がない状態で運用することは難しそうです。これについてはGoogle側でも課題と考えているようで、Duet AIによる支援機能が現在開発中とのことです。
- 組織単位でSecurity Command Centerの有効化を行うことで、アカウントの設定不備のようなプロジェクトをまたがった設定内容もスキャン対象となるため、より効果的な運用ができそうです。今回の検証結果をもとに、全社的にSecurity Command Centerを利用する方針を検討していきます。

## 参考リンク
- [Security Command Center](https://cloud.google.com/security-command-center?hl=ja)
- [Security Command Center でお手軽セキュリティ診断](https://zenn.dev/cloud_ace/articles/scc_standard)
- [[Google Cloud] SCC -Security Health Analytics-を試す](https://qiita.com/khoshina/items/f6ccea548e9ed39cdea8)


small_security-command-center.440x512.png

thumbnail_security-command-center.440x512.png

security-command-center.440x512.png

Security Command Centerを使ってGoogle Cloudの設定内容を診断してみよう

## はじめに
先日、ロジザード社主催の展示会で越境ECのセミナーをさせていただきました。
イオンモールカンボジアの方と合同で出たのですが、    その方のプレゼンを聞きながら「すごく良いサービスだなぁ」と思ったので、私なりにまとめつつご紹介します。

 ![](/uploads/2023_11_17_13_39_44_512dc34faa.png) 

## イオンモール  カンボジアとは
そもそも、私はイオンがカンボジアにあることも存じ上げませんでした。

> イオンモールのカンボジア3号店となる「イオンモール・ミエンチェイ」が4月7日、首都プノンペン南部に正式オープンした。ASEANにあるイオンモールの中でも、最大規模となる。（中略）敷地面積は17万4,000平方メートルで、ファッション・生活雑貨・化粧品・スポーツ・飲食店など、約250店舗が出店する。このうち、24店舗はカンボジア初出店となる。また、日本からは、「ダイソージャパン」、「リンガーハット」、ホームセンターの「コーナンジャパン」、家電量販店の「ノジマ」などが出店している。

 ![](/uploads/1e6e51a71365358d_35614383_c7911e7a56.jpg) 

オープニングセレモニーには首相の息子や、駐カンボジア日本大使など錚々たる方々が列席されたようです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/u_eUBvPgb6M?si=IQSxDzG7vkAgucjE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
こんな動画も。

## オフラインとオンラインの融合
カンボジアのイオンモール内に「ＡＥＯＮＭＡＬＬ ＰＬＵＳショールーム」というものが設置されています。
ここでは、ＥＣでのみ購入できる海外の商品や高価格帯商品を実際に手に取ることが可能です。

越境ECの課題点として、「配達されるまで実物がわからない」点があります。
当然それは越境だけではないですが、物理的に距離が離れている場合、そして自国の企業の商品でない場合は、その不安感はより大きなものになります。特に高額商品ほどその傾向はあるでしょう。

 ![](/uploads/0120_3_dc18994291.png) 

越境EC支援の老舗企業ジェイグラブさんが、イオンモールと一緒に行っている事業のようです。

## まとめ
越境ECの今後の傾向として、オフライン店舗との融合やインバウンド事業との融合がより強くなることが予想されます。
その意味でも、先進的な取り組みだと思われます。弊社としても応援していきたいです。    

large_photo1-6.jpg

medium_photo1-6.jpg

small_photo1-6.jpg

thumbnail_photo1-6.jpg

photo1-6.jpg

イオンモールカンボジアにおける越境ECとオフラインショップの融合がすごい

### 書籍の情報
- 書籍名: TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- 著者: 手島拓也、吉田健人、高林佳稀
- 出版社: 技術評論社
- ISBN-13: 978-4297129163
- 発行日: 2022/7/25
- リンク: https://gihyo.jp/book/2022/978-4-297-12916-3

## はじめに
「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」は、開発をより快適・堅牢にするTypeScriptを用いて、React/Next.jsの基礎、最新フロントエンドやWebアプリケーションの開発方法が学べる書籍です。

TypeScriptは、JavaScriptのスーパーセットであり、型システムを備えたプログラミング言語です。型による静的チェックにより、プログラムの欠陥をコンパイル時やデバッグ時に検出することができます。これにより、バグの早期発見や、コードの保守性の向上につながります。TypeScriptはWebアプリケーション、Node.jsアプリケーション、モバイルアプリケーションなどのさまざまなプラットフォームで利用されており、特に大規模で複雑なプロジェクトの開発に適しています。開発者が型安全なコードを書くのを支援し、コードの保守性を向上させるために広く採用されています。

Next.jsは、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。設定に時間を費やすことなく、アプリケーションの構築に集中することができるよう設計されています。Next.jsは、Reactアプリケーションを開発するためのツールセットやサーバーサイドレンダリング（SSR）および静的サイト生成（SSG）の機能を提供し、それらの機能により、SEOの向上、パフォーマンスの向上、セキュリティの向上など、多くの利点を提供します。従って、多くのウェブ開発者によって採用され、高品質のウェブアプリケーションの開発に役立っています。

## こんな方におすすめ

- モダンなWebフロントエンドに興味のある方
- React/Next.jsを初めて使う方、本番に導入したい方
- React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方
- TypeScriptを中心に据えたWebフロントエンド開発に興味のある方
- Atomic DesignやStorybookなど、コンポーネント中心の開発に興味のある方

## 目次

1. Next.jsとTypeScriptによるモダン開発
2. TypeScriptの基礎
3. React/Next.jsの基礎
4. コンポーネント開発
5. アプリケーション開発1〜設計・環境設定〜
6. アプリケーション開発2〜実装〜
7. アプリケーション開発3〜リリースと改善〜
- Appendix Next.jsのさらなる活用

## 各章について

### 1~3章

1章では、Next.jsやTypeScriptを使用したモダンなフロントエンド開発の概要と歴史を紹介しています。歴史の説名を踏まえ、Next.jsの機能に絡めてSSRやSSGの紹介やその必要性に関する説明もされています。

2章では、TypeScriptの基本的な使い方や重要な型について説明されています。また、設定やツールのセットアップについても触れられています。

3章では、Reactの基本的なコンポーネントやフックの書き方やNext.jsの機能の使い方が紹介され、再レンダリングの防止など重要なポイントもカバーされています。

### 4章

この章ではデザインシステムの設計方法であるAtomic Designが紹介され、ReactコンポーネントもAtoms, Molecules, Organisms, Templates, Pagesの5レイヤーに分類することが推奨されています。Atomic Designとあわせて、ファイル分割やコンポーネント設計の参考になるPresentational Component（見た目）とContainer Component（振る舞いロジック）についても説明されました。
あと、styled-componentsスタイルライブラリから、Storybookでのコンポーネント管理、React Testing Libraryでのコンポーネントテストまで、コンポーネント開発のために使われる一連のツールの使い方が説明されています。

### 5~7章、付録

後半からはアプリケーション開発の実践になります。

5章では主にアプリケーション開発に向けての環境構築を行います。Next.jsや前の章で説明があったstyled-components、StorybookとESLintのセットアップとReact Hook Formをはじめ、SWRとMaterial Icons、React Content Loaderなどさまざまなライブラリやツールの導入が紹介されます。

6章は、総435ページで150ページほど占めて本のメイン部分ですが、ほぼコードに構成されていて間に簡単な説明が入ります。まずは、Atomic Designに従って各ページをコンポーネントコンポーネントへと分割して、一番小さい部品であるAtomsから実装していきます。次のMolecules実装も特にロジックを持たないようにしています。Organisms, Templates, Pagesについても同様の構成で進みます。Pagesからは4章にあったPresentational ComponentとContainer Componentの見た目とロジックを別ファイルに分ける方法で実装していきます。加えて、React Testing LibraryでAtoms, Molecules, Organismsレイヤーのユニットテストを書きます。

7章では、まず、5章と6章でつくったアプリケーションをVercel, Heroku, Logflareといったサービスにデプロイする方法の説明されており実際にデプロイして見るのができます。また、SEO対策として、構造化データをページに付与する方法やOGP、sitemap.xmlの生成などを取り扱います。さらに、アクセシビリティ、XSSとかCSRFのセキュリティの説明もされています。

付録には外部サービスの連携活用など、さまざまな内容が説明されています。これらの内容は現場にも役立ち、読者にとって嬉しい情報となっています。

## 感想

既に探り探りでTypeScriptとReact/Next.jsで開発していましたが、本書を読んでから、TypeScriptとReact/Next.jsの組み合わせでの開発経験が浅い私にとっては、良い見本になりました。

本書は、全般的にわかりやすく、実践的な内容で、概観を掴めることができて満足しています。
また、さまざまなライブラリを取り入れて使用できてみたのも、良い点でした。例えば、Next.jsと同じチームで作られているデータ取得のためのReact HooksライブラリであるSWRやローディングを表示するライブラリReact Content Loaderは初めて使用してみて今後の開発にも良い選択肢になると思いました。

ただ、もうちょっと具体的な説明や使う理由などがあったらよかったなと思った部分もありました。例えば、ライブラリの使い方の説明では、なぜそのライブラリを使うのか、そのライブラリのメリットやデメリットなどについて、もう少し詳しく説明があると、理解しやすかったでしょう。

とはいえ、本書は、TypeScriptとReact/Next.jsの両方を学びたい人にとって、最適な入門書であることは間違いありません。本書を参考にして、TypeScriptとReact/Next.jsの開発スキルを磨き、実践で役立てていきます。

以上、『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』についての紹介でした。もし、TypeScriptとReact/Next.jsの組み合わせで実際動かしてみながら学びたい方には、ぜひおすすめの一冊です！

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

large_book.png

medium_book.png

small_book.png

thumbnail_book.png

book.png

【書籍紹介】TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

## はじめに
「トップ5％」シリーズとしていくつか発売されている本の一つ「AI分析でわかったトップ5％社員の習慣」（越川慎司 (著)）から、大事だなと思った内容をいくつかピックアップしてご紹介します。

この本は、25社の企業、その企業の「上位5％社員」9,000名と「残り95％社員」9,000名の合計18,000名を対象に、両者の働き方を徹底的に調査した結果です。

気になった方はぜひ購読してみてください。
 ![](/uploads/2023_11_10_103223_4ae0f946c1.png) 


## 「5％社員」の98％が「目的」のことだけを考える

- 過程よりも結果を重視する。
- 時間を大切にする。「5％社員」は一般社員よりも時計を見る時間が1.7倍多く、会議では期限や時間に関して2.3倍以上の発言をする。



良く言われることですが、これを継続的に意識的に行い続けることが、結果を出し続ける秘訣かと思います。

## 再現性を大切にする

- 人やビジネスの価値は「再現性」で決まります。
- スキルや能力があるということは、「特定のことができる」と自己発信し、みんなに認められている状態にあります。さらに言うと、「特定のことをできるようになる」と言う状態は、「特定のことを再現できる」という状態であることを指します。

できる営業マンは、どの会社に行っても、どの製品を売るにしても、トップセールスになれます。
それは、会社や製品が違えど、まさしくこの「特定のことを再現できる」能力が高いのだなと思います。

## 止まって考える時間を設けている

- 「5％社員」は、「振り返りの時間」を取っています。
- その多忙なスケジュールの中で、彼らは2週間に一度は止まって考える時間を取っていました。5％社員は、そうでない社員よりも、振り返りの時間を取る人が8割もいるのです。
- 振り返る時間はほんの15分程度、長くても30分程度です。
- 他人からの承認ではなく、自分の価値観で自分を承認するのです。二度と同じ間違いをしないように振り返って反省し、次の行動に活かしていました。

これがすごく大切だなと思いました。
忙しさを言い訳に、振り返りの時間を作れないこと多々ありますが、きちんと自分自身の中で仕組み化して振り返る時間を確保し、内省しましょう。

## まとめ
「AI分析でわかった トップ5％社員の習慣」の本から大事だと思った箇所をかいつまんでご紹介しました。
良書だと思いますので気になった方は是非読んでみてください。





small_スクリーンショット 2023-11-10 103223.png

thumbnail_スクリーンショット 2023-11-10 103223.png

スクリーンショット 2023-11-10 103223.png

「AI分析でわかった トップ5％社員の習慣」本の紹介

## はじめに
商品やサービスはあるのになぜか売れない、一生懸命営業しているのに顧客に響いていない、そんな経験ありませんか？売れないのは営業力に問題があって、まずは先輩社員や上長の営業トレーニング、あるいは外部トレーニングを活用して 自身の営業力を磨く努力をしなければならないと考えたことはないでしょうか。

今回は、「栗原康太. 新規事業を成功させるPMF（プロダクトマーケットフィット）の教科書. 翔泳社. 2023」の本に紹介されている、“PMF”について記載します。営業力が果たして問題なのかを考えるきっかけになる、読みやすい本です。内容をピックアップしてご紹介します。

 ![](/uploads/81_O_Er9_J_Js_PL_SY_522_be95787c40.jpg) 


## PMFとは
“PMF（Product Market Fit:プロダクトマーケットフィット）の考え方は、世界有数の投資会社の創始者、マーク・アンドリーセンによって広められました。アンドリーセン氏はベンチャーキャピタリストとしてさまざまな企業を見てきた中で、PMFが企業の成否を左右する要素だと指摘しました。

プロダクトマーケットフィットとは、市場を満足させることができる商品で、正しい市場にいることを意味する。“としています。

換言すると、
”顧客のニーズを満たす商品で、正しい市場（潜在的な顧客がたくさんいる市場）にいること“
と定義しています。


## PMFするとどうなるのか
PMFすると商品が顧客に引っ張られるように売られていき、顧客が商品を使い続けてくれたり、口コミをして他の顧客を連れてきてくれたりします。

例えばPMFのシグナルとして、以下があります。

- [ ] - 顧客からの問合せが殺到
- [ ] - 商談から受注までの期間が短い
- [ ] - 受注数が伸びていて、解約も少なく、顧客が満足している
- [ ] - 顧客獲得コストが低く、十分な利益が出ている
- [ ] - 顧客が他の顧客を紹介してくれる

一方でPMFしていないシグナルもあります。

- [ ] - 商談から受注までの期間が長く、見込み客の検討の熱量が低い
- [ ] - 受注数は伸びているが、解約率が高く、顧客が喜んでいない
- [ ] - 営業研修/トレーニングを行い、営業力を強化しても受注率が上がらない
- [ ] - 顧客獲得コストが高く、受注しても利益が出ない
- [ ] - 既存顧客などからの紹介が発生していない

PMFしている商品は売りやすく、PMFしていない商品は売りにくい特徴です。


## PMFするためにはどうしたらいいのか
まずは素早く商品をローンチし、フィードバックを得ながら解決策としての質を上げていくことです。
広告運用の最適化やWebサイトやランディングページの細部にこだわったり、営業資料のデザインにこだわったりするよりも、顧客が買ってくれるのか、顧客が喜んでくれるのかにこだわる必要があります。商談時に売れる売れないに一喜一憂するよりも、PMFに近づいているのか、遠ざかっているのかを意識していくことが大切です。


## まとめ
今ある商品をいかに売るかは大事なことですが、果たしてその商品がマーケットにフィットしているのか俯瞰してみる必要があります。今回ご紹介した本はPMFの事例をたくさん紹介しています。是非手に取って読んでいただき、自社の活動に取り込まれてみてはいかがでしょうか。


small_product-market-fit.png

thumbnail_product-market-fit.png

product-market-fit.png

PMF（プロダクトマーケットフィット）とは

## はじめに
デジタルヒューマンという単語を知っていますか？
デジタルヒューマンとは、「人間そっくりの姿で、人間と同じような動きをする3Dアバター」だそうです。

そんなデジタルヒューマンに関するニュースを見つけました。
『中国のデジタルヒューマン、越境ECのライブ配信にも登場　月10万円前後で多言語に対応』
https://36kr.jp/253657/


## デジタルヒューマンの能力とは？
デジタルヒューマンはどのようなことができるのでしょうか？記事を参考にみていきましょう。

> AI技術のおかげで、デジタルヒューマンはすでに400種類以上の言語が使用できる。また、ほとんどのデジタルヒューマンは外見をカスタマイズすることができ、さまざまな地域の文化に合ったサービスを利用できる。
大規模言語モデル（LLM）の発展に伴って、デジタルヒューマン技術も成熟してきた。事前に録画しなくても、さまざまな配信者のコーパスを使って指向的なトレーニングを施せば、デジタルヒューマンに配信者としてのトーク技術をマスターさせることができる。

生成AIによって、自然な文章を自動的に質問に合わせて生み出せるようになりました。
また文章の自動読み上げも自然になってきました。
これらの掛け合わせで、このようなデジタルヒューマンが、開発されるのは必然でしょう。

別の会社のものですが、実際の動画がありました。
https://www.niusia.net/digital_human.html<br>
株式会社ニュウジア

## デジタルヒューマンのメリット
デジタルヒューマンを活用したECにはどのようなメリットがあるのでしょうか？<br>
①言語の壁がなくなる<br>
AIによって多言語対応をしています。<br>

②人手不足解消<br>
デジタルヒューマンは24時間喋り続けることができます。<br>

③外観を自由に変えられる<br>
商品のターゲットによって、外観を変えられます。<br>



## まとめ
ライブコマースが一般的な国では、数年以内は一般的になってそうだと感じました。



medium_20231002151443v2_d74d6083fce842d4b862417f88f3d2eb@000000_oswg551774oswg856oswg471_img_000124 (1).jpg

small_20231002151443v2_d74d6083fce842d4b862417f88f3d2eb@000000_oswg551774oswg856oswg471_img_000124 (1).jpg

thumbnail_20231002151443v2_d74d6083fce842d4b862417f88f3d2eb@000000_oswg551774oswg856oswg471_img_000124 (1).jpg

20231002151443v2_d74d6083fce842d4b862417f88f3d2eb@000000_oswg551774oswg856oswg471_img_000124 (1).jpg

デジタルヒューマンがECに登場する世界

近年、ウェブサイトのコンテンツを取得するスクレイピング技術が増えています。この記事では、一般的なスクレイピングの方法をChrome拡張機能として実装します。特に、動的に読み込まれるコンテンツへの対応として、MutationObserverを使用した方法に焦点を当てて解説します。
これら、全てChatGPTとの対話で作ることができます。

なお、サードパーティのサイトに対してスクレイピングを行う際には、そのサイトの利用規約やrobots.txtを確認して、違反行為をしないよう注意が必要です。

## 1. 前提となる技術

- JavaScriptの基本知識
- Chrome拡張機能の概念
- DOM操作の基本

## 2. ターゲットとなる情報

- 商品名
- 価格
- 商品のリンク

などを決めます。

## 3. 動的コンテンツとは？
近年のウェブページは、ページの初回読み込み時にすべてのコンテンツが読み込まれるわけではなく、ユーザーの操作に応じて後からコンテンツが動的に追加されることが多いです。このような動的コンテンツの取得は、単純なスクレイピング技術では難しい場合があります。

## 4. MutationObserverとは？
MutationObserverは、DOMの変更を監視するための強力なAPIです。これを使用すると、DOMに変更があった際にコールバック関数を実行して、変更された要素に対して操作を行うことができます。動的コンテンツのスクレイピングにおいて非常に役立つツールとなります。

## 5. スクレイピングの実装
まず、Chrome拡張機能としての基本的な構造を構築します。

- manifest.jsonの作成
- ポップアップHTMLの作成
- コンテンツスクリプトの作成

具体的なスクレイピング処理は割愛いたしますが、例えば、もし構造が以下のようであれば

```
<li class="item">
    <a href="product_link">Product Name</a>
</li>
```

コンテンツスクリプト（content.js）は以下のように記述します。

```
let links = Array.from(document.querySelectorAll('.item a'));
```

## 6. 工夫した点: MutationObserverの活用
このガイドの主要なポイントは、MutationObserverの活用です。Shopeeのページは、新しい商品情報が動的に読み込まれることが多いため、このAPIを使用してDOMの変更を監視し、新しく追加された商品情報も取得するようにしました。

## 7. まとめ
この記事では、スクレイピングするための方法をChrome拡張機能として紹介しました。特に、動的コンテンツの取得に焦点を当て、MutationObserverを活用する方法を取り上げました。この手法は、他の多くのウェブサイトでも適用可能で、動的コンテンツの取得に苦労している方にとって有益な情報となることを願っています。


large_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

medium_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

small_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

thumbnail_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

ChatGPTで作るChrome拡張機能を利用した動的コンテンツのスクレイピングガイド

先日、弊社で運営しているコンペナビで、「自治体向け動画コンテスト主催サポートプラン」というLPを作成し公開しました。  
  
<a href="https://compe.sterfield.jp/lp_jichitai" target="_blank">コンペナビ　自治体向け動画コンテスト主催サポート</a>  

私はこのLP制作につき、デザイナーとコーディングを担当し作成しました。  

この案件は弊社の社内案件であり、若手の営業担当がディレクションを行い、私が制作という関係で進めました。

最終的に納得のいく物が作成できましたが、振り返ってみると、企画段階でもっと詰めるべきことがあったし、ディレクターと作業者の間でどこまでが自分が主導して進めるべきか？を悩み、時にはお互いに担当分野を越境したような動きがありました。  

また、社内の関係者間でも、相談するべき点がありました。  
この案件を通して、改めてディレクションの大切さを実感し、反省を兼ねてブログに残します。


## プロジェクトのスタート

当初私のもとには図1の形でまとめられたワイヤーを渡されました。  

図1
<img src="/uploads/20231020_1_16304a854a.png" alt="企画書第一段階">

ワイヤーのコンテンツを大まかなに分けると以下の内容となっていました。  

第1要素　（メインビジュアル要素）
・キャッチコピー
・コンペナビの強み（3点）
・メインビジュアル
・お問い合わせへのリンク

第2要素　
・動画コンテストを開催する意義とサポートする旨の文章
・具体的なサポート内容を示すアイコン

第3要素　
・コンペナビの強み５点を強調する旨のコンテンツ

第4要素　
・コンペ開催のフローと料金について（コンペナビの内容のコピー）

第5要素
・実績

第6要素（最下部）
・お問い合わせフォーム


そして、  
・デザインはコンペナビと関連ある物。コンペナビの下層ページのようなイメージでコンペナビのコンテンツだとわかるものにしてほしい。  
・コンテンツの内容はワイヤーの内容にしたい。  
・この案で上長からGoサインが出ているから進めてもらいたい  

という話をいただきました。  

率直に私が思ったことはまだ、ワイヤーとして完成していないと感じました。 そこで先ず私はディレクターと話し、コンテンツを整理しなおしました。

私は主に  
・メインビジュアルに要素を詰め込みすぎ。  
・メインビジュアルのコンペナビの強み（3点）もこれだけで1つのコンテンツとして成立するし、補足的に見せる内容ではない。  
・全体的にテキストが多い。ビジュアルで見せる部分とテキストで説明する部分を意識した方が良い。  
・第3要素のコンペナビの強みもリズミカルに見せるなら3つくらいに絞った方がよい。  
・補足したい説明があれば、よくある質問というコンテンツにしてQ＆A方式で解説すれば見栄えもよい。  

と言う点を指摘しました。  

そこで、私とディレクターの間でワイヤーを作り直す作業が始まりました。  
このやり取りはプロジェクトを進める上で別に間違ってはいなかったでしょう。  
ただ、デザイナーの私がどこまで口を出すべきか悩みました。  


### 反省点：  
・デザイナーに話を持っていく前に、もっと詰めるべき点があったのでは？  
・制作部としては私がデザイン作業をしていると思っていた。役割を明確にするべきだった。  



## ワイヤー完成からデザイン完成迄

私はワイヤーの内容を大まかにレイアウトし、画面の構成を作る作業をしました。まだ、コンテンツについて考える余地もあり、
なるべくビジュアル要素を増やしてテキスト量を減らすこと、言い回しや見せ方を工夫することで省略できる点はないか、
コンテンツの順番を変えることでよりインパクトが出る見せ方にならないか？などの点を工夫して作成をしました。  


そして、何か思いつけば図2のように実際に簡易的なサンプルを作って、ディレクターに提案するという流れで作業を進めました。
こうして同意を得て、細部まで含めて作成する作業に入りました。  

図2
<img src="/uploads/20231010_2_7c3fe1e73b.png" alt="気可食第一段階">



このとき、デザインはコンペナビを踏襲してほしいという要望を聞いていたので、コンペナビの色使いやアイコンの使い方を見てそれに
よせる作業をし図3の形でまとめました。  


図3
<img src="/uploads/20231020_3_5982681709.png" alt="図3">

そして、私及びディレクター双方が納得し、コーディング開始の段階になりましたが、この段階で上長に確認をいただきました。 
  
この時頂いた意見は、    
・実績をもっと前面に打ち出す形の方がいい。  
・コンペナビの強みという点が取ってつけたように見える。  
・動画コンテストを開く意義について言っているコンテンツが少ない。  
  
というものでした。 

私は当初のワイヤーがテキストが多く、すっきり見せることを意識していた。しかし、この意識を強くしたため、必要であった要素を作業の過程で削っていました。
結果、このデザイン案は作り直しとなったのですが、相談するべきタイミングは明らかに間違えてしまいました。


### 反省点：
・作業を進める段階で完成像の指針がぶれてしまった。  
・部署内で相談するべきタイミングをもっと増やすべきだった。  


## 仕切り直しから完成まで

結局案件は、ディレクター側で再度ワイヤーから作り直すという話になり、2週間くらい経過したらディレクターから新しいワイヤー（図4）が渡されました。
ほぼ、最終系に近い形でいただきました。  

図4
<img src="/uploads/20231020_4_4c7ec1839f.png" alt="図4">

そして、ディレクターが参考にしたWebサイトのURLと一緒に渡され、この形で作り細部はコーディングをしながら直してほしい。
と言われてコーディング作業開始に至りました。  

ここまで完成されたものを渡されたら、デザイナー側でビジュアル要素を作る作業はほぼありませんでした。ただ、これをコーダー目線で見た場合、設計図としては
足りていない点があります。
例えば、  

・メインビジュアルはリキッドデザインになっているが、その他のコンテンツは幅が想定されていない。  
・コーディングで再現するのは難しい部分がある。  
・レスポンシブデザインを意識したとき、レイアウトの変化を意識していない。  

なので、画像の切り出し方に困ってしまったり、作りなおしになった部分もありました。
また、参考にしたWebサイトを見ると、スクロールしてコンテンツが表示されると簡単なアニメーションと共に表示される仕掛けが（フェードインするなど）がありました。  

これを導入するかディレクター側では答えを持っていませんでした。なので、私は「動画」を扱っている以上、動きのある演出の方が良いと提案し、動きを入れるようにしました。  

このような形で導入が決まったのでレイアウト構成の作業をしながらアニメーションを追加し、私の感覚で単調にならないように工夫しながら実装しました。
このため、ディレクター側で考える工数より多くの時間が私の作業段階で発生しました。

更に、完成間近のタイミングでコンペナビのページからこのLPにリンクを貼る依頼を受けました。  

ディレクターの指示では、  

・ヘッダー部分にテキストとボタンを設置してほしい。  
・コンペ全般の主催をすることを進めるページにリンクするボタンを設置してほしい  

という物でした。  
ヘッダー部分は問題なかったのですが、後者の依頼は、意図を聞いてみると新サービスなので、関連項目として見せたいとのことでした。  

このような意図であるならば、ボタンではテキストの説明が必要になるし、テキストを書けばページ本来の趣旨を妨害してしまう。だからバナーの形にするべきと説明しました。  
結果、バナー制作という想定してないコストもかかることになりました。



### 反省点：  
・コーダーに依頼するのであれば、このような形のワイヤーでよいが、デザインも含めて依頼するなら作りすぎている。  
・コーディング開始前に実現できるか検討した上で作業に入るべきだった。  
・コーダーに渡すワイヤーなら、動的なイメージについてどのようにするかも含めて検討して渡すべきだった。  
・全体的な見積もりがそもそも甘い。  


## まとめ
今回の案件はディレクター側も私のスキルを知っているという前提での依頼の仕方になっています。また、制作部としても比較的にリソースを割けるタイミングだから、着手したものでした。  
しかし、社内案件でも、社内の人を使うから無尽蔵に使える物ではありません。
      
成果物としては良い物が作れましたが、全体的に多くのコストをかけてしまいました。この点については、企画段階でチーム全体での相談が足りなかったことに原因があります。  
今後はもっとコミュニケーションを取り、よく相談しながら業務にあたっていきます。




large_3909820_m.jpg

medium_3909820_m.jpg

small_3909820_m.jpg

thumbnail_3909820_m.jpg

3909820_m.jpg

制作するにあたりディレクションの重要性を改めて感じたこと 

## はじめに

実物を手に取れないオンラインショッピングにおいて、既に購入した人の意見や評価は購入の決め手になる…というのが通説かと思います。実際、ほとんどの大手ECサイトや各種プラットフォームにはレビュー機能が搭載されています。


しかし、2023年9月、ドイツ発最大手オンラインファッションECサイト「ザランド（Zalando）」がレビュー機能を停止したらしい、というニュースが入ってきました。
これまでのECの常識から大きく外れたこの動きの真意はどこにあるのでしょうか？

## レビューは不要？巻き起こる議論

製品に対するレビューは、どの地域においてもオンライン取引の重要な部分とみなされているでしょう。実際、昨年行われたある調査では、ドイツ人の少なくとも55 パーセントが、オンライン購入の決定をレビューに基づいて行っていることがわかりました。

また、AmazonはAIを使ってレビューを統合し、購入者によりわかりやすい評価情報を提供することを発表しています。

一方で、いわゆるサクラ、つまり偽のレビューというやっかいな問題があることも事実です。あらゆる事業者が様々な対策を講じているものの、依然として大きな問題として存在し続けています。

そんな中、Zalandが突如としてレビュー機能を停止したのです。
9月初旬時点では正式な発表がなかったため、その理由や、これが恒久的な措置なのかについて、様々な専門家が議論を交わしていました。


## なぜレビュー機能を停止したのか？

その後Zalandは声明を発表し、レビューの完全停止を決めたことを明らかにしました。その理由についてZalandは次のように回答しています。

> レビューを残すお客様は全体の3%程度に過ぎず、実際、商品の大半にはレビューが書かれていません。そのため、ファッション・ショップからこの機能を削除することにしました。

> 今後、より高い価値のある体験を提供する方法を検討中ですが、それまでの間は、お客様はサイズプロフィール（※サイズが合うか合わないかを写真を使ってオンラインでチェックする、Zalandが23年7月に導入したサービス）や返品理由などを基に、製品情報へのフィードバックを提供することができます。


## まとめ

レビュー停止の一報からこの声明の内容を受けて、専門家たちはECにレビュー機能は必要なのか、議論を深めています。
EC業者は、これがZalandの売上にどう影響するのか、他のECがこの動きに追随するかなど、今後しっかり注視していかなくてはならないでしょう。


###### 参考
https://ecommercenews.eu/zalando-removes-product-reviews/

https://ecommerce-news.es/zalando-elimina-las-resenas-de-los-productos/


small_towfiqu-barbhuiya-0ZUoBtLw3y4-unsplash.jpg

thumbnail_towfiqu-barbhuiya-0ZUoBtLw3y4-unsplash.jpg

towfiqu-barbhuiya-0ZUoBtLw3y4-unsplash.jpg

ECにレビューは不要？Zalandoがレビュー機能を停止！

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2024/01/05

2024/01/04

2023/12/15

2023/12/08

2023/12/07

2023/12/03

2023/11/30

2023/11/24

2023/11/24

2023/11/24

2023/11/17

2023/11/10

2023/11/10

2023/11/02

2023/10/27

2023/10/27

2023/10/20

2023/10/18