はじめてのホームページ・ビルダーV9

るどるふがお送りする1日10分、週1時間でゆっくり理解しながら覚える

IBMホームページ・ビルダーV9対応の初心者向け解説書です。


  ・ IBMホームページ・ビルダー認定プロフェッショナル資格 所持

  ・ IBMホームページ・ビルダー認定トレーナー資格 所持

Amebaでブログを始めよう!

2-04.サンプル、その3

ここでは背景を中心とした色の配色を変更することが出来ます。
色のカテゴ リで好きな色の名前をクリックすると、背景と文字色の組み合わせの欄に様々な配色の組み合わせが表示されます。
そこでまた、好きな物をクリックすると青い枠が付き、右のプレビューにはその組み合わせに変更したらどうなるかを見ることが出来ます。
(スクロールバーがありますから、下にもたくさんの柄、色があります。)


背景と文字色の組み合わせ


ここで色のカテゴリを見てみると「緑」と「緑の壁紙」といった感じに色の名前だけのカテゴリと「~の壁紙」のセットになっているのがわかります。


色の名前だけの場合は背景をその色のペンキでペタペタと塗るような場合(塗り壁)です、ペンキの色も豊富ですね。

緑と一言で言ったって一色じゃないですよね?


壁紙はお風呂などのタイルのようにそのデザインのピースを壁一面に貼り付けたような場合です。
(この場合のタイルは正方形とは限りません、グラデーションの場合など細長いタイルもありますよ)

今回は「オレンジブーケ」というタイトルから連想できるように「オレンジの壁紙」から左端の上から4番目の格子柄を選びます。


ついつい背景ばっかりが変わっているだけのように感じてしまいますが、ここで選択しているのは背景と文字色の組み合わせです。例えば黒のカテゴリを選ぶとプレビューの画面に映る文字はどうなってますか?
背景に対して見やすいように文字色は白や黄色などの明るい色になっています。
逆に明るい背景色だと濃い色の文字に、このようにセットで変更されているのです。

では、「次へ」をクリックします。


今回はここまで!


<hr>
背景と文字色の組み合わせの画面で「ユーザー定義」ボタンをクリックすると細かく設定を変更することも出来ます。


背景と文字色の詳細

2-04.サンプル、その2

「パーソナル」を選んで次の画面にくると色々なデザインを見ることができます。
テーマの欄でファッションや旅行の上でクリックすると青い枠が付き右側のプレビューに大きく表示されます。

横向きスクロールバーもありますから、隠れているデザインもありますからどんなものがあるのかいろいろと見てみましょう。
その後いったん下の「戻る」ボタンをクリックして他のジャンルも見てみたいと思います。
(「HotMedia」は面白い動きをするページになりますがそのまま利用する場合は楽しいですが、編集が難しいため最初のうちは利用をお勧めできません)


いろいろと見た後で、今回は「デザイン」のジャンルをクリックして、同じテーマで進んでいきたいと思います。
「フェミニン」をクリックします。


フェミニン


下段のレイアウトを変えることで同じテーマのデザインでも少し印象が変わります。
今回は先頭の「トップ01」をクリックして、「次へ」をクリックします。


ここではページのタイトルを決定します。
現在、ページタイトル欄には「フェミニンページ」といいう仮のタイトルが入力されています。
ページタイトル欄をクリックするとカーソルが点滅しますので、キーボードから仮のタイトルを削除して新たなタイトル「オレンジブーケ」と入力します
入力後、「次へ」ボタンをクリックします。


タイトル


このタイトルというのはWEBページの画面には表示されませんが、ブラウザで見た時にタイトルバーに表示されます。
また、お気に入りに登録をした時に自動で付けられる名前にもなりますのでそれなりの長さでわかりやすい名前にする必要があります。(検索エンジンなどでの検索順位においても重要なポイントとなります。)


今回はここまで!

2-03.編集モードの違い

「標準モード」はワープロソフトと同じような使い方で作成をすすめることが出来ます。
白紙の画面を用意すると左上でカーソルが点滅してキーボードから文字を叩くと左詰めで文字が入力され、後から中央や右端に揃えることが出来ます。


標準モード


「どこでも配置モード」は白紙を準備しても直接その上に文字を入力するわけではなく、必ず付箋紙(いわゆるポストイット)を使うというルールがあると考えて下さい。


