メインコンテンツまでスキップ
08.31 ㅣ エディター全面改編全ユーザー

エディター全面改編

商品詳細ページを作るいちばん大切な場所、エディターが新しくなりました。 より速く作業できるよう、画面と機能を整理しました。今作業中の商品詳細ページはそのまま開くので、変わった点だけ確認して作業を続けてください。

ひと目でわかる

新しくなったエディター画面 — メニュー・レイヤータブ・キャンバス・プレビューの位置
囲んだ場所や番号にマウスを合わせると説明が出ます。
  1. 1メニュー保存・バージョン履歴・テキスト検索・ダークモード・ショートカットがここにまとまりました。 メニュー
  2. 2レイヤータブ重なっている要素を一覧から選べます。今回新しく加わりました。 レイヤータブ
  3. 3キャンバス直したいものをクリックすると、ちょうどこの位置にツールバーが出ます。 ツールバー
  4. 4プレビュー完成した姿だけを全画面で確認し、その場でダウンロードできます。 プレビュー

新規8

保存は自動でされるようになりました保存ボタンを忘れても大丈夫です。手を止めて10秒たつと保存され、作業を続けていても3分に1回は保存されます。写真やページを入れる大きな変更はすぐに保存され、ウィンドウを閉じるときにも一度保存します。
関連ガイド保存とバージョン管理

保存ボタンを忘れても大丈夫です。手を止めて10秒たつと保存され、作業を続けていても3分に1回は保存されます。写真やページを入れる大きな変更はすぐに保存され、ウィンドウを閉じるときにも一度保存します。

保存状態は、画面の一番上で 保存中 · 保存済み としていつでも確認できます。作業のじゃまをしないよう静かに保存するため、保存できたという通知は出ません。 通知が出るのは、自分で保存したときだけです。

[メニュー] を押すと左に保存・バージョン履歴・テキスト検索が開きます
[メニュー] を押すと 保存 · バージョン履歴 · テキスト検索 が開きます

さんざん直したあとで最初のほうがよかった、というときはバージョン履歴を使ってください。 元に戻すが直前の操作ひとつを取り消すものだとすれば、バージョン履歴は昨日の状態に戻ることに近いものです。[メニュー] → [バージョン履歴] を押すと、保存された時点が日付ごとにまとまって出てきます。

右側に保存された時点が時間順に並びます
保存された時点が時間順に並びます — 保存した時刻 · 保存した人 · 当時のテンプレート
  • 各行に保存した時刻 · 保存した人 · 保存当時のテンプレート名が表示されます。自分で保存した行には 手動保存 の表示が付きます。
  • [復元] を押すと、復元する直前の状態がもう一度自動で保存されます。 復元したあとで気が変わっても、今の状態を失いません。
  • 復元が終わると、画面の上部に [復元を取り消す] が5秒間表示されます。間違えて復元したときは、このときに押してください。
画面の上部に表示される [復元を取り消す]
復元が終わると、画面の上部に [復元を取り消す] が少しの間表示されます

保存の記録は、料金プランに関係なく期間の制限なく残ります。

クリックすると、その場にツールバーが出ます直したいものをクリックすると、すぐ上に小さなツールバーが出ます。
関連ガイドメニュー

直したいものをクリックすると、すぐ上に小さなツールバーが出ます。 タブを探して行き来する必要はありません。写真をクリックすれば写真用、文字をクリックすれば文字用、ページをクリックすればページ用のツールバーが出ます。

ページをクリックすると上に出る小さなメニュー
ページをクリックすると、上に [ページ編集] · 背景色 · 複製 · 削除 · その他 が出ます

ページツールバーの [その他] に、ページの操作がまとまっています。

  • 貼り付け ㅣ コピーしたものをこのページに貼ります。要素を別のページへ移動するには、この方法しかありません。
  • ページの複製 · ページの追加 · ページの削除 · ページのブックマーク
  • 画像ダウンロード(jpg / png) ㅣ このページ1枚だけをすぐ保存します。ダウンロードのダイアログを開く必要はありません。

