【今日から】
Mtame株式会社について
Webサイトを更新するためのCMS操作勉強会

マーケティングの⼒で世の中をもっと楽しく！

1*Agenda【第一部】
・CMS Blue Monkeyの基礎説明
1.CMS Blue Monkey の特徴について
2.本日のセミナーテーマと目標について
3.新規ページの作成方法(ページ複製)について
4.ページの編集方法(画像やリンクの差し替え、ファイルのアップロード方法)
5.ページの公開方法(再構築)6.ページの導線設定について
7.Newsの更新⽅法について【第二部】
・個別ワーク(第一部のおさらい)
・個別相談会2

【第一部】CMS Blue Monkeyの基礎説明
ページを編集する前に・・・* 3

①-1.CMS Blue Monkey について
CMS Blue Monkeyの特徴①ASP型のツールになります・インターネットが使える環境であればどこでも更新できます・バックアップもソフト内で⾏えます
・ソフトをインストールしていただく必要なし②ページ単位でなくブロック単位で編集可能※第3項のページ新規ページ作成の際に詳しくご説明いたします③編集用のアカウントは作りたい放題複数人で同一アカウントを使用されていますと、後に入った方が前に入っていた方を追い出してしまうため担当者ごとにアカウントを作成してください④アカウント権限は3種類(管理者、編集者、閲覧者)
管理者⇒ページの編集及び本番環境への公開も可能
編集者⇒ページの編集のみ可能
閲覧者⇒ページの閲覧のみ可能
4

②-２Theme＆Goals.

【Theme】
新商品ページを作って公開するまでの流れを覚える※皆様からお電話いただく内容で一番多いご相談です⇒今回は作るだけでなく、導線設計にも触れながらお話します【Goals】
今日自社に帰った際、ページ作成できるようになる！

5

【第一部】CMS Blue Monkeyの基礎説明
実際に作成してみましょう* 6

③新規ページの作成
ページの作成方法①新規ページの作成
・好きなテンプレートを使用可能
・レイアウトも１から作ることができる・ページを作成する際は他のページからソースを引っ張ってきたり、⼤量のお気に入りブロックを利⽤する必要がある②ページの複製・同一ページ複製のため編集者への負担が少ない⇒コンテンツ(画像や文言)の変更のみでページが作成できる・ブロックの順番を変更するだけである程度であればデザインの変更も可能

今回は②ページの複製を使って更新していきます！
7

③-１ページの複製（1）複製したいページに入りをクリックしします。

（2）ページ名とファイル名をユニークな物に変更しをクリックします。

対象ページのタイトル

対象ページのURL

8

③-２お気に入りブロック「お気に入りブロック」： 作成方法（1） 「お気に入りブロック」＞お好きな「ブロック名」入力＞「追加」ボタン

お気に入り登録したブロックは、後から呼び出すことができ、Webサイトの更新に便利です。
9

③-３ お気に入りブロック「お気に入りブロック」：呼び出し方法（1）編集モード中にをクリックし、をクリックします。

（2）追加するブロックの選択 から、追加するブロックを選択後「OK」をクリックで、お気に⼊りブロックの挿⼊が完了です。

10

【第一部】CMS Blue Monkeyの基礎説明
ページの編集の流れ* 11

④-1ページの編集の流れ
1. 全体的な流れ(1)「サイト構成」より、編集したいページを表示(2)編集したいページのタイトルをクリックし編集画面へ遷移します12④-2ページの編集の流れ(2)「編集する」をクリックし、編集モードに切り替えます。
※Blue Monkeyは、ページをブロック単位で更新する仕組みです。
ブロックを複製したり、画像や文言、リンクの差し替えなどを行ってコンテンツの更新を行います。

(3)編集されたい「ブロック」をクリックし、作業完了後「保存」します。

13*

④-3画像アップロード
2-1. 画像：アップロード方法（1）事前 ： メニュー＞ファイル＞ファイル一覧＞
使⽤する画像やデータを⾚枠内へドラック＆ドロップで簡単にアップロード完了。

主に使用できるファイルの形式.png /.jpg /.gif /.pdf / .mp4 /.zip

ここにファイルをドロップ
14

④-４ 画像の挿入・編集（1）変更したい画像をクリックし、アクティブな状態にします。
をクリックしてファイルの管理画面より、変更したい画像を選択します。

（2）をクリック。

アップロード済みのファイルから挿入する画像を選択します。

