文面管理(ビジュアルエディタの使い方)

  • 更新

メール文面作成時に、「ビジュアルエディタの利用:利用する」を選択すると、ビジュアルエディタ機能をご利用いただけます。
本機能では、ドラッグ&ドロップ操作でHTMLメールが作成できます。スマートフォン等での表示にも対応しています。
HTMLメールは「構造」と「コンテンツ」で成り立っています。
複数の「構造」から構成され、それぞれの構造内に様々なコンテンツを配置できます。
 

▼ビジュアルエディタの操作イメージ

kreisel-visual-editor.gif


▼ビジュアルエディタの利用方法

 

ビジュアルエディタ利用規約

【重要】画像アップロード機能のご利用に関する注意点

ビジュアルエディタ内の画像アップロード機能は、以下の注意事項を確認・同意のうえ、ご利用ください。

禁止事項

1. メール配信以外の用途での利用禁止

本機能は、メールを受信された会員様が画像を表示することを目的としております。メール配信以外の用途(ファイル保管庫としての利用など)でのご使用はお控えください。

2. 機密情報のアップロード禁止

アップロードされた画像は、URLを知っていれば誰でもアクセス可能な状態で公開されます。アップロードされた画像は、日本国外のサーバーに保存される場合がございます。

これらを考慮し、個人情報(氏名・電話番号・顔写真等)や機密情報を含む画像は、絶対にアップロードなさらないようお願いいたします。

また、ファイル名やフォルダ名にも機密情報や個人情報を含めないようご注意ください。

3. その他、禁止事項

利用にあたり以下に該当する行為を禁止します。

  • 他人の著作権や商標などの知的財産権を侵害する行為
  • ウイルス、ワーム、トロイの木馬などの悪意あるコードやプログラムを配布する行為
  • フィッシングサイトの運営、スパム送信、その他の技術的な不正行為を助長・支援する行為
  • 児童の性的搾取・虐待、人身売買などの違法行為を広めたり、促進したり、手助けすることになる行為
  • その他、KREISELの契約・利用規約等に違反する行為

注意事項

1. 外部からの閲覧可能性について

アップロードされた画像は、外部ネットワークからアクセス可能な状態で保管されます。画像URLさえわかれば、配信前でも閲覧可能です。画像URLは推測や総当たりなどによるアクセスも可能であることを前提にご利用ください。

2. ファイル名・フォルダ名についての注意

画像のURLにはアップロード時のファイル名およびフォルダ名が使用されます。公開されても問題がないファイル名・フォルダ名でアップロードしてください。

3. 画像のアクセス権限に関する注意

アップロードされた画像は環境内で共有される仕様となっております。そのため、本環境をご利用の他のアカウントからも閲覧・削除が可能となります。

4. 画像の削除に関する注意

画像を削除されますと、その画像を使用している他のメール文面や、すでに配信済みのメール内におきましても画像が表示されなくなる恐れがありますので、ご注意ください。

※画像の削除は即時には反映されない場合があります。また、削除後に同名ファイルをアップロードした場合も、即時には反映されませんのでご注意ください。


基本的な編集手順

  1. 「構造」タブで全体のレイアウトを選択し、左パネルからドラッグ&ドロップします。
    構造の主な違いは「カラム数」で、1〜4カラムまで選択可能です。
    複数の構造を使い分けることで、コンテンツが整理され、特にモバイル表示でも見やすくなります。
    構造はテーブルのような役割を果たし、縦方向の整列や、狭い画面でのレイアウト崩れを防ぎます。
     
  2. 「コンテンツ」タブのパーツを選択し、右画面の構造へドラッグ&ドロップします。
     
  3. 編集エリアで文面などの編集を行います。
     
  4. プレビュー画面で確認を行います。PCでの表示とスマートフォンでの表示プレビューの確認が可能です。

編集画面は自動保存されませんので、編集中はこまめに保存をお願いします。
※メールクライアントによって表示が異なる場合があるため、プレビューで必ず確認しましょう。

注意

エディタを使って作成される文面および更新する文面については以下の制約がかかります。

  • テキストメールでの使用不可(マルチパートメールには対応しております。)
  • HTMLパートは非表示
  • 機種依存文字、半角カナの利用可能
  • 配信される文字コードはUTF-8に統一される

 

コンテンツ

構造内には以下のようなコンテンツを追加できます。

テキスト
画像
ボタン
区切り
スペーサー
ソーシャル
ビデオ
HTML

「コンテンツ」タブからドラッグ&ドロップで追加し、各要素は左側のパネルで詳細設定が可能です。

 

テキスト

  • 編集したいテキストをクリックして直接入力
  • ツールバーで、フォント・フォントサイズ・斜体・太字・色・リンク・箇条書きなどの基本装飾が可能
  • 新しい段落は「Enter」、改行のみは「Shift+Enter」
  • コンテンツの余白は左パネルで調整

    text.png   

    textimage.png
     

