ブログ

ページ作成ツール”Marketo”を使ってみて。

こんにちは!インターン生の山田です。
今回は、“Marketo”について紹介します。

Marketoとは、ざっくり説明すると
「マーケティングに必要な機能をまとめたツール」です!

marketo_top

今回は、「デザインスタジオ」を使ってWebぺージ作成を行いました。

そこで自分が使用した機能と作成に至るまでの手順を簡単にですが説明したいと思います。


<作成手順>

まずは簡単に作成手順を説明します。

①「新規作成」のタブから、[新規ランディングぺージ]を選択

%e3%83%a9%e3%83%b3%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%81%ba%e3%83%bc%e3%82%b8

②名前、ぺージURL、を自分で決めて記入し[作成]

%e3%83%a9%e3%83%b3%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0_1

③左にある「ランディングぺージ」の項目の中に、先ほど自分で決めた名前のぺージが作られます。
%e3%83%a9%e3%83%b3%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0_2

④上の画面で、[下書きの編集]を押して、ぺージ作成開始です

 

<ぺージ編集:デスクトップ>
・基本的には PowerPointと同じ感覚で作れます
・「デスクトップ」と「モバイル」それぞれ別にぺージ作成が可能

最初は「デスクトップ」のぺージ編集を説明します。
編集ぺージ全体は下図のようになっています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-21-13-55-30

I. 要素の挿入 → 挿入したいアイコンをキャンバスにマウスでキャンパスに引っ張て挿入


リッチテキスト:①のように、文字サイズ、フォントなど指定できる
画像     :②の画像は事前に「アクション」から画像をアップロード
拡大縮小してサイズを変更可能
長方形    :③④⑤のように、枠線の有無、透明度など変更可能
フォーム   :ページ内に自分で作成したフォームを埋め込める

 

II. ページ要素 → 挿入した要素を編集したときに使用
                              微調整、サイトの体裁を整えるときに便利
編集したい要素をクリックすると下図のようなタブが出てきます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-10-21-48

例えば
③:”borderStyle”で枠付きの長方形が作れます
④:”opacity”で透明度を調整
⑤:文字と長方形を組み合わせて、見出しなどに利用
文字を2つ組み合わせて影を作成
のような使い方ができます。

また、要素の端や高さをそろえたいときは、
“left”、”top”の値を同じにすれば、体裁が整います。

 

III. アクション → ここで挿入したい画像をアップロード
「アクション」の機能は下図の通りです
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-10-48-34

主な機能の説明をします
①画像またはファイルのアップロード:
”要素の挿入”の”画像”アイコンで画像をページ内に置くことができますが、その前にアップロードをする必要があります。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-10-58-37

 

 

 

 

 

②ガイドの表示:
図のような縦横のメジャーのようなもので、全体のバランスを見たいときなど使うと便利です

 

 

 

 

 


以上、簡単にではありますが、ぺージ作成と編集について説明しました。
今回は、自分がぺージを作成した時に使用した機能のみの説明になってしまいましたが、Marketoには便利で高機能なものがまだまだたくさんありそうです。
しかし基本的にこれだけできれば、簡単にサイトを作ることができるので、初心者でも上級者でも使えるツールだと感じました。
私も今回初めてwebぺージの作成をし、コードを書き込んだりもっと複雑なもので敷居が高いかと思っていましたが、Powerpointのように視覚的感覚で作れてかなり楽でした。

 

次回は、「モバイル版」のページ編集についてまとめたいと思います。

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ブログ

    DirectionAPI+Tableauでドライブ時間の可視化(前編)

    市区町村一覧・自治体の一覧を取得する(Python)の続きです!目…

  2. ブログ

    ダッシュボードに使うべき10のグラフ②

    こんにちは!インターン生の山本です!前回はダッシュボードに使う…

  3. ブログ

    マーケティングオートメーションの根幹:リードについて解説してみた!

    こんにちは!エクスチュアインターンの柳沼です。今回の目次はこちらです。…

  4. ブログ

    秋とチラシとリードのスコアリング機能

    こんにちは、インターン生の柳沼です。最近はセミの声もだんだんと聞こえな…

  5. ブログ

    ④DMPについてーOracle DMP

    こんにちは!インターン生の藤本です。今日は海外DMP3つ目、Ora…

  6. ブログ

    ベイズとR

    ベイズの定理の初めのほうをまとめておこうと思います。ミーハーな…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


  1. IT用語集

    アプライアンス(Appliance)って何?
  2. IT用語集

    CRM(Customer Relationship Management)って何…
  3. ブログ

    初めましてのご挨拶と、業務内容のご紹介
  4. ブログ

    ベイズとR
  5. Adobe Analytics

    ページの深さとは-Adobe Analyticsの指標説明
PAGE TOP