超初心者のための Web作成特別講座

第3回 分担・協力して1つの作品を作ろう

1ページに当たるWebを作成する方法は、わかったことと思います。ではいよいよ協力して1つの作品を作ることにしましょう。

テーマを決める

画像説明

 テーマ決めはとても大切です。せっかく、4~5人で協力して作成するのですから、時間を十分にかけて、いいテーマを考えましょう。留意点は以下のような点です。

1.話題性があり、自分たちも興味があるし、他の人も詳しく知りたいと思われるテーマにする。
2.全体を4~5章(ページ)に分け、1章あたりを3~4節分を分けて説明したり、図解したりできるような、多様な視点で説明できる内容を選ぶ。
3.自分たちで、写真を撮ったり、図を書いて解説できる内容を選ぶようにする。


 内容としては、

 1)何かを紹介したもの
  ・珍しい資料をまとめて紹介したもの
  ・新しくできた施設とその詳細
  ・地域の観光、スポットの紹介

 2)実験や観察、調査の結果を報告したもの
  ・植物・動物の成長観察記録
  ・自分たちの仮説実験の記録と結果
  ・学生への意識調査・インタビュー調査

 3)何かのやり方やルールを説明したもの
  ・個人情報保護法の内容と説明
  ・機器やソフトの使い方と注意
  ・誰でもできる手品のやり方の解説

などが考えられます。

▼章の構成や表題を考える

 基本的に、ひとり1ページを担当することにします。担当ページとは別に、あとで表紙にあたるindex.htmlと、sitemap.html を作る必要がありますが、すべてのページが整ってからみんなで表紙を考えることにしても、この段階でそれを担当する人を決めておいてもいいと思います。それを担当する人は、2ページ分作ることになります。

 はじめにも説明したように、作品は本(1つの冊子)を作るようなものですので、章立てはよく考えて、そのテーマで知りたいことを質、量ともにバランスよく配置することが重要です

 テーマを、そのまま文字で表現しても、閲覧者には魅力的には見えません。内容を具体的に考える前に、内容を見たくなる表題や見出しを考えましょう。例えば、先の例では、

  何かを紹介したもの
  実験や観察の結果を報告したもの
   → 〇〇の不思議、〇〇の秘密、〇〇とは何か
     なぜ○○は起こるのか、〇〇の成長のすべて

  何かのやり方やルールを説明したもの
   → ○○入門、どうすれば○○は使えるのか

といった表現です。

 もちろん期待されるような内容を充実することが求められますので、表題負けしないように、章立てや節の見出しを考えるようにしてください。

 自分たちが知っていることだけでなく本を調べたり、Webで検索したりして、記事がまとまりそうかどうかも、この段階で調べておく必要があります

役割分担を決める

画像説明

 Webページは、みんなで内容を検討します。しかしページ作りは、ひとりひとりが別々に作業するようにします。具体的には、担当ページを決めたら、そのページが出来上がるまで、自分のPCでページを仕上げると、最後に全体を1つのWebページに仕上げることができるようにtempleteは、できています。

 ページの構成に必要な写真や図、文章は、ページ担当の人が責任をもって考え、作成します。1ページは通常、4~5節になるように節立てをするようにすると、まとまりのあるページが作れます。
 実際に作り始めてから、どこかのページが内容が多すぎたり、少なすぎたりするようなら、グループで相談して、ページの割り振りを決め直しましょう。例えば、紹介記事なら、歴史、利用法、効果、発展や用語説明などに分けると、全体としてまとまりのあるものになります。

 何度も書きますが、この構想段階が最も大事な作業で、作品の良し悪しが決まる重要なポイントになります。お互いのイメージが共有できるまで、話し合ってください。

 役割を決め、全体の構成内容が決定したら、企画書にまとめて、みんなで共有しておきましょう。

著作権のルールを守る

 次は、ページを作成しましょう。それぞれ担当の1ページを作成します。
 内容を充実させるため、知っていることを書くのだけでなく、専門書や辞書、資料などを調べて、記事をまとめるようにしましょう。

