はじめに

本書をお読みいただく前に

ひと目でわかる本書の読み方

本書で作ったサンプルホームページ

CHAPTER1

ホームページのしくみ

• 1-1　ホームページは見るだけじゃなく作って楽しもう
  • 1　ホームページはあなたの情報発信基地
  • 2　内容なんて難しく考えなくてもいい
• 1-2　ホームページはこういうふうにできている
  • 1　ホームページの正体
  • 2　ホームページは文字やイラストの集合体
  • 3　作ったページをインターネットに公開するには
• 1-3　自分のホームページを持つのに必要なもの
  • 1　無料ホームページサービスを利用しよう
  • 2　必要なソフト

CHAPTER2

ホームページ・ビルダーを使う準備

• 2-1　ホームページ・ビルダーの機能を知ろう
  • 1　ホームページ・ビルダーでできるあんなことこんなこと
  • 2　ホームページ・ビルダーに付属しているソフト
• 2-2　ホームページ・ビルダーV9の新機能でこんなことができる
  • 1　プロ並みのホームページが作れるスタイリッシュエフェクト機能
  • 2　フォトギャラリーが簡単に作れるWebフォトギャラリー
  • 3　面倒な表のアレンジが簡単になった
  • 4　そのほかの新機能でできること
• 2-3　ホームページ・ビルダーのセットアップ
  • 1　セットアップの手順
• 2-4　ホームページ・ビルダーの起動から終了までをやってみよう
  • 1　ホームページ・ビルダーの起動手順
  • 2　ホームページ・ビルダーを終了する
• 2-5　ホームページ・ビルダーの編集スタイルと画面
  • 1　ホームページ・ビルダーの編集スタイル
  • 2　ホームページ・ビルダーV9「スタンダード」スタイルの基本画面
  • 3　ホームページ・ビルダーのページ編集画面の表示切り替え
• 2-6　ウェブアートデザイナーの使い方を覚えよう
  • 1　ウェブアートデザイナーの起動手順
  • 2　GIFでイラストやロゴ保存する
  • 3　JPEGで写真を保存する

CHAPTER3

ホームページを作成してみよう

• 3-1　どんなホームページにするか設計図を作ろう
  • 1　テーマとメインになる内容を考える
  • 2　要素を集める
  • 3　サブページを決める
  • 4　ホームページの階層を決めておこう
  • 5　ページ作成の流れ
• 3-2　新しいページを作成してみよう【白紙ページから自分で作成】
  • 1　サイトの作成
  • 2　トップページの作成
  • 3　サブページの作成
• 3-3　新しいページを作成してみよう【サンプルから手軽に作成】
  • 1　サンプルから新しいページを作成
• 3-4　新しいページを作成してみよう【デザインテンプレートから作成】
  • 1　デザインテンプレートから新しいページを作成
• 3-5　文字を入力して色と大きさ，配置する場所を決めよう
  • 1　文字の入力
  • 2　文字の大きさを変えるには
  • 3　文字の色を変えるには
• 3-6　イラストや写真(画像ファイル)を挿入してみよう
  • 1　ファイルから挿入する
  • 2　ホームページ・ビルダー付属の写真素材を挿入する
  • 3　ホームページ・ビルダー付属のアイコンやロゴを挿入する
• 3-7　ページのイメージに合う背景と文字色を決めよう
  • 1　背景をサンプルから選ぶ
  • 2　背景に色を入れる
• 3-8　ページの顔になる目立つロゴを作ろう
  • 1　ロゴの作成
• 3-9　レイアウトを整えてページを見やすくしよう
  • 1　テキストの位置揃え
  • 2　オブジェクトの位置揃え
  • 3　複数の要素の配置を揃えよう
  • 4　水平線で区切ってみよう
• 3-10　作成したページ(HTMLファイル)を保存しよう
  • 1　ページに名前を付ける
  • 2　トップページの保存
  • 3　サブページの保存
• 3-11　話題別・目的別のサブページへ飛べるようにしよう
  • 1　ロゴや文字にリンクを設定
• 3-12　作成したページを編集・更新するために開く
  • 1　ページを開く
• 3-13　いらないファイルを削除する
  • 1　使っていないファイルの削除
  • 2　使っているファイルの削除

CHAPTER4

友だちに自慢できるホームページの作り方

