WORDPRESS 投稿画面が表示されない

はじめに

みなさんこんにちはALEXです。ブログを開設するためにWORDPRESSをインストールすれば、すぐブログを作成できるのがWORDPRESSのよいところです。当社もコーポレートサイト、ブログサイトはすべてWORDPREESを使っています。

 

投稿記事が表示されない!?

先週新しく趣味のプログラミング言語のブログをたちあげました。

MacでCOBOL

レトロなプログラミング言語COBOL、私が駆け出しのプログラマだったころ、三番目に覚えた言語でした。最近、統計問題でCOBOLが取り上げられており、レトロであっても欠かすことのない言語です。

昔の書籍を引っ張り出し、Mac上で使いこなすためのテクニックも踏まえて、基本的な部分から上級者向けのテクニックまでご紹介する予定です。

プログラミングの世界で欠かすことができないのが「シンタックスハイライト」

mystr = "Sample"
print mystr[3:]

こんな感じでコードをわかりやすく表示してくれるもので、プログラミングを扱うブログには欠かせないです。

それが、予想しない不具合を引き起こしました。

先ほどのCOBOLブログに原稿をいくつか書き込んで、公開しました。

そして、シンタックスハイライトにはCrayon Syntax Highlighterをインストール。

公開前にプレビューをチェックすると画面がおかしいんです。下の通り。

ん?表題だけしか表示されません。おかしいな。

もしかして文章を保存しなかった?確認するとしっかり保存されています。

いくつもつかっていてこんな不具合はありませんでした。

色々調べてみましたが、原因がはっきりわかりません。

ちなみにサイトの環境は

PHP:ver7.0

WORDPRESS : ver5.4.1

テーマ:LODESTAR

ちなみにテーマをWORDPRESSのデフォルトTwenty Twentyに変えてみましたがかわりません。

 

原因は Crayon Syntax Highlighter

試行錯誤の結果、原因がわかりました。シンタックスハイライトのためにいれたプラグイン「Crayon Syntax Highlighter」でした。これを無効にすると、記事が正しく表示されました。

シンタックスハイライトはPrism.js

といっても、シンタックスハイライトは欠かすことができないので、ほかのツールにしました。選んだのがPrism.jsです。これはプラグインでなく、jsとcssファイルを取り込むものです。こちらは問題なく動きました。ようやく公開できました。

 

謎は深まる一方

問題が解決したのはいいのですが、自分が運営しているブログサイトではこんな不具合はおこっていないのです。PHPのバージョンの相性の問題だとかいろいろな情報がありますが、謎は残ったままです。

どなたかこ存知でしたらお問合せ経由でお教えください。

管理画面の「投稿一覧」「固定ページ一覧」の表示数を変更する

皆さんこんにちは。ALEXです。

WordPressでコンテンツを作成していて、記事数が増えたときに、管理画面で表示されるページ数が少なくて、修正するときに余計な手間が発生していませんか?通常WordPressの管理画面「投稿一覧」「固定ページ一覧」で表示される記事数がどちらも1ページあたり20件です。になっています。

もっと多くの記事をいちいちページジャンプしないで管理したい!と思いますよね。

残念なことに、この設定機能は標準では搭載されていません。

そこで、[functions.php]にコードを書き加えて問題を解決します。

「投稿一覧」「固定ページ一覧」の最大表示数変更方法

使用中のテーマの[functions.php]の適当な箇所に、以下のコードを記述します。

function my_edit_posts_per_page ($posts_per_page) {
	return 100;
}
add_filter('edit_posts_per_page', 'my_edit_posts_per_page');

これで最大表示件数が100件に増えます。

この設定で「投稿」「固定ページ」のほか、「カスタム投稿タイプ」にも適用されます。

 

件数をあまり増やすとエラー発生しますので、最大でも300件程度にしましょう。

WORDPRESS5.0がリリースされました

はじめに

みなさんこんにちはALEXです。この度、WORDPRESS5.0がリリースされました。約4年ぶりの大型アップデートです。今回ほどのアップデートでは注意が必要です。

 

更新時の注意点

WORDPRESSだけでなく、ソフトウェアの大型アップデートでは、新しい機能が追加されることが多く、その分新機能が追加されれば、便利になる反面、次のような問題が発生する可能性もあります。

  • 今まで使っていたプラグインが使えな
  • 今まで使っていたテーマが使えない
  • 新機能が使いにくい
  • 重大な不具合が発生するかもしれない

WordPress 5.0への更新作業は慎重に行いましょう。更新前にはデータベースとファイルのバックアップを必ずとるようにしてください

 

WordPress 5.0 主要新機能

WordPress 5.0 の新機能は、主に次の2つです。

  • エディタ「Gutenberg」
  • テーマ「Twenty Nineteen」

今回はエディタ「Gutenberg」をご紹介します。

エディタ「Gutenberg」