ワードをお使いの方だとテキストボックスというイメージにも近いでしょう。
この色のついてない付箋紙の良いところは自由にペタペタと張り替えてレイアウトを整えることが出来ます。
(さらには重ねることも出来ますよね。)

どこでも配置モード


ですが、レイアウトについて考えるとWEBページは紙に印刷するのではなく閲覧者のPCを通して見ることになります。
そうなると閲覧者が使っているPCのディスプレイの大きさ(また解像度)によって表示できる横幅などが変わってきます。


「標準モード」はブラウザ画面の横幅が大きかろうが小さかろうが中央に指定することが出来ますが。
「どこでも配置モード」は左上角を0位置としてそこから数えでどれぐらいの距離で配置することになります。
必ず自分の考える横幅サイズで見てもらうことは困難なので、画面の真ん中に揃えたレイアウトには不向きです。


また、Netscape Navigator 4.0 、 Internet Explorer 4.0 以前のブラウザでは正しいレイアウトで表示されない等の制限事項もあります。


標準モード



どこでも配置モード


どっちを使ったらいいか?は、お好みでとなりますがワープロソフトにも慣れてらっしゃる事が多いですし、多くのビルダーユーザーさんは「標準モード」での作成をお勧めされています。


古いブラウザやマシンに対応してなくても良さそうだし、、、という方もちょっと待って下さい。
近頃は携帯電話での利用(それもフルブラウザ対応機種)などもありますし、今後もどんなネット機器が流行るかわかりません、やっぱり私のお勧めも「標準モード」です。


今回はここまで!

2-02.サンプル、その1

今度は[ページ作成ウィザード]の画面が表示されます。
上段の「表示環境」という欄には「iモード」や「ボーダフォン」という項目があります。
ビルダーではこういった携帯用のページも作れるんです。(au用には対応していません)
また「MobileWeb」というのはカーナビなどで使われる規格に準拠したページが作成できます。


ページ作成ウィザード


まぁ、私達は一番の目的「PC(通常)」を選択して、下段を見ます。

ページの種類には「通常ページ」と「フレームページ」がありますが、フレームについては先で紹介するとしてここでは「通常ページ」を選択します。


この作り方の3種類は順番に使いながら理解していきましょう。

とにかく簡単に作成できる「サンプル」を選択します。


編集モードでは2種類「どこでも配置モード」と「標準モード」です。

