ウェブサイトの作成方法

この記事では、ウェブサイトビルダーを使用してウェブサイトを作成する方法について説明します。

目次：

• 新しいウェブサイトを作成する
• エディターの概要
• ページの管理
• ページの公開
• ポップアップの使用
• サイト全体のスタイル設定
• 設定
• ウェブサイト言語の切り替え
• 多言語ウェブサイトの構築
• デバイスプレビュー
• ドメインの使用ルール

systeme.ioのウェブサイト機能を使用すると、1つのインターフェースから複数ページのウェブサイトを構築・管理できます。

新しいウェブサイトを作成する

開始するには、メインメニューのサイト(1)タブに移動し、ウェブサイト(2)をクリックします。

ウェブサイト一覧ページで、作成(3)をクリックします。

表示されるポップアップで、ウェブサイトに関する次の詳細を入力します:

• 名前：ウェブサイトの名前を入力します(4)
• ドメイン名：使用するドメインを選択します(5)
• ホームページのURLパス：ドメインを選択すると、このフィールドが自動的に表示されます。ホームページのURLパスを指定するために使用します(6)
• 言語：ウェブサイトのメイン言語を選択します(7)

すべての必須フィールドに入力したら、保存(8)をクリックしてウェブサイトを作成します。

ウェブサイトの詳細を保存すると、ホームページ用のテンプレートを選択するように求めるウィンドウが開きます。

次のいずれかのオプションを選択できます：

• テンプレートを選択：既製のデザインの1つを選択してカスタマイズします。
• ゼロから構築： 白紙のキャンバスから始めて、すべてを手動でデザインします。

オプションを選択したら、保存(9)をクリックして続行します。

選択したテンプレートを保存すると、ウェブサイトエディターにリダイレクトされます。

エディターの概要

エディターには、ウェブサイトを構築・管理するために使用する4つの主要なタブがあります：

• ページ – ウウェブサイトの構成を管理し、ページ間の切り替え、新しいページの作成、ページ設定へのアクセスを行います。
• ポップアップ – ウェブサイト用のポップアップを作成・管理します。
• スタイル – フォント、色、ボタンなど、サイト全体に共通するデザイン設定を行います。
• 設定 – 言語や一般設定など、ウェブサイト全体に関するオプションを設定します。

ページの管理

ページタブでは、ウェブサイトの構成を管理します。

ここでは、すべてのページを表示 (1) したり、ページを切り替えたり、(+)作成 (2) をクリックして新しいページを作成できます。

一覧から任意のページをクリックすると、右側のエディターエリアにそのページが表示されます。

そのページの編集を開始するには、エディターエリア内を直接クリックします。

これによりページエディターパネルが開き、ページをカスタマイズするために使用できるすべての要素が表示されます：

エディタの左上にあるページをクリックすることで、いつでもページリストに戻ることができます。

未保存の変更がある状態でページを切り替えたり、エディターを離れようとすると、確認用のポップアップが表示されます：

注記：ウェブサイトエディターは、セールスファネル機能で使用されているページビルダーと同じものを使用しているため、すべての編集ツールは同じ操作方法で利用できます。

ページ設定

特定のページの設定にアクセスするには、ページ名の横にある3点メニューをクリックします。

このメニューには次のオプションが表示されます：

• 設定
• 非公開にする
• 削除する

注記：ホームページは削除できません。削除オプションが表示されるのは、セカンダリページのみです。

設定をクリックすると、次のセクションを含むページ設定のポップアップが開きます：

一般設定

ここでは以下を編集できます：

• ページ名
• URLパス

SEO

このセクションでは、検索エンジン上でページがどのように表示されるかを設定します。

タイトル、説明、キーワード、著者、画像を設定でき、検索結果での表示プレビューも確認できます。

また、このページを検索エンジンから非表示にし、検索結果に表示されないようにすることも可能です。

言語

このタブは、ページの言語別バージョンを作成するために使用されます。