• 4-1　画像のまわりに影をつけて奥行きのあるページに見せよう
• 4-2　画像を切り抜いて変化のある楽しいレイアウトに
• 4-3　画像のサイズを小さくしてページを速く表示させよう
• 4-4　ぼかし画像やセピア色効果でセンスいいね，と言わせよう
• 4-5　画像を補正して明るくくっきりあかぬけた写真に見せよう
• 4-6　タイトルロゴはページの顔 目立つロゴで印象づけよう
• 4-7　1文字ずつ現れるロゴで注目を集めよう
• 4-8　思わずクリックしたくなる変化するロゴを作ろう
• 4-9　ロゴの縦横サイズを揃えてすっきり気持ちいいページに
• 4-10　ロゴをポイントすると写真が現れる仕掛けをしよう
• 4-11　素材集のアイコンをアレンジしてわがもの顔で使おう
• 4-12　アニメーションを作って動きのあるページにしよう
• 4-13　見やすさが評判になるギャラリーページを作ろう
• 4-14　画像の横に文字を入れてグラビア雑誌風に演出しよう
• 4-15　センスのある見やすい表組を作ろう
• 4-16　表組を使って整ったレイアウトにしよう
• 4-17　縦書きのカルタ・俳句ページを作ろう
• 4-18　予想できない画像の表示でびっくりさせよう
• 4-19　画像や文字を自動的に変化させて劇的効果を狙おう
• 4-20　まとめて見るのに親切な目次のフレーム付きページを作ろう
• 4-21　行間を空けて長いテキストを読みやすくしよう
• 4-22　アクセスマップを入れて役立つページにランクアップ
• 4-23　外部サイトへのリンクで世界を広げよう
• 4-24　ビデオクリップでダイナミックなページ作り
• 4-25　インパクト満点，疑似3D画像で友だちを感心させよう
• 4-26　360゜見渡せるパノラマ画像で臨場感を演出しよう
• 4-27　エクセルで作ったグラフを取り込もう
• 4-28　携帯で見られるギャラリーページを作ろう
• 4-29　ホームページでおこづかい稼ぎをしよう

CHAPTER5

交流の輪が広がるホームページにしよう

• 5-1　ブログ（Web日記）を作って身近な出来事を伝えよう
• 5-2　訪問者からメールをもらえるリンクを設定しよう
• 5-3　掲示板を設置して訪れた人と交流しよう
• 5-4　今日は何人見てくれたかな　アクセスカウンタを付けよう
• 5-5　パスワード付きリンクを設定して会員専用ページを作ろう
• 5-6　意外な反応に盛り上がるアンケートページを作ろう

CHAPTER6

ホームページの公開と更新

• 6-1　ホームページ公開のための準備をしよう
  • 1　プロバイダへホームページサービスを申し込む
• 6-2　公開前にホームページの最終チェックをしよう
  • 1　［まるごとチェック］を行う
  • 2　エラーを修正する
• 6-3　FTP接続の設定をしてサーバに転送できるようにする
  • 1　FTPの設定
• 6-4　待望のホームページ公開! サーバへ転送しよう
  • 1　ホームページ全体を転送する
• 6-5　ホームページは鮮度が命，こまめに更新しよう
  • 1　更新したページだけを転送する
  • 2　サーバからファイルをダウンロードしたい

CHAPTER7

オリジナルの写真やビデオ，音声の取り込み方

• 7-1　写真画像をデジタルカメラから取り込む方法
  • 1　デジカメのつなぎ方
  • 2　デジカメ画像の保存法
• 7-2　印刷物をイメージスキャナで取り込む方法
  • 1　スキャナのつなぎ方
  • 2　スキャナ画像の保存法
• 7-3　ビデオ映像をパソコンに取り込む方法
  • 1　ビデオ機材のつなぎ方
  • 2　ビデオ画像の保存法
• 7-4　サウンド(音声・音楽)をパソコンに取り込む方法
  • 1　オーディオ機材のつなぎ方
  • 2　録音の準備
  • 3　録音の手順
• 7-5　写真店でCD-Rに銀塩写真を書き込んでもらう方法
  • 1枚のCDにフィルム5本分を同時記録

CHAPTER8

プロデザイナーのアドバイス

• 8-1　写真をもっとカッコよく魅せるテクニック
  • 1　いちばん見せたい写真を思いきって大きくしてみる
  • 2　写真に大小をつけて変化のある見せ方を工夫しよう
  • 3　素材を生かす背景色を選ぼう
• 8-2　文章を読みやすくしてちゃんと読んでもらう
  • 1　1行の文字数と行間を考えよう
  • 2　読みやすい背景と文字の色にしよう
  • 3　文章に視線をクギ付けにする配色にしよう
• 8-3　まとまりのある，あかぬけたレイアウトとは
  • 1　グリッドで作る論理的なフォーマット
  • 2　複数のページにつながりを持たせよう
  • 3　視線の流れに沿って重要な要素を配置する
  • 4　相性のよい色使いでページをまとめよう

付録

CD-ROM収録ソフトEasy Web Design体験版について

• 付録1　Easy Web Designってどんなソフト？
  • 1　デザインページ作成に秀でたホームページ作成ソフト
  • 2　Easy Web Designはこんなことができる
  • 3　Easy Web Designの製品版
• 付録2　Easy Web Design体験版をインストールしよう
  • 1　体験版インストールの手順
• 付録3　Easy Web Designの基本的な使い方
  • 1　文字を配置する
  • 2　写真を配置する
  • 3　図形を描く

索引