| ◆Webサイトの設計図を作ろう |
Webページ作成の作業に入る前に、Webサイトのテーマ、コンテンツを考えます。学校の公式ホームページや自分の担当する教科や部活動のページなどを例に、情報発信したいものを考え、整理していきます。
（１） 参考になるサイトを探そう
まずは、これから作成しようとしているWebページの手本になるWebサイトを探します。内容的、デザイン的に参考になるサイトなど色々な観点でサイトを見つけだし、「お気に入り」に登録します。その「お気に入り」は後にリンク集を作るときにも役立ちます。
（２） テーマ・コンテンツを考える
次に、Webサイトのテーマを決めて、コンテンツ（Webサイトの情報の中身）を考えます。考えられるだけ書き上げてみます。
例）学校のWebページの場合
学校名、住所、電話番号、FAX番号、アクセスマップ、校内案内図、
教育方針、沿革、教育課程、校章、校歌、制服、校長挨拶、予算・決算
行事予定・報告、部活動紹介・報告、時間割表、進路状況、出身校、
年間指導計画、シラバス、ＰＴＡ活動、同窓会活動、生徒・児童の作品
外国語ページ、リンク集、問い合わせ先、更新日、更新履歴 |
例）教科のWebページの場合
年間指導計画、シラバス、学習指導案、
教材（静止画、動画、アニメーション、素材）、見本作品、
説明用プレゼンテーション、リンク集 |
（３）テーマカラーを選ぶ
テーマが決まったら、そのテーマに合った配色を考えます。ページごとに思いつきで色を使ってしまわないように、サイト全体で使う色を決めます。
○ ベースカラー〜全体のイメージを決定するテーマカラー（背景色）を１色
○ サブカラー 〜文字の色（文字色、リンク文字色、既読リンク色）を３色程度
○ アクセントカラー〜強調したいところに使う色を１色
テーマカラーが決まったら、ＨＴＭＬで使われる色のコードを記録しておきます。
例：白#ffffff、赤#ff0000、青#0000ff、緑#00ff00、黒#000000
この際、ブラウザに依存しない216色のWebセーフカラーの中から選ぶようにします。
| テーマカラー |
# |
| サブカラー |
# |
# |
# |
| アクセントカラー |
# |
（４）設計図を考える
計画的にWebページを作成するために、コンテンツやリンク構造、必要な素材を考えておきます。
○設計図の例〜TOPページ、シラバス、学習指導案、教材、リンク集
○素材の例
その他、シンボルマーク、リンクボタン、イラスト、写真など
○ページレイアウトの例
|
|
