情報技術基礎 III: Web サイトの設計/製作(現代の情報技術 10)
久野 靖 (電気通信大学)

2020.5.12

今回の内容は「総合実習」であり、グループで分担して Web サイトを設計・製作し、その結果をレポートにして頂きます。今回の目標は次の通りです。

• Web サイトの設計の流れや行うべき作業を理解する — 今後研究や仕事でサイトを作成する際に有用な知識です。
• 共同での設計作業と分担しての製作作業を経験する — 課題限りでのグループ作業や分担作業を経験して頂くことは今後の研究等での同様の活動の下地となります。
• 共同部分と分担部分を明確に区分して報告を作成する — 研究等でも同様の活動でも必要となるスキルです。

1

Web サイトの設計と制作

1.1

Web サイトの設計/制作とはHTML と CSS の基本的な機能についてひととおり学びましたが、ではそれで Web サイトが作れるようになったと感じられるでしょうか? 多くの人は NO と答えると思います。何が足りないのでしょう?
たとえば、授業に関して告知をするとか、読み手がどうしても見ないと困るような情報を提供するのなら、とにかく HTML を書いてそこに必要な情報が含まれていさえすれば、最低限の用事は足りるかも知れません。しかしそのようなサイトでは、見た目も楽しくなく、企業等が「顧客に向けて」情報発信するという目的には不十分です。
たとえば、商品告知のパンフレットを作るとしたら、(1) 企画立案、(2) デザインやスタイルの決定、(3) 内容の制作、 (4) 印刷・配布、のようなワークフローがあるはずです。たとえば、いきなりワープロソフトで必要な情報だけとにかく打ち込んでプリントし、そのまま印刷所に回すことなど考えられませんね?
それと同様に、「真面目な目的で」Web サイトを制作するのであれば、次のようなワークフローを持つのが普通です。
1. コンセプト (企画立案) — サイトの目的、ターゲット読者、その他の前提を明確に設定。
2. デザイン/仕様策定/スタイルガイド作成 — サイトの構成、ページのデザインの枠組み、コンテンツの中で守るべき約束などを決定し、これらをまとめて文書化する。
3. 設計/制作 — 実際に作成するページを決めて内容を用意し制作。
4. 公開/運用 — ページを公開し、フィードバックや情報の変化に応じて手直しして行く。
今回はこれらについて、ひととおり簡単に見て行くことにします。

1

1.2

コンセプト (企画立案)

何の制作でも同じですが、Web サイト制作に当たり、次のことがらを明確にする必要があります。これが企画立案 (conceptual planning) です。

• 制作 (情報伝達) 目的 — 何を目的として/どんな情報を伝達するために、サイトを作るのか。
• ターゲット — 情報伝達の対象となる相手はどのような層か。
自分で自分のために制作するなら、これらは自分で考えて決めればよいのですが、注文を受けて制作する場合は顧客 (注文者) と十分話し合い、何が求められているのかを明確にしておく必要があります (さもないと制作が終わってから「何か違う」という話に…)。ターゲット (対象読者) について
は、つい「なるべく多くの人」と考えてしまいますが、ターゲットが絞れていないとサイトの方向づけも万人向けとなってしまい、焦点が定まらずに最も必要な層にアピールし損ないます。ターゲットの分類基準としてはたとえば次のようなものがあります。

• 性別、年齢層 (子供、生徒、学生、社会人、シニア、…)• 働いている/家庭にいる、都会/地方などのカテゴリ• コンピュータ環境 (PC、スマホ、タブレット…)
コンピュータ環境のなかでも、画面サイズはデザイン上大きな制約となります。ユーザは画面一杯にブラウザを開くわけではないので、たとえ幅が 2048 ピクセルの画面が普通だったとしても、デザイン幅は 1200 ピクセル程度にした方がよいでしょう。普通の PC であればこれより狭い画面は少ないでしょうけれど、タブレットやスマホでも見てもらうには、より小さい画面サイズを前提とします。
一方で、小さいサイズで大丈夫なように設計したとしても、大きいディスプレイを使用しているユーザにとって間延びして見えるのもよくありません。このあたりは印刷デザインなどと異る Webデザイン固有の悩みと言えるでしょう。

