チュートリアル

一文でサイトを説明する

ShipPress でサイトを始めるのに、テンプレートや企画書は要りません。一文で十分です。このチュートリアルでは、小さなうどん店を例に、最初の一文から専用のデザインを持つサイトまでを追います。ヒアリング、最初の版、デザインの変更、内容をデザインに合わせる AI への依頼、仕上がりの確認です。すべてお使いの Mac の中で行われ、公開するを押すまで誰にも見えません。

著者：Oberon Lai。私は ShipPress（Codotx, LLC）の開発者で、これは自社の製品です。

動画を再生

1. 一文でサイトを説明する

   ホームのどんなサイトを作りますか？の下にある欄を探します。友だちに話すように、名前、何をしているか、どこにあるかを書きます。たとえば：

   京都にある手打ちうどんの小さなお店、店名は Hinoki Udon

   Enter を押すか、矢印をクリックします。文の中に名前を入れておくのがポイントで、ShipPress はそれをサイト名に使います。名前はあとから変えることもできます。

2. 短いヒアリングに答える（スキップも可）

   次はサイト企画ヒアリングで、短い質問が 6 つあります。書いた一文が上に表示されるので、足りない部分だけ答えれば大丈夫です。

   • あなたは誰で、何をしていますか？
   • 誰に一番見てほしいですか？
   • どんな商品やサービスを提供していますか？
   • 公開後、どうなればうれしいですか？例：予約が増える、問い合わせが増える。
   • サイトに絶対に載せたいものは？例：料金表、営業時間、地図。
   • どんな雰囲気が好きですか？うどん店の例では「あたたかく落ち着いた感じ、木の色合い」。

   短い答えで大丈夫で、空欄でもかまいません。答えは AI が作業するときの指示書になります。最後の質問でサイトを作るをクリックします。急いでいるときは、質問をスキップしてサイトを作るで一文だけからすぐに始められます。

3. AI に最初の版を作ってもらう

   ShipPress はお使いのパソコンに本物の WordPress サイトを作り、一文の中の名前を付けて、AI が作業を始めます。初めてのサイトは、WordPress の準備があるので少し長くかかります。

   AI の作業中も入力を続けられます。新しいメッセージは順番を待ちます。終わると、AI は何を作ったか、そして本当の料金や営業時間など、まだあなたから必要な情報を教えてくれます。

4. プレビューで見る

   プレビューで見るをクリックします。最初の版はシンプルな ShipPress の基本デザインです。ページとセクションは揃っていますが、見た目は素朴です。次の手順でちゃんとしたデザインにします。

5. サイトのデザインを変える

   プレビュー上部のサイトメニューを開き、このサイトのデザインを変更…を選びます。ホームと同じデザイン一覧が開き、絞り込みや検索も同じように使えます。udon で検索すると、まさにこういうお店のためのデザインが出てきます。クリックして詳しく見ます。

   ShipPress は何がそのまま残るかを説明し、先に復元ポイントを保存するので、ワンクリックで元のデザインに戻せます。サイトがまだ新しいなら、新しいデザインのサンプルコンテンツも追加するにチェックを入れると、デザイン専用のページも追加されます。そしてこのデザインを使うをクリックします。

   数秒でサイトが新しいデザインになります。サンプルコンテンツにチェックを入れた場合は、お品書き、お店の物語、日誌、お便りなどのページも追加されます。初めて使うデザインはダウンロードが必要なので、1〜2 分かかることがあります。

6. 内容をデザインに合わせるよう AI に頼む

   トップページには、最初の版のセクションが残っていることがあります。チャットで AI に作り直しを頼みます。たとえば：

   新しいデザインでトップページを作り直して。ヒアリングで伝えた内容を使って、仮のセクションは消してください。

   うどん店の例では、AI はトップページを、上に店名と席を予約ボタン、続いてお店の物語、本日のうどん、営業時間、予約のセクションという形に書き直しました。料金や営業時間を勝手に作ることはなく、代わりにあなたに質問するので、サイトには本当のことだけが載ります。終わったら、もう一度プレビューで見るをクリックします。

7. 各ページとスマホ表示を確認する

   トップページをスクロールして見ます。サイト自体のナビゲーションでほかのページも開きます。このデザインでは Menu に一杯ずつのイラストがあり、About ページはお店の物語を伝えます。パソコンとスマホを切り替えて、小さな画面での見え方も確認します。

   どのページも本物の WordPress ページです。変えたいことがあれば、チャットで伝えるだけです。

8. 最初の版をよくするコツ

   • 文の中に名前を入れる（例：「店名は Hinoki Udon」）と、ShipPress がそれを使います。
   • 答えごとに具体的なことを一つ：実際の料理、実際のお客さん、実際の目標。具体的な答えのほうが、AI にとってずっと良い材料になります。
   • 急いでいるなら質問はスキップ。あとからいつでもチャットで AI に伝えられます。
   • AI に聞かれたら本当の情報を伝える（料金、営業時間、住所）。仮の文のままにしないようにしましょう。

9. 次のステップ

   デザインの選び方はぴったりのデザインを探すで詳しく説明しています。サイトを直し続けるならサイトを編集する、準備ができたら公開するへ。

   ShipPress をまだお持ちでない方は、ShipPress をダウンロード（無料、Mac）。