ブログのデザインは、WordPressテーマをインストールし、画像や文章を配置していくだけで基本的にはそれなりになります。しかし、ブログを真剣に考え、視覚的に目立たせていきたいのであれば、デザインの原則を理解することが必要です。
なぜ「Muum」をおすすめするのか、ブログデザインに必要な要素を紹介しながら、TCDテーマMuumに迫っていきたいと思います。
記事の目的
今回は、人気WordPressテーマを続々と排出するTCDテーマの中で次世代の「ブログ」テーマのMuumについて詳細に解説していきます。実際の管理画面も見れるためお得な記事です。
おすすめの方
●Muumについて知りたい
●Muumの初期設定の実際を知りたい
●行動喚起を図るブログの構築方法を知りたい
記事の信頼性
・Muumを保有しています
・TCDテーマNANOを用いた企業のホームページ作成のサポートの経歴があります
・ドメインパワー40超えの企業にて500記事以上のブログ作成
Muum(tcd085)の概要
| 項目 | 内容 |
|---|---|
| テーマ名 | 「Muum」（tcd085） |
| 価格 | 9,800円（税込） |
| ジャンル | ブログ・アフィリエイト |
| おすすめ度 | ⭐️⭐️⭐️⭐️☆（4.4/5段階中） |
| コメント | 広告・記事の見せ方にこだわれる・SEO対策が十分にされたコスパの高いテーマ |
最高のCTA（行動喚起）機能
なぜデザインをしていく必要があると思いますか？その目的は、ウェブサイトを目標に向かってコンバージョンさせることです。ただそれだけです。では、どうすればいいのでしょうか？行動喚起につながるビジュアル的なヒエラルキーが必要となります。
簡単に言うと、CTA（Call To Action 行動喚起）につながる見出しや一連の見出しを配置すること、この見出しと行動喚起のコンビを人々が最も目にする場所（ホームページのトップ、サイドバーのトップ、記事の下部など）に配置することです。
“試してみる”・“詳細を見てみる”・“問い合わせてみる”など行動をいかに起こすことができるかが全てです。
行動喚起について学びたい方はこちらの記事も併せてご覧ください。
この“見出し“と“行動喚起“の組み合わせを目立たせるのに特化したテーマが「Muum」です。
Muumでは記事に溶け込むように自然な位置に広告を貼付でき、さらにその位置が適切なのかをテストする機能が標準装備されています。
また、“記事ごとに追加CSS“が設定できるため、記事のテーマに合った見出し・行動喚起の設定が非常に行いやすいです。
そのようなすごい便利な機能がついて価格が1万円を切るので、本当にコスパの良いTCDという有名企業がなせる技だと思っています。
圧倒的にモバイルフレンドリー
引用元：Muumホームページ
現代、ユーザーの8割はスマホでウェブ検索をすると言われています。そのため、スマホでの見せ方はこだわっていく必要があります。2015年4月にモバイルフレンドリーはGoogleが全世界で実装しました。Webサイトがモバイルフレンドリー化（スマホ対応）していないと、Googleの検索エンジンでの順位低下などの無視できない影響がでてくると言われます。モバイルフレンドリーはWebサイト単位ではなく、ページ単位で適用されます。
「Muum」では、画面をPCとモバイルで別々に設定することができます。そのため、スマホでの見え方もユーザーにストレスを与えず、見せ方をパーフェクトに設定できます。また、記事単位ごとにCSSはじめ設定できるので、ページごとにこだわってブログを書いていくことが可能です。
ランディングページ（LP）の作成ができる
引用元：Muumホームページ
最近のユーザーは非常にせっかちです。注意を引くには数秒しかないということは、よく知られた事実です。それに対してハイエンドなビジュアルで最適化された、視覚的に魅力的なランディングページ（LPページ）を構築するのは非常に良いアイデアです。また、人目を引くヘッダー画像や印象的なキャッチフレーズを取り入れると効果的です。
ランディングページには、CTAやスニペットによるブログ記事のプレビューを組み込むと、読者を最大限に引きつけ、ウェブサイトのコンバージョンを高めることができます。
過去の顧客の声や新鮮なコンテンツを盛り込んだデザイン性の高いランディングページは、読者を引きつけ、メインページの直帰率を下げることができるのは明らかです。
「Muum」では様々なレイアウトの固定ページが作成できます。2カラムを選択できたり、フル幅ヘッダーやロゴ・メニューの表示選択もできます。圧倒的なページ作成能力を持っており、これだけで当テーマを利用する価値は高いです。
SNSボタン：リーチを強化する
現在、ユーザーの大半は、Facebook、Twitter、Instagramなど、さまざまなソーシャルメディアプラットフォームを利用しています。そのため、SNSボタンを見やすく統合することは重要です。これらのボタンに加え、ホームページにTwitterのフィードを追加したり、Instagramのギャラリーを活用したり、Facebookから読者がアクセスできるようにすることも大切です。
このように、簡単にアクセスでき、共有できるコンテンツは、読者を永続的な顧客に変えるアフィリエイトマーケティングの最も強力な武器になることができます。もちろん「Muum」ではSNSボタンの設定を下のように細かく設定することが可能です。
Muumで最高峰のブログにアップデートしませんか？
成熟したブログ市場を制するには
古びたマーケティング・眠たいデザインのブログから
新しいものへとアップデートする必要があります。ブログテンプレートのスタンダードを目指したWordPressテーマ「Muum」は、
デザインの自由度、SEOともに最高峰の完成度です。「Muum」はあなたの利益となることを確信しています。
引用元：Muumホームページ
その他にも当然ブログを楽しく書きやすくする工夫や行動喚起を促すウットリさせるアクションが散りばめられています。
Muumは令和の時代の先端を駆け抜けるWordPressテーマです。1万円を切るコストで最高のブログ・アフィリエイト体験をしましょう。
購入手順も下の記事で画像や動画を用いながら紹介しています。非常に簡単「5分」で済むのでコスパ最高の「Muum」でブログを始めましょう！！
-
-
【2022年最新】TCDテーマの購入〜インストール手順、NANOの解説・初期設定まで
TCDってどんな会社？ TCDテーマを制作しているのは「株式会社デザインプラス」という卓越したデザインでマーケティングする会社です。 「商品リリースの度にクオリティを上げていく」という課題を淡々とこな ...
続きを見る
他のTCDワードプレステーマにも興味のある方は、下の記事で紹介しておりますので併せてご覧ください。
TCDテーマ「Tenjiku（天竺）」はこちら：料理店・レストラン・フォトギャラリー
ここからは、MuumのTCDテーマ管理画面の「基本設定」と「CTA管理」の実際をそのまま一部ご紹介したいと思います。
Muumの基本設定
色の設定
サブカラーは主に、ページャー、ナビメニュー、リンクボタンにカーソルを合わせた時に利用されます。
- メインカラー色を選択
- サブカラー色を選択
- カーソルを合わせた時のテキストリンク文字色色を選択
- 記事本文内のリンク文字色色を選択 メインカラーを適用する
- カーソルを合わせた時の記事本文内のリンク文字色 サブカラーを適用する
ファビコンの設定
ブラウザのアドレスバーやタブで表示されるファビコン（サイトアイコン）を設定します。
.ico、.png、.gif形式のファイルが利用できます。.icoファイルを利用されることをお勧めします。
ファビコン画像 (推奨画像サイズ：横幅16px、縦幅16px
フォントタイプの設定
通常のフォントタイプ
このフォントタイプがサイトの基本フォントタイプになります。
- メイリオ
- 游ゴシック
- 游明朝
見出しのフォントタイプ
このフォントタイプは見出しやキャッチフレーズに適用されます。
- メイリオ
- 游ゴシック
- 游明朝
ウィジェットの見出しのフォントタイプ
- メイリオ
- 游ゴシック
- 游明朝
本文のフォントタイプ
このフォントタイプは詳細ページの本文に適用されます。
- メイリオ
- 游ゴシック
- 游明朝
サムネイルのホバーエフェクト
ホバーエフェクトのタイプ
サムネイルのホバーエフェクトを3タイプから選択できます。
なお、アフィリエイトASPなどの規約に抵触する可能性がある為、広告スペースに入力したサムネイルにはホバーエフェクトは付きません。
- ズーム
- スライド
- フェード
- アニメーションを使わない
ズームの設定
拡大率を設定してください。（初期値：1.2）
ソーシャルボタンの設定
詳細ページ上部に表示されるソーシャルボタン
このソーシャルボタンは記事タイトルエリアの下に表示されます。
※Facebookいいねボタンは「ボタンタイプ5（公式ボタン）」選択時のみ表示されます。
※「ボタンタイプ5（公式ボタン）」を選択時、RSSボタンは表示されません。
※PinterestのPin itボタンの仕様上、同一ページ内で「ボタンタイプ5（公式ボタン）」とボタンタイプ1～4を混在することによりデザインが崩れて表示されることがあります。そのため、Pin itボタンは、記事上か記事下のいずれか一方（1ページにつき1つ）のみの表示を推奨いたします。
ソーシャルボタンのデザイン
- ボタンタイプ１（カラフル）
- ボタンタイプ２（モノクロ）
- ボタンタイプ３（カラム幅＋カラフル）
- ボタンタイプ４（カラム幅＋モノクロ）
- ボタンタイプ５（公式ボタン）
表示設定
- Facebookいいね ※ボタンタイプ5（公式ボタン）選択時のみ表示します。
- Facebookシェア
- はてなブックマーク
- Feedly
- RSS
詳細ページ下部に表示されるソーシャルボタン
このソーシャルボタンは記事の下に表示されます。
※Facebookいいねボタンは「ボタンタイプ5（公式ボタン）」選択時のみ表示されます。
※「ボタンタイプ5（公式ボタン）」を選択時、RSSボタンは表示されません。
※PinterestのPin itボタンの仕様上、同一ページ内で「ボタンタイプ5（公式ボタン）」とボタンタイプ1～4を混在することによりデザインが崩れて表示されることがあります。そのため、Pin itボタンは、記事上か記事下のいずれか一方（1ページにつき1つ）のみの表示を推奨いたします。
ソーシャルボタンのデザイン
- ボタンタイプ１（カラフル）
- ボタンタイプ２（モノクロ）
- ボタンタイプ３（カラム幅＋カラフル）
- ボタンタイプ４（カラム幅＋モノクロ）
- ボタンタイプ５（公式ボタン）
表示設定
- Facebookいいね ※ボタンタイプ5（公式ボタン）選択時のみ表示します。
- Facebookシェア
- はてなブックマーク
- Feedly
- RSS
フッターのソーシャルボタン
表示設定
- フッターにソーシャルボタンを表示する
リンクの設定
SNSボタンを表示できます。
ボタンを表示したいSNSのページURLを入力してください。
空欄の場合、そのボタンは表示されません。
- Instagram URL
- Twitter URL
- Facebook URL
- Pinterest URL
- Youtube URL
- お問い合わせページのURL（mailto:も利用可）
- RSSボタンを表示する
Twitterボタンの設定
※Tweetボタンを表示する場合、Twitterアカウント名(@なし)を設定してください。（例：tcd_jp
Facebook OGPの設定
OGPとは、FacebookやtwitterなどのSNSでWebページをシェアする際に、記事タイトル、URL、アイキャッチ画像などのページ情報を正しく伝えるための仕組みです。
OGP設定を行うことで、シェアされたページの情報がよりわかりやすく魅力的に表示されます。
OGPを利用する
アプリID
Facebook インサイトを使用するには、アプリIDを設定してください。
OGP用画像
ここで登録した画像はアイキャッチのない投稿記事やアーカイブページなどでOGP用画像として使用します。
推奨画像サイズ：横幅1200px、縦幅630p
Twitter Cardsの設定
Twitterでシェアする際にアイキャッチ画像やタイトルなどのページ情報をカード形式で表示するための設定を行います。
※Twitter Cardsを利用する場合は、併せて「Facebook OGP設定」を行ってください。
Twitter Cardsを利用する
あなたのtwitterアカウント名（@マークは不要）
サムネイル用オリジナル代替画像
サムネイルが登録されていない記事では代替画像が代わりに表示されますが、
このオプションを使えば任意の画像を代替画像として利用する事ができます。
推奨画像サイズ：横幅500px、縦幅500px
ロード画面の設定
ページ遷移時にデータ読み込み中の状態が見えないように表示させておくロード画面（読込中を示すロードアイコンを表示）の設定を行います。
表示設定
- ロード画面を表示しない
- トップページのみ表示する
- トップページとアーカイブページのみ表示する
カスタムCSS（<head>タグ内に出力されます）
以下のCSSは<head>タグ内に出力されます。
<style>タグを入力する必要はございません。
記入例：.custom_css { font-size:12px;
カスタムスクリプト（<head>タグ内に出力されます）
<head>タグ内の最後に出力されます。<script>タグを含めてGoogleAnalyticsのスクリプトなどを入力してください。
記事下CTA
記事下CTA
記事詳細ページ下部に表示するCTAの設定を行います。
最大３つまで登録することができます。
CTA-A
CTAのタイプ
タイプ１
タイプ２
タイプ３
キャッチフレーズ
- 文字サイズpx
- 文字色色を選択
- カーソルを合わせた時の文字色色を選択
リンクの設定
- URL
- リンク先のURLを新しいウィンドウで表示する
画像
推奨画像サイズ：横幅750px、縦幅250px
画像（モバイル用）
推奨画像サイズ：横幅350px、縦幅200px
オーバーレイ（画像に重ねる色）の設定
- オーバーレイの色色を選択
- オーバーレイの透過率0.1から0.9までの数値を入力してください。数字が小さくなるほど、より透明になります。
CTA-B
CTA-C
表示設定
表示する記事下CTAを選択してください。 CTA-A CTA-B CTA-C ランダム表示 非表示
ABテスト
コンバージョンを測定するには、サンキューページ（サイト訪問者による商品購入やメルマガ登録などのアクション後に表示するページ）のエディタ内に以下のコードをコピー＆ペーストしてください。
| CTA | インプレッション | クリック数 | クリック率 | コンバージョン | コンバージョン率 | リセット |
|---|---|---|---|---|---|---|
| CTA-A | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
| CTA-B | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
| CTA-C | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
フッターCTA
ページをスクロールした際にフッター最下部に表示されるCTAの設定を行います。
最大３つまで登録することができます。
一度フッターCTAを閉じた場合、ブラウザを閉じるまで再表示されません。
CTA-A
CTAのタイプ
- タイプ１
- タイプ２
- タイプ３
キャッチフレーズ
- 文字色色を選択
ボタンの設定
- ラベル
- URL
- リンク先のURLを新しいウィンドウで表示する
- 文字色色を選択
- 背景色色を選択
- カーソルを合わせた時の文字色色を選択
- カーソルを合わせた時の背景色色を選択
背景色の設定
- 背景色色を選択
- 背景色の透明度
閉じるボタンの設定
- 文字色色を選択
- カーソルを合わせた時の文字色色を選択
CTA-B
CTA-C
表示設定
表示するフッターCTAを選択してください。
※フッターCTAを選択すると、スマホ用固定フッターバーは非表示となります。 CTA-A CTA-B CTA-C ランダム表示 非表示
トップページのみ表示しない
ABテスト
コンバージョンを測定するには、サンキューページ（サイト訪問者による商品購入やメルマガ登録などのアクション後に表示するページ）のエディタ内に以下のコードをコピー＆ペーストしてください。
| CTA | インプレッション | クリック数 | クリック率 | コンバージョン | コンバージョン率 | リセット |
|---|---|---|---|---|---|---|
| CTA-A | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
| CTA-B | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
| CTA-C | 0 | 0 | 0% | 0 | 0% | 計測値をリセット |
ネイティブ広告
広告の設定
広告1の設定
広告1を表示する
広告2の設定
広告3の設定
広告4の設定
広告5の設定
広告6の設定
広告7の設定
表示設定
トップページのタブ記事一覧、メガメニューの記事一覧、各種ウィジェットにつきましては、各設定欄にて設定いただけます。
トップページのヘッダーカルーセル
ネイティブ広告を表示する
トップページのヘッダーカルーセル（モバイル用）
このオプションは、モバイル用ヘッダーカルーセルが設定されている場合にのみ適用されます。
ネイティブ広告を表示する
アーカイブページの記事一覧（カテゴリー、タグ、投稿者、月別アーカイブページ共通）
ネイティブ広告を表示する
フッターカルーセル
ネイティブ広告を表示する
