学習を始める前に環境を整えよう
学習を始める前にまずは環境を整える必要があります。
- Windows or Mac のパソコン
- ネット回線
- アプリケーション
- VisualStudioCode
- Adobe Illustrator
- Adobe Photoshop
- Figma
- Chrome
- Filezilla
上記のようなものが必要となります。
HTML/CSSの学習を始めるだけなら、最初から有料サーバーを契約する必要はありません。まずパソコン上で制作し、練習作品を共有するときは無料公開、本格運用や独自ドメインが必要になった段階で有料サーバーを検討します。
有料サーバーを検討するタイミング
- オリジナルの独自ドメインで作品や事業サイトを公開したい
- PHPのメールフォームやWordPressを動かしたい
- 就職活動後も同じURLでポートフォリオを運用したい
一時的な練習公開だけなら無料サービスで十分な場合があります。契約前に、必要な公開期間、PHPやWordPressの有無、独自ドメインの必要性を整理してください。
エックスサーバーのスタンダードプランは、契約期間や申込時の特典によって支払額が変わります。月額換算だけでなく、契約期間分の支払総額、更新時の通常料金、必要な機能を比較してください。短期学習だけのために長期契約を選ぶ必要はありません。最新の条件はエックスサーバー公式料金表で確認できます。無料公開・PHP・WordPressの使い分けは用途別サーバー選びも参考にしてください。
広告
無料公開では足りず、独自ドメイン・WordPress・PHPを使って継続運用したい人向けの選択肢です。申込前に契約期間、支払総額、更新料金、必要な機能を公式ページで確認してください。
現在の選び方と公開手順は、HTML・CSSで作ったページを公開する方法をご覧ください。用語から確認したい場合は、サイト制作に必要なサーバー用語説明も参考になります。
注意：直下の「スターサーバーフリーを借りる手順」は終了済みサービスの過去資料です。現在の申込手順として使用しないでください。
Windows or Mac のパソコン
Windowsを使うべきか、Macを使うべきかは色々な視点から語ることができると思います。
このサイトの判断としては「どちらでも良い」というところとなります。
好きな方を使ってください。
WindowsとMacのどちらでもWeb制作はできます。価格だけで優劣を決めず、授業や職場で使うソフトが対応しているか、持ち運ぶか、接続したい周辺機器があるかを確認して選びましょう。
HTML/CSSとFigma中心の学習なら、まず現在のパソコンで試してから不足を判断する方法もあります。PhotoshopやIllustratorを使う場合は、購入前にAdobe公式の対応OS・メモリ・GPU要件を確認してください。予算が限られるときは、価格の高い機種を前提にせず、メモリやストレージを優先して比較します。
Windowsで選ぶ場合もMacで選ぶ場合も、次の項目を用途に合わせて確認します。
ノートPC
Web制作の仕事の大きなメリットとしてどこでも働けることというのがあります。
デスクトップpcの方が安いですが、持ち運べない/出先で作業できないのは大きなデメリットです。
ノートPCにしておきましょう
キーボード配列は普段の入力に合わせる
日本語配列と英語配列はキーの位置や記号の入力方法が異なります。どちらが正解ということではありませんが、初心者は学校や職場で使う配列とそろえると操作を覚えやすくなります。
ノートPCの内蔵キーボードは購入後に交換しにくいため、店頭などで日本語入力、記号、ショートカットを試してから選びましょう。
メモリは使うアプリの公式要件で決める
メモリは複数のアプリや大きな画像を扱うときの作業領域です。2026年10月確認時点で、Photoshop 27.x以降とIllustrator 30.0以降はいずれも最小8GB、16GB以上を推奨しています。
HTML/CSS学習だけなら現在のパソコンで始められる場合もあります。Photoshop・Illustrator・ブラウザを同時に使う予定なら16GBを一つの目安にし、動画編集や大きな制作データも扱う場合は余裕を持たせます。購入前にPhotoshop公式要件とIllustrator公式要件を確認してください。
ストレージはSSDと空き容量を確認する
ストレージはアプリ、制作ファイル、写真や動画素材を保存する場所です。IllustratorはSSDを推奨し、Photoshopも高速な内蔵SSDと作業用の十分な空き容量を推奨しています。
HTML/CSS中心なら必要容量は比較的小さめですが、Adobeアプリや画像素材を長く保存する場合は空き容量が減りやすくなります。256GB・512GBという数字だけで決めず、現在使っている容量、外付けSSDやクラウドへの整理方法、卒業後に扱うデータ量を確認して選びましょう。
GPUは使用ソフトと画面解像度で判断する
HTML/CSSやFigma中心の学習では、独立した高性能GPUを必須条件にする必要はありません。
PhotoshopやIllustratorには対応GPUの要件がありますが、必要なVRAMや機能はOS、アプリのバージョン、画面解像度で異なります。4K表示、動画編集、ローカル環境での画像生成などを行う場合は余裕のあるGPUが役立ちますが、「将来使うかもしれない」という理由だけで高額機種を選ぶ必要はありません。
メーカー名やシールだけで判断せず、実際に使うソフトの公式要件にあるDirectXまたはMetalへの対応、VRAM、ドライバーの更新可否を確認してください。
重量が軽い
持ち運びを考えると、軽いものがいいですね。
性能が高いながらも軽いものは高いです。
できれば1.5kg以下になると良いと思います。
この条件を満たし、きちんとスペックが高いものを選ぶとWindowsでは非常に金額が高いはずです。
そうなると結局Macが安いためおすすめなんですよね。
ディスプレイは13インチ以上
13インチぐらいのサイズはあった方が作業がしやすいです。
作ったサイトがどのように動くか確認する面でも小さすぎる画面は避けましょう。
高解像度ディスプレイにしておかないと、高解像度の場合の動作確認ができないのでそのような画面を選んでおくと良いでしょう。
好みで15インチにするとよいです。
ただし、持ち運びする場合は重さも重要です。
サイズと重さのバランスを見て選んでください。
Microsoft Officeはなくてもいい
あった方がいいですが、Google のツール群でも同じようなことができますのでなくてもなんとかなります。
必要になったら買うぐらいの心構えで良いです。
最初からオフィスが入っているパソコンは割高になると考えて良いと思います。
ネット回線
インターネットに繋がないと仕事にならないですね。
Figmaなどはネット回線があることが前提だったと思いますのでこちらは必須となります。
早ければ早いほどいいです。
オンライン会議などの機会もあると思いますので、モバイル回線のみはつらいかも知れません。
アプリケーション
- VisualStudioCode
- Adobe Illustrator
- Adobe Photoshop
- Figma
- Chrome
- Filezilla
Adobeのツールはデザイナーでなければ使わないこともあります。
Figma/Adobeツールは有料ですので契約が必要となります。
VisualStudioCode
Webサイトはメモ帳、テキストエディタで作ります。
Viteを使った開発サーバー・ビルドを体験したい方は、Viteとは？HTML・CSS・JavaScriptを始める方法を順番に試してください。ヘッダーを共通化して複数ページを作りたい方は、Astroの使い方入門へ進めます。HTML・CSSの基礎を身につけてから、目的に合わせて取り入れましょう。
メモ帳でもサイト制作は可能なのですが、専用エディタを使うと作業効率が高まります。
便利な点はさまざまあるのですが、例えば少し文字を打ち込んだら入力できる候補が表示されたりします。
Adobe Illustrator
Adobe Illustratorは印刷物用のツールです。
印刷物をデザインしたり、基本的なデザインについて学習するのにも役立ちます。
Webサイト制作においては主にロゴやアイコンの素材、イラストを作成します。
Adobeツールの使い方の基本はこのソフトから覚えるのがおすすめです。
Adobe Photoshop
Adobe Photoshopは写真編集用のツールです。
少し前まではこのツールでサイトのデザイン作成を行なっていました。
現在は写真素材作成、加工、合成などに活用します。
バナーデザインなどにはまだまだ現役で利用されていると思います。
FigmaなどのWebサイト作成の専用ツールの登場であまり使われなくなりました。
豪華なサイトをデザインするなど、まだまだ出番はあります。
Figma
Webサイトやアプリを作成するための専門ツールです。
photoshopより優れている点がいくつもあり、広く使われ出しました。
Chrome
サイトを見るためのブラウザです。
ただ見るためのものではなく、デベロッパーツールという開発用の機能が非常に役立ちますので活用していきましょう。
FileZilla
サーバーへHTML・CSS・画像をアップロードするためのファイル転送ソフトです。サーバー契約先が対応している場合は、通信を暗号化しない通常のFTPではなく、SFTPなどの安全な接続方式を優先してください。ホスト名・ユーザー名・パスワード・ポート番号は契約先の公式マニュアルで確認します。具体的な操作例はMDN Web Docs「How do you upload your files to a web server?」も参考になります。