エディタとは、投稿や固定ページを編集する画面のことです。Gutenbergは、従来エディタ(と比べて、使い方が大きく異なります。

具体的には、記事内の「段落」「見出し」「画像」などをブロックで構築する仕様に生まれ変わりました。

 

エディタ「Gutenberg」が使いにくい場合

エディタ「Gutenberg」での編集作業がやりづらい場合は、従来のエディタに戻すことができます。私も、このGutenbergは現時点では使いにくいです。htmlを直接編集していたので、ほんとうに使いずらいです。また、画像を自由に挿入できない、ブロックがたくさん生まれてしまう等々・・・。

こんな時には公式プラグイン「Classic Editor」

戻すには、エディタを公式プラグイン「Classic Editor」をインストール・有効化します。

ただし、公式ブログによると、Classic Editor プラグインのサポートは2021年までの期限付きです。それ以降は従来のエディタが使えなくなる可能性があるため、Gutenberg エディタに慣れるのがよいかもしれません。

Contact Form 7 でリアルタイムにエラーチェック

はじめに

ウェブサイトを訪問して、製品・サービスに興味を持ってくれたユーザが問い合わせをしてくれるフォームですが、これがとても大切なパーツであるということが最近よく言われています。SEO(Search Engine Optimization)と並びEFO(Entory Form Optimization)がとても大切です。
 
特にフォームの入力がスムースに進むようにサポートしてあげることがとても大切なことはこれまでの記事でもご紹介いたしましたが、今回、その中でとても大切なパートをご紹介します。Contactform7の標準機能でも入力に間違いがあると、「送信」ボタンを押した後にエラーメッセージがでますが、もっとユーザビリティを向上させたいですよね。
 
今回は、Contact Form 7にjQuery-Validation-Engineを組み込んでリアルタイムで入力エラーをチェックする方法をご紹介します。当社ウェブサイトの「お問合せデモページ」をご覧ください。
 

リアルタイムエラーチェック導入

導入は慣れてしまえば簡単です。

導入方法は、いくつかの方法があります。Githubからダウンロードして、自分のサイトのディレクトリに保存する方法が先々を考えるとよいのですが、今回はず確実に導入できる方法をご紹介します。

「外観」―「テーマの編集」をクリック

テーマファイルのheader.phpをクリックします。

ここに以下のコードをコピペしてください。

 

<head></head>内のjquery.jsより後ろの位置かあるいは、</body>直前など適切な場所に以下のコードをコピペしてください。

 

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script>

 

 

jQuery-Validation-Engineの実行コード記述

jQuery-Validation-Engineを実行するコードをheader.phpで記述したコードの後ろに記述します。(「jquery.validationEngine.min.js」より後ろに記述してください。)

<script>
jQuery(document).ready(function(){
  jQuery("#formID").validationEngine();
});
</script>

 

ここに書いている、#formIDはJscriptのidを記述してください。注意してほしいのですがformIDの前の#は消さないでください。Contact Form 7のデフォルト状態ではform要素にid属性が付与されていないので、idを追加して書き込みます。固定ページにフォームを作成しますが、この時記述するcontact-form-7のショートコードにhtml_id属性を下記のように追加すれば任意のidを追加できます。

contact-form-7 id="xxx" title="xxx" html_id="formID"

 

jQueryでclass属性を追加

フォームのinput要素に validate[required] という形のclass属性を追加します。
基本的にはinput要素に class=”validate[required] ” と追加すれば、リアルタイムでバリデーションを行います。Emailアドレスかどうかをチェックしたい場合は class=”validate[required,custom[email]]” としてあげると、Emailとして入力してあるかをチェックします。

Contact Form 7ではinput要素に[](角括弧)の付いたclass属性を追加できないため、jQueryのaddClass メソッドを使って追加します。jQueryは以下の通りです。

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#name").addClass("validate[required]");
 jQuery("#email").addClass("validate[required,custom[email]]");
 jQuery("#url").addClass("validate[required,custom[url]]");
 jQuery("#tel").addClass("validate[required,custom[phone]]");
 jQuery("#eisuji").addClass("validate[required,custom[onlyLetterNumber]]");
 jQuery("#mojisu").addClass("validate[required,minSize[5],maxSize[10]]");
 jQuery("#drop").addClass("validate[required]");
 jQuery("#check input").addClass("validate[minCheckbox[2]]");
 jQuery("#radio input").addClass("validate[required]");
 jQuery("#message").addClass("validate[required,minSize[5]]");
});
</script>

 

デモで使用しているContact Form 7のLソースです↓。

<dl id="demo" class="clear">
 <dt>お名前 (必須)</dt>
 <dd>[text* aaa id:name]</dd>
 <dt>メールアドレス</dt>
 <dd>[email* bbb id:email]</dd>
 <dt>URL</dt>
 <dd>[text* ccc id:url]</dd>
 <dt>電話</dt>
 <dd>[tel* ddd id:tel]</dd>
 <dt>英数字のみ</dt>
 <dd>[text* eee id:eisuji]</dd>
 <dt>5文字から10文字</dt>
 <dd>[text* fff id:mojisu]</dd>
 <dt>ドロップダウンメニュー</dt>
 <dd>[select* ggg id:drop include_blank "海" "川" "山" "丘"]</dd>
 <dt>チェックボックス 2つ以上</dt>
 <dd>[checkbox* hhh id:check "空" "星" "雲"]</dd>
 <dt>ラジオボタン</dt>
 <dd>[radio iii id:radio "リンゴ" "オレンジ" "グレープ"]</dd>
 <dt>メッセージ本文 5文字以上</dt>
 <dd>[textarea* jjj id:message]</dd>
 <dt>&nbsp</dt>
 <dd>[submit "送信"]</dd>
</dl>

 

 

デモサイト

デモサイトはこちらです。

http://alexandco-global.tokyo/validation_demo/

いかがでしょう?うまく表示できましたか?

私も最初はうまく表示できなくて悩みました。
でも絶対できますのであきわめないでください。

どうしてもわからなければお問い合わせください。

ありがとうございました。

WORDPRESS | Contact Form 7 郵便番号から住所を自動入力する

みなさんこんにちはALEXです。EFOキャンペーンもいよいよあと2件です。合計8件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

今回は入力フォームの住所入力を自動入力する方法について解説します。郵便番号から住所を表示するライブラリーAjaxZip3を使えば、膨大な数の郵便番号から住所を取得することができます。

郵便番号は3桁+4桁、住所は「都道府県」「市区町村」「番地」の3項目の入力とします。

フォーム画面

Contact Form 7 のフォーム編集画面で以下のタグを入力します。

郵便番号
[text zip1 id:zip1]-[text zip2 id:zip2]

都道府県
[text prefecture id:prefecture]

市区町村 
[text city id:city]

番地 
[text street id:street]

 

これでOKです。

 

Function.phpの編集

Function.phpに以下のタグを入力します。

