A−2


ライン

■情報配信日 2001−8−24

index(表紙)ページの作り方・実践編 1>

 前回では、事務機販売店(特に中小事務機店)が営業のツールとして「ホームページ」を活用することの必要性について。及び、現在のホームページを情報発信型HPへと早急に転換すべきであるとし、その活用ポイントについて述べた。そして、1.コストをかけずに手早くつくる、2.週1更新を徹底する、3.社内で更新・管理するの3点の必要性を指摘し、併せてindex(表紙)ページを100分でつくるという、そのさわりの部分について簡単に紹介した。
 「なんや、ホームページってこんな簡単にできるのものなのか」。そう感じてもらったならばしめたものである。

 今回は、index(表紙)ページの作り方をWeb上で実践形式で行ってみたい。

 まず、ホームページを作成するにあたっては、事前に市販の「ホームページ作成ソフト」と、必要に応じて「素材集」を購入する必要がある。パソコンに内蔵されているソフトを使う手もあるが、ここではもっともポピュラーなIBMの「ホームページビルダー」を使ったケースをもとに以後話しを進めていくことにする。



表紙はできるだけシンプルなものにすること。最初から完成度の高いものを追うと一向に前に進まない!

 Webの世界では、一度発信した情報やページを後で何度でも修正・変更できるように、印刷物と異なり自由に手直しができることが最大の特長といえる。だから、「ホームページをつくろう」と思ったら、とにかく1日でも早くサイトに乗せることである。最初から「いいものをつくろう」という気持ちは理解できなくもないが、「よそにない立派なものを」と肩に力を入れすぎるのは問題だ。最先端の技術を駆使して「ホームページ」の制作自体がPR発信の場となる、ネットワーク関連業者のような企業ならばともかく、そうでない一般の販売会社の場合は、あくまでもホームページを営業のサポートツールとして位置づけ、そのための情報発信型ホームページの骨格をどのようにしてつくり上げていくかを最優先課題とすることが重要である。

 従って、小手先のテクニックに走ったり、グラフィックに凝ったりすることは避けるべきだろう。特に、表紙はできるだけシンプルなものにし、最初から完成度の高いものを追わないことである。そうでないと、いつまで経っても一向に前に進まないし、ホームページを立ち上げるまでに多大の時間を費やすことになってしまう。まずは、手早く立ち上げることだ。表紙の手直しやリニューアルはその後に慣れてからやればいいことだし、内容の充実と併行して段階的にレベルを上げていく方が見る人にとっては常に新鮮に写るし、より効果的である。

 というわけで当欄では、そこそこ見栄えが良くて、且つもっとも手早くできる表紙の作成法として、1.テンプレートウィザートを使用した作成法と、2.ビルダー内の素材(写真、壁紙)を背景画像として使用する作成法の2点を推奨しておきたい。


実践編 1.表紙を作成する
A.好みの写真を背景画像に挿入し、画像を編集する

 前回では、そのさわりの部分を簡単に紹介しているので、早速実践に入ってみよう。表紙の背景画像に取り入れる写真の挿入までのステップは以下の通りである。

photo006.jpg

●ビルダー上列左の<ファイル>を開き、<新規作成>をクリック→新規作成ページが開かれる。
●<素材>ボタンを押し、<画像>の中にある<写真>をクリック→画像ファイルの一覧が表示される。
●に入った写真を選び出し(サンプルでは左のphoto006.jpgを使用)、右クリックする。その中の<背景画像として挿入(G)>をクリック→写真が背景画像としてページ全体に挿入される。

 indexページ(表紙)に背景画像が貼り付けらました。

 「既存の素材をそのまま使用するのはどうも抵抗がある。これでは他と同じようなホームページになってしまう」。とこのように、どうしてもオリジナリティーを出したい場合には、<画像の編集>により写真そのもののイメージをガラリと替えてしまうことをお奨めする。

画像の編集


photo006.jpg

効果〜ネガ反転
●<写真左>は、上記のphoto006.jpgを画像編集(ネガ反転)したものである。これだと素材とは全く別の画像になるのでオリジナリティーを出すことができるわけだ。画像編集は画像を指定して右クリックして呼び出す。
次にそこの<効果>の欄をクリックすると、約20種類の画像効果が表示されるので、その中からプレビューにかけて好みの効果を選択し適用する。これでOKだ。

効果〜朝夕 効果〜縁取り 効果〜油絵

