Systeme.ioでウェブサイトを作る方法は2つある（本記事執筆時点）
本記事執筆時点で、Systeme.ioでウェブサイトを作る方法は、「ウェブサイト」と「ブログ」の2つがあります。
「ブログ」機能はWordPressをイメージしてもらうといいです。
「ウェブサイト」機能は最近実装されたところで、HTMLサイトのように静的な情報を載せておくのに適していますが、問い合わせページがうまく稼働しないなど、まだ今後洗練されていく余地があります。つまり、仕様が変わる可能性があるのです。
参考：https://nakanokotoko.systeme.io/
特にウェブサイトに必ず置きたい「問い合わせページ」を簡単に実装できるのは、現時点ではブログ機能なので、本記事では、ブログ機能を使ってウェブサイトもブログも構築する方法をお伝えします。
参考：Systeme.ioの今後の機能改善・追加のロードマップ（「website」で検索するとわかる）
理論編：Systeme.ioのブログのデフォルトのページ構成を学ぶ
本記事執筆時点の、Systeme.ioでブログを作成すると表示されるデフォルトのページ構成は次のようになっています。WordPressブログで例えると「固定ページ」にあたる部分です。
- Home page
- Post list page
- Search
- About
- Contact
ページ名を書き換えて使うことも可能です。また、新しいページを追加可能です。ページ名とURLパスを入力すると作成できます。
デフォルトのページ構成を最大限活用するなら、次のようになりますね。
- Home page：トップページ
- Post list page：ブログ一覧ページ
- Search：ブログ内検索ページ
- About：私について・私たちについて
- Contact：お問い合わせ
この記事で作るページ構成
この記事では、スモールビジネス・フリーランス等の個人事業主のためのウェブサイト兼ブログを構築します。
デフォルトのページ構成を活用しながら、必要なページを追加しましょう。
トップページ：Home page
私について：About
お問い合わせ：Contact
ブログ：Post list page
サイト内検索：Search
追加するページ
- サービス一覧ページ
- 法的ページ：一般的に日本で個人事業主のためのウェブサイトにある方がいいページ
Systeme.ioで作るウェブサイト兼ブログの準備をしよう
では、Systeme.ioでウェブサイト兼ブログを作りましょう。
ページを作り始める前に、作成するページの種類と、URLパスを決めておくとスムーズです。URLパスというのは、WordPressで言う「スラッグ」のようなものです。ドメイン名の次に続く文字列です。
例えば、お問い合わせページなら「https://ドメイン名/contact」など、この「contact」にあたる部分の文字列を決めておきましょう。一般的な文字列を入れておきますが、お好みで書き換えてください。
ワーク：作成するページとURLパスを決めておこう
| デフォルトページ名 | ページ名 | URLパス |
| Home page | トップページ | （デフォルト：空にしておく） |
| About | 私について | about（デフォルト） |
| Contact | お問い合わせ | contact（デフォルト） |
| Post list page | ブログ | posts（デフォルト） |
| Search | サイト内検索 | search（デフォルト） |
| 追加 | サービス一覧 | services |
| 追加 | 利用規約 | terms |
| 追加 | 特商法取引に基づく表記 | specified-commercial-transaction |
| 追加 | プライバシーポリシー | privacy-policy |
| （その他あれば追加してください） | ||
その他業種業態に応じて必要なページがあれば追加してください。
実践！Systeme.ioでウェブサイト兼ブログを作る方法
サイト＞ブログ＞「作成」ボタンをクリック＞「ブログを作成」画面に入力
名前、ドメイン名（初期ドメインのままでよい）、URLパス（空にしておく）、テンプレートを選択して「保存」
できるだけ完成イメージに近いテンプレートを選択するのがおすすめです。文字数や構成を変えると外観がかなり変わってしまうためです。
ブログのページ構成を作る
管理画面のメニューのサイト＞ブログ＞ブログ名をクリック＞ページ に進んで、あらかじめ決めておいた通りに、デフォルトのページを編集します。
- ページ名：各ページ名の三点リーダーから「設定」を選択すると編集可能
- URLパス：デフォルトのURLパスは変更できないので、変更したい場合は三点リーダーから「複製」を選択して、複製した方のページのページ名とURLパスを編集する
Systeme.ioのブログの設定箇所は2つある
- ブログレイアウト：ブログ全体の設定を行うところ
- 投稿レイアウト：いわゆる「記事」のページ構成を行うところ
「ブログレイアウト」からブログ全体の基本設定をする
「ブログレイアウト」をクリックして編集することが可能です。編集が終わったら「保存」して「終了」しましょう。
ここで設定できる項目は主に次の通りです。（本記事執筆時点）
- デフォルトのタイポグラフィ：フォントスタイル、フォントサイズ、リンクの色、テキストの色、配置（左寄せ、中央、右寄せ）
- 見出しのタイポグラフィ：フォントスタイル、フォントサイズ、リンクの色、テキストの色、配置（左寄せ、中央、右寄せ）
- バックグラウンド：背景色、背景画像のアップロードや位置など
- SEO設定
- アフィリエイトバッジを表示・非表示の切り替え（非表示にできるのは有料プランのみ）
Systeme.ioのブログのヘッダーとフッターを編集する
「ブログレイアウト」をクリックするとヘッダーとフッターが編集可能です。デザインが崩れないようにするには、テンプレートの文字数に近い文字数で構成することです。
自由に設定できますが、多くの人が設定する項目は次の通りです。
- メニューを設定する
- ページのURLをリンク設定
- ロゴ画像を入れた場合はロゴ画像にもトップページへのリンクを設定する
編集が終わったら「保存」して「終了」しましょう。
各ページを設定する
該当するページを開いて編集、終わったら「保存」して「終了」します。
各ページを編集していきましょう。WordPressの経験がある方は、WordPressの「固定ページ」にあたるものを編集するとイメージするとわかりやすくなります。
Systeme.ioでブログを投稿する方法
記事の投稿方法：ブログ名＞投稿＞作成 と進みます。
「新しいブログ投稿を作成する」のポップアップに必要事項を入力しましょう。
- タイトル、簡単な説明、URLパスの入力が必須
- アイキャッチ画像とカテゴリは後で設定可能
「保存」すると投稿一覧に戻るので、投稿したい記事のタイトルをクリックして編集画面を開いて編集します。
左サイドバーにある「要素」をドラッグ・アンド・ドロップで挿入して編集できます。また、投稿編集画面の「設定」から、該当記事の検索エンジン最適化 (SEO)の設定などが行えます。
終わったら「保存」して「終了」をクリックすると投稿一覧に戻ります。
ブログのカテゴリの作成方法
まず、カテゴリを作成します。ブログの「カテゴリ」タブを開いて「作成」＞「新しいカテゴリーを作成する」に必要事項を入力するとカテゴリが出来上がります。
記事にカテゴリを設定するには、投稿記事一覧の三点リーダーから「設定」を選択すると「ブログの投稿を編集する」画面が開き、カテゴリを選択できます。
モバイルの設定をする
ページ、投稿とも、パソコンで作成したのとは別にモバイルでの見え方を調整する必要があります。
該当ページ・投稿を開いて、編集画面のモバイルアイコンをクリックして、モバイル用にフォントサイズや字間や行間を調整しましょう。
「複製」機能を使って時短しよう
投稿、ページとも「複製」機能があるので、ひな型を作って複製するとラクに使えます。
参考：ウェブサイト機能を使って作ったヨガインストラクターのウェブサイトとブログ
ウェブサイト機能とブログ機能を連携させて作った、ブログ有りのウェブサイトです。
本記事執筆時点の機能であり、今後変わる可能性が大きいことをおことわりしておきます。
おわりに
本記事では、Systeme.ioの無料プランでウェブサイトとブログ、リンクツリーを作る方法をお伝えしました。
無料プランでもかなりのことができますよね！
WordPressが苦手だったり、バージョンアップのタイミングをはかるのが難しかったりする場合は、Systeme.ioでウェブサイトやブログを運用するのもいいかもしれません。