インターネットを通じて世界に向けて個人が情報発信が簡単にできる時代になりました。この演習では情報を発信するだけでなく、Ｗｅｂページ作成を通じて情報を相手に正確にわかりやすく伝えるためのデザインの方法を学びます。

自分の趣味や特技、旅の報告など様々なテーマでひとり一人が個人で管理運営するＷｅｂページを作成し情報発信します。Ｗｅｂページにおいて情報を正確にわかりやすく伝えるデザインの方法を身につける。

コンピュータ、カラープリンタ、ラフスケッチ用の紙、
ホームページ作成ソフト、グラフィックソフト、ＦＴＰソフト

Ｗｅｂページにおいてデザインが重要であることをいくつかの例をあげて紹介する。
キーワードの例：ナビゲーション、アクセシビリティ、ユニバーサルデザイン

（１）テーマを考える

個人個人で自由にテーマを決めてＷｅｂページを作成する方が、個人の自由でＷｅｂページをデザインすることができます。しかし、個人でテーマを選ぶ作業は時間がかかるので、ここであまり時間をかけたくない場合は、クラス全体でテーマを決めて作業を分担してすすめる方法もあります。

個人で自由なテーマ

個人で管理するＷｅｂページのテーマを決めます。なかなか決まらない場合は、自分自身を見つめて、いくつかのキーワードをアイデアスケッチに書いてみましょう（例：趣味、興味、所属、クラブ、委員会、地域、経験など）。その中にはＷｅｂページのテーマになるようなヒントがあるはずです。そのキーワードを組み合わせて、Ｗｅｂページにまとめるテーマにします（例：夏休みに行った自転車旅行、まちで見かけた変な看板、川崎市の高校サッカー）。

クラス全体でテーマ

クラス全体でテーマを決めて、個々に分担を決めてクラス全体でまとめる
例）学校の近所のお店紹介、自分の町や県の特産や観光の名所紹介、文化祭の催し紹介など

（２）サイトの名称を考える

テーマが決まったら次にサイトの名称を考えます。多くの人が集まるサイトには魅力的なタイトルがついているものです。短い文字列で興味を持たせるためのサイト名の付け方は、テレビなどの番組名などが参考になります。

（３）テーマカラーを選ぶ

テーマが決まったら、そのテーマにあった配色を考えます（教科書34〜37ページ参照）。ページ毎に思いつきで色々な色を使ってしまわないように、サイト全体で使う色を決めます。
１）　ベースカラー〜全体のイメージを決定するテーマカラー（背景色）を１色
２）　サブカラー　〜文字の色（文字色、リンク文字色、既読リンク色）を３色
３）　アクセントカラー〜強調したいところに使う色を１色

テーマカラーが決まったら、ＨＴＭＬで使われる色のコードを記録しておきます。
例：白#ffffff、赤#ff0000、青#0000ff、緑#00ff00、黒#000000
この際、ブラウザに依存しない240色のＷｅｂセーフカラーの中から選ぶようにします。

（４）ページ構成を考える

Ｗｅｂページの構成とリンク構造をアイデアスケッチに描きます。
TOPページ（ロゴタイプ、シンボルマーク）
ナビゲーション（アイコン、バナー、リンクボタン）
コンテンツ（自己紹介、リンク集、日記、作品集）

（５）素材を作成する

　アイデアスケッチをもとにして素材をグラフィックソフトで作成します。いままでの実習で作成してきたものを活用しても構いません。
例：壁紙、ロゴタイプ、シンボルマーク、リンクボタン、アイコン、アニメーション、地図など

（６）Ｗｅｂページをレイアウトする　

ホームページ作成ソフトを使って、素材を貼りつけ、文章を入力し、Ｗｅｂページをまとめます。
いくつかのページが完成したらハイパーリンクを貼りつけます。

（７）Ｗｅｂページを点検する

Ｗｅｂページが完成したら以下のような点を各自点検します。

フォルダを開いて
　・ファイル名に漢字、ひらがな、カタカナ、全角文字を使っていないことを確認 　
　・htm、gif、jpg以外の拡張子のファイルがないことを確認 　
　・サイズの大きいファイルがない（例：100MB以下など）ことを確認 　
　・使っていないファイルやフォルダがないことを確認 　

ブラウザで確認して
　・リンク切れがない 　
　・画像が表示されている 　
　・ページ更新日を掲載している 　
　・各ページに作者のペンネームを掲載している 　
　・文字のリンクやリンクボタンなど操作性（ナビゲーション）はわかりやすい
　・ページのタイトル（タイトルタグ）がある 　
　・画像には代替文字がある 　
　・原色を多様していない、読みにくい配色がない 　
　・機種依存文字（ローマ数字や丸数字など）を使っていない 　
　・デザイン 背景などのテーマが統一されている 　
　・大見出し、小見出し、本文などの文字のサイズのルールが統一されている
　・情報モラル 個人情報は掲載されていない（名前はペンネーム） 　
　・個人が特定できる画像を使っていない 　
　・著作権に問題のある画像を使っていない 　
　・他人や学校を誹謗中傷する内容がない 　

（８）ファイル転送　　　

完成したＷｅｂページはＦＴＰソフトで指定されたサーバにファイル転送します。

（９）相互評価　

　互いの作品を見て、評価シートに相互評価を書き込みます。クラス全員分の評価をする時間がない場合はグループ内で相互評価します。
評価の観点の例
・全体のテーマ（統一されたコンセプト）
・造形性（イラスト，レイアウト，配色、わかりやすいナビゲーション）
・アイデア（イラストやコンセプトのアイデア）
・情報モラル、アクセシビリティに対する理解と態度など

（10）更新（改善）　

相互評価シートをＷｅｂページ作者に渡し、相互評価シートを受け取った生徒はその評価をもとにしてＷｅｂページを更新（改善）します。更新作業が終わったら再度、サーバにファイル転送します。

Ｗｅｂページ作成における自己評価を新たなＷｅｂページにまとめ、各自のＴＯＰページからリンクを貼るようにします。

（１）実習に興味関心を持ち、積極的に実習を行おうとする。（関心・意欲・態度）
（２）自分のどんなところを相手に伝えたいか考え、デザインすることができる。（思考・判断）
（３）コンピュータを使って画像処理、Webページ作成ができる。（技能・表現）
（４）デザインの目的、情報モラルマナーを理解する。（知識・理解）