また、これらの効果だけでは満足しない方は、効果の選択を重複活用してみることである。例えば、先ず画像を一旦「ネガ反転」し、それを元に戻さないで次に「朝夕」の効果を加えてアレンジしていくという方法だ(写真右参照)。これだと他社にない、全くオリジナルな自社だけの背景画像が出来上がる。
一度、時間があれば試してみるといいだろう。

 ここで注意しなければならないのは、背景画像としてページに貼り付けた後では画像編集はできないということであっる。従って、素材の写真を画像編集する場合は、まずページ上に写真を挿入して処理し、これを画像として一旦保存(ウェブアートディザイナーを起動→Web用保存ウィザートで処理後保存)してから、背景画像として使用する。こうしたステップをとる必要がある。
 なお、ウェブアートディザイナーの使い方については、<ロゴの作成>欄で詳しく触れているのでそちらを参照していただきたい。

 また、ここでは背景画像の写真はビルダー内の素材を使用しているが、自分で撮ったお気に入りの写真を同様に編集して貼りつけることも勿論可能だ。デジカメで自社のビルや店舗、あるいはショールームなどを撮って、それを画像編集して表紙の背景画像に採用するのもおもしろい。愛着も一際増すことになるので是非お奨めしたい。

実践編 1.表紙を作成する
B.テンプレートウィザートを使用して作成する

 表紙のサンプルでは、前記の写真を背景画像に貼り付けた方法を採用しているが、もっと簡単な方法でいくならば<テンプレートウィザートを使用した作成法>を利用するといいだろう。「ホームページのイージーオーダーシステム」といえるもので、一工程で表紙が作成できるのが大きな特長だ。具体的なつくり方は以下の通りである。

●ファイルを開き、テンプレートから新規作成(T)をクリックする。
 →<テンプレートの選択>が表示される。
●「カテゴリ」「ジャンル」「テーマ」を選ぶ。
 →該当するテンプレートがプレビューされる。
●選択後、「次へ」をクリック。
 →<背景色の選択>が表示される。
●背景色を選択した後、「次へ」をクリック。
 →<画像の選択>が表示される。
●画像の選択後、「次へ」をクリック。
 →<ぺージの設定>が表示される。
●表紙として使用する場合は、「index」と記入する。

 最後に<完了>のボタンをクリックすると、画面に上記の通りに選択されたテンプレートが貼り付けられる。


実践編 2.タイトルロゴを作成する
ウェブアートディザイナーによるロゴ作成

 表紙のテンプレートができ上がれば、次はタイトルロゴの作成である。ここではタイトル名を「ABCネット情報便」(サンプル)としているので、そのタイトルロゴを実際に作ってみよう。

 ロゴ文字を作成するにあたっては、2通りの方法がある。まず、「ツール」を開き、ウェブアートディザイナーを起動させる。すると、無題のキャンパスが開かれる。このキャンパス上でロゴ文字を作成するわけだが、1つ目の方法は、いわゆる“既製品”のウェブアート素材を利用する方法である。左のウェブアート素材の<ロゴ>をクリックすると素材一覧表が掲示される。この中から好みのロゴ形態を選び出す。サンプルでは「iogo040」を使用しているので、実際にこれを使ってロゴ文字を作成してみることにしよう。

 まず、タイトル文字「ABCネット情報便」(サンプル)を入力し、「iogo040」をクリックし下段の<挿入>ボタンを押す。これでキャンパス上に指定のロゴ文字が載る。あとは、イラストやボタンなど使ってを脚色し仕上げればOKだ。

 なお、タイトル文字の場合は、ほぼ半永久的に使用することになるので、その作成にあたってはできるだけ時間をかけ、満足のいくものを作った方がいいだろう。そのためにも、文字入力後に、色々なロゴにあてはめて実際に試してみることである。

サンプル@ ウェブアート素材「iogo040」を使用。

     

サンプルA ウェブアート素材「iogo063」を使用。

     

 
サンプルB ウェブアート素材「iogo040」をPOP書体に変換し、さらに色変換を加える。

     

サンプルC <ロゴ作成ウィザート>でロゴを作成し、これにボタン効果を加える。

     


 サンプル@は、ウェブアート素材の「iogo040」を使用して作成したロゴ文字。サンプルAは、同じくウェブアート素材「iogo063」を使用して作成したロゴ文字である。また、サンプルBは同じく素材「iogo040」を使用して作成したものだが、これをPOP書体に変換し、さらに色変換を加えるとこのようになる。
 
 また、既成のウェブアート素材を使用しないで、自分流のロゴ文字を作る方法もある。それが、サンプルCの<ロゴ作成ウィザート>による作成法である。<ロゴ作成ウィザート>によるオリジナルロゴの作り方は次の通りで、全く独自の自分流のオリジナルロゴが作成できるのが大きな特長だ。
 
●ウェブアートディザイナーを起動させ、<ロゴの作成>をクリックロゴ作成ウィザートが開かれる。

1.<文字の指定>を行なう。タイトル文字を入力し、フォント、スタイル、行揃え(中央寄せ)を選定する。終了後「次へ」のボタンを押す。

2.<色の選択>を行なう。色の一覧から好みの色を決め、色の種類(単色・グラデーション・テクスチャ)を選択する。終了後「次へ」のボタンを押す。

3.<縁取りの選択>を行なう。まず、縁の種類(6種類)を選ぶ。縁が不要の場合は「なし」を選択。次に、オプションメニューの中から必要に応じ、「縁の大きさ」、「縁の色」、「縁の透明度」を選択して決める。終了後「次へ」のボタンを押す。

