--- title: "Engage Cros UI開発およびデザイン制作" client: " Engage Cros" date: 2025-05-09 tags: UIデザイン, 画面構成 project_url: https://emberpoint.com/service/engagecros/ canonical: https://www.liberogic.jp/casestudy/engagecros/ --- # Engage Cros UI開発およびデザイン制作 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/2e3fad2dfec04b52922feebfc4af87d4/casestudy_engagecros.jpg) エンバーポイント株式会社が提供する複数の既存サービスを統合したマーケティングオートメーションツール「Engage Cros」のリリースに向けたプロジェクトにおいて、UI開発およびデザイン制作に関するケーススタディです。 プロジェクトURL: [ https://emberpoint.com/service/engagecros/]( https://emberpoint.com/service/engagecros/) ## プロジェクト概要 エンバーポイント株式会社が提供する複数の既存サービスを統合したマーケティングオートメーションツール「Engage Cros」のリリースに向けたプロジェクトにおいて、UI開発およびデザイン制作をお手伝いさせて頂きました。 誰もが直感的に操作できるUIを最優先に考え、設計を進めました。 ## Engage Crosのご紹介 Engage Crosとは、万全のセキュリティで大手企業や金融機関・自治体が数多く利用するメール配信システム「Mail Publisher」と同じ配信エンジンを搭載した、専門知識不要で誰でも使いこなせる低価格のMAツールです。簡単な操作で複雑な施策が実行できます。 ### Engage Crosのここがすごい！ - 圧倒的に使いやすいUI - 業界最高水準の配信品質 - 制限なく柔軟なデータ連携・活用 - AIを活用したマーケティング施策の立案・実行をサポート - 大手企業でも安心して利用できる高セキュリティ #### 【圧倒的に使いやすいUI】 管理画面上でのドラッグ&ドロップで、簡単にシナリオの設定が可能です。 ![シナリオ設定の説明図：任意の配信タイミングで自動化。メール開封者にはメールで異なる内容を配信／未開封者にはLINEで初回送信内容を再送。マルチチャンネル配信を1ツール／1画面で実施可能。など](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/2554306777ae4c6ea8c0823fa9970080/contentImg01.png) #### ノーコードでセグメント作成 現場の担当者のスキルに左右されず、活用が可能。担当者交代後も、チューニングを継続して実施可能です。 ![ノーコードの作成画面の説明図：管理画面上でセグメント作成が可能。対象件数が一目でわかる。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/a9f09be5d130426eb04cbeda29160e1e/contentImg02.png) #### 新機能を迅速にキャッチアップ 管理画面上でのドラッグ&ドロップで直感的かつ簡単にLINEメッセージを実装可能。 ![メッセージ作成画面の説明図：各種テキスト、URL、スタンプ等も簡単選択。テンプレート、差し込み画像も簡単に選択可能](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/99bbdbba5b524dd2b12f034a9bb83c69/contentImg03.png) #### HTMLスキル不要でメール作成 同社のHTMLメール作成ツール「HTML Editor」を内包し、簡単にHTMLメールの作成が可能です。 ![メールテンプレを豊富に実装。ドラッグアンドドロップで作成。HTMLメールが簡単に作成可能。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/e4c9401ecfac485fbf18adc6103ae728/contentImg04.png) #### 【業界最高水準の配信品質】 他社で行っていたメール配信をEngage Crosに切り替えるだけで、大幅に配信可能数が向上。 ![配信可能数向上の例：エラーアドレスの7割が復活（280万アドレス）。配信可能数1.3〜1.5倍（5年後比では倍増）。配信可能数・CVが倍増。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/07b3ff64202c4631bcaf7415a37f9ca6/contentImg05.png) *様々なチャネルで、顧客へ届けたいメッセージを確実に届け、企業とお客様の繋がりをより強固にします。* ![様々なチャネルの例：メール、LINE、アプリ、SMS、DM、Web接客](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c2fd066d6bb3438cb27ce504f1e1fe88/contentImg06.png) #### 【制限なく柔軟なデータ連携・活用】 制限のない柔軟なテーブル・データ更新と、高速なデータ処理によって、お客様のデータ活用を促進します。 ![テーブル／データを追加する追加コスト不要。リアルタイムなテーブル／データ投入が可能。更新／追加するデータのサイズ／量は無制限。データ取り込み／反映も高速で実現。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/52cac8110ada485c8a1d18dab854c2c4/contentImg07.png) #### 【AIを活用したマーケティング施策の立案・実行をサポート】 顧客理解から施策実行まで、AIを活用することでお客様へのマーケティングをよりパーソナライズします。 ![顧客データ分析：エンゲージメントが高い／低い顧客をピックアップ。ターゲティング：自動でセグメントを生成し最適解をレコメンド。施策実行：顧客ごとに開封率が高くなるチャネル／時間を導出。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/21b25778ead2404db8ac449292a219de/contentImg08.png) #### 【大手企業でも安心して利用できる高セキュリティ】 「Pマーク」や「ISO27001」の認定を受けており、セキュリティ強度の高い環境でサービスを提供。大手企業、金融機関、官公庁、自治体など、数多くの導入実績があります。 ![2003年に業界に先駆けてプライバシーマークを取得。ISO/IEC 27001:2013(ISMS)認定済み。耐震対策万全のデータセンターを利用。大量・高速のメール配信にも耐えられる広帯域の回線。回線障害対策としてバックアップ用の回線を保持。ID/パスワードによる認証。SSLによる通信の暗号化を標準実装。IPアドレスのフィルタリング。](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/a22f186341cc47679d68e5f04fc0e670/contentImg09.png) ### 上場企業の約3割へのご支援実績 数百万人以上の会員数の多いB2C企業を中心に、長きに渡ってご支援しています。 ### マーケティング業界で20年に渡り培ったノウハウを土台にサポート 完全内製のチームが、企業規模・契約金額を問わず手厚いサポート体制をご提供します。 #### 内製のサポートチームにより短時間で回答 - 内製だからこそ、導入時の背景の引継ぎがスムーズで聞きたいことに短時間で回答 - 業界No.1のメール配信でサポート体制を構築済 - 英語サポートのみ/お問合せのたらい回しはございません #### 企業規模を問わず手厚くサポート - お客様の企業規模を問わないサポート - 無償対応の範囲でも、時間・回数が無制限 ![導入（要件定義・データ連携等）から運用（効果測定・施策拡大等）までの各フェーズと、それを支えるPM・アーキテクト・コンサル等の専門チームの支援体制図](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/052058f734a84e208aa0a752e47e4c06/contentImg10.png) *ツール提供だけでなく、様々な場面で専任チームがサポート* ### Engage Crosの提供機能詳細（一部） ![データベース連携、AI・機械学習、LINE・SMSなどの配信チャネル、セキュリティ管理など、多岐にわたる提供機能の一覧](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/bd94d6dfe89d470bacae610a35b411d3/contentImg11.png) ## UI開発について 従来のMAツールはプロ仕様のものが多く、導入において「操作の複雑さ」が課題となっています。クライアントや開発チームとミーティングを重ねながら画面構成を検討し、可能な限り直感的な操作のみで利用できるデザインを作成。必要に応じて機能の仕様策定にも関与しながらUIを整理しました。 画面設計の核となるのが、ドラッグ＆ドロップのみで完結するシンプルな操作性です。不要なクリックや複雑な手順を減らし、情報を直感的に把握できるレイアウトを構築。プロトタイプを作成し、事前に時間をかけて検証を重ねました。 ## スタイルガイドの作成 アプリケーション開発において、スタイルガイドは重要なドキュメントの１つです。 Webアプリケーションはフェーズごとに新機能をリリースするため、フェーズが進むにつれてデザインのばらつきや初期のルールから逸脱するケースが増えます。さらに、サービスを利用するお客様や運用チームからのリクエストにも常に対応しなければなりません。迅速な実装をサポートするためにも、スタイルガイドの作成は必要不可欠です。 デザイン要素の洗い出し、既存のデザイン画面や仕様書を基にしたカラーコードやタイポグラフィの定義、行間や余白感のルール策定など様々な作業を経てスタイルガイドは作成されます。 ![カラーコードのスタイルガイドの例](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/7d02fc4a6e1e4ec7bc757f8a38f18dcd/contentImg12.png) ![タイポグラフィのスタイルガイドの例](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/dd2d995a8dd248eb8d1c9e17f1e83d41/contentImg13.png) アプリケーション開発では、リリーススケジュールによって、デザインが作成される前に開発が始まることがあります。開発チームがスタイルガイドを参考にしながら実装を進められるように環境を整えました。 ボタンやフォーム、モーダルウィンドウなどのコンポーネントをモジュール化。様々な利用シーンを想定した汎用性の高いパーツ設計を行い、各パーツの余白や配置に関する詳細なガイドラインを記載することで、デザインフローが発生しない場合でも、統一性を維持できるように配慮しています。 ![検索ボックスの余白のスタイルガイドの例](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/95f35b3a8e9546fbbf2a0c9b7d030591/contentImg14.png) ![コンテンツブロックの余白のスタイルガイドの例](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/4a3c83bd803644c283a78d05bf93b7f9/contentImg15.png) 出戻りや確認作業にかかる負担を大幅に軽減するとともに、チーム内外でのデザインにおける認識のズレを解消しました。汎用的に使用可能なパーツを用いて定義したことで、プロジェクト終了後も長期的に活用できる資産として高い評価をいただいています。 ## 最後に リベロジックでは、お客様のターゲットとニーズに沿ったUIデザインを通じて、業務の効率化やDXの推進をサポートしています。本プロジェクトのようなMAツールに限らず、医療アプリケーションなど幅広い業界での経験を活かし、最適なUI提案をいたします。 UIデザインでお困りの方は、ぜひお気軽にご相談ください。 ## クレジット | 担当 | 氏名・組織 | | --- | --- | | 機能設計 | エンバーポイント株式会社 | | 画面構成 | エンバーポイント株式会社、リベロジック株式会社 | | デザイン制作 | エンバーポイント株式会社、リベロジック株式会社 |