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

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

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

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

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

  • 「どういう目的」で「誰に向けた」ホームページにするか
  • ホームページを通じて「見せたいもの」や、「伝えたいこと」

003-2 ホームページのページ構成を考える

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

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

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

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

 

団体やグループのホームページではメンバー間の情報の共有ということもあります。

 

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

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

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

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

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

 

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

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

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

 

下図は、メモ帳で作成した「HPデザイン文書.txt」を印刷して、推敲していることを示しています。

HPデザイン文書001.jpg
HPデザイン文書001.jpg

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

 

A201709 コース用にデザインしたデザイン文書から、ページ構成の部分を抜き出すと下図のようになる。

jdg00_13:ページ構成のデザイン(AHP201709用)
jdg00_13:ページ構成のデザイン(AHP201709用)

また、各ページ内容もデザインし、用いるコンテンツの種類と共に内容もテキストで準備しておく。

jdg00_21:デザイン文書の内容
jdg00_21:デザイン文書の内容

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

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

ロゴを使う

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

ロゴの種類:

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

ロゴマーク:

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

ロゴタイプ:

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

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

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

ホームページの目的に合った配色を考える

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

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

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

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

このように、業種や扱う商品によって使う色は変わってきます。見ている人に与えるイメージをもとにホームページのジャンルや内容にあう色を採用しましょう。自分の好みの色を優先するものではありません。

情熱的、攻撃的、意欲的、興奮

親しみやすさ、陽気、明るい

安心感、落ち着き、リラックス

明るい、希望、にぎやか、元気

安らぎ、安全、健康、自然、平和

知的、誠実、男性的、さわやか、涼しさ

高級、上品、伝統、古典

かわいい、やすらぎ、幸福感、女性的

清潔、純粋、シンプル、開放的

重厚、都会的、高級、神秘


色数は3つまでが基本

たくさんの色を使うとカラフルでにぎやかなホームページになると考える向きもあるかもしれませんが、色数を少なく3つぐらいに抑えることによりまとまった雰囲気を持ったページに仕上がります

例えば一つ目はホームページのテーマカラーとして見出しなどに使われる色、二つ目は通常の文章の基本の色、そして3つ目は強調部分に使うための自分で調整した色を使うことです。

配色ツールを参考にする

ネット上には、配色を決めるための手助けをしてくれるサービスがいくつかあります。例えば、基本の一色を指定すると色の組み合わせを提案してくれるツールがあります。

ウェブ配色ツール Ver3

jdg00_19
jdg00_19

▷ Adobe Color CC

jdg00_20
jdg00_20

003-5 ホームページに使う素材の準備 - テキスト

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

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

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

Windows でテキストを作成したり、編集したりするアプリケーションには「メモ帳」、「Word」、「ワードパッド」などがありますが、おすすめはメモ帳です。プレーンテキストで保存します。その時の拡張子は .txt となります。

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

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

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

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

拡張子を表示する

Windows の標準設定では拡張子は表示されません。保存されたテキストファイルの拡張子 .txt を表示する様にしておけば、それがプレーンテキストとして保存されているかどうかが分かります。

拡張子を表示するように設定を変えるには、エクスプローラーの「表示」タブを開き、「ファイル名拡張子」にチェックマークを付けます。

003-6 ホームページに使う素材の準備 - 画像

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

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

適度に縮小しておく

Jimdo にアップロードした画像は自動で表示サイズだけは調整されるが、アップロードした元のサイズは変わらないので、サーバーの容量を多量に使う可能性があります。

Jimdo にアップロードする前に、画像を適度なサイズに縮小して利用するようにすると、アップロードの速度もあがる上に、サーバーの容量を多量に消費せずに済みます。

ペイントを使って画像のサイズを縮小する

Windows に標準で搭載されているアプリ「ペイント」を使って画像を縮小する方法です。Windows 10 バージョン 1703 以降の場合は Cortana で「ペイント」を検索しスタートにピン留めしておきます。

jdg00_15:「ペイント」を起動する
jdg00_15:「ペイント」を起動する

1)「ペイント」を起動する

jdg00_14:サイズ変更する画像を開く
jdg00_14:サイズ変更する画像を開く

2)ペイントのファイル」タブから、開く」を選択して、サイズを変更したい画像を開く

 

ここでは DSC02567 を開く

jdg00_16:「サイズ変更」する
jdg00_16:「サイズ変更」する

3)開いた画像のサイズが下辺で表示されている。

ここでは、2128 x 1200px と表示

 

ホーム」タブの「サイズ変更」をクリックする。

jdg00_17:変更値を入力する
jdg00_17:変更値を入力する

3)「サイズ変更と傾斜」ダイアログが表示される

 

ピクセル」を選択する

 

縦横比を維持する」にチェックが入っているのを確認し、「水平方向」に数値を入力する

 

OK」をクリックする

jdg00_18:縮小された画像
jdg00_18:縮小された画像

4)下辺の表示値でサイズが縮小されたのを確認する

 

ファイル」をクリックし、「名前を付けて保存」でオリジナルとは別の名前で保存する