チャットするだけでサイト全体の色を変更する

色はサイトの第一印象を決めます。多くのデザインは黒・白・グレーから始まります。すっきりしていますが、カフェやスタジオ、お店には少し冷たい印象になることもあります。WordPressでは、Site Editorを開いてStylesを見つけ、パレットを編集し、さらに各要素を手作業で直す必要があります。ShipPressでは、使いたい色をチャットで伝えるだけで、AIがサイト全体を一度に変更します。このチュートリアルでは、Pier 7 Coffeeに、クリーム、ディープネイビー、カッパー（銅色）を使った温かみのある港町風のパレットを設定します。

まずは今の色を確認しましょう

ShipPressでサイトを開き、プレビューをスクロールして、ボタン、リンク、小さなラベルがある部分を表示します。Pier 7 Coffeeでは、ページの背景、コーヒーカードのラベル、リンクなど、すべてが白・黒・グレーです。どんな雰囲気にしたいか、どこにどの色を使いたいかを決めておきましょう。

変更前：すっきりしているものの、シンプルな白黒のサイト。
1回のメッセージでパレットを伝えます

チャットに、希望する色と、それぞれの色を使う場所を入力します。カラーコードは必要ありません。「ソフトなクリーム」「ディープネイビー」「カッパー」といった言葉で十分です。同じままにしたいこと、たとえば「文字はすべて読みやすいままにする」といった条件も伝えましょう。私は次のように送りました。
サイト全体を、温かみのある港町風のカラーパレットにしてください。ページの背景はソフトなクリーム色、ヘッダー、フッター、暗いセクションはディープネイビー、ボタン、リンク、コーヒーカードの小さなラベルはカッパーのアクセントカラーにしてください。文字はすべて読みやすいままにしてください。

色は普段の言葉で伝え、それぞれをどこに使うかも添えましょう。
AIに色を変更してもらいます

Enterキーを押します。AIが何をするかを説明してから、デザインのカラーパレットを更新します。このパレットは、すべてのページのヘッダー、フッター、暗いセクション、ボタン、リンクを管理しています。Pier 7 Coffeeでは、約1分半かかりました。作業中でも入力を続けられます。新しいメッセージは、作業が終わるまで待機します。

AIは1ページずつではなく、サイト全体のパレットを変更します。
変更内容を確認します

作業が終わると、AIが変更点を一つずつ一覧にして知らせてくれます。ページの背景、ヘッダーとフッター、ボタンとリンク、コーヒーカードのラベル、文字色などです。また、たとえばカッパーのボタンにクリーム色の文字を使うなど、文字を読みやすく保つために工夫した点も教えてくれます。

変更したすべての色の短い一覧。
変更前と変更後を比べます

プレビューの上にあるRefreshをクリックし、先ほどと同じ場所までスクロールします。ページの背景が温かみのあるクリーム色になり、コーヒーカードのラベルと「All lots and past lots」のリンクがカッパー色になっています。一番下までスクロールすると、フッターはクリーム色の文字のディープネイビーになっています。

同じセクションでも、新しいパレットで印象が変わります。

フッターと暗いセクションにはディープネイビーが使われています。
短い追加メッセージで微調整します

イメージと少し違いますか？短い言葉で伝えましょう。回答の下にShipPressが次のステップの候補を表示します。私はMake the copper a bit lighterをクリックしました。AIはカッパーをより温かく明るくし、それ以上明るくしなかった理由も説明しました。カッパーをさらに明るくすると、ボタン上のクリーム色の文字が読みにくくなるためです。気が変わったときは、すぐそばにUndo this changeがあります。

小さな変更なら、短いメッセージ1通と数秒で完了します。
Phoneで確認します

プレビューの右上にあるPhoneをクリックして、ページをスクロールしてみましょう。色はサイト全体に設定されているため、スマートフォン用のレイアウトでも、同じクリーム色の背景、カッパー色のラベル、ネイビーの見出しが使われます。

スマートフォンサイズの画面での新しい色。
Colors and fontsでパレットを確認します

色を自分で確認したり調整したりしたいですか？プレビューの上にあるColors and fontsをクリックします。サイト全体のWordPressのStylesパネルが開きます。Colorsの下に、新しいパレットと、Link、Captions、Button、Headingの色が表示されます。そこで手作業ですべての色を変更できますが、変更する必要は一切ありません。

AIが作ったパレットは、編集できる通常のWordPressパレットです。
Historyでいつでも元に戻せます

ShipPressは、AIが応答するたびに復元ポイントを保存します。右上のHistoryをクリックすると、新しいパレットの復元ポイントと、カッパーを明るくした復元ポイントが表示されます。いずれかの横にあるRestoreをクリックすると、その時点のサイトの状態にそのまま戻せます。

色の変更はどれも元に戻せます。
ヒント
- 多くの場合、3色で十分です。背景色、ヘッダーと文字に使う暗い色、ボタンとリンクに使うアクセントカラー1色です。
- 好きな色だけでなく、それぞれの色をどこに使うかも伝えましょう。
- 文字を読みやすく保つようAIに頼みましょう。必要に応じて、少し濃い色や薄い色を選んでくれます。
- 写真の色はそのまま残ります。写真に合うパレットを選びましょう。
- Go liveをクリックする前に、いくつかのページとPhoneを確認しましょう。