function add_head_link() {
    echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
    echo "
    <script type=\"text/javascript\">
    jQuery(function($){
    $(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
    $(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(\'zip1\',\'zip2\',\'prefecture\',\'city\',\'street\');');
});";
    echo '</script>';
}
add_action('wp_head', 'add_head_link');

 

これでOKです。

入力画面を確認する

 

実際の画面を確認します。入力前は以下の通りです。

郵便番号に当社所在地の郵便番号「140-0014」を入力すると以下のようになります、

これは便利です。作業時間5分もかからず住所の自動入力が実現しました。

 

まとめ

ライブラリーAjaxZip3を使用して郵便番号入力から自動的に住所を表示する方法をご紹介しました。

 

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

WORDPRESS | Contact Form 7  バリデーションを導入する

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半戦です。合計7件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact form 7にマイクロコピー挿入

 

今回はバリデーションの導入についてご説明します。バリデーションとは、フォーム入力の場合、フォームに入力した内容が妥当かということを検証する、ということです。以前の記事で、

Contact Form7 メールアドレスの再入力チェック

がありますが、これもバリデーションです。入力時にバリデーション表示を出して、入力時の誤りに気付いていただく、という心遣いです。

 

contact Form 7 のデフォルトのバリデーション

Contact Form7にもバリデーション機能があります。編集画面ー「メッセージ」が該当します。以下にデフォルトを表示します。

 

21種類の項目がデフォルトで導入されています。この他に、ご利用状況に応じてバリデーションを追加したいところです。今回は、氏名のフリガナチェックを行います。

 

氏名のフリガナをチェックする

氏名にフリガナを入力していただく場合、フリガナに全角カナが入力されているかチェックします。

フォーム側に氏名(フリガナ)を追加します。タグは以下の通りとします。

[text* furigana placeholder "例)キタムラ ツバサ"]

 

また、入力された文字が全角カタカナであるかを確認するためのスクリプトをfunciton.phpに記述します。

function wpcf7_validate_kana($result,$tag){ 
  $tag = new WPCF7_Shortcode($tag);
  $name = $tag->name;
 
  $value = isset($_POST[$name]) ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " "))) : "";
 
  if ($name === "furigana") {
 

    if(!preg_match("/^[ァ-ヾ]+$/u", $value)) {
 
      $result->invalidate($tag, "全角カタカナで入力してください。");
    }
  }
  return $result;
}
add_filter('wpcf7_validate_text',  'wpcf7_validate_kana', 11, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_kana', 11, 2);

 

画面を確認しましょう。

ふりがなをひらがなにして送信します。

メッセージが表示されました。

 

まとめ

Contact Form7のデフォルトのバリデーション機能以外にも、function.phpにタグを記述することでオリジナルのバリデーションを追加することができます。

ありがとうございました。

 

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

WORDPRESS | Contact form 7にマイクロコピー挿入

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半、あと三つで連載終了の予定です。いままで以下の記事をアップしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

WORDPRESS | Contact Form 7 でメール送信ができない(1)

 

今回は、「マイクロコピー」についてお話しします。マイクロコピーはオレコンさんが本を出版されており皆様もご存じかとは思いますが、フォームの入力欄周辺に「短い文章」を添えてユーザーのフォーム入力を支援するものです。このマイクロコピーはアマゾンなどの大手ECがすでに取り入れており、実際に効果を上げているものです。当社も依然フォームでの離脱率が高く、対策が求められておりました。そこで、早速マイクロコピーを導入しています。実際にフォーム画面からフォーム送信に至るコンバージョン率が向上しているので、ぜひ皆さんにもお勧めします。

 

メッセージ本文にマイクロコピーを挿入する

従来のフォームのメッセージ本文の欄は真っしろしろの空白です。

ここにマイクロコピーを入れます。どのような文章を入れるのが効果的なのかは、運営するサイトのビジネスにもおりますが、当社はウェブマーケティングのコンサルティングをお勧めしているので

「例」ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい」という例文をプレースホルダーとして表示することにしました。

ここの部分の編集タグは以下のようになります。

[textarea your-message x4 placeholder "例)ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい"]

 

改良後の画面はこのようになっています。

 

とはいっても、プレースホルダーの問題は、1文字入力すると消えてしまうところです。

自分で作っておきながら「意味ないじゃんかよ」と思いました。そこで、文字を入れても消えないプレースホルダーを作りました。例文のこりますが、それが問題になるわけではありませんし。

ここの部分の編集タグは以下のようになります。

メッセージ本文<span class="requied">必須</span>
[textarea your-message x4 placeholder ]ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい[/textarea]

 

 CTAボタンの「送信する」を変更する

フォームを入力し、確認画面で入力内容をもう一度確認していただきいよいよ送信していただくわけですがそのCTAボタンがデフォルトの「送信する」ではコンヴァージョン率は上がりません。

ここは、「この内容で問い合わせる」という文章に書き替えるのが有効です。無料を強調したいのであれば「無料で問い合わせる」でもよいです。ここはフォームの編集画面を変えるだけです。変更前後で以下のように変わります。

 

まとめ

みなさんも自分でサイトを運営するだけでなく、いろいろなサイトで買い物やお問い合わせをされていらっしゃると思います。フォームでは、ほんの些細な使い勝手の悪さが離脱につながることはよくご存知かと思います。その時のユーザーとしての自分の気持ちを思い出しながらお問い合わせフォームに、どんなマイクロコピーを添えるとユーザ―様のアシストが有効かを考えてみましょう。Contact form 7でもマイクロコピーの挿入は全く問題なくできますので、トライなさってはいかがでしょうか?

 

有難うございました。

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form 7 でメール送信ができない(1)

みなさんこんにちはALEXです。ただいまEFOキャンペーンの連載記事を執筆しています。なんのかんのもう5つリリースしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

いよいよ後半戦の始まりですが、「急にContact Form 7 でメールを送信できなくなった」というお問い合わせが頻発したことがあります。もう沈静化していますが、最近WORDPRESSをはじめられた方向けに解説します。

「Contact Form 7でメール送信」できないことがあるんです。 今回はその原因と対策の一つをご紹介します。

Contact Form 7でメール送信できない原因

実は私も以前この不具合にでくわし数週間うなりました。あれこれ調べても原因がわかりません。対策が打てないので、自力でフォームを作るか、外部のサービスを使うしか対策は打てませんでした。

ですが、結局判明したのはRest APIが原因でした。Rest APIとは、ブラウザでサイトにアクセスしHTMLコードを取得表示する替わりに、外部のアプリケーションから JSON等のデータ形式と同じように簡単にデータ表示させるための仕組みです。

WORDPRESSでもヴァージョン4.7から導入されましたが、今年に入ってすぐに「認証しないでサイトを改ざんできるバグ」が発見されました。かなり大きなニュースになったのでご覧になった方はRest APIを無効にされた方も多いのではないでしょうか。また、このニュースを受けてホスティングサーバ事業者が提供するWPもデフォルトでRest APIが無効になったのだと思います。

この状態で、Contact Form 7 で送信ボタンを押すと、あの「クルクルかざぐるま」が延々と回り続けます。

これはいけません。せっかく費用をかけてサイトを作り、一生懸命Googleアナリティクスで動線解析しても最後の最後で「コンバージョンゼロ」になってしまいます。

 

対策ーContact Form 7 Controlsを導入する

Rest APIを有効にすれば問題は解決します。ですが、セキュリティ上懸念の残っているAPIはあまり使いたくありません。そこで、Contact Form 7のプラグイン「Contact Form 7 Controls」の導入をお勧めします。

WordPress 管理画面の「プラグイン」-「 新規追加」から「Contact Form 7 Controls」をインストールして有効化しします。「Contact Form 7 Controls」をインストールして有効化すると、管理画面の「お問い合わせ」からフォームを選び演習画面を表示します。タブの右端に「Customize」が追加されていますので、これをクリック。上から2番目の『AJAX Submissions » Disable AJAX for this form』にチェックを入れて保存します。

 

 

この設定はコンタクトフォームごとに変更する必要があります。複数のコンタクトフォームを設置している場合はすべて設定変更しましょう。

 

まとめ

今回は「Contact Form 7 でメール送信ができない」という問題の原因と解説についてご説明しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form7 の確認画面を追加する

みなさんこんにちはALEXです。現在EFO改善キャンペーン中です。今回で5作目、後半戦開始といったところです。これまで

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

の4記事を紹介させていただきました。Contact Form 7はデフォルトでは確認画面がなく、送信ボタンをポチするといきなり送信されてしまいます。はじめてのビジターの方が多いサイトではやはり確認画面がほしいところです。そこで今回はContact Form 7に確認画面を追加できるプラグイン「Contact Form 7 add confirm」をご紹介します。

 

Contact Form 7 add confirmについて

このプラグインは、とても簡単に確認画面機能を追加できるので使われていらっしゃる方も大変多いのではないでしょうか?このプラグインの長所は

・とても簡単に利用できる

・フォームのタグ修正はほんの少しですむ

・確認画面に「戻る」ボタンを追加できること。

です。

 

作者さんのご紹介

このプラグインはアイティーエー株式会社のゆいちさんが制作され無償配布されています。詳しい説明はゆいちさんの記事をご確認ください。

Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン

 

ご注意事項

この作業は、「Contact Form 7」の設定を済ませた上でフォームからメールを送信可能な状態にしている必要があります。

「Contact Form 7 add confirm」と「Contact Form 7」の開発者は別の方です。どちらかのプラグインのアップデートなどで正常に動作しなくなることも十分想定されます。この記事を基にプラグインを利用する際は自己責任で利用して下さい。

 

Contact Form 7 add confirmのインストール

インストールも簡単です。管理画面から「プラグイン」-「新規追加」-「Contact Form 7 add confirm」で検索します。画面に表示されたらインストール、有効化で完了です。

 

コンタクトフォームの編集

さて、プラグインのインストールが完了したら、実際に使用してきましょう。コンタクトフォームを編集します。プラグインをインストールしただけでは、プラグインの機能は反映されません。以下の状態になっています。

コンタクトフォームを編集する必要があります。といってもとても簡単です。以下の三行に差し替えるだけです。

[confirm “確認画面へ”]

[submit “送信する”]

[back “編集し直す”]

 

画面確認

設定に問題なければ以下の通りに画面が遷移します。

入力時

 

確認画面

 

 

送信完了しました。

 

ここまでcontact form 7をモディファイしてきました。フォームの編集画面は以下の通りです。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[confirm "確認画面へ"]
[submit "送信する"]
[back "編集し直す"]

</div>

 

また、style.cssの追加部分は以下の通りです。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}
.wpcf7 input[type="submit"]:hover {
 box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

 

まとめ

contact form 7にプラグイン 「Contact Form 7 add confirm」を追加しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form 7でお問い合わせの目標設定

みなさんこんにちはALEXです。ただいまEFO向上キャンペーンを中です。これまで3件の記事を執筆いたしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

今回はContact Form 7を使用して、ユーザーからお問い合わせをいただいた時、このアクセスをGoogleアナリティクスで追跡する方法をご紹介します。以前、Googleアナリティクスの解析で申し込みフォーム送信後のサンクスページが表示されたとき目標達成としてカウントできる方法をお伝えしました。

Googleアナリティクスのアクセス解析 | 目標到達プロセス

この記事はお問い合わせにContact form 7を使用しない設定でした。Contact form 7 ではサンクスページは表示しない設定です。送信完了時にメッセージが表示されるだけです。ですので今回は、Contact form 7でフォーム送信完了のアクションをGoogleアナリティクスでトレースできるようになりましょう。そのためには」GoogleアナリティクスとContact Form 7を設定する必要があります。

 

Googleアナリティクスの設定

Googleアナリティクスにログインしましょう。「コンバージョン」-「目標」ー「目標到達プロセス」をクリックします。目標登録を促されますので、「目標を設定」をクリック。

次の画面で「新しい目標」をクリック。


後々わかりやすくするために、わかりやすい名前を設定しましょう。ここでは、「問い合わせ送信完了」としています。タイプは、目標を選択します。

「続行」をクリック。名前は「お問い合わせ送信完了」とし」「続行」をクリック。タイプは「到達ページ」とします。

「到達ページ」に「/contact_sent/」を疑似ページとして入力します。このページにアクセスがあったと仮定してアクセスデータを蓄積します。「目標を作成」をクリックすればGoogle Analyticsの設定は完了です。

 

Contact Form 7の設定

次にWordpressの設定を行います。管理画面から「コンタクトフォーム」をクリック。すでに作成したフォームを呼びだします。右はしのタブに「その他の設定」を選び以下のタグを入力してください。

on_sent_ok: “ga(‘send’,’pageview’,’/contact_sent/’);””

これでフォーム送信時に疑似的なページにアクセスしたことをGoogleアナリティクスに通知します。

 

 まとめ

上記の作業を行うことで、Contacct From 7でフォーム送信した場合に、Googleアナリティクスでカウントすることができるようになります。

次回は、

「Contact Form7 の確認画面を追加する」をお届けします。ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 

 

WORDPRESS | Contact Form7 フォームのレイアウトを改良する

みなさんこんにちはALEXです。ただいまEFO改良キャンペーン中です。日々、ブログ更新に合わせ当社ブログサイトのフォームを改良していきますので、リアルタイムで使い勝手を試してください。

WORDPRESS | Contact Form7 メールアドレスの再入力チェック 

前回は、メールアドレスの再入力確認まで行いました。

そうはいっても、Contact form 7 をデフォルト画面で使うと、ちょっとEFOとは言えないような気がしますね。そこで、今回は以下の三つの改良を行いフォームのデザインを改良します。

・必須項目を目立たせる

・フォームにプレースホルダーを設置する

・オンカーソルで色を変化させる

では始めましょう。

 

必須項目を目立たせる

デフォルトの必須項目は「お名前(必須)」となっています。これでは必須なのか必須じゃないのかわからない!ということで「必須」の文字を際立たせましょう。

まずコンタクト画面の編集画面で以下の通りにラベル部分を変更します。「お名前」「メールアドレス」「メールアドレス(再入力)」「メッセージ本文」を以下の通り入力します。この部分をsytle指定しますので、table-res-formというクラス名を定義します。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name]

