レッスン6：Webサイト／ページをノーコードで作る

このレッスンで学ぶこと

サイトビルダー型ツールの発想と、向く場面・向かない場面を説明できる
テンプレートから始めて、少しずつ育てる組み立て方を理解する
公開までの一般的な流れと、下書きと公開を分けて扱う考え方を身につける
独自ドメインを持つ意味と、扱ううえでの注意点を理解する
検索から見つけてもらうための基本的な工夫を理解する

前のレッスンでは、複数のサービスをつなぐワークフロー自動化型のツールを扱い、つなぐ前に業務そのものを軽くする視点を学びました。このレッスンでは、レッスン1で示した4つの型のうち、まだ扱っていなかった「サイトビルダー型」を取り上げます。名刺代わりの会社紹介ページ、イベントの告知ページ、部署内で使う簡単な案内ページなど、コードを書かずにWeb サイトやページを形にする場面が対象です。

サイトビルダー型の発想

サイトビルダー型のツールは、あらかじめ用意された部品（見出し、文章、画像、ボタンなど）を画面上に配置し、文章や画像を差し替えるだけでWeb ページを組み立てられるようにした仕組みです。ゼロから設計図を描くのではなく、すでに骨組みができている土台に、自分たちの内容を流し込んでいく発想だと捉えると理解しやすくなります。

この発想は、レッスン1で確認した「ノーコードは魔法ではない」という中核メッセージが、そのまま当てはまる領域でもあります。用意された部品の組み合わせで表現できる範囲は驚くほど広い一方で、部品にない独自の動きや、極めて細かいデザインの調整までは踏み込めません。会社や部署の紹介、催しの告知、資料の配布といった、情報を整理して伝えることが目的のページには十分に対応できますが、利用者ごとに表示を大きく出し分けるような複雑な仕組みを求める場合は、別の型のツールや専門的な開発を検討する場面に入っていきます。

💡 ポイント サイトビルダー型が向くのは「情報を整理して伝える」ページです。会員が自分の情報を登録して管理する、複雑な検索条件で商品を絞り込むといった、レッスン3や4で扱ったデータの持ち方が本格的に絡む仕組みになるほど、サイトビルダー型だけでは手が届きにくくなります。

テンプレートから始める組み立て方

サイトビルダー型のツールを使うとき、まっさらな画面から部品を1つずつ置いていく方法もありますが、多くの場合、あらかじめ用途別に組まれた「テンプレート」を選ぶところから始めます。テンプレートとは、見出し・文章・画像の配置があらかじめ決まった、ページのひな型のことです。

テンプレートから始めることには、2つの利点があります。1つ目は、配置の判断に悩む時間を大きく減らせる点です。会社紹介向け、イベント告知向けといった目的別のひな型を選べば、どこに何を書けばよいかがすでに決まっています。2つ目は、レッスン1の中核メッセージにあった「小さく作って、使いながら直す」という進め方と相性がよい点です。テンプレートに自分たちの文章と画像を当てはめれば、短い時間でひとまず公開できる形が整い、そこから少しずつ手直しを重ねられます。

テンプレートを選ぶときは、次の観点で確認すると、あとからの調整が少なくなります。

伝えたい情報の種類（文章中心か、画像中心か、一覧で見せたい情報が多いか）に合っているか
ページの数はいくつ必要か（1枚で足りるのか、複数ページに分けて案内するのか）
見せたい順番と、テンプレートの構成が大きくずれていないか

📝 補足 テンプレートはあくまで出発点です。文章の量や伝えたい内容がテンプレートの想定と大きく違う場合は、無理に当てはめず、構成の近い別のテンプレートに乗り換えたほうが、結果として手直しの回数が減ります。

画面幅への対応はツールに任せる領域

パソコンで見たときとスマートフォンで見たときとで、文字や画像の大きさ、並び方を調整する作業は、Web ページ作りにおいて欠かせない工程です。サイトビルダー型のツールの多くは、この調整を自動で、あるいはごく簡単な設定だけで行える仕組みを備えており、作り手が細かい数値を1つずつ指定する必要はほとんどありません。

この調整をどのような仕組みで実現しているかという技術的な詳しい話は、Web制作の技術面を扱う入門コースの領域になるため、本レッスンでは踏み込みません。本コースで押さえておきたいのは、「画面の大きさに応じた見え方の調整は、多くの場合ツール側が引き受けてくれる範囲である」という位置づけだけです。作り手は、伝えたい内容と、ページ全体の構成に意識を向ければ十分です。

ページ構成の基本

複数のページを持つWeb サイトを組み立てるときは、各ページに共通して表示する部分と、ページごとに異なる部分を分けて考えると、全体の見通しがよくなります。

多くのサイトビルダー型ツールでは、サイトの上部に置く案内（会社名やメニューなど）と、下部に置く連絡先や関連ページへのリンクといった「共通パーツ」を、サイト全体で1か所だけ設定すれば、すべてのページに自動で反映される仕組みが用意されています。ページを追加するたびに上部と下部を手作業で作り直す必要はありません。これは、レッスン3で学んだ「同じ情報を重複して持たせない」という考え方が、データではなくページ構成の面で表れた例だと捉えられます。

一方、ページごとに異なる本文の部分は、それぞれのページで個別に組み立てます。ページ数が増えてきたら、「訪れた人が、目的の情報にたどり着くまでに、いくつのページをたどる必要があるか」という視点でメニューの構成を見直すと、使いやすさが保たれます。

