2008 Information Literacy Seminar.

# 7月8日｜Web制作2：コンテンツ基礎

Webサイトを管理するための基礎に続いて、今週は情報の中身（コンテンツ）を扱う際の基礎について学びます。サイトの訪問者にとっては、細かなテクニックよりも「このサイトはどんな情報があるのか」の中身が、最も大事なことです。

## 1｜Web制作のルールとマナー

### 肖像権、著作権への配慮

自分の Webページを飾るため、あるいは自分の趣味や好みを知ってもらうために、アニメやゲームのキャラクタを拝借したい、有名なスポーツ選手や芸能人の写真を使いたい、という人は少なくない。

しかし、他人の写真やキャラクタ、文章、アニメ、イラストなどは肖像権や著作権で守られており、断りもなく使うのは厳禁で、時には訴訟になることもある。著作権は作成したときに自動的に発生するものであるから、たとえ子供の描いた絵であっても無断で使うことはできない。また、会社のロゴマークなどは「商標登録」されており、たとえあなた方の Webページが商業目的でなくても勝手に使うことは問題になる。

他人が権利を持つアニメ、イラスト、商標マークなどを複写でなく、自分で描いたとしても既存のものと似ているとして著作権あるいは商標権のトラブルになることもある。（同人雑誌や公開コンペなどに出展していて、自分のオリジナルであることを証明できれば抗議に対抗できるだろう）

【参考】　Web版新聞の記事の見出しを無断で使用することは著作権侵害に当たるかということについて、2004年3月24日、東京地裁では「ニュース記事の見出しを無許諾で利用するのは著作権侵害にあたらない」と判決したが、原告側は控訴。2006年10月6日、知的財産高等裁判所は、読売新聞の訴えを一部認め、損害賠償を命じる。

Webサイトと著作権については、以下のサイトを参考にして研究しよう。

社団法人著作権情報センター：　http://www.cric.or.jp/index.html
同センター、著作権Ｑ＆Ａ　：　http://www.cric.or.jp/qa/qa.html
同、マルチメディアと著作権：　http://www.cric.or.jp/qa/multimedia/multi.html
社団法人コンピュータソフトウェア協会　：　http://www.accsjp.or.jp/　（同所の著作権プライバシー相談室、Ｑ＆Ａ）
社団法人音楽著作権協会、（肖像権）　　：　http://www.jame.or.jp/syozoken/
コピーライト道場　：　http://www.kidscric.com/dojyo/dojyo.html（子供向け。大学生なら『中級』以上は一発クリアできるように）

### 記事とプライバシー

ブログなどに知人や友人のことが書かれている記事を見かけることがあるが、少数の友人間の「交換ノート」などと違って誰でもが読む可能性があり、思いもよらない迷惑をかけることがある。数年前、ある学生が「浪人時代にお世話になってうれしかった思い出」を感謝の気持ちで書いたが、名前は出さなくても関係者にはわかり、その方が困惑しているという事情を知った第三者を通して、ページ削除の要請が情報科学センターに届いたことがある。

こうしたプライバシーに係わる内容は、他人に関することとともに自分についても注意しておくこと。匿名でつくっているサイトであっても固有名詞などの脇が甘ければ、本人を割り出せることもある。またウェブの世界では、記事は取り消したり削除しても広がるリスクがあることも理解しておこう。

### LINKについて

ハイパーリンクはＷＷＷの最も重要な機能の１つである。ところが、このリンクをはることに関して、「リンクする側」と「される側」の心情の差からしばしば議論になることがある。例えば「断りもなくリンクを張るのは著作権侵害だ」と主張するサイトが時々あるが、これは結論としてインターネットの本質を理解していない意見と言って良い。これが著作権侵害の問題ではないことはしばしば説明される。

社団法人著作権情報センター「無断でリンクを張ることは著作権侵害となるでしょうか」
IT用語辞典「無断リンク」

したがって、リンクに関しての許諾は著作権という観点からは不要である。「丁寧であることに越したことはない」と思って問い合わせすると、評論家の山形氏のような反応をする人もいるから気をつけるように。ただ、現実に「無断リンクお断り」のサイトも多くあるので、そういう場合にどうしても気になるなら一応の断りをいれておけばよいであろう。未だWebの文化は浸透していないため、初心者と熟練者の間で180度異なる主張が混在しており、当分の間収束しないと思われる。