メールアドレス <span class="requied">必須</span>
[email* your-email]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

style.cssに以下のタグを設置します。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}

 

上記の設定を行うと、画面表示は以下のように修正されます。

 

フォームにプレースホルダーを設置する

次は各入力フォームにプレースホルダーを表示させましょう。プレースホルダーとは、フォーム内に表示されている説明文のことです。ユーザーがフォームにカーソルを合わせるか、文字列を入力した時点で消えます。

コンタクトフォームの編集画面に入って、各項目欄を以下のように変更します。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

style.cssを修正する必要はありません。上記の設定を行うと、プレースホルダーが以下のように反映されます。

 

オンカーソルで色を変化させる

次に入力項目にカーソルを乗せた時に色が変化するように設定します。Style.cssに以下のタグを追加します。

 

.wpcf7 input[type="submit"]:hover {

box-shadow: 0 0 1px rgba(0,0,0,.2) inset;

}

 

この設定でオンカーソル時にカラーが変わります。

 

3機能追加後の編集画面とstyle.css

・必須項目を目立たせる、フォームにプレースホルダーを設置する、オンカーソルで色を変化させる

 

上記の三つの機能を追加した場合のフォームの編集画面は以下の通りです。

 

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

そして、style.cssに追加するタグは以下の通りです。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}
.wpcf7 input[type="submit"]:hover {
 box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

 

上記の二つをコピペして頂いても結構です。

ただし、テーマによってはこの記事の通りに表示されない可能性がありますので注意してください。

 

まとめ

今回は、EFOのためにContact Form 7に

・必須項目を目立たせる

・フォームにプレースホルダーを設置する

・オンカーソルで色を変化させる

を導入しました。

そこそこ、使いやすくなりつつあります。

 

次回は

「Contact Form7 Googleアナリティクスの目標に設定する」について解説します。

 

ありがとうございました。

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 

WORDPRESS | Contact Form 7でEFO

みなさんこんにちはALEXです。

ウェブマーケティングにとってお問い合わせページの送信数の向上は再重要課題です。とランディングページからいかにお問い合わせページに誘導するか、お問い合わせページでいかに離脱率を押さえ「お問い合わせ」送信をしていただくかがウェブサイトのもっとも重要な動線です。現在はEFO(Entory Form Optimization)という用語も使われて各社有料のフォームページを提供しています。

当社も実際にEFOがコンバージョン率に直結する重要な指標であり、当社のクライアント様にもこの部分はもっとも投資費用対効果が高い部分であることをご説明して改善をご提案しています。

ですが、ここで問題があります。

 

有料EFOサービスの問題点

「どこのEFOサービスも結構お高い」

「どこのEFOサービスも似たり寄ったり」

それにさらに悩ましい問題があります。当社が推進しているのはウェブサイトのDIY化です。そのためにはウェブサイトはWORDPRESSでの制作をご提案しています。構築当初は社内にインハウス制作に対応できるエンジニアがいなくても、導入部分を外注で対応し実務を通してスキルアップいただき、自社で制作できるように支援させていただいております。ですので、お問い合わせページは基本的にContact Form7を推奨しています。

今回、とある案件でContactform7を使用したお問い合わせページをリニューアルしてEFOを改善することになりました。某EFOベンダーから売り込みを受けていたこともあり、このEFOフォームを導入することとして準備をしていたのですが、なんと。

Contact form 7と連携した実績がない?

Contact form 7と連携したことはないので、タグを送るからそっちで組み込んでくれ、というなんとも信じがたい連絡がありました。

というのも、現在のEFOベンダーはJQueryを使用しているために、JapascirptをHTMLに埋め込んで使っています。なので、contact form 7 ,Wordpressと連携してこなかったのだと推察できます。

えー?困るよそれじゃリアルタイムバリデーションできないし、フォームは基本Contactform7で構築しているし今更ゼロから始められないという深刻な問題にぶつかってしまいました。

 

自分で作るしかない

こうなったら、Contactform7を使ったフォームをカスタマイズしてDIYでEFOを改良するしかない!と思い立ちました。

デフォルトでは味もそっけもないフォームです。とてもではありませんが、有料サービスに仕えた代物ではありません。ですが、プログラムなのでCSSとJsを改良すれば、しっかりしたフォームになりEFOを向上させることが出来るはずです。

今後、改良の経緯を本ブログに連載形式でアップしてまいります。今回はまず決意表明といったところです。

有難うございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

WORDPRESS | Contact Form7 メールアドレスの再入力チェック

みなさんこんにちはALEXです。お問い合わせのフォームをユーザフレンドリーにすることは、こんなバージョンを高めるために必須になってきています。入力フォームプラグイン「Contact Form 7」をお使いの方も多いかと思います。

最近お問い合わせでも、「Contact Form 7」を使用する際メールの再入力チェックはどうすればよいのかというご質問を頂きます。

そこで今回は「Contact Form 7」にメールアドレスの再入力チェックを実装する方法を解説いたします。是非ご参考になさってください。

 

フォーム編集

WordPressの管理画面のコンタクトフォームの編集画面を開けましょう。デフォルトでは以下の画面の通りになっています。

ブラウザ上では以下のように表示されます。

味も素っ気もありません。見栄えを改善する方法は後日ご紹介いたします。

 

まず、

[email* your-email]

の下に、

[email* your-email_confirm]

を追加します。確認用のname属性に_confirmを付与します。タグは以下の通りです。

<label> メールアドレス(再入力) (必須)
[email* your-email_confirm] </label>

 

続いて、function.phpにコードを追加します。

 

function.phpの編集

 

「function.php」に以下のコードを追加します。

function wpcf7_main_validation_filter( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        if (method_exists($result, 'invalidate')) {
          $result->invalidate( $tag,"確認用メールアドレスが一致しません");
      } else {
          $result['valid'] = false;
          $result['reason'][$name] = '確認用メールアドレスが一致しません';
        }
      }
    }
  }
  return $result;
}

