ShipPress

チュートリアル

チャットでオリジナルのロゴや写真を追加する

サイトには素材写真ではなく、オリジナルのロゴや写真を使いたいものです。ShipPressなら、チャットに直接画像を添付して配置場所を伝えるだけで設定できます。このチュートリアルでは、Pier 7 Coffeeのヘッダーにロゴを追加し、ブラウザのタブアイコンとしても設定した上で、ホームページの新しいセクションに2枚のペストリーの写真を追加します。

著者：Oberon Lai。私はShipPress（Codotx, LLC）の開発者ですので、これは自社製品の紹介記事です。なお、このページにアフィリエイトリンクは一切含まれていません。

動画サムネイル：チャットでオリジナルのロゴや写真を追加する 動画を再生
再生ボタンを押した後にのみ、YouTube（youtube-nocookie.com）から動画が読み込まれます。 YouTubeで見る

  1. 画像を添付する

    サイトを開いてWorkerを開始します。メッセージ欄の下にあるクリップアイコンをクリックして画像を選択します。Ctrl+V（Macの場合は⌘V）で画像を貼り付けたり、チャット上にドラッグしたりすることもできます。

    PNG、JPG、WebP、GIFに対応しており（SVGとPDFには非対応）、1ファイルあたり最大10MB、1回のメッセージにつき最大6枚まで送信できます。添付した各画像はメッセージ欄の上に小さなサムネイルとして表示されます。

  2. 配置場所を伝える

    その画像を何に使うかを普段の言葉で入力します。例えば、「この画像を全ページのヘッダー左上に、高さ約56ピクセルのサイトロゴとして使ってください」のように入力してEnterキーを押します。

    Workerはまず画像を確認して何が写っているかを把握し、それからサイトに追加します。共通ヘッダーに配置されたロゴは、すべてのページに表示されます。

  3. サイトを変更するステップをAllowする

    WorkerがサイトのMedia Libraryにファイルを追加したり、ヘッダーのような共通部分を保存したりする前に、ShipPressは確認カードを表示します。内容を確認してAllowをクリックします。

  4. イメージと違うときは？そのまま伝えるだけです

    プレビューの上にあるRefreshをクリックして結果を確認します。動画では、デザイン側でロゴ配置エリアの要素が縮小されていたため、最初はロゴが小さく表示されてしまいました。そこでWorkerに「プレビューでロゴがまだ小さく見えます。ヘッダーのレイアウトを確認してください」と伝えたところ、原因を特定して修正してくれました。

    回答の下に表示される提案も便利です。Use the logo as browser tab iconを選択すると、ブラウザのタブやブックマーク用のサイトアイコンとして設定されます。

  5. 複数の写真を一度に追加する

    もう一度クリップアイコンをクリックし、Ctrl（Macの場合は⌘）を押しながら複数の写真を選択します。次に、それらを使って何を作成するかを伝えます。例えば、「ホームページのSeasonal specialsのすぐ下にFresh from the ovenセクションを追加し、この2枚の写真を使ってください：Butter croissant $4.25 と Cinnamon roll $4.75。デザインスタイルはページの他の部分と統一してください」のように伝えます。

    Workerが各写真を適切なアイテムとマッチングし、デザインのスタイルに合わせてセクションを作成します。

  6. WordPressで写真を確認する

    チャット内の画像をクリックすると拡大表示されます。そこからサイトのMedia Libraryに自分で追加することもできます。

    Dashboardタブを開いてMediaに移動すると、ロゴや写真が分かりやすい名前で保存されており、WordPress内のどこでもすぐに使えます。プレビューをPhoneに切り替えて、モバイル表示のレイアウトを確認できます。

  7. Historyで元に戻す

    変更が完了するたびにHistoryに復元ポイントが保存されるため、いつでも元の状態に戻すことができます。Go liveをクリックするまでは、変更内容が公開されることはありません。