この時、著作権のルールを守る必要があります

 1)いろいろなものを参考に文章を書くことになりますが、他のWebページの内容をコピーして貼り付ける「copy&paste:コピペ」することは、禁止されています。内容を咀嚼(そしゃく)して、自分の文章に書きなおしましょう。参考にしたWebや図書は、参考文献として、最終ページにまとめて記述しますので、記録しておきます。

 2)もし、内容から見て、そのまま「コピペ」する必要があった場合は、引用として扱えば、可能です。その場合は、1)必要最小限とすること、2)引用部分を段下げや文字色を変えて、わかるようにすること、3)どこから引用したか、その下部に書き示すことなどのルールを守らなければなりません。参考や引用を明記せずに、「コピペ」して作品を公開した場合、剽窃(ひょうせつ)といって、無断でひとの著作権を侵害したことになります。

 3)Internetに著作権フリーで公開され、利用が承認されている写真やイラストなどは、利用してもらっていいのですが、その場合も利用の範囲の規定が記述されていますので、確認したうえで利用しましょう。

 4)図を自分で書いた場合でも、誰かのアイデアの絵を丸写しした場合は、著作権上問題になることがあります。参考にした資料は、必ず記録しておきましょう。

 5)写真を自分で撮影して解説に利用することは多いに奨励されます。ただ、被写体に個人を特定したりする情報が写っていないか、撮影禁止の内容が含まれていないかなど、確認しておきましょう。

▼ページを作成する

画像説明

 実際のページ作成の方法は、第1回、第2回を見直してください。
 節の記述部分は、以下のようでした。
 ----------------------------------------------------------------
 <div class="column"> <!--begin コラム-->
 <a id="【節番号】"></a><h3>【見出し】</h3>
 <div class="imgLeft">
 <img src="images/【写真ファイル名】" width="【サイズ】" alt="画像説明" />
 </div> <!--end コラム(写真左側)-->
 <p>
  【テキスト部分】
 </p>
 </div> <!--end コラム-->
 ----------------------------------------------------------------

▼節番号について
 【節番号】をページのはじめから、順に1,2,3,4となるように書き換えます。
 これは、ページ内下部のサブメニューの以下の記述と関係します。
 #番号 と【見出し】を、対応するように書き換えましょう。
 サブメニューが正しくリンクするはずです。

  <div class="submenue"><!-- begin サブメニュー-->
  <ul>
   <li><a href="#1">【見出し1】</a></li>
   <li><a href="#2">【見出し2】</a></li>
   <li><a href="#3">【見出し3】</a></li>
   </ul>
  </div> <!-- end サブメニュー-->

▼写真について
 【写真ファイル名】の部分をその写真のファイル名に変更します。ただし、ファイル名は他の章の写真と同じにならないよう確認してください。
 写真の表示サイズを変更するには、width=【サイズ】の値を変更します。
 写真を左右に移動する場合は、class="imgLeft"、class="imgRight" のどちらかとします。

▼文章について
 【テキスト部分】を入れ替える。<p> </p>を消去しないように!

 この時、テキスト中に以下のようなタグ(<>で挟んだ記号)を加えると、見やすさや読みやすさを向上させることができます。

 改行する  : <br> を挿入すると、その部分で改行します。
           一行空けるときは<br><br>を挿入します。
 太字にする : <b>太字にするく/b>で囲みます。
 下線をひく : <u>下線を引く/u>で囲みます。
 斜体にする : <i>斜体にする</i>で囲みます。
 文字の色を変える:<font color='色'>文字の色を変える</font>

重要な部分、注目してほしい部分などに使ってください。

▼ページをまとめる

画像説明

 それぞれのページが出来上がってきたら、1つにまとめることを説明しましょう。
 作品は、全体を見直して、何度も書き直すのが普通です。そこで、各ページの完成は、ひとりひとりのPC上で、出来上がった作品は1つのUSBにまとめる、という方法を取ります。
 まず、グループで1つ、空のUSBを用意し、トップに班の名前のフォルダ(例ではgroupA)を作ってください(日本語はダメです。必ず英数字で)。またフォルダの中には、imagesという(図や写真をいれる)ファルダを作っておいてください。

 それぞれのページが完成したら、このUSBに、pageX.html(Xは、1~4)と、そこで使った写真や図をimagesフォルダにコピーします。コピーができたら、USBの pageX.htmlをダブルクリックしてください。完成したページと同じようにページが表示されるはずです。

 写真が表示されない場合は、imagesフォルダへのコピーを失敗しています。USBの中に同じ名前で保存されているか確かめてください(時々、大文字に代わっていることがあります)。

 また、その時は見えていたのに、誰かがコピーしたあとで、自分の写真が表示されなくなったら、同じ名前で上書きされてしまった可能性があります。話し合って変更してください。


 USBでそれぞれのページが表示できるようになったら、8割は完成です。いよいよ、全体のリンクをし直して、1つのWebに仕上げます。詳細は次回にしましょう。