ブログ

ページ作成ツール"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. Python

    市区町村一覧・自治体の一覧を取得する

    最初に顧客マスタには郵便番号や市区町村をデータを持っていることが多い…

  2. ブログ

    正規表現について

    初めまして。インターン大学一年生の松本です。まだまだペーペーで役立たず…

  3. ブログ

    データ視覚化ツール「Power BI」

    はじめまして、インターン生の山本です。前回の記事から非常に期間が空い…

  4. ブログ

    ダッシュボードでよくある間違い①

    こんにちは!インターン生の山本です。前回はダッシュボードの定義を振り…

  5. ブログ

    競合調査

    こんにちは!インターン生の藤本です。今日は私が最近行ったサイトの競合調…

  6. Tableau

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

    だいぶ間が空いてしまいましたが、DirectionAPI+Tablea…

コメント

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

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

CAPTCHA


最近の記事

  1. Mouseflowのセッションリプレイのしくみ
  2. LangChainって何?: 次世代AIアプリケーション構築…
  3. 1st Party Cookieと3rd Party Coo…
  4. Amplitudeで何が分かる?
  5. SnowflakeのHybrid Tableのマニュアルを読…
  1. IT用語集

    グリットコンピューティング(Grid Computing)って何?
  2. Adobe Analytics

    検索エンジン-有料とは-Adobe Analyticsの指標説明
  3. ObservePoint

    Webサイトのプライバシー検証(4/6):CMPはすべての可能な同意プロファイル…
  4. ブログ

    "Marketo"を使ってみて。パート2
  5. ObservePoint

    ObservePoint:タグ管理の救世主!サイト監査ツールのご紹介
PAGE TOP