背景色はツールバーの色の丸からその場で変えられ、順番はページ横の上下ボタンで動かします。

一括修正 — 複数をまとめて色をひとつずつ直し、書体をひとつずつ変えていた作業が、一度で終わります。何もないところでマウスをドラッグして四角を描くと、その中に入ったものがすべて選ばれ、Shift を押しながらクリックするとひとつずつ加わります。
関連ガイド整列と配置

色をひとつずつ直し、書体をひとつずつ変えていた作業が、一度で終わります。何もないところでマウスをドラッグして四角を描くと、その中に入ったものがすべて選ばれ、Shift を押しながらクリックするとひとつずつ加わります。

複数を選ぶと左のパネルに多重選択の一括修正が出ます
複数を選ぶと、左のパネルの下に多重選択の一括修正が出ます
項目何を変えますか
色選んだものに使われている色を、一度に別の色へ
テキスト書体と大きさをまとめて
画像選んだ写真を別の写真へ
サイズの一括変更幅と高さを同じ大きさに

確認のダイアログなしですぐに変わります。 気に入らなければ ⌘Z(Windowsは Ctrl+Z)で元に戻せます。

色を選ぶと確認ダイアログなしで選んだものが一度に変わります
色を選んだ瞬間、選んだものが一度に変わります

写真と文字を混ぜて選んでも大丈夫です。 当てはまるものにだけ適用されます。両方を選んで色を変えると、文字の色だけが変わり、写真はそのままです。ページをクリックして出てくるページの一括修正を使うと、そのページ全体に同じやり方で適用されます。

グループとオートレイアウト2つ以上を選んで [グループ化](⌘G)を押すと、ひとつのように扱えます。一緒に動き、一緒に大きくなります。グループの中のひとつだけを直したいときはダブルクリックで入り、Esc で出てください。種類が違ってもよく、グループどうしをさらにまとめることもできます。
関連ガイドグループとオートレイアウト

2つ以上を選んで [グループ化](⌘G)を押すと、ひとつのように扱えます。一緒に動き、一緒に大きくなります。グループの中のひとつだけを直したいときはダブルクリックで入り、Esc で出てください。種類が違ってもよく、グループどうしをさらにまとめることもできます。

グループ化するとアイコンがグループ解除に変わり、オートレイアウトが使えるようになる
複数を選んでグループにまとめます

まとめたあとに [オートレイアウト] をオンにすると、その中の間隔を自動で守ってくれます。 写真4枚を並べて手で間隔をそろえたとしましょう。そのうち1枚を消すと、そこだけぽっかり空いて全部動かし直すことになります。オートレイアウトをオンにしておけば、残りの3枚が自動で並び直します。

間隔の数字を60から16に変えると、グループ内の間隔が一度に変わる
間隔の数字ひとつを変えるだけで、グループ内の間隔が一度に整います
  • 横方向 · 縦方向 のどちらに並べるかを選んでください。
  • 間隔 は中に入っているものどうしの距離、余白 はグループの枠と中身との距離です。
  • オンにしておくと、中にあるものをドラッグして順番を変えることもできます。動かした位置に合わせて、残りが並び直します。
動くGIFもそのまま入りますGIFを普通の写真と同じようにアップロードすると、編集画面では再生ボタンを押さなくても動き続けます。
関連ガイドアップロード

GIFを普通の写真と同じようにアップロードすると、編集画面では再生ボタンを押さなくても動き続けます。 アップロードのパネルでは最初のコマが止まっていて右下に GIF の表示が付きますが、マウスを乗せるとすぐ動きます。

左メニューの [アップロード] を押すと、写真をアップロードするパネルが開きます
左メニューの [アップロード] を押すと、写真をアップロードするパネルが開きます
  • 使えます ㅣ 大きさの調整 · 切り抜き · 回転 · 影 · 角を丸くする。動きを保ったまま飾れます。
  • 使えません ㅣ 色の補正 · フィルター · ブレンドは適用されず、色の分類や自動再配置、カバーの指定もできません。