4.<文字効果の選択>を行なう。縁取りの選択同様、6種類の中から文字効果を選択する。そして、必要に応じてオプションメニューの中から「影のぼかしのつよさ」「影の色」「影の位置(縦/横)」を調整して決め、終了後「完了」ボタンを押す。
  
●キャンパス上に選択された指定のロゴ文字が貼り出される。
 
ボタン作成ウィザートを活用しロゴを装飾する

 タイトルロゴをそのまま使うのもひとつの方法だが、ボタンや素材の部品などを装飾してタイトルを引き立たせるのも効果的な方法である。前記のサンプルCは、まず<ロゴ作成ウィザート>を使ってロゴ文字を作成し、それにボタン効果を加えて合成したものである。

 ボタンを使ってロゴ文字を効果的に演出するには、まずウェブアートディザイナーを起動させてキャンパスを開き、<ロゴの作成>の右横にある<ボタンの作成>をクリックする。すると<ボタン作成ウィザート>が開かれ、同時に「形状の選択」が表示される。ここには矢の形をした「arrow01」から始まり、「apple」「bat」「circle」「can」「fun」「hat」「paper」「pencil」「tree」「tubu」など、約50種類程度の形状が一覧形式で見れるようになっている。この中から気に入った形状を選択し、次に「色の選択」を行なう。
 
以下は、ロゴ作成ウィザートの場合と同様、色の一覧から好みの色を決め、色の種類(単色・グラデーション・テクスチャ)を選択する。そして、終了後「完了」のボタンを押せばOKだ。
 
 サンプルAは、ボタン形状「pipe」を採用し着色したもので、これをバックにロゴ文字「ABCネット便」を合成したものである。実際にやってみるとわかるように、ボタン作成はそんなに難しいことではない。むしろ、ロゴ文字づくりが一層楽しくなるので、時間があれば色々と試してみるといいだろう。



例A


例B

(例A)は、ボタン形状「qoadra01」に、グラデーション「milky03」を色選択してボタン作成。これをロゴ文字のバックに貼り付け合成したもの(例B)は、同様にグラデーション「red03」を使用して合成したもの。なお、これに画像のロールオーバー効果を加えてリンク設定すると、インパクトのあるリンクボタンとして使用することができる。これについては後の<リンク編>で詳しく解説したい。

 では、<ロゴ作成ウィザート>と<ボタン作成ウィザートを使用して、サンプルDのようなボタン付きロゴ文字を実際に作ってみよう。

 ボタン付きロゴ作成STEP

<ロゴ作成ウィザート>を開き、タイトル名を書体は「富士ポップP」、スタイルはボールド・イタリックを指定し入力する。色選択ではテクスチャの「wall03」を使用。縁は「通常」とし、縁の色を「青」、影の色を「黄緑」で指定し「完了」。→キャンパス上にロゴ文字が載る。

そのままの状態で<ボタン作成ウィザート>を開き、ボタンの形状「fan」を選択し、色についてはグラデーションの「ring01」を指定し「完了」ボタンを押す。→キャンパス上にfan形状のボタンが載る。

そのままの状態にして、再度<ボタン作成ウィザート>を開き、飾り用の棒状ボタンを作成する
まず、形状から「qoadra01」を、グラデーションから「reflect」をそれぞれ選び出す、→「完了」。
 →キャンパス上に「qoadra01」形状のボタンが載る。→マウスを使って左右に画像を棒状に引き伸ばして形を整える。

●次に、キャンパス上に載っているロゴ文字と2点のボタンを組み合わせて合成し、一つのロゴボタンを作る。なお、ここで注意しなければならないのは、キャンパス上では常に後で降りたものから順に前の画像の上にかぶせることができるということである。

サンプルD


サンプルE〜複合型
複数のボタンを組み合わせて、タイトルのボタン付きロゴ文字を作成する>
 つまり、ロゴ文字は一番最初に作成してキャンパス上に降ろしたので、このままでは後で作成したボタンの上に載せることはできない。従って、サンプルのような合成ボタンを作る場合は、ロゴ文字を一旦切り抜きし、キャンパス上に再び貼り付けるという作業が必要となる。念のため。

 例題(サンプルD)は、扇状のボタンの上にタイトルロゴ文字を載せ、同じく棒状のボタンをタイトル下にあたるように配置し、一つのボタン付きロゴとして合成・作成したものである。なお、サンプルEはこの発展型で、複数のボタンを組み合わせて、ボタン付タイトルロゴ文字を作成したものである。時間があれば一度試してみるといいだろう。
 


なお、次回ではタイトルロゴ文字の挿入からindexページの仕上げについて実践紹介したい。


次回配信予定
(9月3日)















■情報発信型ホームページの作成ポイントと活用 A−1
■情報発信型ホームページをつくろう!〜<表紙のつくり方/実践編2> A−3