画像

  • 画像コンテンツをドラッグして挿入し、画像コンテンツをクリックして画像を追加します。
    画像ストレージ機能を利用し、PC上の画像をそのままドラッグすることで配置が可能です。
    画像ストレージのファイル管理ツール上でフォルダを作成し、画像をアップロードしてから選択することもできます。
  • 左パネルの「編集」ボタンで画像編集が可能です。
  • 左パネルの「画像リンク」にてリンク挿入、altテキスト(代替テキスト)の設定が可能です。
    ※画像は必ずaltテキストを設定しましょう。画像非表示設定の受信者にも内容が伝わります。
  • 左パネルにて画像サイズ、配置(左・中央・右)、画像の角の丸み、余白調整が可能です。
  • jpeg, gif, png形式、1ファイル最大10MBまで、環境全体で1GBまで保存可能です。
    画像の幅は600pxまで(多くのメールクライアントで600pxを超える画像は非対応のため)です。
  • 既存のWeb画像を使う場合は「ダイナミックイメージ」欄にURLを貼り付けてください。
  • アップロードするファイル名、新規作成するフォルダ名についてはascii文字(半角アルファベットやハイフン等)のみ利用可能です。日本語のひらがな・カタカナ・漢字等は利用できません。

    image.png

    ファイル管理ツール
    image3.png
    ※ファイルをアップロード後にフォルダに移動することはできません。
     また、同一のファイル名で画像を差し替えても、キャッシュにより表示画像が変わるまで時間がかかる場合があります。
     

注意

  • アップロードされた画像は、外部ネットワークからアクセス可能な状態で保管されます。画像のURLさえわかれば、配信前でも閲覧可能です。画像URLは推測や総当りなどによるアクセスも可能であることを前提にご利用ください。
  • 画像のURLにはアップロード時のファイル名およびフォルダ名が使用されます。メール受信者等が認識しても問題のないファイル名・フォルダ名でアップロードしてください。
  • アップロードされた画像は同一環境内で共有される仕様となっております。そのため、本環境をご利用の他のアカウントからも閲覧が可能となります。
  • アップロードした画像は、本環境内のすべてのメール作成画面にて共有されます。 画像を削除されますと、その画像を使用している他のメール文面や、すでに配信済みのメール内におきましても画像が表示されなくなる恐れあるので、ご注意ください。
     

ボタン

  • テキスト、リンク先、配置、形状(角丸・四角)、色、フォントサイズ、余白などを自由に編集できます。

    image4.png


区切り

  • 線の色・余白・太さ・線種(実線・点線・破線)・背景色をカスタマイズできます。

    image5.png


スペーサー

  • コンテンツ間の縦スペースを追加し、高さを自由に設定できます。
  • 複数カラムの場合は上下の位置調整にも活用できます。

    image6.png


ソーシャル

  • Facebook、X(旧Twitter)、LinkedInなど主要SNSのアイコンを追加できます。
  • 「+カスタムアイコンを追加します。」でカスタマイズしたアイコンを追加可能です。
  • アイコンの形状(丸・四角)は「アイコンのスタイル」で選択できます。
  • 各アイコンのリンクは「▼」ボタン>「リンク」で設定可能です。

    social.png social2.png


ビデオ

  • Youtube、Vimeoのリンクを設定可能です。
  • 限定公開設定されている動画は表示されません。

     video.png


HTML

  • 独自のHTMLコードを挿入可能です。
  • セキュリティ上、スクリプト(JavaScript等)は動作しません。挿入は非推奨です。

    html.png

     

構造

カラムやレイアウトを決めて、左パネルからドラッグ&ドロップで右側の編集エリアに追加します。

kouzou.png

構造の枠外をクリックすると編集モードになり、ドラッグで移動、アイコン操作で複製や削除ができます。

構造ごとに左パネルから以下の設定が可能です。

  • カラム数
  • 背景色(画像がない場合や狭い構造用)
  • 構造の幅
  • 角の丸み
  • 構造の枠線(枠線の色・太さ・線種)
  • 上下左右の余白調整
  • 背景画像の設定・差し替え
  • カラムごとのプロパティ

    image4.pngimage5.png


全体の設定

「全体の設定」タブでは、以下の項目をカスタマイズできます。

  • 「プレビューテキスト」で、メール一覧画面で表示させるテキスト設定が可能(表示はメーラの設定によります)
  • テンプレート全体やボタン、構造、リンクの背景色
  • 見出し(3種類)、本文、ボタンテキストのフォント・色・サイズ
  • 余白設定
    image6.pngimage7.png

image8.png