File→folder

docs/04-environment-setup.md

@@ -27,11 +27,12 @@ VSCodeをインストールに適切なファイルをダウンロードする
 ### Windows
 
 ダウンロードされたものはVSCodeのインストーラです。ファイルを開いて実行すると、VSCodeをインストールするためのウィンドウが開きます。
-
-以降はウィンドウの指示に従って進めてください。オプションが何個かありますが、迷った場合/わからなかった場合はとりあえずチェックを入れておくのが吉です。
+以降はウィンドウの指示に従って進めてください。
 
 ダウンロード後のスクリーンショット付きの説明は[VSCode | Visual Studio Codeのダウンロードとインストール #Visual Studio Codeをインストールする](https://www.javadrive.jp/vscode/install/index1.html#section2)を参照してください。
 
+オプションが何個かありますが、迷った場合/わからなかった場合はとりあえずチェックを入れておくのが吉です。
+
 ### Mac
 
 ダウンロードされたものはVSCodeアプリのzipファイルです。展開すると`Visual Studio Code.app`という名前のファイルができます。このファイルを「アプリケーション」フォルダに移動させてから開いてください。
@@ -56,8 +57,29 @@ VSCodeをインストールに適切なファイルをダウンロードする
 
 ↑のバッジを押すとzipファイルのダウンロードが始まります。展開して得られるフォルダの中にプログラムが入っています。(zipファイルは削除しても構いません。)
 
+>### zipファイル展開の流れ（わかる人はとばして大丈夫です。）
+>#### Windows
+>1. zipをダウンロードすると右上にタブが出てくるのでダウンロードが終わってから"omniboat_robokit_main.zip"のzipファイルににポインタを当ててファイルマークをクリックしてください。
+（またはエクスプローラーのダウンロードからzipファイルを探してください。）
+>
+>    <img alt src="2024-03-31 (6).png" width=250 >
+>
+>2. ファイルを右クリックして「すべて展開」を選択してください。
+>
+>    <img alt src="2024-03-31 (1).png" width=400 > &emsp; <img alt src="image-1.png" width=150 >
+>
+>3. 「参照」を選択して展開先をデスクトップに変更し、右下の「展開」をクリックしてください。（別の場所が良い人は好きにして大丈夫です。）
+>
+>    <img alt src="image-2.png" width=170 > &emsp; <img alt src="image.png" width=300 >
+>
+>#### Mac
+>1. ダウンロードフォルダからデスクトップフォルダに移動させてください。
+>
+>2. zipファイルをダブルクリックしてください。展開が完了します。
+
 続いて、展開したフォルダをVSCodeで開きます。Windowsの方はウィンドウ左上のメニュー、Macの方は画面左上のメニューから *ファイル>フォルダーを開く* を選択してください。フォルダを選ぶためのウィンドウが出てくるので、先程zipファイルを展開して得たフォルダを選択して開いてください。
 
+
 ## 4: 必要な拡張機能をインストールする
 
 フォルダをVSCodeで開くと、以下のようなウィンドウが表示されるはずです。