「サーバーやネットワークって、どのくらい知ってればいいの？」
これ、正直むずかしい質問で。WEBデザイナーとネットワークエンジニアでは当然求められるレベルが違うし、「わかってます」の基準って人によってバラバラなんですよね。
でも現場で制作をしていると、「これくらいは知っておきたかった」というラインがだんだん見えてきます。
この記事では、WEB制作者として「サーバー・ネットワークを理解している」と言えるために必要な知識を、基礎から実践的な内容まで、一本でまとめてみました。
まず「インターネットの仕組み」から整理する
難しい話に入る前に、そもそもインターネットってどう動いているの？というところから説明をします。
ブラウザにURLを入力してページが表示されるまで、裏側でこんなことが起きています。
①ブラウザが「このドメイン名、IPアドレスに変換して」とDNSサーバーに問い合わせる
②DNSサーバーがIPアドレスを返す（例：93.184.216.34）
③そのIPアドレスのサーバーに「このページをください」とリクエストを送る（HTTP/HTTPS）
④サーバーがHTMLやCSS・画像などを返す
⑤ブラウザがそれを組み立てて表示する
たったこれだけの流れの中に、DNS・TCP/IP・HTTP・サーバーといった要素が全部入っています。
「知識がバラバラで繋がらない」という人は、まずこの流れを頭に入れておくと、各知識が「あ、ここの話か」とはまってくるようになります。
① IPアドレスとポート「どこ」と「どの窓口」
IPアドレスは、インターネット上の「住所」です。
郵便物を届けるために住所が必要なように、データを届けるためにIPアドレスが必要。
IPv4（192.168.1.1 のような4つの数字）が一般的ですが、
アドレスの枯渇問題からIPv6（2001:db8::1のような長い形式）への移行が進んでいます。
グローバルIPとプライベートIP、ここは混乱しやすいので整理しておきます。
・グローバルIP
インターネット上で一意の住所。外から直接アクセスできる
・プライベートIP
社内や家庭内のネットワーク内だけで使う住所（192.168.x.x や 10.x.x.x など）
家のWi-Fiに繋いだスマホやPCはプライベートIPを持っていて、
ルーターがNAT（Network Address Translation）という仕組みでグローバルIPに変換して外と通信しています。
「自分のPCのIPと、外から見えるIPが違う」のはこのためです。
ポートは「部屋番号」。同じサーバーにも複数のサービスが同居しているので、
どのサービスに話しかけるかを番号で指定します。
よく使うポート番号
80：HTTP（通常のウェブ）
443：HTTPS（暗号化されたウェブ）
22：SSH（サーバーへのリモート接続）
21：FTP（ファイル転送）
25 / 587：メール送信（SMTP）
3306：MySQL（データベース）
「FTPが繋がらない」という相談を受けたとき、「21番ポートが閉じてないか確認を」とすぐ言えるかどうかポートの知識があるとトラブルの切り分けが格段に速くなります。
② DNSの仕組み 名前と住所の変換
DNSは「ドメイン名をIPアドレスに変換する仕組み」です。電話帳みたいなもの。example.com と入力したとき、実際には 93.184.216.34 というIPアドレスのサーバーに繋ぎに行っています。
その変換をしてくれているのがDNSです。
レコードの種類を知っておくと、設定ミスの原因を特定しやすくなります。
・Aレコードドメイン
IPアドレスexample.com → 93.184.216.34
・CNAMEレコードドメイン
別のドメイン名www.example.com → example.com
・MXレコード
メールをどこに届けるかGmailに転送するなどTXTレコード認証や設定情報SPF・DKIMのメール認証など
TTL（Time To Live） は「この情報を何秒間キャッシュしていいか」の指定。
たとえばTTLが 86400（24時間）だと、DNSの変更を加えても最大24時間は古い情報が使われ続ける可能性があります。
サーバー移行のときにやりがちな失敗が、TTLを下げずに切り替えて「なかなか反映されない」となること。
移行の2〜3日前にTTLを 300（5分）に下げておくだけで、切り替え後の待ち時間がぐっと短くなります。
DNSの現在の状態を確認したいときは、ターミナルでこのコマンドが使えます。
dig example.com A
nslookup example.com 8.8.8.8
8.8.8.8 はGoogleの公開DNSサーバーで、自分のプロバイダのキャッシュに左右されない確認ができます。
③ HTTPとHTTPS 通信の「ルール」と「暗号化」
HTTPはブラウザとサーバーが会話するときの「言葉のルール（プロトコル）」です。
ブラウザがサーバーに送るリクエストには、こんな情報が含まれています：
・メソッド 何をしたいか（GET=取得、POST=送信、PUT=更新、DELETE=削除）
・ヘッダー どのブラウザか・どの言語を使うか・Cookieなどの付加情報
・ボディ POSTのときにフォームの入力内容などが入る
サーバーが返すレスポンスに含まれるのは
・ステータスコード 処理の結果（後述）
・ヘッダー コンテンツの種類・キャッシュの設定・Cookieの付与など
・ボディ HTMLやJSONなど、実際のコンテンツ
ステータスコードは頻繁に目にするので、主要なものは覚えておきましょう。
・200 OK（成功）
・301 恒久的リダイレクト（SEO評価が引き継がれる）
・302 一時的リダイレクト（SEO評価は元URLに残る）
・404 ページが見つからない
・500 サーバー内部エラー
・503 サーバーが一時的に利用不可
301と302の違いは地味に重要で、リダイレクト設定を間違えると検索順位に影響します。
「ドメインを変えたけどSEOの評価を引き継ぎたい」なら必ず301を使うこと。
HTTPSは、HTTPに暗号化（TLS）を加えたもの。
通信の中身を暗号化することで、経路上で第三者に盗み見られるリスクを防ぎます。
ブラウザが「保護されていない通信」と警告を出す主な原因
・SSL証明書の有効期限切れ
・証明書のドメインとURLが一致しない
・ページ内にhttp://の画像やスクリプトが混在（Mixed Content）
Mixed ContentはWordPressサイトでよく起きます。
SSL化したのに一部のリソースがhttp://のままだと警告が出る。
「Really Simple SSL」などのプラグインで対応できますが、仕組みを知っておくと原因の特定が速い。
④ サーバーの種類と使い分け
「サーバー」と一口に言っても、役割と構成で種類があります。
共有サーバー（レンタルサーバー）
複数のユーザーが1台のサーバーを共有する形。エックスサーバーやConoHaが代表例。
コストが安く手軽なので、企業の紹介サイトや小規模なブログには十分なことが多い。ただし他のユーザーの影響を受けることがあるのと、サーバーの詳細設定は基本できない。
VPS（仮想専用サーバー）
物理的には共有していても、仮想的に専用の環境を持てる。
自由度が高くなる分、設定の手間が増える。
アクセス数が増えてきたサイトや、特定のミドルウェアを入れたい場合に選択肢に入ってくる。
クラウドサーバー（AWS・GCPなど）
アクセス量に応じてリソースを柔軟に増減できる。
大規模サイトやECサイトに使われることが多い。従量課金制なので費用管理が必要。
制作の提案段階でサーバーの話になったとき、「なぜこれを選ぶか」を説明できると信頼感が上がります。
Webサーバーソフトウェアについても触れておきます。
サーバーマシンの上で動いている「リクエストを受け取って返すソフト」のことで、代表的なのが Apache と Nginx（エンジンエックス） です。
Apache
長年使われてきた定番。.htaccess でディレクトリ単位の設定ができる
・Nginx
大量のリクエストを効率よく処理するのが得意。WordPressの高速化でも使われる
レンタルサーバーでは意識することは少ないですが、VPSを使うときや
「なんでこの設定ファイルを触るの？」となったときに知っておくと迷いが減ります。
⑤ セキュリティ どんな攻撃があって、どう防ぐか
「セキュリティはプラグインに任せる」だけでなく、攻撃の仕組みを知っておくと
設計の段階で防げることが増えます。
SQLインジェクション
フォームの入力欄にSQL文を埋め込んで、データベースを不正操作する攻撃。
たとえば検索フォームに ' OR '1'='1 と入力すると、すべてのデータが返ってきてしまう。
そんなイメージです。
対策はプリペアドステートメント（入力値とSQL文を分けて処理する仕組み）。
WordPressなら $wpdb->prepare() を使うのが基本です。
XSS（クロスサイトスクリプティング）
ユーザーの入力をそのまま画面に表示すると、悪意あるスクリプトが埋め込まれる可能性がある。
対策はエスケープ処理。<script> を <script> のように無害な文字列に変換することで防ぎます。
WordPressでは esc_html() や esc_attr() がこれにあたります。
CSRF（クロスサイトリクエストフォージェリ）
ログイン中のユーザーに、意図しないリクエストを別サイトから送らせる攻撃。「罠リンクを踏んだら勝手に設定が変わっていた」みたいなケースです。
WordPressではnonce（ワンタイムトークン）の検証でこれを防いでいます。
ブルートフォース攻撃
ログインフォームにパスワードを総当たりで試す攻撃。
対策はログイン試行回数の制限と、管理画面URLの変更（/wp-admin をそのまま使わない）。
⑥ パフォーマンス 「重い」の原因はどこにある？
「サイトが重い」はどこが原因かによって対処がまったく変わります。
闇雲に画像を圧縮してもサーバー側がボトルネックなら意味がない。
なので、まずどこで時間がかかっているかを特定することが大事です。
TTFB（Time To First Byte） を最初に見てください。
ブラウザがリクエストを送ってから、サーバーが最初の1バイトを返すまでの時間のことです。ブラウザの開発者ツール（Networkタブ）で確認できます。
・TTFBが 200ms以内：問題なし
・TTFBが 500ms以上：サーバー側（DB処理・PHPの実行）かネットワークに原因がある可能性
TTFBが正常なのにページが遅い場合は、転送量（ファイルサイズ）やレンダリングの問題を疑います。
改善の優先順位はこちら。
・画像の最適化
WebP形式への変換、適切なサイズへのリサイズ。これが一番効くことが多い
・CSS・JSの圧縮（minify）
余分な空白やコメントを削除してファイルを小さくする。
・レンダリングブロックの解消
<head> に大きなJSがあるとページ表示が遅れる。defer 属性をつけるか </body> 直前に移動する
・キャッシュの活用
一度読み込んだリソースをブラウザに保存させる。Cache-Control ヘッダーの設定
・CDNの導入
Cloudflareなど、世界中にサーバーを分散させてユーザーの近くから配信する仕組み
Googleの Lighthouse（開発者ツール内）を使えば、上記の問題点を自動でスコアリングしてくれます。
まず使ってみることをおすすめします。
まとめ
今回の記事で扱った内容を整理するとこうなります。
カテゴリ最低限知っておきたいこと
ネットワーク基礎
・IPアドレス
・グローバルIP/プライベートIP
・ポート番号
DNS
・レコードの種類
・TTLの意味
・移行時の注意
HTTP/HTTPSリクエスト
・レスポンスの構造
・ステータスコード
・SSL化
サーバー
・共有
・VPS
・クラウドの違い
・ApacheとNginxの概念
セキュリティ
・SQLi
・XSS
・CSRF
・ブルートフォースの仕組みと対策
パフォーマンス
・TTFBの見方
・改善の優先順位
正直に言うと、これ全部を完璧に説明できる制作者はそう多くないと思います。
でも「聞いたことがある」と「なんとなく仕組みがわかる」だと、現場での動き方がぜんぜん違う。
トラブルが起きたときに「どこから調べればいいか」の当たりがつけられる。
私が思う「わかってます」のラインは、そのくらいです。
一度に全部覚えようとしなくていい。現場でぶつかるたびに一つずつ深掘りしていくうちに、気づいたら「わかってる人」になっていた、というのが自然な道だと思っています。
