Webサイトを作る上では、絶対に守らなければいけないルールというものがあります。その代表的なものを以下に掲載します。仮にこれらの注意を守れていない場合は、完成作品をサーバにアップロードしても、正常に動作される保証は一切ありません。
尚、Web用の素材を自分で撮影する際は、【デジタル一眼レフカメラ】のページを参考にして下さい。

ファイル名は半角英数字のみ
Webサイトに使うコンテンツは、ページであっても画像であっても、必ず半角英数字しか使用してはいけません。【sample】というファイル名はOKですが、例え英語でつけても【ｓａｍｐｌｅ】は全角英数のためNGです。

画像の保存形式はJPEGかGIF
ホームページ上で使用する画像は、その性質上ファイル形式が限られています。PhotoShopで制作した画像をそのまま保存すると【psd】というファイル形式で保存されてしまいますが、これはホームページには利用出来ません。保存する際には【JPEG】か【GIF】で保存して下さい。
写真を使った画像はJPEGで、単純なイラスト等の画像はGIFで保存するという事を覚えておきましょう。

情報の受け取り手の事を意識する
ホームページは、不特定多数の方に自分の持っている情報を分かりやすく伝達するための手段です。発信された情報には、必ず受け取り手（受信者）がいて、その人に理解をしてもらえなければ全く意味がありません。
発信する情報には責任をもち、そしてどうすれば分かりやすく理解をしてもらえるかという事を第一に考えて下さい。受信者側の立場に立ってサイトを制作することは、情報発信者として最も大切な事です。

サイトのトップページはindex
これは無条件に覚えて下さい。自分が制作しているサイトの中で、一番最初に表示したいページのファイル名は、必ず【index】でなければいけません。

このページの一番上へ

ユーザビリティとは、使いやすさの事を表します。目的のページまで簡単にアクセス出来る事や、閲覧していてストレスや戸惑いを感じないサイトは、Webユーザビリティに優れているのです。

・どのページからでも一発でトップページへ戻れる
・利用者が、現在サイトのどこにいるのかが分かる様に配慮
・背景色と文字色のコントラストを大きく

上記の項目はあくまで一例ですが、これだけでも利用者のストレスは軽減されます。他にもユーザビリティを向上させる項目はたくさんありますが、個人で創意工夫して下さい。大切なのは、ユーザの立場に立ってサイトを構成する事です。

このページの一番上へ

基調色：■#9900FF　■#666666　□#FFFFFF

赤、青、緑等の原色や、蛍光色等の印象の強い色。組み合わせに失敗すると、目が疲れる色合いになってしまいます。

クリスマスカラー

基調色：■#990000　■#006600　□#FFFFFF

典型的なクリスマスカラー。文字やワンポイントに白を使うと、全体的に映えて見えます。

和風

基調色：■#CC3300　■#663399　■#000000

捉え方によりますが、この様なカラーリングでも和風の感じを出すことが出来ます。

可愛らしさ

基調色：■#BECCF4　■#FAE6D1　■#000000

淡色系の色を組み合わせる事によって、女の子らしいかわいさが表現出来ます。

のんびり

基調色：■#99CC66　■#FFFF99　■#CC9999　■#000000

緑や黄色を淡色でバランスよく配置すれば、草原にいる様なのんびりした雰囲気を出せます。

食欲増進

基調色：■#FF0000　■#FF9933　□#FFFFFF

赤や橙には食欲増進効果があります。牛丼屋等が看板に暖色系を利用しているのは、この効果を狙っての事です。

シック・アダルト

基調色：■#737373　■#000000　□#FFFFFF

黒をベースにすると、大人っぽい洗練されたイメージを作り出せます。また、夜の雰囲気としても使えます。

このページの一番上へ

第１講　ガイダンス
全14講義で行う講義内容と、実社会におけるホームページ制作スキルの重要性について理解をしてもらう。また時間を有効に使う為、履修希望者は自分が制作を行いたいサイトのテーマを、次回講義までに確定する事が課題となる。

第２講　テーマの確定と構成シートの作成
ホームページとは、相手に情報を伝達するための一つの手段である。この根本的な概念を忘れることなく、第三者にとって分かりやすいWebサイトの構築を目指す。その為、最初はコンピュータを使った作業ではなく、サイト全体の骨格や詳細部分を紙ベースでまとめていく。

第３講　Adobe PhotoShop講座
綺麗なサイトを構築するためには、綺麗な画像を使用することが、大変に重要な要素となる。世界中で最も利用されている画像処理ソフトのPhotoShopの利用法を学び、出来る限りハイクオリティな画像を制作する事が出来るようにする。本講義では、レイヤーの概念から各種ツール、フィルタ等、編集の際に多く使用される機能を中心に指導を行う。

第４講　Adobe GoLive講座
ホームページのオーサリングツールは多数の企業からリリースされているが、本学ではAdobe社のGoLiveを利用している。情報処理4、及び情報処理5の履修者は、このAdobe GoLiveを使用してWebサイトを制作してもらう。新規ページの制作、画像やテキストの入力、リンクの挿入方法などの基本的な操作を、本講義時間中に覚えて頂く。

第５講　ホームページ制作
第３回、第４回の講義で学んだスキルを活かして、既にまとめてある構成シートを見ながら、自分のWebサイト制作を開始。本時間中にWebサイト構築の大変さ、そして情報を一から創造することの難しさというものを、体験を通じて感じ取ることが重要になる。不慣れな場合、講義時間のみでは完成に漕ぎつくことが難しいため、独自の学習方法が必要である。

第６講　FTP
前回の講義時間中に制作したサイトを、未完成な状態で構わないので、一度Webサーバへアップロードを行い、その手法について学ぶ。サーバへデータをアップロードするFTPには、フリーソフトの「FFFTP」を用いている。目の前にあるローカルでは正常に動作しても、実際にWebサーバにアップを行ったら異常が認められる事も多々ある。それ故、次回講義からは必要に応じて自らFTPを行い、自分の目で確認を行ってもらう。

第７講　 ホームページ制作２
Webユーザビリティを意識して、自分のサイトを再考察する。ユーザが現在、サイトのどこにいるか理解出来る為のパンくずや、文字色と背景色のコントラストを大きくして見やすくする等の工夫を、自分のサイトにあわせて考えていく。

第８講　 ホームページ制作３
色が人間に与える効果というものは非常に大きい。様々な色をバランス良く組み合わせていくと、それだけでもユーザにとっては大きな情報源となる。つまり、色だけからサイトの概要を理解させる事が出来るのである。自分が制作しているサイトのイメージをよく考え、配色にも十分に気をつけなければいけない。

第９講　 ホームページ制作４
各自で制作。

第１０講　 ホームページ制作５
各自で制作。

第１１講　 ホームページ制作６
各自で制作。時間に余裕があったら、Faviconの設定も可能です。

第１２講　携帯サイト制作
PCサイトで制作した内容の「簡易版」を同じ要領で制作し、携帯サイトとする。QRコードの制作から始め、最終的に自身の携帯電話で閲覧確認までを行う。

第１３講　提出
半期間で制作した全てのページを最終アップロードする。FDやUSBメモリ等のデータで提出するのではなく、FTPされたものを提出物とし、より実践的な課題としている。

第１４講　評価
自分以外の学生が制作したページを閲覧し、それを詳細に評価していく。ポイントは、そのページで伝えるべき内容が、客観的に受け止める事が出来るかどうかという点。ホームページで最も大切な相手へ伝達するという基本的な事を評価する事で、自身のサイトを見直す機会としている。

このページの一番上へ