15

④-５ 画像の挿入・編集（3）画像のサイズ、ファイル名を確認し、「OK」ボタンをクリック。

※レスポンシブ（スマホ）対応の場合、画像サイズの変更がこの画⾯では⾏えないことがあります。

16

④-６リンク設定方法
リンクの設定方法（1）リンクを付ける画像やテキストを選択し、をクリック＞「リンク」画面

α：「リンク先URL」へ直接リンク先のURLを入力する
β：「リンク先の一覧」よりサイト構成にあるページを選択する
上記のどちらかの方法でリンクを設定します。

(α)
(β)

17

⑤-1ページの公開

WEB上で公開したいページはす。
サブナビ上で表示したいページはり替えます。

を、したくないページはに切り替えまを、したくないページはに切

公開したいページのボタンにチェックをつけ上段にでてくる再構築ボタンを押せば完了となります18

⑤-2 編集〜公開までの流れまとめ① ページ右上「編集する」ボタンをクリックします。
② さらに編集されたい「ブロック」をクリックして、編集を開始します。
③

編集用のアイコンを活用しながらコンテンツを作成します。

④

編集・修正完了後、ページ右上「保存」ボタンをクリックすると編集を保存します。

⑤保存完了後、再構築をしますか？
⇒「OK」の場合は公開画面へと反映されます。
⇒「キャンセル」の場合はCMS管理画⾯上のみの反映となります。
公開するには再構築が必要です。
19

⑥-1 導線設計について操作説明を聞いていただきページの作り方までは理解いただいたと思いますがこのままですと作って満足しただけになってしまします。

⇒TOPページのピックアップ製品項目や中ページの商品一覧ページにも商品を追記しましょう！
GooGleのロボットは一般的にTOPなどの流⼊の多いページから⼊ってきていくつかのリンクをたどっていきクローリングするといわれております。
そのためTOPなどの流⼊の多いページにからの導線がない場合検知され難く検索エンジンにも反映されにくくなります。

20

⑦-1ニュース配信(メニュー＞ニュース配信＞ニュース配信)
(1)

をクリック

(2) 必要項目を⼊⼒し、(3) チェックボックスをいれ、再構築をクリックし、保存します。
にて公開となります。

※ ステータスが「編集中」＝未公開「公開中」＝公開
21

⑦-２ニュース配信※以下、必要項目となります。
①カテゴリの選択②ニュース公開日時 ※未来の日付設定も可能）③リンク先URL（必須）④タイトル（必須）⑤内容

ニュース配信の「内容」において改⾏する際は、半角”<br>”タグを⼊⼒します。
例：CloudCircusがリリースされました！<br>
CloudCircuはマーケティングに必要なコンテンツの作成・配信管理・分析まで！

22

⑦-3メディア機能について・メディア配信 (メニュー＞メディア配信＞投稿一覧＞新規投稿)
必要項目を入力・選択し、「公開」もしくは「保存」をクリック。
※ 「公開」 ＝ 公開画面へ反映「保存」 ＝ 下書き保存。公開画面
ページタイトル
カバー画像へ反映されない。

ページ本文

公開期間設定カテゴリ設定
投稿設定

タグ設定
23

⑦-4メディア機能について(1) カバー画像(4) カテゴリ：記事を「階層分け」する機能

推奨サイズは7：4の横長(横幅780px)の画像です。

https://〇〇.jp/blog/category/voice(5) タグ：記事に「印付け」する機能(3) 公開設定設定
公開期間機能を利用すると、該当日時に自動公開されます。
特定の時間に公開を行いたい場合は、公開期間設定を有効にし、日時を入力して下さい。
※記事の表示順は、公開日時順となります。

24
https://〇〇.jp/blog/tag/recommend*

⑦-５メディア機能について

タイトルタグ
共通表示

サイト設定、メディア設定のタイトルではなく、設定している記事だけに特別なページタイトルを設定したい場合は、こちらに入力します。

共通キーワード
設定

サイト設定、メディア設定のキーワードではな
く、設定している記事だけに特別なキーワードを設定したい場合は、こちらに入力します。

メディア説明文

サイト設定、メディア設定の説明文（discription）ではなく、設定している記事だけに個別の説明文を設定したい場合は、こちらに入力します。

<head>内編集領域

サイト設定、メディア設定の<head>内編集領
域ではなく、設定している記事だけに個別の設定を行いたい場合は、こちらに入力します。

25