🔰 初学者の方へ ページを作り始めたばかりの頃は、ページ数を増やすことに気を取られがちです。ですが、訪れる人にとって大切なのは、ページの数ではなく「知りたい情報にすぐたどり着けるか」です。まずは少ないページ数で構成し、必要になった時点で増やす進め方をおすすめします。

公開までの流れと運用

サイトビルダー型のツールでは、作業中の内容がすぐに一般に公開されるわけではありません。多くの場合、作業中の状態である「下書き」と、実際に一般の人が見られる「公開」という2つの状態が分けて扱われます。

下書きの状態では、内容を確認しながら何度でも書き直せます。仕上がりを見ながら、文章の言い回しや画像の配置を調整し、準備が整った時点で公開の操作を行う、という流れが基本です。下書きと公開の2段階に分けられていることで、作業の途中経過を誤って外部に見せてしまう心配をせずに、じっくり作り込めます。

公開した後も、Web ページは作って終わりではありません。案内する内容が変わったとき、催しの日程が近づいたときなど、公開後も継続して手直しをする前提で運用します。ここでもレッスン7で詳しく扱う「作った本人以外にも、更新できる人がいるか」という視点が関わってきます。担当者が1人しか更新の手順を知らない状態が続くと、その人が忙しくなったり異動したりした瞬間に、情報が古いまま止まってしまいます。

⚠️ 注意 公開した直後は最新の情報でも、時間が経てば内容は古くなります。「いつ、誰が見直すか」をあらかじめ決めておかないと、催しが終わったのに告知が残ったままになる、といった状態に気づかないまま放置されがちです。

独自ドメインという選択

サイトビルダー型のツールを使い始めると、多くの場合、ツールがあらかじめ用意した仮のアドレスで公開できます。まず形にして試す段階では、この仮のアドレスで十分です。

一方、社外に案内する、名刺や資料に載せる、といった段階に進むと、「独自ドメイン」を持つかどうかを検討する場面が出てきます。独自ドメインとは、会社やサービス専用に取得する、覚えやすく信頼感のあるアドレスのことです。仮のアドレスのままでは、見る人にとって「本当にこの会社のページなのか」がわかりにくく、名刺や印刷物に載せたときの見た目も長くなりがちです。

独自ドメインを取得して使う手続きは、多くのサイトビルダー型ツールの中で完結できるようになっています。ただし、取得した独自ドメインには、多くの場合、一定の期間ごとに更新の手続きが必要という性質があります。更新を忘れると、そのアドレスが使えなくなり、案内していた先が急に開けなくなるという事態につながります。独自ドメインを持ったら、更新の時期を忘れない仕組み（担当者のカレンダーに入れておく、更新の通知を見落とさないようにするなど）も、あわせて用意しておく必要があります。

📖 もっと詳しく 独自ドメインの取得や更新の手続き、費用の仕組みは、利用するツールや取得先によって細かく異なります。実際に検討する段階になったら、利用しているツールの案内で最新の条件を確認する習慣を持ちましょう。

検索から見つけてもらうための基本

Web サイトを作る目的の多くは、誰かに見つけてもらい、内容を読んでもらうことです。検索エンジンにどう表示されるかを細かく作り込む専門的な技法は本レッスンの範囲を超えますが、サイトビルダー型のツールを使う段階で押さえておきたい基本は、それほど多くありません。

1つ目は、ページごとに「タイトル」と「説明文」を設定することです。検索結果の一覧に表示される短い文章で、そのページに何が書かれているかを、読む人にひと目で伝える役割を持ちます。テンプレートによっては、あらかじめ仮の文言が入っていることもありますが、ページの内容に合わせて具体的な言葉に置き換えておくと、検索結果で見つけてもらいやすくなります。

2つ目は、見出しに情報の順序をきちんと反映させることです。レッスン内で扱ってきた「全体から部分へ」という考え方は、ここでも生きてきます。ページの主題を表す大きな見出しの下に、内容ごとの小見出しを整理して配置しておくと、訪れた人にとっても、検索エンジンにとっても、ページの構造が把握しやすくなります。

⚠️ 注意 「検索されやすくするために、関係のある言葉を本文にたくさん詰め込む」という考え方は、古くから語られる誤解の1つです。読む人にとって不自然な文章になれば、かえって内容が伝わりにくくなります。タイトル・説明文・見出しを、実際の内容に沿って正直に書くことが、遠回りのようで最も確実な基本です。

まとめ

このレッスンでは、以下のことを学びました。

サイトビルダー型は、用意された部品を組み合わせて情報を整理して伝えるページに向いている
テンプレートから始めると、配置の判断に悩む時間が減り、小さく作って直す進め方と相性がよい
画面の大きさに応じた見え方の調整は、多くの場合ツール側が引き受けてくれる領域である
共通して表示する部分は1か所で設定し、ページごとの本文は個別に組み立てる
下書きと公開を分け、公開後も継続して手直しする前提で運用する
独自ドメインは信頼感につながる一方、更新を忘れない仕組みもあわせて必要になる
タイトル・説明文・見出しを内容に沿って正直に書くことが、見つけてもらうための基本になる

次のレッスンでは、視点を「作る」から「使い続ける」に切り替え、作った仕組みを止めないための最低限のルールを扱います。

確認クイズ

このレッスンの理解度をチェックしましょう。