NHK高校講座

社会と情報

今回の学習

第6回 情報の表現と伝達

Web 新時代

  • 社会と情報 監修:清教学園中・高等学校特任教諭 田邊 則彦
学習ポイント学習ポイント

Web 新時代

  • スーパー・ササダンゴ・マシンさん
  • 大関れいかさんと古関れんさん

社会と情報でいつも楽しいプレゼンをしてくれるスーパー・ササダンゴ・マシンさん。
今回はいつもと違う方法でプレゼンをしたいそうです。
司会は古関れんさんと大関れいかさんです。

Web新時代を迎えている今。一緒に学んでいきましょう!

  • ササダンゴさんのWebサイト
  • プロフィールページ

今回はWebページで思いを伝えたい!というササダンゴさん。
今はパソコンの文書作成ソフトやメモ機能でもWebページを作ることができます。

古関さんと大関さん、ササダンゴさんが作ったWebページを見て思わず「ださい!」と声をあげます。
自分のプレゼンをWebページで世界に発信したい!と意気込むササダンゴさんですが、
2人は導入部分を読むだけで疲れてしまいました。

WWWとWebページ
  • HTMLとタグ
  • 画像も埋め込まれている

Webページはどのようにして作られていて、閲覧する仕組みはどうなっているのでしょうか?

社会と情報の番組Webページを作っている仕組みを見ると、文字だらけになっています。
実はWebページは「HTML(ハイパーテキストマークアップランゲージ)」で書かれたファイルになっていて、
「タグ」と呼ばれる特別な文字列で囲んで記述されています。

見比べてみると、Webページと同じ項目が並んでいることがわかります。
画像や動きなどの情報も埋め込まれています。

そしてWebページの最大の特徴は、「リンク」です。
見たい項目をクリックすると別のページに移動し、またクリックすると別のページに移動します。
Webページはたくさんのページがリンクによってつながっているのです。

  • インターネットの図

世界中に存在するWebページを見ることができるのは、インターネットのおかげです。
Webサーバというコンピュータと、私たちが使っているコンピュータとの間で、情報がやりとりされているのです。

あるWebページを閲覧するためには、まずそのURLを入力します。
すると、 Webサーバは指定されたWebページのファイルを送り返してきます。
それらのファイルをWebブラウザが組み合わせて、Webページを表示しています。
このWebページの閲覧を可能にしているシステムを「WWW(ワールドワイドウェブ)」といいます。


ドメイン名

Webページを見るときに入力するURLを、NHK高校講座のサイトで詳しく見てみましょう。
http は、通信方法のこと。
www.nhk.or.jp は、コンピュータのドメイン名、「インターネット上の住所」にあたるもの。
nhk の部分は組織名、or の部分は組織の種類、jp の部分は国名や地域名です。

1つのURLで一度に表示されるのがWebページ。
複数のWebページの集まりをWebサイトといいます。

人気Webページに学ぼう
  • Webサイトをつくる目的を決める

今回はWebデザイナーのムラマツヒデキさんにお話を伺います。

Webサイトを作るにあたって一番重要なのはゴールを設定することだとムラマツさんは言います。
ゴールを設定しないと、何のためにWebサイトを作るのかあいまいになってしまうため、
Webサイトを作る目的をはっきりさせることが重要です。

  • 結婚式を撮影する写真家のWebサイト
  • 想定するターゲット

ムラマツさんが作った、結婚式を撮影する写真家のWebサイトです。
Webサイトの目的は、少しでも多くの問い合わせを獲得すること。

具体的なターゲットや、アクセスするときの気持ちを想定するとデザインの方向性を決めることができます。
このWebサイトの場合、ターゲットは20代〜30代の女性。多くは、すでに予算や挙式の日取りが決まっていて早く決めたいと思っている、と想定できます。

  • ロゴはどこに置く?
  • ロゴの位置は左上に

Webサイトの方向性が固まったらどこにどんな情報を載せるか、全体の設計を考えていきます。

このWebサイトでは問い合わせを増やすため、すべてのページにお問い合わせボタンを設置しました。
また、人の目線は文字を読むのと同じような動きをするので、ページ全体をアルファベットのZ字を描くように見ます。
そのため、必ず見てもらいたい情報は、はじめに視線が向く左上に持ってくるのが効果的です。

  • リンクは色を変えたり矢印を添える

全体の設計ができたら、次はページ内の文字やパーツのデザインをします。
例えば、いろいろなページを見てもらうために、リンクになっている文字は色を変えたり、矢印を添えたりすることでユーザーに「クリックできる」と思わせることが大切です。
利用者の気持ちや、どのように見られるかなどを想定して、使いやすい表現を心がけましょう!


  • 田邊則彦先生
  • プッシュ通知

今回は田邊先生に教わります。

最近、ニュースを見るにも、買い物をするにもアプリを使っていてWebページを見ていないような気がするという古関さん。確かにグルメサイトや乗換情報もアプリになっています。

実はそういったアプリもWebページと同じようにWWWを利用しています。
最近はスマホユーザーが増えていて、Webサイトだけでは新しいユーザーの獲得が難しいため、アプリ化をして上手にユーザーを獲得しようという狙いから、アプリ化が進んでいます。

アプリでは、見る側からアクセスしなくても、伝える側からプッシュ通知などでアクセスを促すことが可能です。
情報発信するにはパソコンで見てもらうだけでなく、スマホのアプリ化も意識しないといけませんね。

アプリを作る
  • IT教育の場を提供している会社

スマートフォンのアプリを自分でも作ることができるというので、学生向けにIT教育の場を提供している会社を訪れました。
ここでは、学生たちがWebページやアニメーションの作成、プログラミングなどのディジタル技術を学んでいます。

  • ボタンを押すとイラストが出てくる
  • ランダムで出てくるイラスト

アプリ作りは今日で2回目という学生のアプリ。
このアプリは下のボタンを押すとランダムで数種類のイラストが出てくるようになっています。
絵を描くことが好きで、アプリと絵を同時に作品にしてみたかったそうです。

  • アプリ開発経験1年の学生さん
  • 画像加工アプリ

次は画像加工アプリに挑戦している学生さん。
このアプリでは人の顔を認識して顔以外の部分にぼかしをかけることができます。
今あるアプリに物足りなさを感じたので、自分で作ってしまおうと考えたそうです。

  • オクタゴンのゲーム画面
  • オクタゴン開発者の山本さん

これは、高校生が作ったゲームアプリ。こちらのアプリは公開されていて、レビューもついています。
「なるべくシンプルに無心で楽しめるものがいいなと思って作りました」
「作り手の視点から見るとすごくシンプルなものでもすごく考えて作られていることを知るきっかけになりました」と開発者の山本さんは言います。

  • オクタゴン開発者の山本さん
  • SNSボタン

山本さんが作ったゲームアプリは、終わると成績とともに2つのボタンが出てきます。
下のボタンはゲームをやり直すボタン、上のボタンはゲームの成績をSNSで発信するボタン。
Webと連動させることで、他のユーザーとコミュニケーションできる仕組みもついているのです。

それでは次回もお楽しみに!

科目トップへ

制作・著作/NHK (Japan Broadcasting Corp.) このページに掲載の文章・写真および
動画の無断転載を禁じます。このページは受信料で制作しています。
NHKにおける個人情報保護について | NHK著作権保護 | NHKインターネットサービス利用規約