ウェブアートデザイナーを使えば，ロゴ，ボタン，地図などを作ることができます。ここでは簡単な地図を作ってみましょう。

ウェブアートデザイナーの起動
メニューバーから「ツール」→「ウェブアートデザイナーの起動」を選択する。
直線や折れ線を描く −道路を示す線を引く− １．操作ツールバーから「直線」ツール（）を選択する。 　　　　　 　　　　　　　↓ ２．少し太めの線を引くために，線の太さを指定するドロップダウンリストから「６ピクセル」を選択する。 　　　　　　　↓ ３．線の色を指定するために「前景色」ツールをクリックする。 　　　　　　　↓ ４．「色の設定」ダイアログで茶色を選択し，「OK」をクリックする。 　　　　　　　↓ ５．キャンバスにマウスポインタを移動する。 　　　　　　　↓ ６．線の開始位置でマウスの左ボタンを押さえ，ｓｈｉｆｔキーを押しながら横方向にドラッグして横線を引く。 　　　　　　　↓ ７．同じ要領でもう１本横線を引く。 　　　　　　　↓ ８．線の開始位置でマウスの左ボタンを押さえ，ｓｈｉｆｔキーを押しながら下方向にドラッグして縦線を引く。 　　　　　　　↓ ９．「直線」ツールを選択し，線の開始位置で左ボタンを押さえそのままマウスを斜め方向にドラッグして斜め線を引く。。 　　　　　　　↓ 10．ツールバーから，「折れ線」ツール（）を選択し，途中で曲がっている道路の線を引く。必要に応じて線の太さも指定する。 　　　　　　　↓　　 11．キャンバス上にマウスポインタを移動し，折れ線を描く。ｓｈｉｆｔキーを押したまま，線の開始位置でマウスの左ボタンをクリックし，線が折れる部分でマウスを１回クリックして終点位置でダブルクリックすると折れ線が追加される。 点線や曲線を描く −鉄道を示す線を引く− １．操作ツールバーから再び「直線」ツール（）を選択し，ドロップダウンリストから点線を選択する。始点と終点の形状には，両方向の矢印を選択する。 　　　　　　　↓ ２．線の色を指定するために「前景色」ツールをクリックする。 　　　　　　　↓ ３．「色の設定」ダイアログが表示されるので，ここでは黒を選択し，「OK」をクリックする。 　　　　　　　↓ ４．前の説明で道路を描いたときと同じ要領で鉄道の線を描く。 −川を示す曲線を引く− １．操作ツールバーから「スムーズ」ツール（）を選択する。 ※ここでは線の種類は実線を選択しています。また，線幅を少し広くしたいので，線の太さは「任意」を選び，その下に「20」と設定しました。始点と終点の形状は，矢印のない形を選びます。 　　　　　　　↓ ２．「前景色」ツールをクリックして，表示される「色の設定」ダイアログで水色を指定する。 　　　　　　　↓ ３．キャンバス上で曲線の開始位置でマウスの左ボタンを押さえ，ドラッグしながら自由に曲線を描く。（ボタンを離すと曲線は自動的にな曲線になります。） 　　　　　　　↓ ４．このままでは川が走路の上にかぶさっているので，オブジェクトスタックで川のオブジェクトをスタックの一番下にドラッグし，川を背面に移動する。 図形やイラストを挿入する −物の位置を示す黒丸を描く− １．操作ツールバーから「楕円形・円」ツール（）の右側の▼をクリックして「塗りつぶしのみ」（）を選択する。塗りつぶしの色は，「背景色」ツールで黒を指定する。 　　　　　　　↓ ２．キャンバス上にマウスポインタを移動する。 　　　　　　　↓ ３．マウスをドラッグして小さな円を描く。 　　　　　　　↓ ４．今描いた円をコピーしてもうひとつ黒丸を入れる。黒丸にマウスポインタを合わせ，右クリックして「複製」を選択する。 　　　　　　　↓ ５．黒丸をもうひとつ複製する。 　　　　　　　↓ ６．複製された黒丸をマウスでドラッグして建物の位置に移動させる。 −駅とスーパーマーケットのイラストを挿入する− １．テンプレートギャラリーの「ウェブアート素材」タブからから「図形」を選択し，表示されるフォルダの中から「地図」を選択する。駅のイラストを選択して挿入する。 　　　　　　　↓ ２．ｓｈｉｆｔキーを押しながらイラストの角（右上を除く）の□をドラッグしてイラストの大きさを調整する。 　　　　　　　↓ ３．適当な大きさに変更できたら，イラストを目的の位置までドラッグする。 　　　　　　　↓ ４．７から９と同じ要領で，テンプレートギャラリーからスーパーマーケットのイラストを挿入する。 文字を入力する １．「文字」ツール（）を選択する。さらに「前景色」ツールをクリックして，表示される「色の設定」ダイアログで黒を選択する。 　　　　　　　↓ ２．文字を入力したい位置でクリックし，地名や建物名を入力する。文字入力を終了するときは，Escキーを押すか，または入力枠以外でマウスをクリックする。 　　　　　　　↓ ３．文字を選択して右クリックし，メニューから「オブジェクトの編集」を選ぶ。 　　　　　　　↓ ４．「文字」タブが表示されていることを確認し，「フォント」の下の「サイズ」に表示されている文字のサイズ（ポイント数）を変更して，文字の大きさを変える。 　　　　　　　↓ ５．１から４の手順を繰り返して残りの文字も入力する。 ロゴやボタンを作成する −ボタンを作成する− １．メニューバーから「オブジェクト」→「ボタンの作成」を選択する。 　　　　　　　↓ ２．「一覧」から好きなボタンの形状を選択する。 　　　　　　　↓ ３．「種類」からボタンをひとつ選択したあと，「一覧」から色をひとつ選択して，「完了」をクリックする。 　　　　　　　↓ −ロゴを作成する− １．メニューバーから「オブジェクト」→「ロゴの作成」を選択する。 　　　　　　　　↓ ２．「文字」ボックスに文字を入力し，必要に応じて文字のサイズを調整して，「次へ」をクリックする。 　　　　　　　　↓ ３．「種類」からボタンをひとつ選択した後，「一覧」から色をひとつ選択して，「次へ」をクリックする。 　　　　　　　　↓ ４．「ロゴ作成ウィザード」（縁取りの選択）ダイアログが表示されるので，「種類」から縁取りの種類のひとつを選択して，「次へ」をクリックする。 ※ここでは「なし」を選択しました。 　　　　　　　　↓ ５．「ロゴ作成ウィザード」（門司港課の選択）ダイアログが表示されるので，「種類」から文字効果のひとつを選択して，「完了」をクリックする。 　 ↓ ６．ボタンとロゴの大きさをそれぞれ調節し，適当な位置に移動する。 画像を保存する １．メニューバーから「ファイル」→「名前を付けてキャンバスを保存する」を選択する。 　　　　　　　↓ ２．「名前を付けてキャンバスを保存」ダイアログが表示されるので，ファイルの保存先を指定して保存する。 画像を貼り付ける １．ホームページビルダーで白紙のページを開く。 　　　　　　　↓ ２．ウェブアートデザイナーで，ページに貼りつけたいオブジェクトを選択する。 　　　　　　　↓ ３．メニューバーから「ファイル」→「Web用保存ウィザード」を選択する。ここではすべて貼り付けるのですべて選択を選ぶ。 　　　　　　　↓ ４．「Web用保存ウィザード」（保存対象の選択）ダイアログが表示されるので，「選択されたオブジェクトを保存する」が選択されていることを確認して，「次へ」をクリックする。 　　　　　　　↓ ５．「Web用保存ウィザード」（保存形式の選択）ダイアログが表示されるので，ファイル形式を選択して「次へ」をクリックする。 　　　　　　　↓ ６．「Web用保存ウィザード」（GIF属性の設定）ダイアログが表示されるので，内容を確認しそのまま「次へ」をクリックする。 　　　　　　　↓ ７．「Web用保存ウィザード」（保存方法の選択）ダイアログが表示されるので，３つの選択肢の中から保存先を選択して「完了」をクリックする。 　　　　　　　↓ ８．ホームページビルダーに戻り，画像が挿入されたことを確認する。 　　　　　　　↓ 　　　　　　　↓ ９．メニューバーから，「ファイル」→「アプリケーションの終了」を選択する。 　　　　　　　↓ 10．ページのタイトル，背景色，文字色を設定する。また，ロゴを入力する。 ここで作ったページを見る←クリック