このページの言語固有のバージョンを複製をクリックすると、選択した言語用のページのコピーが作成され、コンテンツを手動で翻訳できるようになります。

高度な設定（上級者向け）

このタブでは、このページ専用のカスタムトラッキングコードを追加できます。

検証済みのスクリプトのみを使用してください。サポートされていないコードは、ページのパフォーマンスや動作に影響を与える可能性があります。

ページの公開

新しく作成されたページは、デフォルトで下書きモードとして追加されます。

ページを公開するには、3点メニューをクリックし、公開を選択します。

注記：同じ方法で、ページを非公開にすることもできます。

ポップアップの使用

ポップアップタブで + 作成 ボタンをクリックすると、新しいポップアップを作成できます。

ポップアップがエディターエリアに表示されたら、それをクリックしてカスタマイズを開始します。

編集パネルが画面左側に開き、利用可能なすべての設定が表示されます。

ページポップアップとウェブサイトポップアップ

各ポップアップは、次のいずれかとして設定できます：

• ページポップアップ：編集中のページでのみ表示されます。
• ウェブサイトポップアップ：ウェブサイト内のすべてのページに表示されます。

これらのモード間を切り替えるには、地球アイコンをクリックします。

• 地球アイコンが青色の場合、ポップアップはウェブサイトポップアップです。
• 地球アイコンがグレーの場合、ポップアップはページポップアップです。

ポップアップ一覧の上に表示されるステータスラベルは、選択内容に応じて自動的に更新されます：

• ページポップアップ
• ウェブサイトポップアップ

サイト全体のスタイル設定

スタイルタブでは、ウェブサイト全体のページに適用される共通の外観設定を管理します。

次の項目を設定できます：

• タイポグラフィ（見出し、段落）
• カラー（背景、ボタン、リンク）
• ボタン
• フォーム入力欄（余白、角丸、枠線、色）

ここで行った変更は、ウェブサイト全体に共通して適用されます。

設定

設定タブでは、次のようなウェブサイト全体の基本オプションを管理します：

• ウェブサイト名
• ドメイン
• ホームページ
• 言語
• ロゴ

ウェブサイト言語の切り替え

ページタブの上部で、言語ドロップダウンを使用してウェブサイトの言語を切り替えることができます。

別の言語を選択すると、ページリストが更新され、その言語バージョンで使用可能なページが表示されます。

多言語ウェブサイトの構築

ウェブサイト機能は、多言語構成に対応しています。

多言語ウェブサイトを作成するには：

1. 1つの言語でメインウェブサイトを構築します。
2. 各ページで、3点メニューを開き、言語に移動します。
3. 追加したい言語用にページを複製します。
4. ページのドロップダウンで、ウェブサイトの言語を切り替えます。
5. 各ページの翻訳版を手動で編集します。

これにより、各言語で表示されるコンテンツを完全に制御できます。

デバイスプレビュー

任意のページを編集中に、異なるデバイスでの表示をプレビューできます。

右上にあるプレビューツールバーを使用して、次の表示を切り替えます：

• デスクトップ表示
• モバイル縦向き表示
• モバイル横向き表示

これにより、すべての画面サイズでレイアウトが正しく機能しているかを確認できます。

ドメインの使用ルール

ウェブサイトを作成または公開した後にドメインを変更する必要がある場合は、ウェブサイト一覧からこれらの情報を更新できます。

ウェブサイトの設定にアクセスするには：

1. ウェブサイトエディターを終了します。
2. サイト > ウェブサイト に移動します。
3. 一覧から該当するウェブサイトを見つけます。
4. その横にある3点メニューボタンをクリックします
5. 設定を選択します。

これによりウェブサイトを編集のポップアップが開き、次の項目を変更できます：

• ウェブサイト名
• ドメイン名
• ホームページのURLパス

割り当てられているドメインを削除するためにXアイコンをクリックすると、新しいドメインが選択されるまでウェブサイトが無効化されることを知らせる警告が表示されます。