素材・ファイル・ブラウザ確認まで：Web制作の準備を丸ごと解説

はじめに
1. 無料素材ダウンロードサイトの活用
- 1.1 おすすめの無料素材サイト一覧
- 1.2 写真ACの登録とダウンロード手順
2. VS Codeでの新規ファイル作成と保存
- 2.1 プロジェクトフォルダの作成と開き方
- 2.2 新規ファイルの作成・編集・保存
3. ブラウザでの表示確認と開発者ツールの使い方
- 3.1 保存したファイルをブラウザで開く
- 3.2 開発者ツールでスマホ表示を確認する
まとめ

はじめに

前回の記事では学習サービスとVS Codeの環境構築を紹介しました。今回はいよいよ「実際に手を動かす準備」の仕上げ編です。Web制作に欠かせない無料素材のダウンロード方法、VS Codeでの新規ファイル作成・保存の手順、そして作ったファイルをブラウザで確認する方法を、開発者ツールのスマホシミュレーターまで含めて解説します。

1. 無料素材ダウンロードサイトの活用

1.1 おすすめの無料素材サイト一覧

Webサイトの見栄えを左右する写真・イラスト・アイコン素材は、著作権に配慮しながら揃えることが重要です。以下のサービスはいずれも商用利用が可能な無料素材を提供しており、Web制作の現場でも広く活用されています。

📷写真AC
日本最大級の無料写真素材サイト。無料会員登録で高品質な写真を毎日ダウンロードできます。日本の風景・人物・ビジネスシーンなど国内向けコンテンツが特に充実しています。

🎨イラストAC
写真ACと同じ運営会社によるイラスト素材サービス。会員登録不要でも閲覧でき、登録後はPNG・SVG形式でダウンロード可能です。日本語での検索がしやすいのが特長です。

🌍Unsplash
世界中のフォトグラファーが提供する高解像度写真サービス。英語UIですがおしゃれな写真が豊富で、登録不要でダウンロードできます。ポートフォリオやLP制作に最適です。

✏️SVGRepo / FlatIcon
ボタンやナビゲーションに使えるアイコン素材サービス。SVG形式で配布されているものはCSSで色を自由に変更でき、Webサイトに直接埋め込んで使えます。

1.2 写真ACの登録とダウンロード手順

写真ACは無料会員登録するだけで1日あたりのダウンロード数が大幅に増えます。以下の手順で登録からダウンロードまで進めましょう。

1.写真ACのサイト（www.photo-ac.com）にアクセスし、右上の「無料登録」ボタンをクリックします。

2.メールアドレスとパスワードを入力して仮登録。届いたメールのリンクをクリックして本登録を完了します。

3.検索窓にキーワードを入力して素材を探し、気に入った写真をクリック。「無料ダウンロード」ボタンを押してサイズを選択します。

4.ダウンロードしたファイルはプロジェクトフォルダ内の images/ フォルダに整理して保存しておきましょう。

💡 素材使用時の注意点：写真ACなどの無料サービスは利用規約の範囲内で使用する必要があります。商用利用の可否・クレジット表記の要否を必ず規約で確認してから使いましょう。

2. VS Codeでの新規ファイル作成と保存

2.1 プロジェクトフォルダの作成と開き方

VS Codeでは「フォルダを開く」ことで、その中のファイルをまとめて管理できます。まずデスクトップやドキュメントに作業用フォルダを用意するところから始めましょう。

1.デスクトップなどに my-website という名前でフォルダを作成します。

2.VS Codeを起動し、メニューの 「ファイル」→「フォルダーを開く」から先ほど作ったフォルダを選択します。

3.左のサイドバー（エクスプローラー）に my-website フォルダが表示されれば準備完了です。

2.2 新規ファイルの作成・編集・保存

フォルダを開いたら、HTMLファイルを新規作成して内容を書き、保存するまでの流れを確認しましょう。

1.エクスプローラーのフォルダ名横にある 「新しいファイル」アイコン（📄）をクリックし、index.html と入力してEnterを押します。

2.エディタに ! を入力してTabキーを押すと、Emmetの自動補完によりHTMLの基本構造が一瞬で展開されます。

3.Windows: Ctrl + S で保存します。タブのファイル名から「●」が消えれば保存完了のサインです。

4.ダウンロードした素材を入れる images フォルダも同様にフォルダアイコンから作成し、写真ACでダウンロードした画像ファイルをその中に配置します。

3. ブラウザでの表示確認と開発者ツールの使い方

3.1 保存したファイルをブラウザで開く

HTMLファイルはWebサーバーがなくてもブラウザで直接開いて確認できます。前回紹介した Live Server拡張機能を使う方法が最もスムーズです。

1.VS Codeで index.html を開いた状態で、右下のステータスバーにある 「Go Live」ボタンをクリックします。

2.自動的にブラウザが起動し、http://127.0.0.1:5500/index.html でページが表示されます。

3.VS Codeでコードを編集して保存すると、ブラウザが自動でリロードされて変更がすぐ反映されます。

また、フォルダ内のindex.htmlファイルをダブルクリックすることでデフォルトのブラウザで確認することが可能です。

3.2 開発者ツールでスマホ表示を確認する

ブラウザに搭載された開発者ツールを使うと、実機がなくてもスマートフォンやタブレットの表示を画面上でシミュレーションできます。レスポンシブデザインの確認に欠かせない機能です。

1.ChromeでページをLive Serverで表示した状態で、Windows: F12 を押して開発者ツールを開きます。

2.ツール上部の スマートフォン＋タブレットのアイコン（デバイスツールバー） をクリックします。

3.上部のプルダウンから 「iPhone 14 Pro」「Pixel 7」など確認したい端末を選択すると、その画面サイズでページがシミュレートされます。

4.「Responsive」モードにすればドラッグで幅を自由に変更でき、レイアウトが崩れるブレイクポイントをリアルタイムで探ることができます。

💡 Stylesパネルで即座に検証：開発者ツールのStylesタブでは、CSSの値をその場でクリックして変更できます。ページを壊す心配なくデザインを試せるので「どの値にすれば理想のレイアウトになるか」をブラウザ上で確認してからコードに反映するのがおすすめです。