add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );

 

動作確認

では実際に、ブラウザから入力して動作するか確認してみましょう。

ブラウザから問い合わせページにアクセスします。

メールアドレス再確認の欄が追加されました。次にメールアドレスを入力。

入力欄

info@alexandcompany.net

再入力

inf@alexandcompany.net

と1文字変えて入力しました。「送信」をクリック。

 

「確認用メールアドレスが一致しません」のエラーメッセージが表示されました。

修正して再送信しました。

 

無事送信が完了しました。

 

まとめ

「Contact Form 7」を使用する際メールの再入力チェック方法をご紹介しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

特許事務所・弁理士のためのウェブマーケティング活用術(3)

みなさんこんにちはALEXです。特許事務所・弁理士のためのウェブマーケティング活用と題して解説をお届けしています。

特許事務所・弁理士のためのウェブマーケティング活用術(1)

特許事務所・弁理士のためのウェブマーケティング活用術(2)

今回かなり重要なポイントを解説します。キーワードは「集客」「専門性」「NGワード」です。

 

集客

この記事を執筆する事前準備でおよそ100の特許事務所・弁理士が運営しているホームページを調査しました。その結果、かなり驚くことがわかりました。

「ほとんどのウェブサイトは集客を意識しないで作られている」ということです。ウェブマーケティングの目的は「集客」なので現在の特許事務所・弁理士のウェブサイトは、ウェブサイトからの見込み客を取り込む必要がないのだと推察します。

なぜそんなことがわかるの?ええ、簡単にわかります。プロなので。ひとついうとかなり多くのサイトでGoogleアナリティクスのトラッキングコードが入っていないんです。ということは、サイトの訪問客を分析してホームページを修正する、そしてその効果を分析する、というウェブマーケティングの基本中の基本であるPDCAが回っていないのです。

