Transcript Webデザイン演習

Webデザイン演習
白 井
豊
第１章 Webページ製作の基礎知識
1.1 Webページとは
1.2 Webページの製作
1.3 Webサイトのテーマ
1.4 Webページの構成
1.5 演習の準備
1.1 Webページとは
1.1.1 インターネットとWebページ
1.1.2 HTMLとは
1.1.3 スタイルシートとは
1.1.4 Webブラウザ
1.1.1 インターネットとWebページ
インターネットとは （１）背景
TCP/IPベースのLANを接続し，全世界規模まで拡大したネットワーク
① インターネットの原点は，米国空軍の防空システムSAGE(Semi Automatic
Ground Environment)である。核攻撃等で一部が破壊されても機能が失わ
れない分散型システムとして構成するために，1969年，米国防省の国防高
等研究計画局DARPAが開設したARPANETである。
② 1979年，ノースカロライナ州の2大学で，ARPANETと同一方式で接続する
ネットワークを構築 。 1986年には，全米科学財団が研究目的のネットワー
クとしてNSFNETを構築した。
③ 日本でも，1984年，大学教官やソフトウェア企業の技術者たちが中心にな
り，UUCPベースで相互接続するJUNETを運用開始 。 1988年には，大学を
中心として専用線・IP接続による実験ネットワークWIDEプロジェクトが発足
している。電子メールとネットニュースが中心であった。
（２）インターネットの階層
［４層で構成］
① インターネットにおけるデータリンク層，物理層のデータ転送は，
イーサネット，トークンリング，FDDIやフレームリレー等で行われ，
物理層，データリンク層の独自のプロトコルを持たない。
② IP(Internet Protocol)はネットワーク層，
TCP(Transmission Control Protocol)はトランスポート層に属す。
両者をあわせてTCP/IPと呼ぶ。
プロトコル構成
［プロトコルを構成するソフトウェア］
TCP-IPという名称は，これらのソフトウェアの集合体を指す場合と，
TCP プロトコルと IP プロトコルだけを指す場合がある．
OSI参照モデル
インターネットのプロトコル構成
アプリケーション層
プレゼンテーション層
TELNET
FTP
SMTP
セッション層
トランスポート層
TCP
UDP
ネットワーク層
IP
イーサネット
X.25
データリンク層
物 理 層
物 理 層
PPP
･････
（3） WWW(Word Wide Web)
HTTPまたはHTTPSプロトコルで動作し，
Webページを格納するサーバをWWWサーバ，
Webページを閲覧する側のコンピュータをWWWクライアントと呼ぶ。
① WWWサーバへのアクセスでは，アクセス方法と接続先を指定する。
② アクセス方法の指定をURL(Uniform Resource Locator)と呼び，
プロトコルの名前(HTTPまたはHTTPS)で指定する。
③ 接続先は，WWWサーバのドメイン名，
コンピュータ内のディレクトリ名とファイル名で指定する。
ディレクトリ名とファイル名を省略すると，
WWWサーバのトップページを指定することになる。
1.1.2 HTMLとは
（1）HTML(Hypertext Markup Language)
電子的な文書交換を行うためSGMLを簡略化した文書記述言語。
HTMLでは，タグ（<と>で挟まれた予約語）を使い，
SGMLを簡略化して記述を容易にしている。
HTMLの仕様は，WWWコンソーシアムと呼ばれる標準化団体が作成している。
従って，HTMLで記述されたページは，WWWサーバ内のテキストとして
使われるのでWebページとも呼ばれる。
HTMLの他，
①
②
③
④
モバイルインターネット用のHDML(Handheld Device Markup Language)
WML(Wireless Markup Language)
MML(Mobile Markup Language)
CHTML(Compact HTML)
もHTMLの仲間である。
（2） XML(Extensive Markup Language)
XMLは，HTMLで失われたSGMLの拡張性を補強し，
電子商取引等でも利用できるようにしたもの。
ユーザ独自のタグを使って，データの属性情報や論理構造を独自に定義できる。
① データ構造を定義する記述方法をXMLスキーマと呼び，
要素と属性の概念により，プログラミング言語でのデータ型等を指定できる。
② XML文書を格納するためのデータベースをXMLデータベースと呼ぶ。
リレーショナルデータベースに比べ高速であり，
かつプログラミング言語からアクセスしやすい。
③ XML文書の構文を解釈して閲覧するためのソフトをXMLブラウザと呼ぶが，
このブラウザの機能を，従来のHTML用ブラウザの機能として
取り込んでいるブラウザもある。
④ XMLでは複数のXML文書の混在を許しており，
これを表現するための概念を「XML名前空間」と呼ぶ。
（3） HTTP(Hyper Transfer Protocol)
インターネットで，WWWサーバとWWWクライアントの間で，
HTMLテキストを送受信するためのプロトコル。
リクエストとレスポンスからなる単純なプロトコルである。
HTTP(Hyper Transfer Protocol)と
HTTPS(Hyper Transfer Protocol Security)がある。
（4） HTTPとHTTPSの動作
① WWWサーバへのアクセスでは，WWWクライアントから
WWWブラウザと呼ばれるソフトを起動し，
WWWサーバのHTTPデーモンと呼ばれるソフトに接続する。
② WWWブラウザで，URLと接続先を指定すると，
HTTPデーモンの論理的会話セッションHTTPセッションが開始される。
③ HTTPセッションが開始されると，
WWWサーバのWebページがダウンロードされ，
WWWブラウザで閲覧できるようになる。
④ HTTPとSSL(Secure Sockets Layer)の暗号化を組み合わせたプロトコルを，
HTTPSまたはHTTP over SSLと呼ぶ。
1.1.3 スタイルシートとは
（1）スタイルの分離
Ｗｅｂページの見栄えを良くしたり
ページレイアウトを細かくデザインするようになった。
複雑なデザインを表組み用のタグ等で指定したりなど
最初想定された使用法と異なる形で表現することが
多くなった。
1996 W3C(The World Wide Web Consortium)
スタイルシートのVersion1勧告
現在，1998年勧告のVersion 2.0
（2）文書構造とスタイルの分離
1997年HTML Version4勧告
HTML
： 文書の構造
スタイルシート ： デザイン（文字サイズ，カラー，レイアウト）
スタイル
シート
HTML
スタイル
シート
スタイル
シート
（3）最近の傾向
1998年 Version 2.0 （この頃から徐々に利用される）
ブログの普及
スタイルシートの利用が一般的に
（ほとんどのブログでスタイルシートが用いられている）
1.1.4 Webブラウザ
（1）ブラウザの種類
Ｗｅｂページを見るためのソフト
①画像とテキストを表示するブラウザ
②テキストのみを表示するブラウザ
③音声ブラウザ（音声合成によるテキスト読み上げ）
（2）インターネット普及時のブラウザ
Netscape Navigator(Netscape Communication社)
Internet Explore (Microsoft社)
サポートされるタグの相違
独自タグの増加
IETFによるHTMLの標準化
（現在，W3Cで標準化が行われている）
（3）現在
■画像とテキスト
Internet Explore
Firefox(Mozilla Foundation)
Safari(Mac OS X)
Opera(Opera社)
■テキストブラウザ
Lynx
■音声ブラウザ
IBM ホームページ・リーダ
■その他
PDA，携帯電話用，家庭用ゲーム機用
1.2 Webページ製作に必要なソフト
1.2.1 必要なソフト
1.2.2 テキストエディタ
1.2.3 グラフィックソフト
1.2.4 FTPソフト
1.2.1 必要なソフト
（１）最低限必要なソフト
①テキストエディタ
ワードパッドやメモ帳でも代用可能
②ＦＴＰソフト
Webサーバにアップロードするためのソフト
③ブラウザ
Webを閲覧するためのソフト
（２）あれば便利なソフト
①グラフィックソフト
素材を別に用意できればいらないが，効果的な画像に仕立て
上げるには必要。Photoshop, Paintshop, Illustratorが有名。
②動画作成ソフト
動画を自分で作るには便利。
Flash, Animation Shop等が有名。
③ホームページ作成ソフト
HTMLの仕様を知らなくても作成することができる。
IBMホームページビルダー，Dreamweaver(Adobe Systems
社)が有名。
④その他
素材作成用の色々なソフトが数限りなく提供されている。
1.2.2 テキストエディタ
■テキストファイルを作成・編集するソフト
Windows メモ帳
Simple Text(Mac OS X)
TeraPad
CotEditor
その他フリーソフトも豊富
1.2.3 グラフィックソフト
（１）ソフトの例
■写真やイラストなどの画像を扱うソフト
Windowsペイント
Paintshop
Photoshop
Illustrator
Fireworks
■動画用
Animationshop
Flash
（２）Webページで使用可能な画像形式
■通常，以下の３種類
① GIF(Graphic Interchange Format)
表示色 ： 256色
透過色 ： 可能
② JPEG(Joint Photographic Expert Group)
表示色 ： 1677万色
透過色 ： 不可能
③ PNG(Portable Network Graphic)
表示色 ： 1677万色
透過色 ： 可能
(PNGに対応していないソフトが多いので要注意)
1.2.4 FTPソフト
■ ファイルをサーバに転送するソフト
FTP:File Transfer Protocol
OS付属，HTML製作ソフトに付属，
ブラウザに付属，シェアウェアや
フリーソフトも数多い
1.3 Webサイトのテーマ
1.3.1 テーマと目的
1.3.2 自分自身が興味あるテーマ
1.3.3 頻繁に更新できるテーマ
1.3.4 競合サイトの分析
1.3.1 テーマと目的
① Webサイトを製作する目的
② どんな人に閲覧して欲しいか
③ 自分が表現したいことは何か
（サイトで取り扱いたい題材・テーマ）
1.3.2 自分自身が興味あるテーマ
自分自身が，今最も興味のあるテーマを選ぼう！！
自分自身が，今最も興味のあるテーマを選ぼう！！
① 最近知りたいと思っていること
② 少しは知っているが，もっと深く知りたいこと
③ 今，自分が表現できること
④ 自分が面白い・楽しいと思うこと
⑤ 他者と会話して盛り上がりそうなこと
⑥ 今，自分が話題にしたいこと
（以下は，必要条件ではないが）
⑦ 自分がそのテーマに詳しいこと
1.3.3 頻繁に更新できるテーマ
気楽に，無理なく，更新できるテーマを選ぼう！！
スタートして最初は頻繁に更新するが，
ネタ切れで更新回数が少なくなる傾向にある。
キーワード： 気楽に，無理なく
1.3.4 競合サイトの分析
似たテーマは世の中にどのくらいあるか？
① 検索してできる限り覗いてみよう。
② 似たテーマでもコンセプト，切り口，視点が異なる
こともある。
③ そっくり同じテーマがあったら，自分色を出す工
夫をしよう。
1.4 Webサイトの構成
1.4.1 内容を考える
1.4.2 構成図を作る
1.4.3 サイトのタイトルを考える
1.4.4 見栄えを考える
1.4.1 内容を考える
中身をできるだけ洗い出してみる…
① 自分が知っていること
② 自分が知りたいこと
③ Ｗｅｂの訪問者に教えたいこと
④ Ｗｅｂの訪問者から教えて欲しいこと
1.4.2 構成図を作る
中身を吟味して，整理する…
① 同じような内容はまとめる
② 今のところ無理なのことは削除する
（あくまで無理なく，気楽に書けること）
③ 構成図を作成する
構成図の例
欲張ってたくさんのコーナを考えない
環境問題Web
森林の働き
ごみの回収問題
環境にやさしい取り組み
リサイクルデータ
リンク集
管理人紹介・サイト概要
1.4.3 タイトルを考える
タイトルは重要であることに留意
① 内容が分かりやすいこと
② 独自性があること
③ Webを検索してタイトルが一致してないことを確
認しよう
こんなタイトルはやめよう
白井豊の作曲講座（自分の名前）
Creative Japan（全部英語）
非凡なる矛盾性（抽象的であいまい）
魅力ある表情を描く画家たちの素顔に迫ります！！
（長い！！）
1.4.4 見栄えを考える
見栄えも大事！！
① 見た目が内容とかけ離れないこと
② 作成するＷｅｂのコンセプトにあったものにする。
③ 文字が見にくいのはやめよう。
④ 見て欲しい訪問者が好まれそうなのが最適
【注意】
スプラッシュページ（情報がなくサイトの入り口だけ
のページ）は避けたほうが良い？