1.3

デザイン・スタイルガイド

コンセプトが明確になったら、コンセプトに合ったデザインを考えます。顧客がいる場合は、いくつか案を用意してプレゼンテーションを行い、顧客が OK を出したものを選ぶことになるでしょう。デザインについてはここでは詳しくは述べませんが、たとえば次のような要素があります。

• ロゴデザイン — 顧客の紋章やロゴマークに既定のものがあればどう活かすか、活かすとしてもどうアレンジするか、タイトルや本文などに使うフォント (フォントごとに印象が決まってくる) の選定なども課題です。
• 色彩計画 — 顧客のテーマカラーなどがあれば参考にして、どのような配色 (カラースキーム)を使うかを決めます。ターゲットやコンセプトに応じて決まる部分もあります (活動的→目立つ色やコントラスト、癒し→アースカラー、パステルカラー等)。
• ページに盛り込む情報量や見せ方 — たとえば子供に見せるページなら、文字は少なく、絵や図を多くして、なおかつ 1 ページ当たりの情報量が多すぎないような配慮が必要です。
これらをデザインしている段階では、実際に HTML で制作するよりも、見え方をチェックすることが目的なので、お絵描きソフトでページの見た目を作ってみてチェックすることが普通のようです。
ページデザインについては既に取り上げていますが、 CSS で (そして自分の技能で) 記述できるようなデザインを選ぶことも実務上は大切です。
サイトの構成 (情報アーキテクチャ) についても既に学んで来ましたが、実際にサイトを作るにあたっては、具体的なページ内容を (箇条書程度のものでもよいので) 描いたメモ紙を机上に並べてみて、構造を決めるなどの方法がおすすめです。
全体の構造に加えて、個々のページのデザインもこの段階で決めて行きます。小規模なサイトではページデザインも 1 種類だけ (または入口ページだけ別デザインで 2 種類) にするかも知れませんが、2大規模になってくると複数のデザインを用意するかもしれません。ただし、デザインが複数になっても全体として「1 つのサイトである」というまとまり感が損なわれないように、レイアウトや色づかいに共通性を持たせることが必要です。
ナビゲーションリンクについても既に学んでいますが、具体的なサイト構成を決めるときに、どのようにナビゲーションするかも検討しているはずですから、それに合わせて各ページにどのようなナビゲーショリンクを入れるかを決め、ページデザインに含める必要があります。
これら見た目のデザインに加えて、中身に入る文章や図などにも指針 (ガイドライン) が必要です。
たとえば「だ・である」「です・ます」のどちにするか、「お客様」か「あなた」か、その他複数の言い方がある用語は何に統一するか (用語集を作って基準を示す)、図や写真のサイズや注意すべき内容(個人の顔が判別できる場合など)、各ページに入れるコピーライトや個人情報保護の注記の書き方、などがこれに相当します。
このように、1 つのサイトを作るだけでも非常に沢山「決めるべきこと」があるわけですが、それらをまとめて 1 つの文書 (スタイルガイド) とします。実際の制作に入ったら多くの人が協力/分担して作業するわけですが、スタイルガイドをきちんと決めておくことで、各ページごとにバラバラにならず、統一した方針のサイト作成が可能になるわけです。

1.4

設計・製作

大枠が決まったら、いよいよ個別のページについて検討します。このときも、いきなりコンピュータに向かって製作するのではなく、次のような段階を踏みます。

