Webサイトが表示される仕組み・構造を解説！

インターネットの普及により、現代では多くの会社が自社Webサイトを持つようになりました。しかし、企業担当者のなかには「Webサイトの仕組みや構造がわからない」という人もいるのではないでしょうか。
そこでこの記事では、さまざまな分野の会社比較や見積もりが可能な「アイミツ」が、Webサイトの基本的な構造や表示される仕組みを解説していきます。ぜひ最後までご覧ください。

【関連ページ】
システム開発にかかる費用・相場感や、あなたの目的別にシステム開発会社をお探しいただけます。
システム開発の費用と相場
システム開発会社一覧

まずは、Webサイトの基本構造を解説します。Webサイトは、主に以下の3つの要素で構成されています。
・サーバー
・ファイル
・ドメイン
各要素の概要については、以下の通りです。

サーバーとは、利用者がインターネット上でアクセスするコンピューター機器を指します。サーバー上では、データの保存やWebページの表示などの重要な処理が行われており、Webサイトにおいて、サーバーは「土地」となる存在といえるでしょう。
土地となるサーバーの上にさまざまな役割を持つファイルを置くことで、Webサイトが構築されています。なお、インターネット上で公開されるサーバーは、一般的にWebサーバーと呼ばれているのです。

ファイルは、サーバーが「土地」とした場合に「家」の位置づけになるでしょう。Webサイトは、サーバー上にさまざまなファイルを配置することで、具体的な表示内容が形づくられています。
Webサイトにおけるファイルには、HTMLやCSS、画像などのデータが格納されています。例えば、HTMLはWebページの文章構造を決めている骨組みのようなデータであり、CSSはWebページのデザインを表現するためのデータです。

ドメインは、サーバーが「土地」、ファイルが「家」だとした場合に、「住所」の役割を持ちます。現実世界において土地や家があっても、住所がなければ誰も訪問できず、荷物も届かないでしょう。
インターネット上でも同様に、住所の役割を持つドメインの存在は必要といえます。例えば、アイミツのWebサイトのトップページURLは「https://imitsu.jp」です。このうち、「imitsu.jp」にあたる文字列がアイミツのドメインになっています。

つづけて、インターネットでWebサイトの表示に必要なものを解説していきましょう。

IPアドレスとは、「Internet Protocol Address」の略称であり、ネットワークで接続される機器の1つ1つに割り振られる一意の番号です。パソコンやスマートフォン、Wi-fiルーターなどにも、各端末に別々のIPアドレスが付与されています。
IPアドレスは「192.168.0.0」のように数字とピリオドで構成されており、インターネット上で通信先を特定するための判断材料となっているのです。普段何気なくパソコンやスマートフォンでインターネットを利用しているときも、IPアドレスによって通信先を識別することで、通信を行えます。

DNSとは、「Domain Name System」の略称であり、 インターネット上でドメイン名を識別・管理するためのシステムです。前述のIPアドレスは、通信先を識別するために必要な情報ですが、数字とピリオドの組み合わせのため人間にとって理解しにくい情報といえるでしょう。
そのため、Webサイトのドメイン名は、「imitsu.jp」のように人間が見ても識別しやすい情報といえます。なお、DNSは、IPアドレスとドメイン名を紐づける役割を担っています。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるシステム開発会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

Webサイトは、以下のような流れでブラウザ上に表示されます。
・ブラウザにドメインもしくはURLを入力
・IPアドレスがDNSサーバーから返ってくる
・関連ファイルをWebサーバーから受け取る
・ブラウザがHTMLなどの言語を翻訳し表示
ここからは、Webサイトが表示されるまでの仕組みを4つのステップに分けて解説します。

Webサイトを表示したい場合、まずは見たいWebサイトの情報を指定することが必要です。そのため、Webサイトのドメインもしくは、URLをブラウザに入力します。
例えば、アイミツのWebサイトを見たい場合は、ブラウザの検索バーに対してドメイン「imitsu.jp」または、URL「https://imitsu.jp/」を入力しましょう。

ブラウザにドメインまたはURLを入力後、入力された情報はDNSサーバーに送られます。そしてDNSサーバーで対象のドメインに紐づくIPアドレスを特定し、ブラウザにIPアドレスの情報を返す仕組みです。
利用者からはブラウザとDNSサーバーとのやり取りは目で見えませんが、裏側の処理としてドメイン名とIPアドレスの変換が行われています。

ブラウザがDNSサーバーからIPアドレスを受け取ったあとは、IPアドレスの情報をもとに対象のWebサーバーにアクセスします。住所（IPアドレス）を確認したあとに、実際に住所が示す土地（Webサーバー）に訪ねるイメージです。
Webサーバーにアクセスしたら、目的のWebサイトに関連するファイルを取得します。例えば、トップページであればトップページの文章や画像に関するファイル、商品ページであれば対象商品の画像や商品紹介文に関するファイルです。

Webサーバーから関連ファイルを受け取ったあとは、ブラウザが受け取ったファイルの情報を翻訳し、Webサイト上に表示します。Webサーバーから送られるHTMLやCSSなどのファイルは、コンピューター言語で入力されているため、そのままの状態では利用者が理解できません。そのため、ブラウザがコンピューター言語を人間がわかる内容で表示しています。

システム開発の費用相場は、開発目的や要件によって大きく変動します。たとえば、業務支援システムは100万〜700万円、Webシステムは50万〜500万円程度で構築できるケースが多く、比較的低コストで導入可能です。
一方で、ERPなどの基幹システムは3,000万円〜数億円、医療・ヘルスケアシステムも2,000万〜8,000万円と高額になりやすく、要件の複雑さや安全性への対応が費用を押し上げます。

また、同じカテゴリでもパッケージ導入かフルスクラッチ開発か、外部連携やカスタマイズの有無によって費用は大きく上下します。相場はあくまで目安として捉え、自社の目的と必要機能に応じて適切な投資額を見極めることが重要です。

以下では、システムの種類（開発目的）別に費用相場を一覧で整理しています。

より詳しいシステム開発の費用相場や具体的な見積もり事例、費用の算出方法などは以下の記事にて解説しています。ぜひこちらもご覧ください。

種類別に費用相場を把握したうえで、次に重要となる開発手法による違いも紹介します。

システム開発費用は「スクラッチ開発」「パッケージ導入」「ノーコード・ローコード活用」などの開発方法があり、自由度が高いほど高額、既存活用が多いほど低コストになる傾向があります。

同じ機能要件でも、どの手法を選ぶかによって初期費用・開発期間・保守性が大きく異なるため、自社の目的と予算に応じた選定が重要です。

種類別と開発手法別にシステム開発の費用相場を解説しましたが、より正確な費用を知りたい方は料金シミュレーターをご利用ください。

普段見ているWebサイトの構造や表示の仕組みを理解するためには、Webサーバーやドメイン、ファイル、IPアドレス、DNSなどの専門知識の理解が必要でしょう。
自社に専門知識がある人材がいなくてお困りの場合でも、Webの仕組みに詳しいシステム開発会社であれば、安心してWebサイト構築を依頼できます。「アイミツ」はご要望を伺った上で、条件に合うシステム開発会社を「無料」で複数社ご紹介可能です。会社選びでお困りの人は、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
システム開発会社一覧

【費用感を知りたいという方はこちら】
システム開発の平均費用と料金相場