参考：「ウェブの二つの文化圏の衝突（前編）、（後編）」

### 補足：”Home Page”について

これまで、一般に使われる「ホームページ」と言う用語の代わりに「Webサイト」「Webページ」という用語を使ってきたが、これについて参考となる定義を紹介しておきたい。

出典は　Janet E. Alexander, Marsha Ann Tate, "WEB WISDOM", Lawrence
Erlbaum Associates, Inc., Publishers(1999),p.5-6

●Home page: The page at a Web site
that serves as the starting point from which other pages at the site can be
accessed. A home page serves a function similar
to the contents of a book. A home page is to be distinguished from the welcome
page found at some sites that serves as a gateway to the site but does not
function as the tabele of contents. Note that sometimes, although not in this
book, the term home page is used to refer to an entire Web site.

●Web page : An HTML file that has a
unique URL address on the World Wide Web.

●Web site : A collection of related Web pages interconnected by hypertext links.
Each Web site usually has a home page that provides a table of contents to
the rest of the pages at the site.

→IT用語辞典「ホームページ」

▲TOPへ

## 2｜Webサイト制作に当たって

### ワークフローの必要性

一人で趣味で作っている時には、自己流でも問題がないが、人に頼まれたものになると話は別である。 制作を数名で分担する場合や、また作った後の運営・更新を他人がおこなう場合など、通常は、Webサイトには複数名が関わるものである。作業上、きちんと受け渡しするためにルールを作る習慣を付けなければ、あとで誰かが必ず混乱する。ワークフローとは作業の流れのことで、大きく分けて「企画」→「設計」→「制作」→「運用」の4つのフェーズがある。

企画｜クライアント（依頼主）の要望を聞き、どのようなサイトで、どのような内容を載せるかを決定する段階
設計｜企画で決められた内容に応じて、具体的な制作方法や関わるスタッフを決め、機能の定義などを行う段階
制作｜設計で決められたルールを元に、デザイン、画像制作、プログラミング、コーディング、動作確認などの実制作を行う段階。
運用｜サイトのOPEN後に、新鮮な情報を保てるように、コンテンツの更新や修正などの継続的な作業の段階

今回のサイト制作は技術習得が主目的であり、自分がクライアントなのでワークフローは重要ではないが、この演習で習得したことは、この流れの中のどの部分のスキルに位置づけられるかは理解しておこう。

### サイトの構造の基本

Webサイトはページの集まりであり、ユーザは、ハイパーリンクをクリックしながらつぎつぎに画面を「遷移」していく。この画面の遷移をユーザにスムーズに行わせることが、Webデザインにおいて最も重要なことである。具体的に言えば、今自分がそのサイトのどのへんにいるのか、どこになにがあるのか、次にはどうすればよいのか、入り口や出口はどこなのか、をきちんと「はじめてきた人にもにわかるように」表記しておく必要がある。そのためには、情報を体系化し、特定のルールに沿って整理しなければならない。この体系化のためのルールの骨組みが「構造」である。Webデザインとは、画面の飾りつけではないことに注意。

### サイトマップとメニュー

Webサイトの全体を把握するために、設計段階においては、必ず全ページのタイトルとその階層構造を表したサイトマップを作る。建築における図面のように重要なものと考えればよい。

サイトマップ作りは、まず情報をあつめ、整理分類（グルーピング）することから始める。まとまりができたら、それが大見出しになり、大見出しが集まればページになり、ページが集まればひとつのカテゴリになる。逆に大見出しを分割していくことで小見出しができ、小見出しからパラグラフやリストができる。適切に設計された情報は、このように折りたためる構造を持っている。ユーザーがクリックする「メニュー」はサイトの構造と対応するものである。

今回、課題で制作するサイトは小規模サイトなので、なるべく入り口から2階層以内で済ませる。

以下、いくつかの基本的な留意点を記す。