(1) ページ構成・ページ内容の設計 — 実際に作成するページとそれらのつながりを決める。
(2) 素材の収集と作成 — ページに入れる文章を準備したり、画像 (写真・図) などを用意する。
(3) 製作 — 設計に合わせて内容を組み込み、ページを作る。
(4) チェック・レビュー — 完成したページをチェックする。
まず (1) については、製作する 1 ページごとにメモ紙を用意し、そこにページタイトル・内容や使用する素材などを書き込んで並べます (既に前の段階でやっているのならそれを流用できます)。これによって、個別のページの取捨選択ができ、ページのつながりが確認できます。どこへのリンクを貼るかもメモ紙に書き込んでおきます。
次に (2) として、実際に文章を打ち込んだり画像を用意します。他人の文章を流用するわけにはいかないので、自分で構成を考えて作文する必要があります。内容によっては、この段階でインタビューや取材を行うことになります。画像については、写真は撮影し、図は描いて、サイズやファイル形式を調整します)。
これらの準備ができてからようやく (3) に進み、ページを製作します。ページの大枠はデザイン段階で決まっているはずなので、それに従って文章や画像を入れていけばよいはずです。また設計時に決めたリンクも忘れずに含めるようにします。
単に製作するだけでなく、製作した内容が正しいかどうかチェックすることも必要です。その際には、漫然と見るだけでなく、次のような項目を含めたチェックリストを用意して、項目ごとに OK かどうか見て行くのが普通です。

• 各ページに内容に対応したタイトルがついているか。
• 各ページの内容は設計時に予定したものになっているか。
• 各ページに含まれる画像には説明文や alt 属性がついているか。
• 各ページに含まれるリンクは正しくたどれるか。
自分で作ったページを自分で見ると甘くなるので、他人にレビューしてもらう方が問題を見つけやすくなります。

3

1.5

公開・運用・保守チェックが終わって OK になったら、サイトを実際に公開します。サイトの公開は通常、サイトを構成する各ファイルをまとめて Web サーバに転送し、そのサイト用に用意したディレクトリに置くことで行います。設置したら、各ページが計画通りに見られ、リンクも正しく働くことを再度チェックします。
サイトの運用 (operation) については、動的処理を行うページであればユーザからのデータがきちんと処理できていることを確認するわけですが、今回のように単に HTML と画像を公開するだけ (静的なページだけ) であれば、サーバが止まって見えなくなっていないかを監視する程度でしょう。
ただし、いつまでも公開した時のままだと誰も見てくれなくなりますから、定期的に新しい内容を追加したり古い内容を更新するなどの作業が必要となります。また、外部のページに対するリンクの場合、その外部ページが移動したりなくなったりしたときには、相応に対処しないと「たどれないリンク」になってしまいます。このような、ページ公開後のメンテナンス (保守) 作業も、使いやすいサイトを維持する上では重要です。

本日の課題 10A
今回の課題のために、3〜5 人のグループを構成してグループ単位で 1 つずつ Web サイトを作っていただきます。欠席などで乗り遅れた人は、どこかのグループに加えてもらって、「分担」を分けてもらってください。やるべきことを記します。

