ウェブサイトとウェブアプリの違い

blog-hero-img 違いは一方通行と双方向にあります

pen-icon2023.12.19

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

「サイト」と「アプリ」

この記事を読まれているから、これまでHTML/CSSを使った開発を一度はしたことがあると思います。

しかしそうして完成したものは、例えばInstagramやTwitterのように、画像やコメントなどを投稿できるようになっていたでしょうか。

おそらくそうはなっていなかったと思います。

それはHTML/CSSだけで作れるものは、「ウェブサイト」に分類されるものだからです。

一方通行と双方向

ここで「ウェブサイト」と「ウェブアプリケーション(ウェブアプリ)」の違いは何か、という疑問が出てくると思います。

この2つの最大の違いは、ユーザーとのやりとりが「一方通行」か「双方向」かという点にあります。

ウェブアプリの例

ウェブアプリケーションの例として、ここではクチコミを投稿できるサービスを考えてみます。

アクセスをすると、まず最初にたくさんのクチコミがブラウザに表示されます。

これらのクチコミがどこから来たのかを考えてみると、私たちがアクセスする前にすでにたくさんのユーザーがクチコミを投稿していたので、今このように表示されているのがわかります。

つまりユーザーは、このクチコミサービスに対して「クチコミを投稿(作成)する」というアクションを起こせることがわかります。

さらにもう少し考えてみると、例えば自分のクチコミに誤字脱字を見つけた場合は「クチコミを修正する」、クチコミを消したい場合は「クチコミを削除する」というアクションも可能だと推測できます。

このようにユーザーとの間では、単にクチコミサービス側が情報を表示するだけではなく、ユーザーはそこに対して何らかのアクションを起こすことも可能です。

これは情報のやりとりが「双方向」であるといえ、これこそがウェブアプリケーションの特徴になります。

ウェブサイトの例

一方で「ウェブサイト」の例として近くの飲食店のホームページを考えてみましょう。

そこにはメニューやシェフのこだわり、営業時間、電話番号などが書いてありますが、私たちユーザーはその情報に対しアクションを起こして変更を加えたり、または新しく情報を追加したりといったことはできません。

つまり情報の流れがここでは「一方通行」であるのがわかります。

情報の流れ
ウェブサイト 一方通行 企業や飲食店のホームページなど
ウェブアプリケーション 双方向  メルカリ、Twitter、クチコミサービスなどのウェブサービス全般

しかしこれでいつもはっきりと区別がつくのかというと、そうではありません。

例えば飲食店のホームページに「お問い合わせページ」があって、そこからユーザーが連絡を取れるようになっていると、これはもう「一方通行」のやりとりだけというわけではなくなります。

このようにウェブアプリケーションとウェブサイトの境目は曖昧(あいまい)で必ずしも明確なものではなく、また厳密に区別する必要があるわけでもないことを覚えておきましょう。

「ウェブサイト制作」から「ウェブアプリ開発」にスキルを伸ばしたい方は、HTMLとCSSの知識だけでアプリ開発を体験できる下記書籍がおすすめです。

reactbook

【Amazonで見る】