「ここは何のサイトなのか」を、トップページに簡潔に書く（→タグライン）。
背景や幅、メニュー位置などは一貫性を持たせ、なるべく統一する。
検索や他サイトからの直リンク等、ユーザーが入り口以外のところから入った場合でも上の階層に移動できるようにする。
「戻る」ボタンはなるべく使わず、一回のクリックでカテゴリを移動できるようにする。
フレームの利用は、必然性がない限り推奨しない。

▲TOPへ

## 3｜掲載するコンテンツ

### コンテンツ（情報の中身）について

今回制作するWebサイトは、日程が限られてるため、2段階制作とする。

ver.1｜演習課題を掲載した初期バージョン（目次＋各作品ページ。7月28日21:00〆切）
ver.2｜自分なりのコンテンツを加えてデザインも作り込んだ本制作バーション（夏休みの宿題，次週指示する）

ver.1は、ページのデザインはほぼ自由とするので、各自の好みにそって練習してよい。これまでの演習で、以下の課題（画像、ムービー、HTMLなど）を保存するように指示してある。これをWebから閲覧できるようにする。各課題は、別々のページを作って紹介することとし、それぞれ課題文（簡単でよい）と100字程度で課題制作の感想を書くこと。なるべく見やすく整理するように努めること。

ver.2は、これに自由にコンテンツを付け加えたものとする。ただし、本日の「ルールとマナー」についての注意を忘れずに。住所、電話番号、アルバイト先などの個人情報は絶対に掲載しないこと。休み明けに、学生相互でページのデザインや内容を相互評価してもらう予定である。

写真等の画像は画像サイズなどを調整した「Web用に保存」したものを利用すること。
画像やFlashも自作であること。
正しいHTMLとCSSで記述するよう心がけること。

### 演習での課題（確認のため掲載）

第4-5回：Photoshopによる画像編集「plants animal」
第6回：Flashによる動的表現：アニメーション
第7回：Flashによる動的表現：ActionScriptを用いたインタラクティブな表現
第8回：HTMLのマークアップ
第9回：上記ページにCSSを加えたもの
第10回：上記ページをさらにCSSでページレイアウトしたもの
第11回：リンク集

以上。ver1には、7点を必ず掲載する。掲載してないものは成績評価しない。

▲TOPへ

## 4｜ペーパープロトタイプ

### ペーパープロトタイプとは

以下はver.2を作るときの参考。いきなりウェブサイトを作り始める前に、設計の段階を検討するために有益な方法を紹介する。「ペーパープロトタイピング」と呼ばれるもので、文字通り「紙」でラフスケッチを作るものである。これによって、何ページのHTML文書が必要なのか、画面の要素としてどのようなパーツやナビゲーションが必要なのか、クリックした先はどの画面に行くのか（ページの遷移）などなどが手元に見えるようになる。そして、どのようなサイトの構造をつくるかを手軽に検討できるようになる。

黒須教授のUser Engineering Lecture:ペーパープロトタイピング
ソシオメディア：プロトタイプ

### 参考例：学生が制作したプロトタイプ（過去の演習より）

プロトタイプ提供：中村さん（NE18）
写真のように、各ページのナビゲーションやサイトマップを一覧できることで、どのくらいの分量のウェブサイトなのかが一目瞭然になる。

### プロトタイプを用いたユーザテスト実演

プロトタイプができたら、自分で検討するだけでなく、友達に協力してもらうことでテストすることも出来る。
実演の参考例（画面下部のボタンクリックで進む）

▲TOPへ

## 5｜本日のまとめ

### 演習のまとめ

肖像権、著作権、プライバシーなど、Webで情報を公開する上で必須のルールを理解する。
Webサイトの構造、メニューの役割を理解する。

### ミニレポート

しばしば問題になる「無断リンク」について、あなたはどう考えるか、手短に述べなさい。

### 本日の課題

ver.1のウェブサイトを制作し、個人のディレクトリにアップしてください。〆切は7/28（月）　21：00とします。

上記に記されている条件を元に、掲載すべき情報を整理し、自分でサイトマップをつくる。
各ページのナビゲーションや背景などの共通ルールを作り、統一する。
見栄えのデザインは外部CSSファイルで行う。
成績の提出期限は31日までとなっているため、31日までにアップできない場合は、単位不可と成りかねないので気をつけよう。

▲TOPへ　□ HOME