(1) グループ内で相談して、コンセプト (企画立案)・デザイン・設計までの作業をやってください。
(2) テーマは任意ですが、テーマに関心を持てないと苦痛ですから、全員がそれならやりたいと思うものにしてください。参考までに皆様がシンパシーを持てそうなテーマの例を挙げます。
• 学内または学校周辺の「ちょっと変わったところ」を紹介する。
• おすすめな飲食店の紹介 (カテゴリは広くとっても絞ってもよい)。
• スポーツ、工芸、音楽、エンタメ、食材、料理、旅行など。
(3) デザインはこれまでに CSS でやってきて「できそう」なものを念頭に配色も含めて皆で提案し、1 つ選んでください。選んだ設計は写真をとっておいてください (またはコンピュータ上の画像ならあとで皆で共有)。選ばれた人はデザイン担当として CSS を作りますから、担当ページ数は減らしてもいいです。なお、入口ページが必要ですが、入口ページのデザインは他と変えても (たとえば CSS なしの真っ白でも) 同じでもいいです。入口以外のページは全部同じデザイン(CSS) を用いてください。入口ページにはグループ全員の氏名と学籍番号を記載してください(入れ方はちゃんと読み取れる限り自由)。
(4) 設計は入口ページと個別ページを含めて 1 人あたり 2〜3 ページ担当してください (増やしたければご自由に)。製作する 1 ページことにメモ紙に内容をおおまかにメモして並べて構成を決めてください。今回は小規模なのでサイト構成と設計を一緒にやって構いません。各メモごとにHTML ファイル名と担当者名を書き込んでおくこと。メモを机に配置したところを写真にとっておいてください。
(5) 製作から先は個別作業となります。デザイン担当は CSS 記述部分 (<style>〜</style>) を全員に送付してください。誰か 1 人が収集担当となり、皆で製作した HTML や画像をその人が受け取り、その人の public html 以下 (サブディレクトリを作ることを勧めます) に設置してください。
(6) サイトが完成したらレポートを作成してください (下記参照)。なお、諸般の事情によりサイトが完成しなかったとしても最初の話し合いさえしてあれば個人のレポートは出せるように配慮しました。

4レポートは以下の内容がこの順に含まれるようにしてください。

• 表紙。題名「現代の情報技術 10A」、学籍番号と氏名、提出日付を書く。
• グループで決めたテーマ、およびグループ全員の名前と学籍番号を書く。完成したサイトの URLを書く。
• グループ作業 (コンセプト、デザイン、設計) の内容を報告する。画像や表など共同作業の成果は同じものを使ってよいですが、説明する文章はそれぞれで書くこと。
• 自分が担当したページの報告を書く。各ページともブラウザで表示しているようすを図として取り込むこと。どのように考え、どのように製作し、どういう工夫をしたかなどを書くこと。
• 考察 (課題をやった結果自分が新たに分かったことや考えたこと) を書く。
• 参考文献セクション (あれば)。
• 以下のアンケートに対する回答。
Q1. Web サイトをグループで協力して製作してみて、どのようなことが分かりましたか。
Q2. 今回のようなレポートは何がよかったですか。何が大変でしたか。
Q3. リフレクション (今回の課題で分かったこと) ・感想・要望をどうぞ。
今回はグループ作業が前提ですが、レポートは各自で作成してください。レポート文面が同一 (コピー)と認められた場合は同一であると認めた全員について点数にペナルティを科すことがあります。

2

補足説明• 3 回目の課題は「グループ (必要ならメンバー変更は可) でサイトを作りそれをレポートにする」です。準備されてきたことを活用してください。
• グループ内での相談や連絡は合って会合ということではなく、オンラインのツールやミーティングのシステムを使うことを想定していますので留意してください。ファイルの共有なども相談して使えるものでやってください。
• Web サイトについての要件は「1 ページ以上、ブラウザで表示できる」だけです。CSS とか、複数ページとか、画像、レイアウト等やりましたが、それらを使うかどうかは自由です。
• 皆様にお願いする要件は「グループで、分担する」だけです。分担するという意味は、「何もしない人がいない」です。分担する内容は「コンテンツの準備 (調査、作文等)」とか「作業の記録を取る」とかなんでもいいので、情報技術が不得意な人もそれなりに担当してください。
• 社会に出たら「皆が同じ作業をする」ことはなく、チームで作業するならその中でそれぞれが違うことを担当します (当り前)。ですから、自分の得意を活かせる (不得意を避けられる) 担当を相談して決めてください。
• レポートについては、今回も各自それぞれで書いてください。サイトを作るのでサイトの画像とかは一緒になると思われますが、説明等はそれぞれ独自でお願いします。分量とかはお任せします。内容は先に指定していますが、「できる範囲で」従っていただければよいです。
• 期限は大学の掲示に従うものとします。

5