警告

動きを保って保存するには、必ず html 形式で保存してください。 jpg · png で保存すると、最初のコマだけの静止画になります。

プレビュー — 完成した姿そのまま一番上の右側の [プレビュー] を押すと、選択の印やガイド線のない完成した姿だけが全画面で表示されます。ダウンロードする前に、ここで確認してください。
関連ガイドプレビュー

一番上の右側の [プレビュー] を押すと、選択の印やガイド線のない完成した姿だけが全画面で表示されます。ダウンロードする前に、ここで確認してください。

  • 左右の矢印でページをめくり、− % + で大きく・小さく表示できます。
  • 設定したリンクが実際に開きます。 アドレスの間違いがないか、ここで確認してください。
  • 確認が終わったら、その場で [ダウンロード] からすぐに保存できます。
プレビュー画面 — 拡大・縮小とその場でのダウンロード
プレビュー画面 — 拡大・縮小と、その場でのダウンロード
ダークモード夜に長く作業していると画面がまぶしいものです。[メニュー] → 便利機能 → [ダークモード] をオンにすると編集画面の周りが暗くなり、目が疲れにくくなります。
関連ガイドダークモード

夜に長く作業していると画面がまぶしいものです。[メニュー] → 便利機能 → [ダークモード] をオンにすると編集画面の周りが暗くなり、目が疲れにくくなります。

ダークモードをオンにすると編集画面の周りが暗くなります
ダークモードをオンにすると編集画面の周りが暗くなります

画面だけが暗くなり、商品詳細ページはそのままです。 完成した商品詳細ページやダウンロードするファイルには、まったく影響がありません。一度オンにしておけば、次に入ってもオンのままです。

同じ便利機能から 定規 · ガイド線 · グリッド もオン・オフできます。定規からマウスをドラッグするとガイド線ができます。ガイド線は画面上でだけ見える参考の線なので、ダウンロードするファイルには出てきません。

定規・グリッド・ガイド線をすべてオンにした編集画面
定規 · グリッド · ガイド線をすべてオンにした編集画面
レイヤー重なっている要素を一覧から選んで正確に選択し、目のアイコンで一時的に隠せます。
関連ガイドレイヤー

重なっている要素を一覧から選んで正確に選択し、目のアイコンで一時的に隠せます。

改善1

縦書き · テキスト検索 · 画像の差し替え · ショートカット縦書き ㅣ 文字を上から下へ配置できます。日本語の商品詳細ページによく合います。
関連ガイドショートカット
  • 縦書き ㅣ 文字を上から下へ配置できます。日本語の商品詳細ページによく合います。
  • テキスト検索 ㅣ [メニュー] → [テキスト検索] で、長い商品詳細ページの文言を探して一度に変えられます。
  • 画像の差し替え ㅣ 写真を選んでからアップロードのパネルで新しい写真をクリックすると、大きさと位置はそのままで写真だけが変わります。商品詳細ページ1件で使える写真は最大50枚です。
  • ショートカット ㅣ よく使う操作をキーボードですぐ実行できます。全体の一覧は [メニュー] → [ショートカット一覧] にあります。

必ずご確認ください

  • GIF の動きを残して保存するには html 形式を選んでください。 jpg · png で受け取ると最初の一場面だけの静止画になります。
  • 別のページへ要素を移すには貼り付けを使ってください。 ページツールバーの [もっと見る] の中にあります。
  • 商品詳細ページ1件で使える写真は最大50枚です。

実際に触ってみる

今回の改編でいちばん大きく変わったのは、選んだものに合わせてツールバーが変わることです。写真を選べば写真の道具が、文字を選べば文字の道具が、その場に出ます。

Edit TextPretendard23

文字・図形・写真を押してみてください。選んだものに合わせて上のツールバーが丸ごと変わり、色・サイズ・整列・角丸は実際に動きます。