前回の記事でもお話ししましたが、弁理士さんは独立前にほとんどどこかの特許事務所にまず入所して、キャリアを積み、弁理士資格を取得して数年[お礼奉公」を済ませた後、「のれん分け」に近い形で独立します。その際にある程度のクライアントをもち独立しています。なので、既存のお客様で回っているからあまりウェブサイトは必要ないのでしょう。

こういった方は、当然、このブログをご覧になることはないので、むしろ危機感を抱いてこのブログをお読みいただいている方にお話しします。

「ねらい目ですよ。ごっそり見込み客を持って行けますよ」と。

繰り返しますが、ウェブマーケティングの第一の目的は「会わずに良質な見込み客を集客する」ということです。これは純然として技術の問題なので、しっかり自分のビジネスに合わせたウェブマーケティングを行うことで、確実にインターネットからの集客は見込めます。

 

専門性

次は専門性です。特許事務所・弁理士は基本的に得意分野が決まっています。既存のクライアントの分野も決まっていて、すみわけが出来ています。とはいえ、特許事務所・弁理士にとって事業の基盤になっている上場企業で研究開発に多額の投資の行っている企業も非常に厳しい経営環境の中、特許戦略の見直しが迫られています。ですので、今後、分野ごとの特許出願需要は減少する可能性が高く、限られたパイを奪い合う状況になるかと思われます。確実に高付加価値のサービスを提供する特許事務所、低価格を競い合う特許事務所に二極化します。

高付加価値のサービスを提供するためには「専門性」を前面に歌う必要があります。

現状の特許事務所・弁理士のサイトを見ても専門性をうたっているサイトはほとんどありません。

「なんでもできます」は「何もできません」というのと同じです。

「当事務所はこれが得意です」「これしかできません」という専門性を前面に出す必要があります。

別の分野ですが、とても上手に専門性を前面に出している行政書士の方のウェブサイトをご紹介します。

『遺言書と相続』のご相談窓口|愛知県名古屋市|野口行政書士事務所

 

名古屋、行政書士、相続

というキーワード検索でGoogle表示順位2位に表示されます。SEO的には80点ですが、「専門性」を上手に謳われた好例です。誰が見ても「あ、この事務所は相続専門だな」と思いますよね。

特許事務所・弁理士のウェブサイト構築の際にぜひ参考になさってはいかがでしょう?どうすればいいのかな?とお悩みでしたら、ぜひご相談ください。

 

NGワード

更にドキッとしてください。以下のワードを使っていませんか?

「信頼」

「実績」

「誠意」

特許事務所 誠実

で検索してみてください。すごい数の検索結果です。他社と同じキーワードをつかっていては全然差別化になりませんよ。

「信頼」「実績」もそうです。もはや死語と思ってください。

まっとうなサービスを提供しているかたは、業種を問わず「信頼」「実績」「誠意」は標準装備です。今提供できる「ベストのサービス」を謳うべきです。

そして「低価格」もNG

このキーワードは多用されている分野は「縮小する市場」です。そうですよね。みな、安さしか歌えないのであれば明らかに供給過剰です。だれも幸せになれません。どうどうと「当事務所はプロフェッショナルサービスを提供しています。価格はそれに見合うものを提供しています」と訴えてください。

最後に「無料」

これもやめましょう。無料をうたうと、無料ですませるお客しか集まりません。そして、無料の次のサービスも、よそと比較して安い価格を求めます。

 

まとめ

今回は「集客」「専門性」「NGワード」という切り口で解説させていただきました。

 

ウェブマーケティングでしっかり成果を出したいというニーズを持ちの特許事務所・弁理士のかたのご相談をお受けしています。ぜひご活用ください。

 

ありがとうございました。

 

 

WORDPRESS | 太字多用はSEOには逆効果?

みなさんこんにちはALEXです。ブログを一生懸命執筆しているのに、「全然検索順位が上がらない!!」ということはありませんか?しかも、一生懸命書いて大切なところはしっかり太字にしている、なんてことないでしょうか?

今回は、その努力の中でよく使われやすい「太字」についてお話しします。

太字(Bボタン)の使いすぎはSEOに悪影響が

ブログ記事を書くときに熱が入ってくると太字が多くなるかもしれません。WordPressのダッシュボードで「B」ボタンを何度も押すことになります。

アピールしたいポイントが増えれば太字を使って強調したくなるのは当然のことかと思います。しかし、それを検索ロボットは別の見方をします。

太字を使いたいときにはのbタグがstrongタグを使用することができます。これがピンポイントであればそれほど問題ないのですが、連発してしまうと「過剰SEO」とみなされる場合があります。その結果ペナルティを受けてしまって検索結果に表示されなくなる場合があります。

 

オリジナルの「太字」ボタンを使いましょう

「多用しなければいいですよ」といっても、さて何回なら大丈夫なのか?という明確な判断基準が示されいないので、とても悩ましいところです。

そうなると、基本Bボタンは使わないほうが無難ということになります。そうはいっても、読み手の方に「ここは重要です」という部分をお伝えしたいですよね。

そこで、オリジナルの太字ボタンを作るプラグイン「AddQuicktag」をご紹介します。

 

AddQuicktagのインストール

太字の設定

ダッシュボードの「プラグイン」‐「新規追加」メニューからAddQuicktagプラグインをインストール、有効化して「設定」‐「AddQuicktag」メニューを開きます。

設定項目(1)に次のように入力します。

  • ボタン名 — 「太字」と入力
  • ラベル名 — 「太字」と入力
  • 開始タグ — 「<span class=”thick”>」と入力
  • 終了タグ — 「</span>」と入力
「太字」や「thick」は自由に設定してください。
 最後に「設定を保存」をクリックして終了です。

 

「太字」スタイルの定義

続いて、太字のスタイルを定義します。「外観」-「テーマの編集」をクリックしてstyle.cssを編集します。

.thick {
    font-weight: bold;
    color: black;
}

上記の二行の意味は

・font-weight: bold; — 文字を太字にする

・color: black; — 文字の色を黒にする

これで「太字」ボタンは完成です。編集画面で使ってみましょう。

 

ビジュアルエディタで使ってみる

投稿や固定ページの編集画面をビジュアルエディタで開きます。「Quicktags」-「太字」メニューが追加されていますので、太字にしたい文章を(1)が追加されているはずです。さっそく文章で太字にしたいキーワードを選び、「Quicktags」-「太字」メニュー(1)をクリック。

ビジュアルエディタでは見た目には太字が反映してませんが、「プレビュー」でをページを確認すれば、キーワードが太字になっていることが確認できます。

 

まとめ

執筆記事に過剰SEOの原因とならないように、AddQuicktagを使用してオリジナルの太字ボタンを追加する方法をご紹介しました。

ありがとうございます。

WORDPRESS | 無料テーマGiraffeはアフィリエイトにはお勧めしない件

みなさんこんにちはALEXです。以前、WORDPRESSの無料テーマ「Giraffe」をご紹介しました。

WORDPRESSテーマをGiraffeに変更

もともとこちらのテーマはSTINGER5をベースにしたテーマで、無料配布されています。ブロガーにとっては非常に使いやすく、このブログでも使用しています。

 

ですが、ここで注意喚起

アフィリエイトに使う場合は、よく調べて使わないとGoogleアドセンスのポリシー違反になるかも

え?ポリシー違反?そうなんです。調べてみると、Adsenseの配置に問題がありました。WordPressの管理画面でGoogle AdSense のコードを貼り付けると、スマホ画面でAdsenseが二つ配置されます。

Google AdSenseの日本語公式ブログにこんな記述があります。

スマートフォンでは、1 つの表示可能なページ(1 ビュー)に表示できるコンテンツ向け AdSense の広告ユニットは 1 つのみです。
―― Inside Adsense : スマートフォン向けサイトへの最適化

サイト内にスマートフォンの場合だと画面内に表示して良いAdsenseは1つ広告だそうです。

公式ブログには図での解説があります。
 
HED_PLacementSamples
 
―1画面で見える範囲を1ビューとし、その範囲に表示できるAdsenseの数は1つとなっています。
 

Google AdSense はポリシー違反に厳しいので、下手をするとアカウント停止の通告が来る恐れがあります。

 

AdSense 使うならGiraffeはお勧めしません

JUINICHIさんの公式ブログにはトラブルに関する責任は一切負わない、という旨の記載があります。ですので、Giraffeを使ってアカウント停止をされても使用する人間の責任ということになりますので

ALEXとしては

「アフィリエイトにはGiraffeは使わないほうがいいです」

とさせていただきます。

当社のように企業のマーケティング用のブログにはadsenceを貼る必要はないのでお勧めします。

GiraffeのベースになっているSINGERについては、この問題が認識されていて対策が紹介されているので、また機会をもってご紹介したいと思います、

 

ありがとうございます。

特許事務所・弁理士のためのウェブマーケティング活用術(2)

みなさんこんにちはALEXです。今回も特許事務所・弁理士のかたのための記事を執筆しています。

前回、特許事務所・弁理士の方のウェブマーケティングの活用法について、キーワードについて掘り下げました。

特許事務所・弁理士のためのウェブマーケティング活用術(1)

この分野は未開拓です。早い者勝ちの感があります。

さて今回は、具体的にウェブマーケティングを活用している特許事務所ってあるの?といいことについてお話しします。

ウェブを活用している特許事務所例

意匠登録について、ものすごくとんがっている事務所さんが大阪にあります。宮崎特許事務所さんが運営しているToreruというウェブサイトです。

Toreru

最初は、「え?特許事務所のウェブサイトなの?」というほど洗練されたサイトデザイン、動線構成、CTAへのアシスト(「お申込み」クリックボタンをうまく押させることです)などどれをとっても今時のWEBサービスサイトに引けを取らない出来栄えです。当社案件をお願いしたいくらいです。

なんといっても魅力的なのが、「商標出願サービス」ではないでしょうか。

現在は、商標登録調査作業無料を提供している特許事務所はいくつかあります。しかし、調査日数に時間がかかったり、その後の出願費用は結構いいお値段だったします。ですが、Toreruさんは出願手数料は9,800円、またその後の請求手続きの費用も非常にリーズナブルになっています。

 

商標、特許出願は自分でできるけれど

実というと、商標検索そのものはどなたでも無料でできるのです、

特許情報プラットフォーム

私も、可能な限り商標出願や特許出願は自分でやりたい派です。ですが、商標登録は出願する分類というものがあり、この分類が結構面倒くさかったりします。また、特許で大変なのは特許権理科出願です、これはやはり弁理士さんでないと、というところがあります。ですので、効率という面で専門家に頼むのが一番良いのではないかと考えます。

 

専門家が一番

こういった価格を提供するためにToreruさんは一連の作業の効率化のためにシステム開発を行い、徹底した合理化を図っているそうです。すごく興味あります。クラウドなりITを活用して価格を引き下げても単なる価格競争にならないとう事例はアマゾンやZOZOタウンにもみられる良いビジネスモデルのテンプレートであると思います。

わたくしも、コンサルタントの仕事の中で、特許戦略、商標戦略を取り扱うこともあるので、ぜひ活用させていただきたいと思います。

今回の記事は、ウェブ技術を上手に活用した特許事務所さんの実例についてご紹介しました。

次回は「集客」「専門性」「NGワード」についてお話しします。

特許事務所・弁理士のためのウェブマーケティング活用術(3)

ありがとうございます。

特許事務所・弁理士のためのウェブマーケティング活用術(1)

みなさんこんにちはALEXです。最近デジタルマーケティングが広く普及し、各種サービスでネット経由の問い合わせ・制約というビジネスのパターンが一般化しつつあります。みなさんも、アマゾンでお買い物をされることがごく当たりまえになっているのではないでしょうか?

特許事務所・弁理士の方々も最近はウェブマーケティングを活用し顧客獲得を進めているかたも多いようです。

そうはいっても、

「うちの事務所はウェブからの問合せなんて全然来ないよ」

「ウェブ経由って、あまり良いお客さんは来ないなあ」

という特許事務所・弁理士の方々の声が多いことも一方で事実です。

SEO業者、ウェブマーケティング業者はウェブマーケティングの優位性をうたって、どんどんアピールしています。しかし、単純にSEOやウェブマーケティングのシステムを導入したからと言って集客がどんどん来る、というわけではないようです。

しかし、これだけは間違いないです、ウェブマーケティングを上手に活用して自分のビジネスに組み込むことで、これまでアクセスできなかった潜在顧客にアピールできて、ウェブからの問い合わせ、受注力を高めることが出来ます。

数回にわたって「特許事務所・弁理士のためのウェブマーケティング活用術」で特許事務所・弁理士がウェブマーケティングを活用し、収穫効果を高めることができるテクニックをご紹介します。

第一回目は「この分野のキーワードはお宝!!」という話題についてお話しします。

特許事務所・弁理士に依頼する仕事は「特許出願」「商標登録出願」「意匠出願」のみっつがメインだと思います。さて、そこでGoogleで「特許出願」と検索すると。

これは広告です、PPC(ペイパービュー)というものですね、これはGoogleアドセンス契約すれば、ここに広告文を乗せることが可能です、ですが、検索結果全てに広告文が掲載されるわけではありません。広告を除いた検索結果を見てみましょう。

いかがでしょうか?「特許出願」というキーワードをコンテンツに織り込んでいる、しっかりSEO対策をとっていると検索上位に表示されるようになっています。また、検索順位3~4位より下になってしまうとほとんどクリックしてもらえないのが現状です。

ですが、この検索結果を見ると私なら

「ねらい目だ!!」と思います。

執筆日2017年8月29日の時点では、

「特許申請」というキーワードで検索上位にランキングされるのはそれほど難しいことではありません。Google検索で上位にランクされるのは、純然と技術レベルの高さです、ですがこのキーワードについては初中級のレベルでも十分上位を狙えます。

ウェブマーケティングについては、ブログ、ウェブサイトを構築します。これは住宅でいえば目に見える「家」の部分、大切なのはその基礎の部分です。「商品戦略」「競合戦略」やSEO対策といった目に見えない部分をしっかりつくりこむことでう「売れるウェブ」になりますが、この分野は短期間で問い合わせ増・受注増につなげられるところだと思います。

 

「特許請求」がなぜ手つかずなのか?

わたくしも、長年、技術開発に従事しており特許出願件数は数百個あります。なので、特許事務所、弁理士との交流は豊富です。

弁理士の方々は「特許の専門家」であることがほとんどです。それもだいたい特定分野に特化しています。

私の知人で一番多いのは上場企業の知的財産部門に勤務しながら勉強して弁理士の資格を取得する方ですかね。この方は弁理士を取得すると、この会社を顧客としている特許事務所に転職します。そしてその事務所に勤務しながら前職の特許出願業務を行います。その会社の事業、技術の専門家の方です。

一方、ディジタルマーケは「集客」の専門家である必要があります。集客の専門家であるSEO業者やコンサルタントは集客の専門家ですが、かならずしも特許分野の集客の専門家ではない可能性があります。こういった業者に委託するとクライアントさんは専門家なので、集客の専門家にキモを伝えられず十分なSEO対策を打てないのではないでしょうか?

特許出願、商標登録、意匠出願をしたい見込み客で、ネットを使うかたはどんなひとなのかというペルソナ設定が不十分であることが理由として挙げられます。

手数料が安い!出願日数が短い!というようなキャッチフレーズでは集客できません。裏のニーズはちかうのです。こういった裏のニーズを把握して有効なSEOを打つことで、潜在的な見込み客の集客を行うことはそれほど難しくないと思います。

 

裏のニーズって?

このニーズを押さえないと、絶対クライアントはつかまりません。これは特許申請の分野にかぎらず、どの製品・サービスでもいえることでしょう。裏のニーズを押さえ効果的なSEOを立てることが効率的なSEOの基本です。

 

まとめ

「特許事務所・弁理士のための特許事務所・弁理士のためのウェブマーケティング活用術(1)をお届けしました。

・「特許申請」のゾーンはねらい目です。

・[裏のニーズ]をおさえることが大切です

ということを覚えていただければ幸いです。

次回は

特許事務所・弁理士のためのウェブマーケティング活用術(2)

をお届けします。

 

有難うございました。

 

会計事務所・税理士のためのデジタルマーケティング導入(4)

みなさんこんにちはALEXです。会計事務所・税理士の方に向けた記事を連載しています。過去3回基本的なご説明をしました。

会計事務所・税理士のためのデジタルマーケティング導入(1)

会計事務所・税理士のためのデジタルマーケティング導入(2)

会計事務所・税理士のためのデジタルマーケティング導入(3)

過去三回はWEBやブログを使ったデジタルコンテンツマーケティングでの集客のためのポイントするを解説しましたが、今回はもう少し踏み込んでターゲティングのお話をします。

 

これから攻めていくとすると、以下の分野がいけると思います。

WEBマーケティングに効果がありそうな5つの分野

競争が厳しくなってきたと言われる税理士業界ですが、会計事務所や税理士の業界では主に下記のような分野にWEB(ホームページやブログ)での集客チャンスがあると思われます。

(1)IT、WEB業界

(2)中小企業の海外取引

(3)専門性の高い業種

(4)税務調査

上記の分野は、今後マーケットの伸びが期待できる分野かニーズが多い分野です。

それぞれの業界を見てみましょう。

 

IT、WEB業界

今、東京は起業ブームです。IT・WEBサービスを中心に雨後の筍のようにベンチャーが設立され分、ベンチャーキャピタルや監査法人がベンチャーを支援するイベントがあちこちで開催されています。

 

この分野の特徴は

・新規参入者が税の専門家でない場合がほとんど。

・WEBから集客しやすい

・悩み・課題を深堀しないで取り上げるだけでも十分コンテンツになる「

この業界は最もでデジタルマーケが浸透しています。ITのプロが起業しています。当社も多くの起業家と交流させていただいておりますが、税務・経営については明るくない場合が多いです。

また、デジタルマーケを使いこなしているので、逆の見方をするとデジタルマーケで自社の課題解決調査をしています。ですので非常に集客しやすいといえます。

IT業界の基本的なキーワードを理解すれば、税務に関する悩みを拾い上げるコンテンツを作ることはそれほど難しくないといえます。

「そうはいってもそんなに簡単にIT企業にコンタクトとれないよ」という方がいらっしゃいましたらお気軽にご相談ください。

 

中小企業の海外取引支援

海外進出は従来は大手企業というのが常識的なことでしたが、近年では中小企業の海外進出が増えています。当社のクライアント様にも、樹脂成型機の海外需要の伸びを商機ととらえ、中国・インドに進出しています。

こういったニーズに会計事務所・税理士が対応していますが、中小企業の経営者が海外進出の際に気を付けるべき細かいノウハウまで踏み込んでサービスを提供しているところはまだまだ少ないようです。

大手については税理士法人BIG4(DTT・E&Y・PwC・KPMG)等が本格的な国際税務トピックス(高度な移転価格や租税回避スキームなど)を取り上げています。こういったノウハウを中小企業向けに提供している会計事務所はほとんどありません。

国際税務や海外取引は、専門性が高く、仮に集客したとしてもサービスの提供が難しいケースも多いため、この分野に対応できる会計事務所は多くないかもしれ混ぜんが、外部からノウハウを導入するなどして参入を検討する方法もあるかと思います。

 

専門性の高い業種

 

特定の業種にターゲットを絞る方法があります。その市場が成長産業であるかどうかは業界によって異なりますが、「歯科専門」「外資専門」「相続専門」という会計事務所は、需要の多い都内では見受けられますが、特定の業界や業種にフォーカスした会計事務所は非常に少ないです。

また、最近は経営者の世代交代が進み、後継者はアマゾンやGoogleを使い慣れています。こういったユーザーにターゲットを絞ってWEBマーケティングを行うのはとても有効です。

あまりありませんので、専門とするプレーヤーはどの分野でもあまり多くないと考えられます。「飲食店」や「小売」「建設」などに絞ることによってWEB上で効率的に集客できる可能性があります。

私自身も経営戦略のコンサルティングを行う際は「差別化」「特化」に絞り込むことを、新規参入を検討されているクライアント様には推奨しています。

「差別化」「特化」についてご不明な手がありましたら、お気軽に相談ください。

 

ただし、関東や関西など企業数が多い地域では特定業種に絞っても集客できますが、地方ではターゲットが少ない可能性はあるので注意は必要です。

WEBマーケティングは意外とどの分野でもチャンスがある!?

通常の業界であれば、どの分野に関しても1社くらいはWEBでうまく集客している有名なプレーヤーがいたりするのですが、会計事務所や税理士の業界では、WEB分野に詳しいプレーヤーが少ないこともあり、コンテンツマーケティングに関しては意外とどの分野でもチャンスはあるのではないかと思われます。

また、(5)で取り上げたように、会計事務所・税理士業界では、WEB上でのマーケティングに限らず、業界全体としては「差別化」が意識されていない状況です。

こういった点をヒントに自分の会計事務所がどこをターゲットにビジネスを展開していくかを検討してみるのも良いかもしれません。

 

 

まとめ

 

上記の通り、WEBマーケティングをつかってのアプローチが有効であると思われる業種をご紹介してみました。

会計事務所・税理士の皆様はスペシャリストです。スペシャリストはその道に特化すべきだと思います。今からWEBマーケティングの導入をご検討されていらっしゃる方がいらっしゃいましたら、やはりプロを選ぶべきでしょう。この分野はピンキリさまざまです。クライアントの要求にこたえられる実力がないのに受けてしまうWEB制作会社もいれば、年間1000万円以上のフィーが必要なのに効果がでないマーケティングオートメーションもあります。

じっくりと力のあるプロのサービスを提供できる業者選びが重要です。

 

ありがとうございます。

 

毛髪再生