はじめに
対象読者
この章は、ホームページ作成をこれから始める方を想定しています。パソコンの基本操作ができれば読み進められます。企業の広報担当や個人の趣味サイト、店舗の紹介ページなど、用途を問わず役立ちます。
この記事の目的
ジャストシステムの「ホームページビルダー」を使って、サイトの作成から公開までをわかりやすく解説します。購入やインストール、ページ編集、デザイン調整、SEO対策、公開時の注意点まで具体的な手順とコツをお伝えします。
本シリーズの構成
全10章で段階的に説明します。まず基本を理解し、その後に実践的な操作や活用法を学べます。各章は独立して読めますが、順に読むと操作がスムーズに身につきます。
読み方のポイント
専門用語はできるだけ避け、図や例を交えて説明します。実際に手を動かしながら進めると理解が早まります。疑問が出たら、該当の章に戻って確認してください。
ホームページビルダーとは？まだ使える理由
ホームページビルダーとは
ホームページビルダーは、初心者でも手軽にWebサイトを作れる国産の作成ソフトです。テンプレートを選び、ドラッグ＆ドロップで要素を配置するだけでページを作成できます。HTMLやCSSの専門知識がなくても操作できます。
主な特徴
- 豊富なテンプレート：業種別や目的別に用意されています。飲食店のメニューや個人のポートフォリオなどに使えます。
- 直感的な操作：文字や画像を画面上でそのまま編集できます。コード編集は必要に応じて行えます。
- オフライン編集と公開機能：自分のパソコンで編集し、FTPでサーバーにアップロードして公開します。
まだ使える理由
- 継続的なバージョンアップがあり、最新機能や互換性が保たれています。
- 初期費用や学習コストを抑えられ、小規模ビジネスや個人利用に適します。
- レイアウト調整や画像配置が簡単で、短時間で見映えの良いサイトが作れます。
どんな人に向くか
- 初めてサイトを作る方、作業を効率化したい中小事業者、更新を頻繁に行わない個人に向きます。
購入・インストールの流れ
購入前の準備
購入前に用途（個人・法人・商用）と対応OS（Windowsのバージョン）を確認します。ライセンス形態（永続版・サブスク）と価格を比べると後で困りません。
公式サイトでの購入手順
- メーカーの公式サイトにアクセスします。偽サイトに注意してください。
- 欲しい製品ページでエディションを選び、カートに入れます。
- 支払い方法を選び、決済を完了します。クレジットカード、コンビニ決済、請求書などが一般的です。
ダウンロードとインストーラー起動
購入完了メールにダウンロードリンクとライセンスキーが届きます。リンクからインストーラーを保存し、ダブルクリックで起動します。
インストールの進め方（画面の指示に従う）
インストーラーは日本語表示で案内します。使用許諾に同意し、インストール先や追加コンポーネントを確認して「次へ」を押すだけで済みます。既定設定で問題ない場合はそのまま進めると早く終わります。
ライセンス認証と初回起動
インストール後にライセンスキーを入力して認証します。インターネット接続が必要な場合があります。認証が完了したらソフトを起動し、初期設定ウィザードに従って基本情報を入力します。
よくあるトラブルと対処法
- ダウンロードが途中で止まる：再度試すか別のブラウザを使います。
- インストールできない：管理者権限で実行してください。
- ライセンス認証が通らない：キーをコピー＆ペーストで入力し、メーカーサポートに問い合わせます。
サイトの新規作成・基本設定
準備と起動
アプリを起動し、メニューから「ファイル」→「新規作成」を選びます。画面が切り替わったら、新しいサイトの作成画面が表示されます。
テンプレート選び（業種・目的に合わせる）
業種や用途（会社案内、ブログ、ECなど）に合ったテンプレートを選びます。テンプレートはレイアウトと初期コンテンツを決めるので、後での手直しが少ないものを選ぶと作業が楽になります。
サイト情報の入力
サイト名、サイトURL（ドメインまたはサブフォルダ）、管理者メールなど基本情報を入力します。例：サイト名「山田商店」、URL「yamada-shop.com」など。これらはサイトの表示やリンクに反映されます。
メタ情報とSEOの基本設定
メタタイトル（ページタイトル）とメタディスクリプション（概要）は検索結果に表示されます。短く分かりやすく、主なキーワードを含めると良いです。例：メタタイトル「山田商店｜手作り家具の販売」、メタディスクリプション「東京発・手作り家具の通販。注文方法や納期を詳しく紹介します。」
保存と確認
設定を保存し、プレビューで表示を確認します。URLやタイトルに誤りがないか、スマホ表示もチェックしてください。問題なければ次のページ作成に進みます。
ページの作成・編集手順
新しいページを作る
「挿入」→「ページ」を選び、新規ページを作ります。空白かテンプレートを選べます。テンプレートは見た目が整っているので、初めての方はテンプレートから始めると楽です。
テキストの配置・編集
テキストブロックをドラッグ＆ドロップで置き、ダブルクリックして編集します。文字サイズや太字、リンク挿入は上に出るツールバーで操作します。見出しはh1やh2で階層を作ると分かりやすくなります。
画像・動画の挿入
画像はパソコンからアップロードかメディアライブラリから選びます。ドラッグで大きさを調整し、代替テキスト（Alt）を必ず入れてください。動画はYouTubeなどのURLで埋め込むか、ファイルをアップロードして配置します。
リンク設定（サイト内外）
テキストや画像を選びリンクアイコンを押します。サイト内の別ページは一覧から選び、外部はURLを貼ります。別タブで開く設定も簡単にできます。ページ内リンク（アンカー）も同様に設定可能です。
レイアウトと小技
列（カラム）やスペーサーで整列します。要素の重なりは前面・背面で調整できます。操作はドラッグ中心なので直感的です。元に戻す／やり直す、複製や削除もショートカットで素早く行えます。
ページ設定とプレビュー
ページのタイトルやファイル名（URLの末尾）、公開設定を決めます。プレビューでスマホ表示も確認して、見栄えを整えてから保存してください。
デザインのカスタマイズ
概要
テンプレートの色やフォントを変えるだけで、サイトの印象を大きく変えられます。ここでは初心者でもできる具体的な手順と注意点をわかりやすく説明します。
色とフォントの変更
- テンプレートの「デザイン設定」を開き、配色や見出し／本文のフォントを選びます。例：見出しは濃い色、本文は濃淡の差が小さい落ち着いた色にすると読みやすくなります。
- フォントはシステムフォントやウェブフォントを選べます。日本語は游ゴシックやNoto Sansが見やすい例です。
- 色はアクセントカラーを1〜2色に絞ると統一感が出ます。
画像とレイアウトの調整
- 画像は表示サイズに合わせてリサイズします（例：横幅1200pxなど）。圧縮してファイルサイズを減らすと表示が速くなります。
- レイアウトはカラム幅や余白を調整して要素を整えます。余白を適度に取ると読みやすくなります。
CSS編集の基本
- カスタムCSSを使うと細かなデザイン調整が可能です。例：リンク色を変えるなら a { color:#1a73e8; }
- 編集前に必ずバックアップを作り、少しずつ変更して表示を確認してください。
表示速度を意識した調整
- 画像はWebPや圧縮形式を使い、必要以上に大きな画像を避けます。
- 背景に大きな画像を使う場合はサイズを下げるか、表示を分けて読み込みます（遅延読み込みがある場合は活用してください）。
デザインの保存と再利用
- 作ったデザインはテンプレートとして保存できる場合は保存しておきます。トップページや下層で同じスタイルを使い回すと統一感が保てます。
編集・保存・公開の流れ
編集の基本
ページは目的のページを開いて直接編集できます。テキストを入力し、画像を差し替え、レイアウトを調整する操作は画面上で完結します。操作は直感的で、初めてでも扱いやすいです。
保存について
編集内容は随時保存してください。自動保存機能がある場合は有効にしておくと安心です。保存ボタンを押すとローカルプロジェクトに反映され、万一の障害から復元しやすくなります。
サイト全体の確認
「サイト」メニューのビジュアルサイトビューを開くと、ページ構成や階層を一覧で確認できます。ここでリンク切れや並び順の誤りを見つけやすくなります。
新規ページの追加・既存ページの編集
新規ページは「ページ追加」などのボタンから作成します。テンプレートを選び、必要な項目を入力して保存します。既存ページは該当ページを開き、直接編集して上書き保存します。
プレビューでの最終確認
公開前にプレビュー機能で表示を確認してください。スマホ表示やPC表示を切り替えて実機と近い見え方をチェックします。
公開（FTP）手順
- FTP設定でホスト、ユーザー名、パスワード、公開先フォルダ（例:/public_html）を入力します。2. 接続テストで問題がないか確かめます。3. 「公開」ボタンでファイルをアップロードします。接続方式（FTP/FTPS/SFTP）は契約先に合わせて選びます。
公開後の更新
修正は編集→保存→再公開の流れです。頻繁に更新する場合は差分だけをアップロードすると時間を節約できます。公開後はブラウザのキャッシュをクリアして表示を確認してください。
SEO対策や便利機能
タイトルとキャッチフレーズ（メタ情報）の設定
ホームページビルダーの作成画面でページごとのタイトル（title）とキャッチフレーズ（description）を入力できます。短く具体的なタイトル、120〜160字程度の説明文を心がけると検索に有利です。例：『地元のパン屋｜毎朝焼きたての手作りパン』。
基本情報とメタタグ入力のポイント
キーワードは無理に詰め込まず、主な語句を1〜2個だけ入れます。画像には代替テキスト（alt）を設定し、URLは日本語より英数字のスラッグにすると読みやすくなります。canonicalやrobotsの設定がある場合は重複ページ対策に使います。
コンテンツ作成のコツ
見出し（H1〜H3）を分かりやすく使い、最初の段落で重要な語句を入れます。本文は読みやすさを優先し、箇条書きや短い段落を多用してください。内部リンクで関連ページへ誘導すると滞在時間が伸びます。
便利機能の活用法
プレビューやモバイル表示確認を必ず行ってください。サイトマップ自動生成、SNS共有ボタン、アクセス解析（Google Analyticsなど）連携機能があれば導入しましょう。テンプレート内にあるSEOチェックやチュートリアルを利用すると設定漏れを防げます。
実践チェックリスト
- ページ毎にtitleとdescriptionを設定
- 画像にaltを記入
- URLスラッグを整える
- モバイル表示を確認
- サイトマップと解析連携を有効にする
上記を順に行えば、ホームページビルダーでも十分なSEO対策が可能です。操作に迷ったらヘルプやチュートリアルを参照してください。
ホームページビルダー利用時の注意点
公式テンプレートから始める利点
最初は公式テンプレートを使うと失敗を避けられます。見た目や基本構造が整っているため、レイアウト崩れや表示の不具合が起きにくく、作業時間も短縮できます。まずはテンプレートを元に文字や画像を差し替えるだけで公開できる状態を目指しましょう。
HTML/CSSを編集するときの注意
自分でHTMLやCSSを編集する場合は必ずバックアップを取りましょう。編集前にファイルをコピーしておく、あるいはバージョン管理のように日付付きで保存するだけで復元が簡単になります。小さな変更でも表示が崩れることがあるので、変更は少しずつ行い、こまめに確認してください。
プレビューと動作確認の徹底
公開前にプレビュー機能で必ず表示を確認します。パソコンだけでなくスマートフォンやタブレットでも見て、文字サイズや画像の配置、ボタンの押しやすさをチェックしてください。また、リンク切れやフォーム送信の動作も実際に試してください。
速度・画像・外部コードの扱い
画像は適切なサイズに圧縮しておきます。重い画像や外部の埋め込みコードはページ表示を遅くします。外部サービスを使う場合は動作保証があるか確認し、必要なら代替手段を用意してください。
セキュリティと法的配慮
公開する前にパスワード設定やSSLの有無を確認します。お問い合わせフォームを設置する場合は迷惑メール対策を入れてください。また、画像や文章の著作権を確認し、個人情報を扱う場合はプライバシーポリシーを用意しましょう。
よくあるトラブルと対処法
- 表示崩れ：キャッシュをクリアし、別のブラウザで確認します。
- 画像が表示されない：パスやファイル名を確認し、再アップロードします。
- フォームが送信できない：受信設定やスパムブロックをチェックします。
編集後は必ずバックアップとプレビューを習慣にして、安全に公開してください。
まとめ
要点の振り返り
ホームページビルダーは、初心者でも手順に沿って操作すれば短時間でホームページを作れます。テンプレートやドラッグ操作の編集機能が揃い、SEO設定も基本機能で対応できます。公開までの流れが分かりやすく、まずは小さなサイトから始めると安心です。
実践のコツ
- テンプレートは目的に合ったものを選ぶ（店舗ならメニューや地図があるもの）。
- 1ページごとに内容を完成させてから次に進むと作業が進みます。
- スマホ表示を必ず確認する（多くの訪問者がスマホを使います）。
- 重要なページは「お問い合わせ」「会社情報」「利用規約」などを揃える。
安全対策と運用
- 作業前にバックアップを取る習慣をつける。
- パスワードは強化し、ソフトは適宜アップデートする。
- 公開後はアクセスや表示を定期チェックし、必要に応じて改善する。
困ったときの対応
公式チュートリアルやヘルプ、ユーザーフォーラムをまず確認してください。トラブルが続く場合はサポート窓口に問い合わせると解決が早いです。
最後に、完璧を目指しすぎずまず公開して改善を重ねる姿勢が成功の近道です。まずは一歩踏み出してみてください。
