WinSCP 基本ガイド

WinSCP とは何ですか？

WinSCP は、Windows でサーバーに接続し、ファイルをアップロード・ダウンロードできるソフトです。 ホームページ作業では主に次のことに使います。

• HTML ファイルをサーバーへ送る
• CSS や JavaScript を更新する
• 画像をアップロードする
• サーバー上のフォルダ構成を確認する
• ローカルのファイルとサーバーのファイルを見比べる

コマンドをたくさん打たなくても、目で見て作業できるのが大きな利点です。

WinSCP がホームページ作業に向いている理由

WinSCP を使う前に必要な情報

接続するには、たいてい次の情報が必要です。

項目	意味	よくある例
接続方式	どう接続するか	SFTP
ホスト名	サーバーの名前やIP	example.com
ポート番号	接続ポート	22
ユーザー名	サーバーのログイン名	youruser
パスワード	ログイン用パスワード	サーバー管理情報

WinSCP で接続する流れ

1. WinSCP を開く
2. 接続方式で SFTP を選ぶ
3. ホスト名を入れる
4. ポート番号を入れる（多くは 22）
5. ユーザー名とパスワードを入れる
6. ログインする

最初は「このサーバーでよいですか？」のような確認が出ることがあります。初回接続ではよくあることです。

接続後に最初に見るべきこと

すぐにファイルを送らず、まずは次のことを確認してください。

• 左側はどのローカルフォルダか
• 右側はサーバーのどのフォルダか
• 本当に今から触るサイトの場所か

この確認をするだけで、間違った場所へアップする事故がかなり減ります。

左側と右側の意味

つまり、左で作ったものを右へ送る、というのが基本です。

ローカル側は整理されているほど強い

自分のパソコンの作業フォルダが整理されているほど、WinSCP は使いやすくなります。

C:\website\
├── site.css
├── site.js
├── index.html
├── images\
│   ├── webbie-icon-square.jpg
│   ├── website-putty-terminal.jpg
│   └── website-winscp-files.jpg
├── en\
│   ├── index.html
│   └── tools\
│       ├── index.html
│       ├── putty-basics.html
│       ├── winscp-basics.html
│       └── vi-basics.html
└── ja\
    ├── index.html
    └── tools\
        ├── index.html
        ├── putty-basics.html
        ├── winscp-basics.html
        └── vi-basics.html

こういう形だと、アップロードの流れがとても自然になります。

ホームページ作業でよく送るファイル

種類	役割	例
HTML	ページ本体	winscp-basics.html
CSS	見た目の共通ルール	site.css
JavaScript	共通動作	site.js
画像	ヒーロー画像や説明画像	website-winscp-files.jpg
補助ファイル	サイト運用用	sitemap.xml, robots.txt

ファイルをアップロードする方法

やり方は基本的に2つです。

• 左から右へドラッグする
• アップロード機能を使う

例：HTMLファイルを1つ送る

1. 左側でローカルの en/tools/ フォルダへ行く
2. 右側でサーバーの /public_html/en/tools/ へ行く
3. winscp-basics.html を選ぶ
4. 右へ送る

もし同名ファイルがすでにサーバーにあれば、「上書きしますか？」の確認が出ることがあります。

画像アップロードがとても大事

このサイトの作り方では、画像を先にアップロードして、その URL をあとで ChatGPT に渡す流れがとても大事です。

画像URLの例

たとえば次のファイルをサーバーへ送ったとします。

website-putty-terminal.jpg

サーバー上の場所が:

/public_html/images/website-putty-terminal.jpg

なら、あとで HTML では:

https://website.co.jp/images/website-putty-terminal.jpg

という URL を使えます。

上書き更新の考え方

WinSCP は、修正版のファイルで古いファイルを上書きするのにも向いています。

例：site.css を更新する

1. ローカルで site.css を修正する
2. 左側でそのファイルを選ぶ
3. 右側でサーバーの該当場所を見る
4. アップロードして上書きする
5. ブラウザを更新して結果を見る

フォルダを作ることもある

サーバー側に必要なフォルダがまだないときは、WinSCP で新規フォルダを作ることがあります。

例

まだ /public_html/en/tools/ がなければ:

1. 右側で /public_html/en/ へ行く
2. tools フォルダを作る
3. その中へページを送る

ただし、むやみにフォルダを増やすより、最初に決めたファイルツリーに従う方が大事です。

WinSCP とローカル作業の関係

このサイトでは、まずローカルで作ってからアップロードする流れを強くおすすめしています。

まずローカルで作る。確認する。整える。準備ができたらサーバーへ送る。

この順番だと、サーバー上で慌てることが減ります。

WinSCP が特に向いていること

• 完成した HTML をサーバーへ送る
• 画像をまとめてアップする
• ファイル構造を目で確認する
• サーバー上のファイルをダウンロードする
• どのファイルが本当に存在するか確かめる

WinSCP が向いていないこと

• 長い文章をゼロから書くこと
• 複雑なコード編集
• デザインそのものを作ること
• 構造が決まっていない状態で場当たり的に作業すること

WinSCP は「整理して送る」道具です。計画なしに使うと、逆に散らかりやすくなります。

実務例：1ページ公開する

ローカルに次のファイルがあるとします。

C:\website\en\training\step-07-save-image-urls.html

これをサーバーの:

/public_html/en/training/step-07-save-image-urls.html

へ送る流れは次の通りです。

1. 左側で C:\website\en\training\ を開く
2. 右側で /public_html/en/training/ を開く
3. ファイル名が完全に一致しているか確認する
4. アップロードする
5. ブラウザで公開URLを確認する

実務例：Webbie画像を送る

ローカルの:

C:\website\images\webbie-review.jpg

をサーバーの:

/public_html/images/webbie-review.jpg

に送ったとします。そうすると、HTML では:

<img src="https://website.co.jp/images/webbie-review.jpg" alt="ホームページを確認するWebbie">

のように使えます。

よくある失敗

1. 間違ったフォルダに送る

これがいちばん多いです。送る前に右側の場所を必ず確認してください。

2. 同名ファイルを気づかず上書きする

特に index.html、site.css、site.js は慎重に扱ってください。

3. ファイル名がバラバラ

hero.jpg、Hero.jpg、hero-final.jpg のように混乱すると後で大変です。

4. 一気に大量アップして確認しない

初心者のうちは、送ったら確認、送ったら確認、の方が安全です。

5. ローカルを整理せずに作業する

左側が散らかっていると、右側も散らかりやすくなります。

最小チートシート

左側  = 自分のパソコン
右側  = サーバー
SFTP  = 安全な接続方法
Upload = 左から右へ送る
Download = 右から左へ戻す
Overwrite = 上書き更新
大事 = 送る前に右側の場所を見る