WebページとWebサイトの構造

学習の目的

  • 1. WebページとWebサイト

  • 2. Webサイトの構造

WebページとWebサイトの違いは分かりますか?

このスライドでは、WebページとWebサイトの違いについて学習します。

1. WebページとWebサイト

Webページとはテキスト、画像、音声、動画など色々な種類の要素を組み合せたインターネットで使われる文書です。

Webページは、Webブラウザというアプリケーションで見ることができます。

インターネットでは、どのようなWebページを見てますか?

検索したり、動画を見たりしています。

ラグビー日本代表のページは毎日見てます!そこから、色々な情報をゲットしています!

インターネットのWebページは1ページだけでなく、複数のページから構成されています。

複数のWebページをひとまとまりにしたものをWebサイトといいます。

複数ページはそれぞれハイパーリンク(リンク)と呼ばれる機能で関連付けされます。

ブラウザで見ている1ページ分がWebページです。

また、Webページがいくつか集まってWebサイトが作られています。

今、見ているこのページがWebページですよね。

はい、そして教材全体がWebサイトです。

スライドやチャット、アクティビティだけでなく、面談や特別講座などそれぞれがハイパーリンクで関連付けられているため、どんどんページを遷移することができます。

また、ハイパーリンクは単に「リンク」と呼ばれることが多いですよ。

リンクの例

  • 学習ページの最後にある「次のステップに進むボタン」

  • Google Colabを開くボタン

他のページに移動するものがリンクなんですね!

大まかにはそうです。

ハイパーリンクとは、他の文章と関連付けをすることなので、同じページ内の他の文章に移動することも含みます。

次の「先頭に移動する」ボタンを選んでみてください。このページの先頭に移動します。これもハイパーリンクです。

先頭に移動する
参 考

ハイパーリンクが使える文書のことをハイパーテキストと呼びます。

例えば、PDFファイルや、Microsoft社のWordやExcelなどで作成したファイルも、他の文章と関連付けを行うことが出来るので、ハイパーテキストと呼ぶことができます。

Webページもハイパーテキストの一種です。

情 報 こ と ば キ ー ワ ー ド

Webページ

テキスト文章、画像、音声、動画など色々な種類の要素を組み合せたインターネットで使われる文書のこと

Webブラウザ

Webページを閲覧するためのアプリケーション

Webサイト

Webページが集まってできているひとまとまりのもの

ハイパーリンク(リンク)

Webページ同士を関連付けする機能

ハイパーテキスト

ハイパーリンクが使える文書のこと。WebページやPDFファイル、Microsoft社のWord、Excelなどがある

2. Webサイトの構造

Webサイトの構造とは、複数のWebページがどのように組み合わされているかを示す設計図のようなものです。

サイト設計は「地図づくり」に似ていて、

  • 利用者が目的の情報に素早くたどり着ける
  • ページの中で迷わないように誘導できる

ことが大切です。

Webサイトの代表的な3つの構造

Webサイトによく利用されている代表的な構造に、「直線的構造」、「階層構造」、「網状構造」の3つがあります。

直線的構造

特徴

ページが順番に1列に並んでいる。

本やスライドなどページを1枚ずつめくるイメージ。

順番に見せたい内容、手順があるものに向いている。

例

申し込みフォーム、宿泊予約、オンラインテスト

階層構造

特徴

情報が分類されている。

木の枝(上から下へ広がる)や本の目次などイメージ。

情報量が多く、整理が必要なサイトに向いている。

例

学校のWebサイト、企業のWebサイト

網状構造

特徴

どのページからでも他のページに移動できる。

くもの巣、道路網などのネットワークのイメージ。

情報がつながっていて、自由に移動できるサイトに向いている。

例

SNS、ブログ

実際にWebサイトは、この3つの構造を組み合わせて構成されることが多いです。

この学習で使っているWebサイトは、スライドごとに「次のステップに進む」ボタンを押すから、直線型構造??

ログインした後はダッシュボードで、面談や特別講座にも行けるから階層型構造も使ってると思う。

学習で使っているWebサイトも直線構造や階層構造など複数の構造を組み合わせて構成されています。

目的に合ったWebサイトの構成にすることが大切です。

情 報 こ と ば キ ー ワ ー ド

直線的構造

本やスライドなどページを1枚ずつめくるイメージでページが順番に1列に並んでいる構造

申し込みフォームなど、順番に見せたいない内容や手順に向く

階層構造

木の枝(上から下へ広がる)や本の目次などイメージで情報が分類されている構造

学校のWebサイトなど、情報量が多く、整理が必要なサイトに向いている

網状構造

道路網などのネットワークのイメージで、どのページからも他のページに移動できる構造

SNSなど、情報がつながっていて、自由に移動できるサイトに向いている

Well done!

次のステップに進みましょう!

次のステップに進む

← 前のステップにもどる