SAMPLE IMAGE この画像は差し替えてご利用ください

003 完成形のデザインと素材の準備

ホームページを作る前の準備が肝心です。

002-1 できあがりの形を想像する

どのようなホームページにしたいか、完成した時の形を思い描いて見ましょう。

  • ホームページを通じて「見せたいもの」や、「伝えたいこと」

002-2 基本要素のレイアウト(配置)を考えてみる

ホームページの基本要素のレイアウト:

  • ホームページタイトル
  • ナビゲーション
  • ページの内容

002-3 ホームページのタイトルを決めよう

ホームページのタイトル = 店の看板や、会社の社名のようなもの

ロゴを使う

ホームページタイトルを表示するとき、テキストで見せるほかに、ロゴを使う方法があります。

ロゴの種類:

  • ロゴマーク
  • ロゴタイプ

ロゴマーク:

社名や商品、サービスなどを象徴する絵や形に図案化したもの

ロゴタイプ:

テキスト(タイトルの文字)そのものがユニークな形状になったもの

勉強会の中でも実際にロゴを作ってみます。どのようなロゴにするかを考えておきましょう。

002-4 ホームページの雰囲気に合う配色を考えよう

例えば、弁護士や会計士のホームページでは「信頼」「堅実さ」等が重要なキーワードになります。このような場合、背景色を白にすることで清潔なイメージを想像することが可能です。これが黒い要素では怖い印象や取っ付きにくい雰囲気になり、信頼性は感じられません。

居酒屋やバーなどの夜間営業する飲食店は、明るい色よりも暗く落ち着いた雰囲気の配色が好まれます。黒や赤などでも違和感はありません。

また、写真が重要なホームページは、黒背景の上に写真を載せると引き締まって見えます。

コーヒーを扱うお店の場合、コーヒーやコーヒー豆か連想される茶色系統の配色にすると効果的です。食べ物や飲み物を扱うお店の場合、寒さ・冷たさを感じさせる青系の色よりも、温かさ・熱を感じさせる赤系のほうがより雰囲気に合っていると言えましょ。

このように、ホームページのジャンルや内容にあう色を採用しましょう。

002-5 ホームページのページ構成を考える

どんなページを設けるか、ページ構成を考えます。

ホームページの目的や内容を整理してみよう

ホームページの開設には必ず目的があるわけで、それをゴールとします。

お店のホームページでは、「来店してもらうこと」「購入してもらうこと」がゴールで、それがホームページの目的です。

ゴールがある前提で「どんな人が対象になるのか」「どんな人に買ってほしいか」など、対象となるユーザーターゲットを具体的に設定します。

そして、ターゲットに向けて「どんな情報を伝えればよいのか」を整理してみましょう。そうすることで「どんなページが必要なのか」が見えてくるはずです。

ホームページの設計図を思い描こう

設計図と言っても特別難しく考えることはありません。

ホームページに入れるページをリストし、それを「階層」でまとめる作業です。

 

ホームページを階層化する

トップページを第一階層(一番上の階層)として、その下の階層(第2階層)にするページや、さらにその下(第3階層)にするページを、内容の関連性などに基づいて分類し、整理していくことを指します。

設計図づくりには特別なアプリケーションは不要です。紙に手書きをしたものでも十分です。本コースの勉強会では、メモ帳で作成したものを作っています。

作りたいページが全部でどれくらいあるか、どのページを階層化するか、を整理すると、ホームページの全体像が見えてきます。

002-6 ホームページに使う素材の準備

ホームページを作るには、そこに載せる文章(テキスト)や写真・画像が必要になります。

ホームページに使う文章はプレーンテキスト形式で準備する

ホームページに載せるテキスト(文章)は事前にまとめて、ファイルとして保存しておきましょう。そうすることで文章の質が高まるだけでなく、Jimdo で間違って消してしまったときなども、最初から書き直す必要がなくなります。

Windows でテキストを作成したり、編集したりするアプリケーションには「メモ帳」、「Word」、「ワードパッド」などがありますが、おすすめはメモ帳です。

Windows7 の場合、「スタート」メニュー→「すべてのプログラム」→「アクセサリ」→「メモ帳」を選び起動します。

プレーンテキストとリッチテキスト

Word、Excelで作成したテキストはリッチテキストと呼ばれ、文字の大きさや色など、文字の装飾に関する情報を含んでいます。

一方、メモ帳やワードパッドで作成するテキストはプレーンテキストといい、純粋な文字情報だけです。

ホームページに使う画は「加工前」と「加工後」で整理しておく

画像を準備する時、色調やサイズなどを調整・加工した「加工後ファイル」を準備すると同時に、何も手を加えていない「加工前ファイル」も残しておきましょう。