Web サイトをデザインする
Web サイトをデザインする
Web サイトを公開するということは、多くの人への情報を発信するということです。
その時に、わかりやすく、使いやすく見てもらえる Web サイトにするために、 「デザイン」 が必要です。
Web サイトをデザインするとは？
デザインをしていない Web サイトでは、強調したい部分がわかりにくかったり、訪問者がサイト内で迷子になったりしてしまいます。
意図したイメージで情報を伝えるには、文字要素だけではなく、イメージ画像を追加したりして、提供側のイメージが一目で伝わるようにします。
コンテンツのページへのリンクを目立たせるなどして、伝えるべき情報に訪問者を誘導する方法をとります。
Web デザインの対象は、中身 (contents)、ファイル(files)、タグ(tags)、画像(graphics)、などなどを含みます。
デザインされた Web サイトとは？
よく 「デザイン」 された Web サイトは、次のようなサイトといえるでしょう。
－ サイト全体の構成がわかりやすい
－ 目的の情報にすぐにたどり着ける
－ サイト提供者のイメージを伝えられる。
Web サイト デザインのフロー
１） Web サイトの目的をプランする
真っ先に行わなければならないことは、Web サイトの目的を定義することです。
Web サイトは何にフォーカスするのかを決めることが重要です。 Web サイト制作と視聴の基本を決めることになるからです。
例えば、Web サイトを通して製品を販売しようとするのか、あるいは既存の顧客のための情報センターとするのかなどです。
個人のサイトであっても、サイトで何をしたいかを明確にしなければなりません。
参照： ☜ Web サイト公開の目的
２） Web サイトの特性を決める
最初の重要段階の一つです。 Web サイトに付け加えることになる特性を決める必要があります。
例を挙げるとすれば、オンラインショッピングを推進しようとする場合にはショッピングカートを追加することになります。
団体の活動を紹介して、参加を募るのであれば問い合わせ窓口や申込書の用意をすることになるでしょう。
あるいは場所を示す地図を追加することもあるでしょう。
閲覧を限定しなければならない場合にはパスワード付のこともあります。それに対応した機能を提供してくれるプロバイダーでなければなりません。
サイトの詳細が明らかであればあるほど特性を決めやすくなるでしょう。
３） 文章、画像などの素材の収集
掲載する文章や図、写真などの素材を収集します。
画像は、あらかじめ Web ページに適した容量やファイル形式にしておきます。
４） サイトの主要部分をプランする
まずサイトの主要部分を大まかに計画することが必須です。
簡単な図を描いてみると作業がやり易くなるでしょう。
その図は、サイトの階層をリストします。それはいろいろな部分間の関係を説明するサイトマップにもなり、効果的なツールとなるでしょう。
サイトマップはサイト内のページ構成を一覧で作成します。ページの階層やリンクを決めるもとになります。
まずは紙に Web サイトの大枠のレイアウトを描いてみるなど、Web サイトの設計図を用意することで実際の制作中に発生すると考えられる様々な問題点を事前に解決することができるはずです。
５） ディレクトリ構成を作成する
すべてのファイルを同一フォルダー内に保存すると、ファイルが増えてきた場合に管理が煩雑になります。
HTML ファイルや画像ファイル、音声ファイル、スタイルシートファイルなど、ファイルの種類によって入れるホルダーを明確にした、ディレクトリ構成を設計しましょう。（参照： web05.html）
６） ラフレイアウトの作成
各 Web ページの共通項目、リンクメニューの位置を決め、文章や画像の配置をラフに決めます。
７） Web サイトのレイアウトを作成
ラフレイアウトを基にレイアウトを作りこみます。
８） スタイルを決める
この段階は Web サイトを如何に独創的にするかに関係します。
オプションがいくつかあります。
プロのグラフィックデザイナーあるいは Web デザイナーと契約するオプションがあります。あなた自身で芸術的にデザインをすることもあり、Web ページにあなたのスタイルの味わいを加えることもできます。
3番目のオプションはテンプレートを利用することです。時間と金の節約になるでしょう。
９） パーツの作成
イメージ画像、メニューや見出し用画像などのパーツを作成します。
１０） コーディング
レイアウトした通りに文章を入力したり画像を配置します。 HTML を記述します。
決めたスタイルになるようにスタイルシートを作成します。 CSS を記述します。
１１） 表示確認と評価
コーディングしたファイルを Web ブラウザで表示確認を行います。
ブラウザによってはレイアウトが崩れないかどうか、文字サイズ／表示サイズを変えても崩れないかどうかを確認します。
Internet Explorer だけでなく、FireFox、Google Chrome でも表示してみます。
Web サイトチェックリスト にて評価します。
１２） アップロード
Web サーバーにアップロードして公開します。