ビルダーでは「編集モード」が2種類あります
アレ?前回3種類と言わなかったけ?という方、それは「編集スタイル」です。紛らわしいですよね?(^^;


「編集スタイル」は操作する画面が変わるけど、出来上がりは同じ。
「編集モード」は操作画面にも多少差がありますが、それ以上に出来上がった物が違う出来栄えとなります。


ではここでは「標準モード」を選択して、「どこでも配置モード」との違いについては次の回に紹介します。
「次へ」ボタンをクリックして進みます。


ではサンプル(つまりは雛形)を使ったページの作成のはじまりです。
カテゴリでは「単数ページ」「複数ページ」「ユーザーテンプレート」の選択があります。


カテゴリとジャンル


WEBページの構成として普通1ページのみで終わる事はあまりないかと思います。「複数ページ」を選択すると統一感のあるデザインで数枚のページを準備してくれます。

この場合は各ページのリンクの仕掛けもやってくれますので、中身の文章を打ったり画像を挿入するだけで手っ取り早く完成することが出来ます。


「単数ページ」は1ページのみデザインがほどこされたWEBページを準備してくれます。

今回は「単数ページ」をクリックして右側のジャンルからまずは「パーソナル」をクリックして、「次へ」ボタンをクリックします。


今回はここまで!




「ユーザーテンプレート」はちょっと中上級向けの用途で、ビルダーでは自分でオリジナルの雛形を作成して登録する事ができま

す。
登録したオリジナルの雛形を利用する場合にここから選択することが出来ます。

2-01.起動と編集スタイル

今日はビルダーの起動からはじめます。
Windowsの[スタート]ボタンをクリックして、[すべてのプログラム]→[IBMホームページ・ビルダーV9]→[ホームページ・ビルダー]でクリックします。


ビルダーが起動して、[ホームページ・ビルダーV9へようこそ]の画面が登場します。
ここで最初に戸惑ってしまうのがこの「ようこそ」画面です、白紙の画面が登場するとばっかり思っているとどうしていいのかわからなくなります(^^;


ホームページビルダーV9へようこそ


ビルダーは、使う人の用途に合わせて編集スタイル選ぶことが出来る優れモノなのです。まぁ、ここでは3種類の顔を持つと思って下さればと思います。


・ かんたん  (ボタンも大きめな簡単仕様でも、難しいことは出来ないようになっている)
・ スタンダード  (ほとんどの方はこちらがお勧め、必要なツールが画面に揃います)
・ エディターズ  (一番難しいプロ仕様)


では、最初なのでまずは[かんたん]をクリックして、その下にある[OK]ボタンをクリックして進みましょう。
そうすると、ハイ。今度は[スタート]という画面が表示されました。

またどれを選んでいいか悩みますが右側2つは「~を開く」なので保存しているファイルがある場合に使用します。


スタート画面


左側は「~を作成する」ですが、ここでは上の段の「ページを作成する」を選択して進みます。

下段には「サイトを作成する」と書かれていますがビルダーの中では「サイト」という言葉が一般的に使われている「WEBサイト」とは違う意味で使われます。
これについてはまた別の機会にゆっくりと説明したいと思います(^^)b


今回はここまで!




「ようこそ」画面にはもう1つボタンがあります、[ガイドマップを開く]です。
これはマニュアル以上の優れ物で時間がある時にコーヒー片手にじっくりと読んで下さい。
途中で説明音声付のフラッシュ画面もあるので、音量も上げて聞くと読むよりもわかりやすくていいですよ~。


ガイドマップ

1-03.無料でビルダー?!

一応お約束でインストールするパソコンには必要最低限の条件(スペック)があります。
本日はそのあたりをご紹介(^^)/


・O S : Windows98以上(MAC版はありません(^^;)
・CPU : Pentium2 266MHz
・メモリ : 128MB (256MBを推奨)
・ハードディスクの空き容量 : 最小で180MB(最大で420MB)


この他に、ホームページ・ビルダーにはビデオ編集機能として、「デジタルビデオカメラ」なんぞを持っているとPCと直接つないで映像を取り込み、WEB公開用にビルダーで編集することが出来ます。
また、「WEBカメラ」などと呼ばれるPCに直接つないで使うカメラを使うと定期的に予約した時間ごと撮影した画像を公開することが出来ます。

これらの機能を使う場合はパソコンの機能にはもうちょっと上のモノが要求されます。


・O S : Windows98 SE(セカンドエディション) 以上で、WindowsNT4.0は不可
・CPU : Pentium2 400MHz

後はIE(インターネットエクスプローラー)が入っている事や、インストールするためのCD-ROMドライブがいるだのディスプレイの解像度などの条件が付きます。


あなたのパソコンはどうですか?
[マイコンピュータ]の上で右クリックして[プロパティ]を選ぶとでCPUとメモリはわかりますよ。



また、実際にスムーズに動くかどうか心配という方もいらっしゃるのでは?
そんな方のため体験版があります!

まずはこちらをダウンロードして使い心地を試してみましょう。


もちろん無料で30日間という限定ですがほとんどのメイン機能が使えて保存もちゃんと出来ますよ。
ただし公開の機能がないので、買わずに済むわけではないですが(^^;
(それから素材集のイラストの数が少ない事や便利は周辺ツールが付いてこないという限定があります)


無料で試せるお試し版のダウンロードはこちらから ↓
     http://www-6.ibm.com/jp/software/internet/hpb/download.html#2


一括 hpb9tp.exe (101,503,994 バイト )をクリックするとダウンロードが開始です



Amazonで一番売れている、デジタルビデオカメラです。Panasoinic製は高いけど安心。
価格:¥89,800(税込)
松下電器産業
Panasonic NV-GS250-S デジタルビデオカメラ 3CCD シルバー

新しいQV-4000モデルとかは¥8,000とかするのですが、WEBカメラとして使うならこのぐらいで十分!
価格:¥3,780(税込)
ロジクール
LOGICOOL QV-40 Qcam Messenger

1-02.どのビルダー買えばいい?

ビルダーはIBMの製品ですが、ちょっと最近製品を手にすると戸惑う事があります。

ソースネクストやジャングルなど違いメーカー名が書いてあったり、本やオマケがついていたり、価格も様々で悩んでしまいます。

まず、よくある質問、、、

  Q : IBMパッケージ以外は偽者(海賊版)ですか?(^^;

  A : いいえ、そんなことはありません。販売メーカー名が違っても同じ物です。


ではいろいろなセットの中でお勧めを紹介します。


「IBM ホームページ・ビルダー V9」通常]版と本格ペイントグラフィックソフト「Paintgraphic」のセット。本数限定10万本。説明扉付き辞書ケース版。

通常版にペイントソフトがついてこの価格は魅力的です、まだ使う機会がないと思っている方もこの手のソフトは単体で買うとけっこうするのでセットで購入しておくというはけっこういいと思います。

定価:¥8,320(税込)

ソースネクスト
SOURCENEXT selection IBM ホームページ・ビルダー V9 通常版 10万本限定 Paintgraphic付き特別版 説明扉付き辞書ケース版



先ほどのペイントグラフィックソフト「Paintgraphic」をセットにしてさらに、おなじみのできるシリーズ本(一応、非売品バージョン)が付いてこのお値段です。
この手の本は¥1,000以上はするので何か手元に本を置いて始めたいという方には向いています。


定価:¥8,980(税込)

ソースネクスト
SOURCENEXT selection IBM ホームページ・ビルダー V9 通常版 10万本限定 Paintgraphic付き特別版 ガイドブック付き



先ほどのペイントグラフィックソフト「Paintgraphic」できるシリーズ本「IBM デジカメの達人」というフォトレタッチソフトが付いたセットです。

ホームページに掲載する内容撮影した写真を中心に載せる方にとってはフォトレタッチソフトは必須でしょう?

ビルダーにも少し機能が付いてますが、全然足りません。

トーンバランスとか合成写真のような加工とかも出来てフォトショップエレメンツと同じぐらいの機能があります。

ですが、ネーミングのせいかあまり売れず(;o;)不憫なソフトウェアとしてソースネクストより¥1,980で再販されている製品です。

プラス1500円だったらこれもお得です!


定価:¥10,558(税込)

ソースネクスト
SOURCENEXT Selection IBMホームページ・ビルダー V9 ガイドブック付き トクトクパック (5000本限定)

1-01.ビルダーって何?

ホームページ・ビルダーは発売以来多くのユーザーに利用されているIBMのソフトウェアです。
プロ向けというよりはご家庭向けの製品で、ジャンルでいうとホームページ作成ソフトにあたります。
多くの方が使っていると言ってもピンと来ない方や、まだ他のメーカーと比べで迷っている方もいると思います。どれぐらい売れているかというと。。。

・ Webツール売り上げランキング 5年連続第1位のロングセラー
  (BCN調査:1999年10月~2004年10月)


・ BIGLOBE2004 春のSOFTPLAZA大賞 受賞

・ 日本マニュアルコンテスト2004 家庭製品第3部門 優良賞 受賞


なわけです、たくさんの方が利用しているという点でもメリットがたくさんあります。


例えば、、、マニュアル本が豊富、解説サイトが豊富、使い方を知っている人が多い等です。

他にもいざ公開という時にプロバイダのサイトを見に行くと「ホームページ・ビルダーをお使いの場合は以下の手順で、、、」という風に特別に画面ショット付きで解説ページが設けられている事がよくあります。

これは公開でツマズキやすい初心者にとっては強い味方となります(^^)/


もちろん、デメリットもあります。


それは、テンプレート(雛形)等を利用して簡単に作成するとデザインが似てしまう。

素材集にはイラストがたくさんついてますが、それも「あっ、これビルダーで見たことある!」という事もよくあります。

でもこれらは初心者を脱出することで、自分でイラストを作ることや、フリー素材を利用することが出来るようになると問題解決です(^o^)b


ソフトは定価が¥13,800 (税込)で、近隣のパソコンショップでも購入できますが、アマゾンだと

価格: ¥9,675(税込) で購入可能!これ30%オフだよ 送料も¥1,500以上なので無料


すいません、さらに激安になってました。

こっちらだとさらに安くて¥7,980(税込)42%オフです!

日本アイ・ビー・エム

ホームページ・ビルダー V9 キャンペーン版






こっちはバージョンアップ版です、バージョンアップって前のバージョンはどれぐらい古いのまでいいの?ってのが気になるところだけど、ビルダーはなんとV1.2からOK!

(ていうかバージョン1.2まだ持っている人が居たら会いたいよ(^^;)

ちょっと昔はよくPCのバンドルになっていたから、V3とか持っているけど使ってない人も結構いるかも、譲ってもらうってのも有りですよね。こっちも定価:¥7,301 (税込)が ¥5,118(税込)になってるのでお得です。


日本アイ・ビー・エム
ホームページ・ビルダー V9 バージョンアップ版