本文へスキップ

LESSON 3 / 7

まずホームページを作ってみよう

完成させるのは、まず自分の端末で開ける1ページです。メーカーを使うだけで公開・契約・課金は発生しません。仕事名・対象者・サービス説明の3項目があれば、相談向け/講座向けの見た目を選び、index.htmlを持ち帰れます。

今日持ち帰るもの
自分で入力したindex.htmlと、必要なら再編集用の非公開JSON

仕事の準備を考えるための空間・机のイメージ
仕事の準備を表すAI生成イメージ。実際の利用者・資格保有者の事例ではありません。
  1. 1. 仕事を整理対象と届けること
  2. 2. 無料で作る入力・プレビュー
  3. 3. HTMLを保存ここで終えてもOK
  4. 4. 公開を選ぶ保存・無料・有料

作るものと、作らないもの

このメーカーは、文章と見た目を一つの静的HTMLにまとめます。WordPress、会員登録、予約システム、決済、メールの自動送信は作りません。サーバー契約は制作にも保存にも不要です。初回のメーカー表示にはインターネット接続が必要ですが、保存したHTML自体はオフラインで開けます。

3項目を入力し、任意項目を足す

入力欄迷ったときの考え方
仕事・サービス名何をする時間かが伝わる名前。肩書を盛らない
届けたい対象者第2講で選んだ、相手が置かれている状況
サービスの説明当日することと持ち帰れるもの。成果を保証しない
自己紹介・資格確認できる事実だけ。空欄なら出力しない
料金・連絡先決まった項目だけ。未入力は無料と表示されない

第三者の相談内容、病歴、勤務先の秘密は入力しないでください。入力は端末内で処理し、自動保存しません。タブを閉じると失われるため、途中で止める場合は下書きJSONを保存します。

見た目を選び、二つの幅で確認する

相談向けと講座向けでは章のラベルが変わります。配色はプラム・セージ・ニュートラルから選びます。PC幅とスマートフォン幅を切り替え、長い仕事名、段落、メニュー、連絡先の順に読み返してください。プレビューは公開ではなく、安全のため中の連絡リンクは操作できません。保存したHTMLで実際のリンクを確認します。

HTMLとJSONを、用途別に保存する

ファイルできること注意点
index.htmlブラウザで表示する。公開先へ置くメーカーへ読み戻して再編集する形式ではない
small-business-draft.private.jsonこのメーカーへ読み込み、入力を再編集する氏名・連絡先を含み得る。公開サーバーへ置かない

「下書きHTMLを保存」なら検索登録を許可しない設定です。ただしnoindexはパスワードではなく、URLを知る人の閲覧を防ぎません。公開する前に、公開用の確認と検索登録の選択を行います。HTML保存ボタンはダウンロード開始を案内するもので、端末への保存完了を保証するものではありません。

保存したファイルを自分で開く

  • 端末のダウンロード一覧からindex.htmlを探す。
  • PCはブラウザで開き、スマホはファイルアプリから対応ブラウザで表示する。端末によってプレビューや保存の操作は異なる。
  • 通信を切っても本文・配色が表示されるか確認する。連絡先の外部ページは通信が必要。
  • 再編集したい人はJSONも保存し、別の場所へ保管する。

特集トップへ戻る