ストック – ウェブ担当者通信 https://webtan-tsushin.com ウェブ担当者通信は「知るべきことを知る」「わかる」「できる」をコンセプトにした、日本初のSEO、PPC、マーケティングなどを扱うWebディレクター向け実践専門サイトです。 Sun, 11 Feb 2024 11:11:35 +0000 ja hourly 1 https://wordpress.org/?v=4.7.29 静的LPをとりあえずWordPressに対応させる方法 https://webtan-tsushin.com/stock_202206_lp-to-wp Fri, 24 Jun 2022 06:26:43 +0000 https://webtan-tsushin.com/?p=25210

サイトをWordPressで運用していても、広告用のLP（ランディングページ）はデザイン重視でHTML形式のままでサイトに掲載していませんか？
リライトしたりボタンのテキストを変更したいときに、WordPressで修正できたら便利なのになーと思うことはありませんか？

ウェブ担当者通信を運営しているウェブジョブズでも、広告用のLPはHTML形式で納品されることがほとんど。
近ごろはQAアナリティクスを利用しているので、LPがWordPress化されていればユーザー行動を簡単に確認できるのに！
WordPressなら、ふだんHTML編集ソフトを使わないスタッフでも、ちょっとは修正できるし…。
そこで、HTMLで作成された静的LPをとりあえずWordPress化して掲載しています。

HTMLとCSSの知識、FTPは必要ですが、基本的にコピー＆貼り付けでできる作業です。

QAアナリティクスとは
タグ不要で簡単に導入できるアクセス解析＆ユーザー行動分析のWordPress公式プラグインです。
ヒートマップやセッションリプレイも見ることができるので、ページ単位で分析を行いたいランディングページでは特に使いたいWPプラグインです。

1. HTMLで作成された静的LPをWordPressで表示したい

※2024年2月11日追記

余談ですがWordPress公式ツールの作成が検討されているようです。早く進んでほしいですね。

github.com/WordPress/data-liberation/blob/trunk/guides/html-to-wordpress.md

静的LPをWordPressで表示させるために、固定ページ用の独自テンプレートを作成します。
独自テンプレートの作成は、主に2つの方法があります。

  1. HTMLすべてをテンプレートで作成する
  2. コンテンツ部分はWordPressのカスタムHTMLで作成する

QAアナリティクスのサイトを例にすると
「丸わかりQAマンガ」はすべてをテンプレートで作成、「機能・プラン」はカスタムHTMLで対応しています。

元のHTMLの構造や運用から、どちらにするか検討してください。

1-1. すべてをテンプレートで作る方法

複雑なHTMLや編集の予定がないページにおすすめ
QAアナリティクス「丸わかりQAマンガ」のページは、メインが画像でデザイン重視、HTMLやCSSも細かく設定してありほとんど編集しないので、すべてをテンプレートで作成しています。

【メリット】
ほぼ丸ごとコピーするだけなので簡単
Dreamweaverなどソフトを使って修正できる

【デメリット】
あとで修正をするときにもテンプレート（PHP）を編集する

1-2. 固定ページのカスタムHTMLで対応する方法

同じテンプレートで複数のLPを作成するときや、ときどき更新のあるページにおすすめ
QAアナリティクス「機能・プラン」のページは、機能が拡張され編集の予定がある、また他のページでもコンテンツを流用するので、カスタムHTMLで作成しています。

【メリット】
同じテンプレートでもコンテンツを変更できる
WordPressの機能も使える

【デメリット】
レイアウトできる範囲がやや制限される
修正はWordPressのカスタムHTMLでコードを編集する

2. 固定ページ用の独自テンプレートを作成するために必要なもの

静的LPをWordPressで表示させるために、まずLP用固定ページの独自テンプレート作成します。 HTMLをほぼそのままPHPで保存ですが、WordPress化に必要なコードを追加します。
テンプレートを作成するために、編集ソフトがあると便利です。

必要なもの

  • HTMLデータ、画像データ一式、スタイルシート、jQuery（使用している場合）
    静的LPのデータが一通りそろっていることを前提としています。
  • FTPソフト
    作成したPHPファイルや画像などをサーバーにアップできる環境。
  • HTML、PHPが編集できるソフト
    コードで編集できるソフト。私はDreamweaverを使っています。

LP用固定ページの独自テンプレートを作成する準備ができたら、さっそく静的LPをWordPressで作っていきます。
2つの方法の手順をまとめています。

3. ページのすべてをテンプレートで作成する手順

HTMLをまるごとコピーして、テンプレートを作成します。
テンプレートをアップロード後は、テーマエディターで編集できます。

3-1. 新しいテンプレートを用意する

HTML編集ソフトなどで新規ファイルを作成します。ファイル名を付けて保存してください。
名前の付け方は「page-任意の文字列.php」です。
任意の文字列には後から見て分かりやすい名前を付けます。
ここでは仮に「page-lp01.php」とします。

3-2. テンプレートの名前を付ける

「page-lp01.php」の最初に、テンプレートの名前を付けるコードを入力します。
WordPressで固定ページを作成するときに表示されます。日本語でもかまいません。

<?php
/*
Template Name: ここにテンプレートの名前
*/
?>

3-3. HTMLをコピーする

表示させたいHTMLデータのソースを全選択してコピーし、先ほどの「page-lp01.php」に貼り付ける。

3-4. ヘッダーとフッターを追記する

コピーしたHTMLの「</head>」の前の行に「<?php wp_head(); ?>」を追加。
<?php wp_head(); ?>
</head> 「</body>」の前の行に「<?php wp_footer(); ?>」を追加。<?php wp_footer(); ?>
</body>

3-5. 依存ファイルを任意の場所に保存し、リンクを設定する

画像、CSS、JSなど、必要なデータを適当な場所へ保存します。
WordPress使用中のテーマ内が便利です。

例えば、使用中のテーマ内に「lp01-image」フォルダを作り、画像を保存した場合。

画像のフォルダのURL： https://あなたのサイト/wp-content/theme/使用中のテーマ/lp01-image/

page-lp01.phpにコピーしたソース内で画像などへのリンクを再設定します。

<img src="image/mainphoto.png">
↓下記に変更
<img src="https://あなたのサイト/wp-content/theme/使用中のテーマ/lp01-image/mainphoto.png">

編集ソフトの置換機能でまとめて変更すると簡単ですね。
CSSやJsも同様にリンクを再設定してください。

3-6. テンプレートのPHPと依存ファイルをサイトにUP

テンプレート（page-lp01.php）と依存ファイル（画像、CSSなど）をFTPで、WordPressの使用中のテーマへアップロードします。

3-7. 固定ページにテンプレートを設定する

WordPressで固定ページを新規作成します。
設定で、固定ページのテンプレートから先ほど作成したテンプレートを選びます。
上記3-2で設定した「ここにテンプレートの名前」部分が表示されているはずです。

固定ページを保存し、テンプレートで作成した静的HTMLが表示されているか確認してください。
画像やスタイルがうまく表示されない場合は、リンクを確認してみてください。

4. 固定ページのカスタムHTMLで作成する手順

コンテンツ部分をWordPressで編集できるようにします。

4-1. 前項と同じ手順でテンプレートを作成する

前項（3-1～3-7）と同じく、ページのすべてをテンプレートで作成し、固定ページの設定をします。

4-2. テンプレートの本文をWordPressにコピー

WordPressで編集したい部分を、テンプレートのPHPからコピーします。
<body>の間や、ヘッダー・フッターの間など、区切りの分かりやすい部分がおすすめです。

WordPressの固定ページにカスタムHTMLのブロックを追加し、先ほどコピーしたPHPを貼り付け、保存します。

4-3. テンプレートのPHPにコードを追加する

テンプレートで先ほどコピーしたHTML部分を削除し、固定ページの内容を表示させるコードを追加します。

<?php the_content(); ?>

テンプレートの<title>タグもPHPに変更します。
固定ページのタイトルが表示されます。

<title><?php wp_title(); ?></title>

※テーマによってはfunction.phpで、タイトルを出力するように設定されています。
function.php内に「add_theme_support( ‘title-tag’ );」の記述があれば、テンプレート内の<title>タグは不要です。（分からなければスルーしてOK）

テンプレートのPHPを保存し、サーバーにアップロードします。
固定ページを表示し、テンプレートのデザインとコンテンツが表示されているか確認してください。

5. 追加の設定

ほぼ丸ごとコピーで対応できますが、ちょっと追加しておきたい設定を追記します。

OGPやアナリティクスの設定

SNSで表示させたい画像や、Googleアナリティクスのタグなど、静的LPには設定されていない場合があります。
WordPressテーマのヘッダー用プレート（header.php）から必要な部分をコピーして貼り付けると簡単です。

URLをPHPで呼び出す

画像へのリンクなど、WordPressのURLはphpで呼び出すことができます。
URLをPHPに置き換えます。

・テーマのURLを呼び出す場合

https://あなたのサイト/wp-content/theme
↓
<?php echo get_template_directory_uri();?>

・子テーマの場合

https://あなたのサイト/wp-content/theme/使用中の子テーマ
↓
<?php echo get_stylesheet_directory_uri(); ?>

たとえば、テーマの中に画像フォルダ「lp01-image」を作成し、画像「mainphoto.png」を保存した場合

<img src="https://あなたのサイト/wp-content/theme/使用中のテーマ/lp01-image/mainphoto.png">
↓
<img src="<?php echo get_template_directory_uri();?>/lp01-image/mainphoto.png">

となります。

テンプレートのPHP内で使用できますが、WordPressのカスタムHTMLでは使用できないので気を付けてください。

カスタムフィールドでCSSを設定する

外部リンクでCSSを読み込んでもいいのですが、ちょっと修正したいときにWordPressだけで編集できると楽ですよね。

WordPressで固定ページ編集画面の下に「カスタムフィールド」があります。
カスタムフィールドにCSSを追加して、この固定ページのみにCSSを適用させます。

まず、テーマのfunction.phpへ、カスタムフィールドにCSSを追加するコードを記載します。

※ご注意
functions.phpの編集はWordPressの動作に影響が出ます。
必ずバックアップを保存してから作業してください。

/* 独自 CSS を適用 */
add_filter( 'wp_get_custom_css', 'add_custom_css' );
function add_custom_css( $css ) {
if ( is_singular() ) {
if ( $custom_css = get_post_meta(get_the_ID(), 'css', true ) ) {
$css .= $custom_css;
}
}
return $css;
}

固定ページのカスタムフィールドで、名前「css」を選び、「カスタムフィールドを追加」します。
上の段に「css」のカスタムフィールドが追加されます。
cssの「値」欄に、HTMLのcssをコピーして貼り付け、カスタムフィールドを「更新」します。

カスタムHTMLを分割

コンテンツをWordPressのカスタムHTMLで作成した場合、長いHTMLがひとつの欄にずらずら書いてあると、修正したい箇所を見つけにくくなります。
段落やパートに分けて、いくつかのカスタムHTMLブロックを作成すると管理がしやすくなります。

CSSの確認と調整

既存のヘッダー、フッターを使用し、コンテンツ部分のみカスタムHTMLで作成する場合もあります。
静的LPのCSSと既存のCSSで同じclass名を使っていると、既存のヘッダー、フッターのレイアウトが崩れてしまいます。
静的LPのclass名を変えるなどして、調整します。

まとめ

静的LPをとりあえずWordPressで表示させる方法。

  1. 固定ページのテンプレートを作成し、テンプレート名を付ける
  2. HTMLを丸ごとコピーし、WordPressのヘッダー・フッターを追加する
  3. WordPressで固定ページを新規作成し、テンプレートを適用する

大まかな手順は以上です。
ソースを編集するので、見慣れていない方は一瞬戸惑うかもしれませんが、コピー＆貼り付けだけの単純な手順です。

表示されない場合は、画像やCSSのリンクが正しいか確認してください。
画像へのリンクが一番手間のかかる部分かもしれません。
画像はできるだけ同じフォルダにまとめるなど、分かりやすく管理すると作業しやすくなります。

静的LPをWordPress化すると、QAアナリティクスでの計測にも自動的に含まれます。
QAアナリティクスは、インストールするだけで使える設定不要のWordPress公式プラグインです。
アクセス解析も他のページと同じく簡単にできるようになりますね。

]]> 国内企業の20%しか知らない？持っているとメディア関係者に喜ばれるとウワサのファクトブックを作ってみた https://webtan-tsushin.com/stock_20220527_factbook Tue, 07 Jun 2022 09:19:21 +0000 https://webtan-tsushin.com/?p=25102

ウェブジョブズは少人数ながらも、開発やデザイン、PMなどウェブのエキスパートが揃っています。
ただ、たったひとりウェブの知識的にも技術的にも全くついて行けていないポンコツメンバーがいるのです。

そう、なにを隠そうこの私です。( ･´ｰ･｀)どや

じゃあそんなウェブの知識も技術もない自分が何をやっているのかというと、メディア編集をやったりマーケティングをやったり、他にも広報なんかを担当したりしています。
もともとメディア編集者だったので（今もですが）その経験を活かしたお仕事をしているわけです。

申し遅れました、メディア編集者兼広報担当のたからです。お疲れサマンサターバサ（竹野内豊かっこいい）。
ウェブ通では過去に、文章術やメディア編集者のお仕事についての記事を中心に書かせていただきました。

webtan-tsushin.com/stock_20170808_writing_technic_summary

ただ今回はこれまでとはちょっと毛色の違う、広報に関わるお話をしようかなと思っています。

これさえあれば広報は楽勝？
メディアアプローチの必須級アイテム「ファクトブック」

「もし良ければサービス資料やファクトブック送ってください」
ウェブジョブズ肝いりのQA事業の広報担当として、いそいそとメディア関係者にアプローチしていたとある日の午後、こんな返事が返ってきました。

はいはい、オーケオーケー。ファクトブックね、かしこまり！
てな感じで軽く返しましたが、正直なところ「ファクトブック…てなんや!?」と、心の中はテンパりまくり。
能面のような変化のない顔を心がけていましたが、急いで調べたのは言うまでもありません。

「文章が書けるんだし広報もいけるっしょ」と、訳のわからん理由で未経験広報として活動してまもなくのことで、広報が何をするかも全然わかっていない状態でした。

ファクトブックとは

社内で聞いてはみたものの誰もわからんということで、安定のGoogleさんに頼ってみたところ、
プレスリリース配信サイトPRTIMESさんのメディア、PRTIMESMAGAZINEにファクトブックについての記事がありました！

「ファクトブックとは、企業のサービス、歴史や業績を伝えるために数的根拠や事実を元に情報をまとめた資料です。」

引用元：PRTIMES MAGAZINE 広報担当者が知っておきたい「ファクトブック」の作り方、必要な5つの項目、ポイントを紹介

なるほど。なんとなく概要はわかりましたが、何をどう作ればいいのかまでの具体的なイメージがいまいちピンとこず。

そこで最近お世話になっている広報コミュニティで相談してみることに。

相談したコミュニティ

#PRFunho
広報の集い

会社案内やサービス資料との違い

「一般的な会社説明資料とのファクトブックの明確な違いもわからない状態でして、皆さまのお知恵をお借りできないでしょうか。」
こんな感じのメッセージを投げるとお返事が！

そこでのありがたい助言をまとめると、こんな感じ。

  • ファクトブックと会社説明やサービス資料との大きな違いは、“会社を説明する情報やサービスを並べるだけでなく、客観的な事実（ファクト）やデータをふんだんに盛り込んだ内容”である点。
  • ファクトブックのほうが、企業が置かれている環境（市場環境や社会環境）の説明が入っているかどうか、また企業に関わるストーリー（最近流行りのナラティブforbesjapan.com/articles/detail/42287）が含まれているかどうかがポイント。その企業やサービスがどういったことを考えているのかがひと目で分かる。
  • IRのように数字を細かく出すようなタイプや社会課題の切り口で出しているものあり、会社のブランディングイメージやサービスのキャラクターによって、いろいろ見せ方やアイデアがある。
  • 記者視点からみると、企業取材が行いやすくなるだけでなく、業界情報や周辺情報まで広く収集できるため、とても重宝する。
  • ファクトブックを作成している企業は全体の20％前後なので、差別化が図れる。
    ※ファクトブックを作成を企画した2022年2月時点

その際に教えてもらった以下2つのファクトブックがとても参考になりましたので共有します。

参考にしたFACTBOOK

スマルナ 『経口避妊薬ファクトブック』
radiko 『防災ラジコファクトブック』

自社やサービス知識のアップデートに役立つ

さらにこんなありがたい助言もいただきました。

「中小企業やベンチャーでは、そもそも会社説明資料がなかったり、会社やサービスの定義がそもそもできていない、なんてことも少なくないですよね。そうした状況において会社やサービスの言葉の定義、語り口の定義を担うものでもあると考えています。あとはファクトブックを作る過程において、市場環境を調べたりすると思うのですが、要はメディアや業界のベテランの人と同じように客観的に語れるだけの知識を入れないといけないと思うので、そのインプットにもなるかなと思います。」

実際にウェブジョブズのファクトブックを作るにあたって、これが必要であれも必要、これはいらないと、自分たちの会社やサービスに向き合うことができたので、業界知識のアップデートにかなり役立ちました。

会社の外から見るような視点で自分たちを捉えることができたことたので、この経験は大きな資産になったと思います。なによりもメディア向けにそれなりに説明ができるようになったことが、一番の利点だったかもしれません。

ファクトブックの活用事例

ファクトブックの活用方法は広報利用だけじゃありません。いろいろと使える便利なやつなんです！

ファクトブックは言ってみればサービス資料と会社案内がフュージョンしたようなものなので、営業やマーケ等々で活用できる資料のベースとなります。
また、ファクトブックで作ったコンテンツを簡素化してWebコンテンツとして公開することで採用に繋がった、などの事例もあるようです。

ちなみにウェブジョブズの場合は、Webで公開しているものをファクトブックに流用しました。
日頃からWebでの情報公開に力を入れている会社であれば、おすすめの方法です。

ファクトブックの構成

広報コミュニティで質問させていただいた際、タイミングよくファクトブックのセミナー（シプートさん主催）があるよとの情報も教えていただいたので、もちろんこのセミナーにも参加。
ここではファクトブックの具体的な構成内容を知ることができました。

PRTIMESさんの記事にも構成について書いてあったので、事前に多少の知識を入れての参加でしたが、セミナーでは他社の事例を交えての説明だったので、より自分ごとに置き換えて理解できる点がありがたかったですね。

ファクトブックをつくるのに必要な構成は以下の通り。

  • 目次
  • 会社情報（代表・社員紹介、沿革、組織、事業一覧、福利厚生、等）
  • 市場規模・対象ユーザー
  • 業界としての課題
  • サービス内容・他社（競合）比較表
  • 実績

上記をベースに、企業やサービスのイメージに近い見せ方を考えます。

記者が好むファクトブックの内容とは

プロフィールは文章で書くのがベスト！
HPにあるような一般的な代表プロフィールでは物足りないので、仕事面じゃない人柄がわかるファクトがあると尚良しです。

特技、座右の銘、家族との日々の過ごし方など、親近感がわくものも◎。創業への思いなどはストーリーになりえるものが好まれます。辛かったこと、乗り越えたことなどあればしっかりと入れ込みましょう！

反対にサービスの説明は淡々と。他者との比較表も入れておきます。
日付、あくまでも自社調べであることを明記、記者さんの参考情報として活用してもらうイメージです。

働き方の取り組み、独自の制度などは好まれるのでおすすめ！
もちろんウェブジョブズのファクトブックにも入れていますよ～。
（取り組みところから手作り感が出ていていますが…まぁそれはご愛嬌ということで…）

記者さんのこぼれ話

さてこれは知り合いの記者さんに聞いた話です。

「記者目線でいうと、ファクトブックを持参（送付）してもらえれば、調査時間や会社説明を聞く時間が省けるので、ファクトブックを作っている会社はありがたい」とのこと。

ちなみに面識がない記者さんでも送ってもOK。むしろ知れるきっかけになるので送ってほしいそうです。

  • 業界初などで裏付けに自信がない場合は事前に話してほしい→調べることもできる
  • 新規性が高く事例がない場合も相談して→一緒に情報（ニュース）を作っていけないか探る
  • 記者と会うのに手ぶらはNG。最低限直近のプレスリリースを持参してほしい→説明が長いのはイヤ

ファクトブック作成の注意点

セミナーや記者さんの話で、これはちゃんとしておかないとマズイな思ったものをピックアップ！

  • 広告ばりに商品の売り込みに終始している

これは一番嫌われるやつです。

  • メッセージが具現化できていない
  • 外注で数百万円かけて作成したと思われるが情報の更新ができていない
  • 半年に一回くらいは見直しを行う

どうしても自分たちで作れないのなら外注するのもありらしいですが、
外注のデメリットの一つとしてお金がかかった割に代表の思いやサービスの理念がうまく可視化できていないことが多々あるそうです。

きれいに装った言葉よりも、下手でも熱のなる文章の方がメディアや記者さんには響きます。

また外注すると更新が適宜しづらく、都度お金もかかってしまいます。これは中小企業やベンチャーには結構痛い。

  • ページ数の制限はないが一般的には7～10枚
  • デザイン性があるレイアウトは理想だがファクトがちゃんと分かることがより重要

どうせならたくさんのことを伝えたい気持ちもわかりますが、20ページ、30ページとなると目を通す方も大変です。できるだけ情報はまとめましょう！
オシャでかっこいいデザイン…憧れますよね！わかります（私もです！）。でもそこに凝るのは中味がちゃんとできてから！無駄にかっこいいだけの中味空っぽのやつ程恥ずかしいものはないです。

  • 自社サイトでダウンロードさせるのはOK。でもアドレスなどの連絡先は取らせてもらう仕組みを作っておく

情報を取るのって嫌がられそうと思って、二の足を踏んじゃいますよね。
でもメディア関係者や記者さんはニュースがほしい関係性をつくりたいと思っています。
むしろ名前やメールアドレスなどの痕跡を残せない方が嫌なんです。

先人に学べ

私もそうしたように、多くの方はセミナーに参加したり、コミュニティや記事で情報を得たりしていることと思います。でもそれだけで本当に記者のお眼鏡に叶う良いものが作れるのか！ってなると、まぁ正直なかなか難しい。ぶっちゃけ私も「やってられるか、ヴォケぇ！」と何度叫んだことか…。

そこでに実行したのが、他社のうまくいっているファクトブックを真似すること。

うまくいった事例から自分たちの作りたいイメージに近いものを探し、いくつか融合してオリジナルのファクトブックのベースにしました。
すでにうまくいっているものを参考にするわけですから、イチから考えて作るよりずっと効率的だしうまくいく可能性も上がります。
はいそこ、パクリではありません。真似です。要素やテイストを真似して自分たちなりにアレンジしようねってことです。
もちろん丸パクリは絶対NG！ダメゼッタイ！

広報は助け合いでできている

今回この記事を書きながら、広報担当者同士の繋がりなかったら、絶対にファクトブックなんて完成できなかったんやろなぁ…と痛感してます。
コミュニティを紹介してくださったりセミナー紹介してくださったり、きっかけは些細なことでも、一つひとつが繋がって、そのおかげでファクトブックを完成させられました！

広報は社内でも全然理解されない、協力してもらえないという話も多いし、ひとり広報さんだと余計に助けがほしいと感じていると思います。
自分が助けてもらったように、この記事がどこかの広報さんのお役に立てるといいなぁ。

【ウェブジョブズのファクトブックはこちらからDLできます】

FACTBOOK 2022 （株式会社ウェブジョブズ）

]]> WordPressプラグイン「Contact form 7」導入後の設定 https://webtan-tsushin.com/stock_20220422_cf7 Mon, 25 Apr 2022 02:49:59 +0000 https://webtan-tsushin.com/?p=24961

サイトを作成する際、WordPressを利用することが主流になってきました。
便利なプラグインも多種開発されています。
よく使うプラグインは気軽に導入しますが、攻撃対象になることもあります。
また、もうちょっと便利に使いたいと思うこともあります。

「Contact form 7」もWordPress用のプラグインです。
ja.wordpress.org/plugins/contact-form-7/
手軽に複数のお問い合わせフォームを設置できるので、使っている方も多いのではないでしょうか。
自分の備忘録も兼ねて、導入後に設定したいポイントをまとめます。

迷惑メール対策

「Contact form 7」はメジャーなプラグインなので迷惑メールの対象として狙われやすく、海外からの迷惑メールが大量に届くこともあります。
迷惑メールは手動ではなくBotと呼ばれるプログラムで送信されています。なので、Bot対策として「reCAPTCHA」を設定します。

画像：Google reCAPTCHA

reCAPTCHAとは

▼reCAPTCHA|出典: フリー百科事典『ウィキペディア（Wikipedia）』
ja.wikipedia.org/wiki/ReCAPTCHA

フォームからメールを送信するときに、ゆがんだ英文の画像が表示されることありますよね。
「表示されている文字を入力してください」とパスワードのように入力します。
Botでは判読できない文字を利用して、人間かBotかを区別する仕組みです。

現在は「reCAPTCHA v3」と呼ばれるシステムで、複雑な文字を入力しなくても人間かBotかを自動で判別しています。

reCAPTCHA機能の設定

reCAPTCHA機能は、Googoleのサイトから「サイトキー」と「シークレットキー」を取得し、自身のWordpressに設定します。
キーを取得したら、コピー＆貼り付けで簡単に設定できます。

  1. Googleにログインし、reCAPTCHAのページを開く
    www.google.com/recaptcha/about/
  2. 「v3 Admin Console」から新しいサイトを登録
  3. サイトキー、シークレットキーを取得
  4. WordPressのダッシュボードから「お問い合わせ＞インテグレーション」を開く
  5. 「reCAPTCHA」からインテグレーションをセットアップ

解説はこちら
▼reCAPTCHA (v3)｜Contact Form 7
contactform7.com/ja/recaptcha/

reCAPTCHバッジをフォーム画面のみに表示

reCAPTCHAの設定を完了すると、デフォルトの設定ではサイトの全ページにreCAPTCHAのバッジが表示されます。
バッジが表示されていると、ページスピードに影響が出たり操作の妨げになることもあるので、Contact form 7を使用しているページだけに適用させます。

下記サイトを参考に、テーマのfunctions.phpへコードを追加します。

※ご注意
functions.phpの編集はWordpressの動作に影響が出ます。
必ずバックアップを保存してから作業してください。
下記スクリプトは公式ではありませんが、私の運用している複数のサイトで利用しています。今のところ問題なく稼働しています。

解説はこちら
▼ContactForm7のキャプチャをお問い合わせページだけに表示｜ワードプレス・ドクター
wp-doctor.jp/blog/2021/05/14/contactform7キャプチャをお問い合わせページだけに表示/

承諾確認の追加

「個人情報の保護に関する法律についてのガイドライン（通則編）」（個人情報保護委員会）によると、「本人による同意する旨の確認欄へのチェック」することにより「本人の同意」を得ていると判断されます。

また、承諾確認チェックボックスを設置することで、海外からのスパムメールをある程度防ぐ効果もあります。

Contact form 7では簡単にチェックボックスを設置できます。

解説はこちら
▼承諾確認チェックボックス｜Contact Form 7
contactform7.com/ja/acceptance-checkbox/

便利に使いたい

デフォルトの設定でも使えますが、こうだったらいいな…と思うこともあります。
見た目と使いやすさについて参考サイトを紹介します。

CSSで見た目をわかりやすく

スタイルシート（CSS）で見た目を整えると、必須項目や入力箇所が分かりやすくなります。
コピーして使えるCSS、HTMLを公開しているサイトも多数あります。

メールフォームのデザインは、テーブル（table）、定義リスト（tl）、ブロックレベル（div）などを利用してカスタマイズされています。
最近のCSSではレスポンシブにも対応しているので、サイトの用途やテーマに合ったCSSを選んでください。
CSS、HTMLの知識があれば、カラーの変更なども簡単にできます。

▼【Contact Form 7】CSSでデザイン カスタマイズ（コピペOK・レスポンシブ対応）｜ツッチーブログ
tsutchii.com/cf7-design-customize

▼Contact Form 7のカスタマイズ（コピペOK、レスポンシブ対応）｜webicon
webicon.jp/wordpress/contactfoam7-setting/

▼Contact Form7をCSSでおしゃれにカスタマイズ【コピペ用】｜misaMAG
shimamisa.com/contact-form7-css/

郵便番号から住所を自動入力

WordPressのプラグインです。
郵便番号を入力すると、自動で住所が入力されます。

【zipaddr-jp】
wordpress.org/plugins/zipaddr-jp/

Contact Form7を利用していると設定がより簡単にできます。

▼Contact Form 7 が、より簡単に利用できます。｜ZipAddr2
zipaddr2.com/contactform7/

「都道府県」「市区町村」など命名ルールから次の入力項目を判断する方法と、入力項目に既定のname属性を設定する方法があります。
入力項目の数やレイアウトで設定は違うので、それぞれのサイトに適した方法を利用してください。

確認ページがない

Contact Form7は確認ページがないんですよね。
プラグインで表示させることもできるようですが、更新がされていないものや、レイアウトに手間がかかるものや、いまいちコレ！というおすすめがありません。
もしおススメあれば教えてください^^;

トラッキングのために

トラッキングとは、サイトにおけるユーザーの行動や情報を収集する機能です。
ユーザーがフォームを書き込んで、送信したか離脱したか、解析することもあります。

Googleアナリティクス対応のためにサンキューページへリダイレクトさせたい方もいるでしょう。
Contact Form7のサイトではリダイレクト方法も掲載されていますが、「トラッキングする簡単な方法」を推奨しています。

▼送信後に異なる URL にリダイレクトさせるには｜Contact Form 7
contactform7.com/ja/redirecting-to-another-url-after-submissions/

▼フォーム送信を Google Analytics でトラッキングする｜Contact Form 7
contactform7.com/ja/tracking-form-submissions-with-google-analytics/

今後、GA４に変わった場合は対応どうなるのかしら…。
なんだか面倒そう…。
と思ったあなたには、WordPress公式プラグイン「QAアナリティクス」をおススメします。
タグやコードの設定は不要、導入するだけでアクセス解析できますよ。

HTTPでは動作しなかった話

余談ですが。
WordPressで新しいサイトを構築中、Contact Form7で作成したメールフォームから送信テストをしても、アイコンがくるくる回るだけで動作しないことがありました。
新しくページを作って設置すると送信できるのに、お問い合わせページからはくるくる…

プラグインの干渉？
バージョン？
何か設定がおかしい？

しばらく悩んでから、アドレスバーの違いに気づきました。
お問い合わせページへのリンクをうっかり「http://～」に設定していたため、「保護されていない通信」になっています。
「https://～」でテストしたら、すんなりと送信できました。

サイト構築中でサーバーやBasic認証の影響かもしれません。
調べても原因がわからず悩んだので、おまけで書いておきます。

]]> 戦略やブランディングを考えるとき、何度も読み返すおすすめのWebマーケティング本9選 https://webtan-tsushin.com/best-web-marketing-books Fri, 01 Apr 2022 05:05:18 +0000 https://webtan-tsushin.com/?p=24700

【背景】現在進行系のWJ変革プロジェクト

ウェブジョブズ（略称：WJ）は、2011年から丸10年、ひとりで頑張るウェブ担当者向けメディアとしてウェブ担当者通信を運営しています。

「ウェブ担当者通信」「丸山耕二」は、おかげさまでウェブのお仕事をされている方々に認知されています。ところが、ウェブ通の運営会社であるウェブジョブズは残念ながら世の中に知られていません。

理由は明らかです。
「ウェブジョブズ」としての認知活動を一切してこなかったのですから……

ウェブジョブズについて

簡単にご紹介すると、ウェブジョブズは、お客様のオンラインビジネス成功のお手伝いを主軸に、ユーザー行動解析ツール「QA ヒートマップアナリティクス」の開発・提供、レジャーとしてのゴルフを広めるメディア「Caddy」の運営、そしてWeb業界のトップリーダーたちから多く寄稿いただいている「ウェブ担当者通信」の運営などを行っているウェブコンサル会社です。

Webコンサル・ウェブ運用によって、多くのお客様のオンラインビジネスを成功に導いてきたにもかかわらず、自社のWebマーケティングを一切やっていないのはやはりよくありませんよね。

また、ウェブジョブズは所属するメンバーの人数も増え、「丸山耕二」単体ではなく「ウェブジョブズ」チームとして案件に関わっています。それぞれのメンバーの得意分野を活かしつつ、足りていない不得意分野を補う仕組みづくりも必要でした。

そして時代の流れとともに、自分たちの強み・弱みも変わってきており、企業理念やビジョンなどを見直していく時期にきていました。
新規ビジネスでQAをリリースし、WJはプロダクトメーカーでもあります。そのためビジネスモデルの見直しも必要でした。

Webマーケティングの前にまずは戦略とブランディングを考え始めた

このような背景があって、2020年秋頃から始まったWJ変革プロジェクト。
初期の頃は「WJブランディング」と銘打って進めていました（今となっては使われていませんが…）。
プロジェクトを推進するにあたって、チームメンバーはWebマーケティング本をはじめ、さまざまな書籍を読みました。

企業変革やブランディングの本、ハーバードビジネスレビューの雑誌なども読みましたが、実はあまり参考になる本は少なかったです。
多くの場合は大企業を例に書いているため、中小企業の立場で読むとやはり参考になりそうでならないんですよね…

またWebマーケティング本というと、細かい設定や進め方・ツール紹介などが書かれたハウツー本がよく読まれています。ハウツーに関しては時代とともに変わっていくことが多いため、今回は書籍としてほぼ読んでいません。

戦略やブランディングを考えるとき、個人的には、以前から何度も読み返していた本がやはり参考になりました。違うステージに立ったときに改めて読み返すことで、新しい発見が見つけられた本もあります。

そこで今回は、何度も読み返してしまう、個人的におすすめのWebマーケティング本（Webマーケティングに限りませんが…）をご紹介します。

何度も読み返してしまう、おすすめのWebマーケティング本 9選

ゼロ・トゥ・ワン 君はゼロから何を生み出せるか（ピーター・ティール 著）

ゼロ・トゥ・ワン 君はゼロから何を生み出せるか

0から事業を起こすために必要なことがすべて書かれています。

「ゼロ・トゥ・ワン」は、ウェブジョブズ代表の丸山が絶賛し何度も読み返している本で、内部ミーティング中にもよく話題に出てくるので読んでみました。

ピーターティールは、ペイパル創業者でありFacebookの最初の投資家です。最近は上場して2兆円企業になったパランティアの創始者で、「伝説の起業家」といわれています。

スタンフォード大学でのピーター・ティールの起業論講義を書籍化した本です。起業したい人向けではあるのですが、新しいサービスを起ち上げるときにも「なるほどなぁー」と感じる箇所が多くて参考になる1冊です。

マネジメント（ピーター F. ドラッカー 著）
イノベーションと企業家精神（ピーター F. ドラッカー 著）

マネジメントイノベーションと企業家精神

名著中の名著ですね。

「マネジメント」は以前「もしドラ」の影響で読んだのですが、今回読み返しました。

ドラッカーは「企業の目的は顧客の創造」であり、マーケティングとイノベーションが重要、とさまざまな書籍で伝えています。

ドラッカーのすべての書籍を読んだわけではありませんが、この2冊は個人的におすすめです。

USJを劇的に変えた、たった１つの考え方　成功を引き寄せるマーケティング入門（森岡毅 著）
確率思考の戦略論　USJでも実証された数学マーケティングの力（森岡毅 著）
マーケティングとは「組織革命」である。（森岡毅 著）

USJを劇的に変えた、たった１つの考え方　成功を引き寄せるマーケティング入門確率思考の戦略論　USJでも実証された数学マーケティングの力マーケティングとは「組織革命」である。

USJを再建させ、株式会社刀を設立してからも丸亀製麺・ネスタリゾート神戸などを成功させてきた森岡毅氏の書籍。

「確率思考の戦略論」は個人的には少し難しいのですが、今も時々読み返す3冊です。

私たちWJ変革プロジェクトでは、チームメンバーが増えたことを背景のひとつとしてあげています。
お客様のオンラインビジネスを成功させるために、個々のマーケティングスキルやノウハウはもちろん必要ですが、もっとも重要なのはお客様も含めたチーム力だと感じています。

「マーケティングとは「組織革命」である。」では、ヒトと組織に焦点を当てて書かれたマーケティング本です。人間の本質が書かれていて、経営者だけでなく、「社内で自分の提案を通したいのに意見が通らない」「上司（部下・他部署）が動かない」などで悩んでいる方に、とくにおすすめの本です。

ザ・ファシリテーター　人を伸ばし、組織を変える（森時彦 著）

ザ・ファシリテーター

「ザ・ファシリテーター」、ずいぶん長く我が家にあり（2004年刊行なんですね）何度も読み返しています。

小説仕立てになっているので読みやすいのですが、小説として読むと「いやいや、そんないい人多くないよ」と突っ込みたくなるところもあります（笑）

社内ミーティングでも、お客様とのミーティングにおいても、ミーティングの回数だけ重ねて物事が進まない、とか、いいアイデアが出ない、ということは多々あります。
多くの人が関わるWebディレクションやWebマーケティングでは、ファシリテーションが大切になりますが、苦手としている人が多いのではないでしょうか？

ファシリテーションの入門本としておすすめの1冊です。

世界は感情で動く　行動経済学からみる脳のトラップ（マッテオ・モッテルリーニ 著）

世界は感情で動く　行動経済学からみる脳のトラップ

ダニエル・カーネマンがノーベル経済学賞を受賞したことで有名になった行動経済学。行動経済学では、人間は必ずしも合理的な判断に基づいて行動をするわけではない、という考えを前提にしています。

「世界は感情で動く」は、文章が分かりづらくて実は完読していません。毎回目次をみて、そのときに興味がある箇所だけを読んでいます。

Webマーケティングにおいて重要な顧客理解。
数字やヒートマップから読み解き考えていって、顧客を理解しようと努めます。顧客の深層心理の裏付けが欲しいなと思ったとき、この本を手に取って読んでいます。

未経験・低予算・独学でホームページリニューアルから始める小さい会社のウェブマーケティング必勝法（森野誠之 著）

小さい会社のウェブマーケティング必勝法

昨年2021年秋に出版された、森野さんのWebマーケティング本「未経験・低予算・独学でホームページリニューアルから始める小さい会社のウェブマーケティング必勝法」。

いわゆるハウツー本や小難しい技術・設定本ではなく、「WebマーケティングやWebディレクションを進めるうえで大切なこと」を効率よく一通り知ることができる、初心者向けWebマーケティング本です。

ウェブジョブズは小さい会社です。そして自分自身がリーダーとなってWebディレクションを行なった経験がないメンバーもいます。
そのため実はこの本、ウェブジョブズの社内課題図書になりました。

サイトリニューアルを検討し、「SNSで情報発信をしていこう」「これからネットを頑張ろう」と思い始めたお客様にもおすすめしている1冊です。

【現在進行形】WJ変革プロジェクトの今

さてWebマーケティング本の紹介をしてきましたが、これらの本を読みつつも足かけ2年、ウェブジョブズがどんなことをやってきたか、今WJ変革プロジェクトはどうなっているかを簡単にご紹介します。

  • ウェブジョブズの現状を知る
    • 強み・弱み
    • 市場および競合調査
    • 課題洗い出し　など
  • ビジョンと戦略策定
    • 10年後のビジョン
    • 10年後のチームメンバーの成長
    • 経営理念
    • 行動理念
    • 人事理念
    • 戦略　など
  • 社内ナレッジの共有
    • 社内ポータルサイトで個々が持つ知識を共有
  • 成功するマーケティング手法を探る
    • QAでのテストマーケティング
    • Twitter/InstagramなどSNS活用
    • note/Qiita/ウェブ通での情報発信
    • 資料ダウンロード
    • SNS広告・メディア広告
    • 広報（ニュースリリース/リアルつながり）　など
  • Webマーケティング本以外の情報収集と活動
  • お客様への新たな提供価値の検討
  • 社内プロセスの整理とマニュアル化

このような流れを経て、2年かけてようやくサイトリニューアルの準備にたどり着きました。
今春にはウェブジョブズのサイトをリニューアルし、情報発信も少しずつですがやっていく予定です。

お客様のビジネス支援と普段の業務の合間にプロジェクト推進をしているため、正直時間はかかっています。
でも振り返ってみると、体系立ててプロジェクトを推進できているのは、個々メンバーがいろいろなWebマーケティング本を読み漁り、本の中からよいところ・参考になるところを話し合い、拾っていけているからではないかと思います。

Webマーケティング本はたくさん出版されています。
ビジネス書は文体の好き嫌いもあるでしょうし、万人にとってこの本が絶対いい、というのはなかなか難しいですよね。

なので超個人的意見で、何度も読み返してしまうWebマーケティング本のみをリストアップしています。もしご参考になれば幸いです。

]]> Web運用本の著者にも聞いた！WordPressサイトで絶対導入すべきおすすめプラグイン3選と注意するポイント【2021年版】 https://webtan-tsushin.com/wordpress-plugins Fri, 22 Oct 2021 06:16:58 +0000 https://webtan-tsushin.com/?p=23565

WordPressはオープンソース型のCMS（コンテンツ管理システム）のひとつで、個人ブログから企業サイトまで幅広く使われています。
W3Techsによると2021年10月時点で、CMSを利用した日本語サイトでのWordPressのシェアは83.7%です。

なぜこんなにWordPressは人気があるのか？
なんといっても「欲しい機能が簡単に追加できる、使い勝手のいいプラグインが豊富にある」のはサイト運用者にとってWordPressを辞められない理由のひとつでしょう。
詳しい人気の理由は「おまけ：WordPressが人気の理由」にまとめています。

ウェブ担当者通信は「知るべきことを知る」「わかる」「できる」をコンセプトにしたウェブ担当者／Webディレクター向けのメディアです。
2012年から2020年まで、ひとりで頑張るウェブ担当者/ウェブディレクター向け会員制ウェブ教育サービスを著名な講師陣と共に提供してきました。

私たちウェブ担当者通信に関わっているメンバーは自社サービスサイトだけでなく、クライアントのビジネス拡大を目的としたサイト運用にがっつり関わっています。そのためメディアとして生まれ変わって以降も、会員や講師の方々と情報交換やご相談をいただくことが多いです。

ご相談の中でも意外に多いのが「WordPressプラグインって何使ってる？」
そこで今回は、数多くのWordPressサイト運用に関わってきたウェブ担当者通信が、運用しているウェブ担当者やウェブ運用本を書いている著者にここ最近聞いてきた、本当に役に立つプラグインをまとめました。

目次

ウェブ担当者通信おすすめ絶対導入すべきプラグイン3選

  • どうやってプラグインを選べばいいの？
  • 多くのプラグインを使うとサイトが遅くなるって聞いたけど…
  • プラグイン選びで注意しておかないといけないポイントは何？
  • テーマ（テンプレート）にいろいろ機能があるけどプラグイン必要？
  • サイト運用で最低限これだけは入れておくべきプラグインは？

WordPress公式プラグインだけで6万件もある中から、まずは絶対導入すべきプラグインを3つご紹介します。

「サイトに負荷をかけないこと」「サイトを安全に保つこと」「サイトからの収益アップにつなげること」に限定してピックアップしています。
ちなみに「サイトを安全に保つ」という観点ではバックアップ系プラグインを使っている方も多いです。レンタルサーバー等でバックアップを用意していることが多いため、運用を考えるとサーバーでのバックアップがお勧めです。

SiteGuard WP Plugin 【セキュリティ対策】

「SiteGuard WP Plugin」は、管理ページとログインページを攻撃から守ることに特化したWordPress公式プラグインです。

ja.wordpress.org/plugins/siteguard/

WordPressは悪意ある第三者から攻撃されやすく脆弱性を指摘されることが多い、という弱点を抱えています。攻撃されやすい理由は「人気が高く、使っているサイトが多いこと」「オープンソースソフトウェアであること」「無料であること」。
そのためWordPressサイト運用においてセキュリティ対策は必須です。

WordPressは定期的に脆弱性やセキュリティ対策のためのアップデートを行っています。WordPress本体・プラグイン・テーマのバージョンは、できるだけ常に最新版にアップデートしておきましょう。
さらに管理ページへのアクセス制限・不正ログイン対策機能をもつWordPressプラグイン「SiteGuard WP Plugin」を入れておくと安心ですね。

SiteGuard WP Pluginの機能・特徴

  1. 管理ページへのアクセス制限
  2. 不正ログイン対策
  3. コメントスパム対策
  4. 日本製プラグイン
  5. サポートページすべて日本語対応
  6. 無料

QA Heatmap Analytics 【視覚的にサイト改善】

「QA Heatmap Analytics」は、顧客データを活用したデータ分析やマーケティングに携わる方にも役に立つユーザー行動データ収集&分析 WordPress公式プラグインです。

ja.wordpress.org/plugins/qa-heatmap-analytics/

サイトやブログの運用をしている方はほぼ毎日WordPressにログインしています。
新規記事の作成、既存記事のリライトやボタン位置の修正など、Googleアナリティクスで数値とにらめっこしながら、ユーザーの行動意思を想像しサイト改善に活かしています。

「QA Heatmap Analytics」はプラグインをインストール・有効化するだけで、サイトに訪れたユーザーの行動データをすべて取得・保存します。ユーザー行動データはヒートマップや録画再生（セッションリプレイ）の機能を使って、WordPress管理画面上から一目で直感的にページ単位でユーザーの行動を把握できるのです。

外部の分析ツールにログインすることなく、ほぼ毎日ログインしているWordPress管理画面からすぐに確認できるので、効率よくリライトなどサイト改善に活かせますね。

QA Heatmap Analyticsの機能・特徴

  1. すべてのユーザー行動データを取得
  2. ページの回遊も離脱もヒートマップで直感的に把握
  3. 録画再生（セッションリプレイ）
  4. 分析ツールにありがちなタグ設置不要
  5. 日本製プラグイン、サポートも日本語対応
  6. 無料

XML Sitemap & Google News 【SEO対策】

「XML Sitemap & Google News」は、Googleなどの検索エンジンにクロール・indexさせるXMLサイトマップを、自動生成・通知するWordPress公式プラグインです。

ja.wordpress.org/plugins/xml-sitemap-feed/

WordPress5.5からXMLサイトマップ自動生成が標準実装されています。でも残念ながらXMLサイトマップとして必要な情報が満たされていません。
XMLサイトマップ自動生成・通知を行う必要があるサイトでは、WordPressプラグインの導入をお勧めします。

GoogleはXMLサイトマップの必要性について以下のように伝えています。

サイトの各ページが適切にリンクされていれば、Google は通常、サイトのほとんどのページを検出できます。 適切にリンクされているというのは、なんらかのナビゲーション（ページに配置したサイトのメニューやリンクなど）によって、重要なすべてのページに移動できる状態を指します。サイトの各ページが適切にリンクされている場合でも、大規模なサイト、複雑なサイト、専門性の高いファイルのクロールを改善する手段としてサイトマップが役立ちます。

引用：サイトマップの概要 | Google 検索セントラル | Google Developers

XMLサイトマップはすべてのサイトでSEOに効果があるわけではありません。XMLサイトマップを設置しておくことで、画像や動画、早くindexして欲しいページなどの情報とサイトの構造を、検索エンジンに的確に早く伝える効果があります。

XML Sitemap & Google Newsの機能・特徴

  1. 軽い
  2. 必要最低限の機能のみなので分かりやすい
  3. すべての画像URL取得
  4. カテゴリーページを一括で除外
  5. 無料

テーマ（テンプレート）に最初から欲しい機能（たとえば「問い合わせフォーム」「SEO対策」など）が備わっていることもあります。機能が要件を満たしていればプラグインを新たに入れる必要はありません。
注意するポイントに記載していますが、不要なプラグインをたくさん導入・有効化するとサイトが遅くなったり不具合につながる恐れもあります。

必要なら入れると便利なおすすめWordPressプラグイン

つづいて、入れておくと便利なおすすめプラグインをご紹介。

Yoast SEO 【SEO対策】

「Yoast SEO」は、プラグインインストールの目安となる有効インストール数が500万以上の超人気SEO対策 WordPress公式プラグインです。

ja.wordpress.org/plugins/wordpress-seo/

SEO対策プラグインとしてもうひとつ有名な「All in One SEO Pack」も以前使ったことがあるのですが、パンくずリスト設定ができない・重いなどの理由から現在は「Yoast SEO」のほうがおすすめです。

Contact Form 7 【サイト制作】

「Contact Form 7」は、問い合わせフォームを簡単に作れるWordPress公式プラグインです。

ja.wordpress.org/plugins/contact-form-7/

「Contact Form 7」も有効インストール数が500万以上の超人気プラグインです。
プラグインのアップデートも頻繁に行われており、一時期言われていたスパムメール対策にも対応しています。

Yoast Duplicate Post 【サイト運用】

「Yoast Duplicate Post」は、投稿記事/固定記事を複製できるWordPress公式プラグインです。

ja.wordpress.org/plugins/duplicate-post/

前に書いた記事のデザインのままで記事を新しく作りたいときに「Yoast Duplicate Post」はとても便利です。また公開している記事をリライトするときに、書き換え＆再公開の機能を使うと、公開中の記事に影響することなくリライトした記事に置き換えられ、作業効率が上がります。

「Broken Link Checker」は、リンクに異常があったときに通知してくれるリンクチェックWordPress公式プラグインです。

ja.wordpress.org/plugins/broken-link-checker/

サイト内の内部リンクと外部リンクを自動で監視チェックしてリンク切れを通知してくれます。
回遊率を上げてコンバージョンにつなげたいと思っていても、肝心のリンクが間違っていたらユーザーはがっかりしてそこで離脱するかもしれません。
ただ最近は「ちょっと重い」という声も耳にします。自動でリンクチェックすることが本当に必要であれば入れておくと便利です。

プラグインを導入するときの注意点

WordPressプラグインは「無料（有料もあり）」「便利」「簡単に使える」、WordPressサイト制作・運用をする上でとてもいいツールが揃っています。

プラグインもテーマ（テンプレート）も数が多いので、プラグイン選びに悩むことも多いですよね。
ウェブ担当者通信運営者がプラグイン（テーマも同様です）を選ぶとき、導入するときに注意しているポイントをお伝えします。

できるだけWordPress公式プラグインを選ぶ

おそらく多くの人は「やりたいこと」「機能」でプラグイン（テーマ）をネットで調べると思います。
書いている人が多くてよさそうなプラグインが見つかったら、WordPress公式プラグインでプラグイン名を入れて検索してみましょう。

個々のプラグインページで「有効インストール数」「レビュー（評価）」を見る人は多いですが、実は重要なのは「最終更新日」「開発タブに書かれている更新履歴」「検証済み最新バージョン」「PHPバージョン」です。

  • 最終更新日・・・最後にアップデートされた日
  • 更新履歴・・・どのくらいの頻度でメンテナンスされているか
  • 検証済み最新バージョン・・・重要なWPバージョンアップに対応しているか
  • PHPバージョン・・・自サイトのPHPバージョンに対応しているか

有効インストール数が多くても更新がされていないプラグインは、メンテナンスされておらず古い可能性があります。メンテナンスされていないプラグインは、他のプラグインや新しいWPバージョンとの不具合を起こす恐れがあります。また開発者自身が他サービスに移っていて、サポート対応があまりよくないことも…

WordPress公式プラグインは、WordPressコミュニティが厳しいソースコードチェックを行っています。
公式プラグインになるためには、審査がめんどくさかったり、WordPressの作法にのっとって開発しないといけなかったり、面倒な手間がいくつかあります。
この手間をクリアしたうえで公式プラグインとなっていて、第三者によるチェックがされているというのは、プラグインを選ぶうえでサイト運用者としては安心ですね。

もちろん公式プラグインでなくても素晴らしいプラグイン（テーマ）は数多くあります。
ただ第三者によるチェックはされていないため、非公式プラグインを選ぶときにはプラグインの情報やサポート対応などをしっかりと確認しておきましょう。

プラグイン同士の相性を調べる

プラグインを提供している開発者のサイトをみると、使い方マニュアルや注意事項が書かれていると思います。
そこに「○○プラグインと△△関数が競合するので注意」のようなことを書いている場合があります。

新しく導入したいプラグインと既存で使っているプラグインが「競合するかも」と書かれていた場合、おそらく解決方法がマニュアルに記載されていることでしょう。解決方法にそって対応をするか、もし解決方法が書かれていないときは、新しく導入したいプラグインを提供する開発者に問い合わせをしてから導入しましょうね。

入れすぎ注意

便利だからといってあまり使わないプラグインを大量にインストール・有効化するのはNGです。

1つ目の理由は「サーバーへの負荷が大きくなってページ表示速度が遅くなる」こと。
プラグインには単体での処理が軽いもの、重いものが存在します。
プラグインを大量に入れると、中には処理の重いプラグインが含まれていたり、処理が軽いプラグインばかりだったとしても、数が増えれば全体として処理が重くなってしまうことも…

ページ表示速度はSEOに影響します。
使わないプラグインは無効化もしくは削除するようにしましょう。

2つ目の理由は「何の目的で入れたプラグインか分からなくなる」こと。
使わないプラグインを削除しようと思っても、複数人で複数サイト運用をしていると「どれが不要か分からない」ことありませんか？
プラグインの数が増えるとアップデートの対応も大変です。また何か不具合が起こったとき、前述した「プラグイン同士の相性」について調べることが増えてしまいます。

プラグインの入れすぎには注意しましょう！

テストサーバーorステージングサーバーがあればまずはテストを

サービスをすでに提供しているサイトや既存クライアントサイトなど、不具合が生じて一定時間サイトが閲覧できなくなると困るWordPressサイトに、プラグインを新しく入れるときには以下手順を踏むとよいでしょう。

  1. テストサーバーやステージングサーバーがあればプラグインを導入しテスト
  2. 問題がなければ本番サーバーにプラグインをインストール・有効化

テストサーバーやステージングサーバーでプラグインを導入することで、不具合が起こらないかのテストだけでなく「欲しい機能があるか」「設定がやりやすいか」「期待した動作をしてくれるか」といった動作チェックも並行して行えます。

高速化が大事だからといってむやみにキャッシュ系プラグインを入れない

「ページ表示速度を爆速させるキャッシュ処理プラグイン○選」といった記事をよく見かけます。
キャッシュについてはある程度知識が必要となります。そこそこ有名なサイトでも間違った設定やムダな対策をとっていることも実は多いんです。

まずは自サイトでどこがボトルネックになって表示速度が遅くなっているのかを調べることから始めましょう。

ブログなどであればページキャッシュを行うキャッシュ系プラグインで高速化に効果があることも。
データベースに頻繁にアクセスするサイトやCDN（Contents Delivery Network）をすでに使っているサイトなどは、キャッシュ系プラグインを導入しても効果はありません。むしろ不具合を起こす可能性が増えてしまいます。

ページ表示速度を高速化させたいなら、ウェブ担当者としてはキャッシュ系プラグインを導入する前にまずはコンテンツサイズの圧縮を行いましょう。
そしてどこがボトルネックになって表示速度が遅くなっているのかを調べて、サーバーなどインフラ環境の見直しなどを検討するのもひとつの方法です。

まとめ

今回は、WordPressサイトで絶対導入したほうがいい「ウェブ担当者通信のおすすめプラグイン」と「プラグイン選びで注意するポイント」をご説明しました。

ウェブ担当者通信がおすすめするプラグインはこの3つ。

WordPressプラグインはとても便利で使いやすいものが多いですが入れすぎには注意してくださいね。

おまけ：WordPressが人気の理由

情報量が多く、ちょっとWebに詳しい人からも「WordPressがいいよ」と勧められる
WordPressが人気である一番の理由ですね。
日本での圧倒的シェアを誇るWordPressは、インストール・テーマ選び・構築からコンテンツ制作・カテゴリー設定、運用に至るまで、ネットで調べれば日本語で書かれた情報がたくさん見つかります。
しかも知り合いのサイトもWordPressで構築されていることが多いため、リアルでも相談しやすいメリットがあります。
一方で注意するポイントに記載していますが、間違った情報が多いデメリットも抱えていますので注意が必要です。
HTMLやCSSの詳しい知識がなくても自分好みのサイトが作れる
ブログは外部ブログサービスで書くのが楽ですしWebの知識も不要です。
でも外部ブログサービスを長く続けていくと、機能面やデザイン面で物足りなくなったり、自分好みのサイトにしたいと感じてきたりしたとき、WordPressであればHTMLやCSSの詳しい知識がなくてもサイト構築・運用が簡単にできます。
もちろんHTML/CSS/PHPの詳しい知識があれば、さらにWordPressサイト運用が楽になります。
テーマ（テンプレート）の種類が多い
HTMLやCSSの詳しい知識がなくても自分好みのサイトが作れるのは、テーマ（テンプレート）が無料で豊富に公開されているからです。
有料のテーマ（テンプレート）では、SEO対策など機能があったりデザインやカラーが多く簡単に変更できたりします。
プラグインで簡単に欲しい機能が手に入る
WordPressプラグインとは、WordPress単体の機能やテーマ（テンプレート）に含まれている機能では足りない、便利な機能を追加・拡張できるツールです。
テーマ（テンプレート）もプラグインも公式と非公式に分かれます。WordPress公式プラグインはソースコードチェックを行ったうえで、世界中の開発者によって6万件近く（2021年10月時点）公開されています。
]]> ITPとIDFAの利用制限によるGoogle Analyticsやアクセス解析への影響（iOS 14） https://webtan-tsushin.com/itp-idfa-google-analytics Wed, 14 Oct 2020 05:49:07 +0000 https://webtan-tsushin.com/?p=22162

※以下の記事は2020年10月14日時点の情報を元に記載しています。今後アップルなどの方針に変更がある可能性もあります。

ITPとIDFA利用制限がGoogleアナリティクスに与える影響

そもそもITPやIDFAって何？

ITPはIntelligent Tracking Preventionの頭文字。日本語訳すると「賢く（怪しい）計測を防ぐ」みたいな意味でしょうか。Googleアナリティクスも最近は怪しい対象になってしまったため影響を受けています。

IDFAはIDがメインの単語でIdentifier for Advertisersの頭文字。ITPとは全く別物です。直訳すれば「広告のための識別子」であり、アプリの広告計測に使われている端末固有のIDのことです。

この2つについては後ほど詳しくご説明します。

最新のITPによるGoogle アナリティクスへの影響

結論から言うと影響があります。具体的には下記です。

  • ITPはiOS（iPhoneなどが採用するOS）の機能で「第三者の追跡サービスである」場合に発動する
  • Google アナリティクスは第三者の追跡サービスと認定されているため、ITPの対象となっている
  • ITPが発動すると7日間、もしくは24時間でGoogleアナリティクスのCookieが消える（流入経路によって違う動き）
  • Cookieが消えるので、Googleアナリティクスリマーケティングに影響がある
  • Cookieが消えたあと再訪問しても、新規ユーザーのアクセスとして記録される

iOSのデータを見る時は注意が必要ということですね。

IDFA利用制限によるGoogle アナリティクスへの影響

こちらは結論から言うとありません。 ただしGoogleアナリティクスではなく、アプリ計測を考えた広義のアクセス解析という意味では影響があります。

ITPやIDFA利用制限がなぜ話題になっているの？

結論をまずお伝えしましたが、それだけでは、ITPやIDFAについて木を見て森を見ずです。 ITPやIDFA制限は主にiPhone（他Apple製品）に関する制限なのですが、いまいちよくわからないという人も多いと思います。

そこで、今回は特にアクセス解析分野の観点から、ITP及びIDFAの利用制限とはいったい何なのか？その影響を簡単にまとめてみたいと思います。

Apple製品ではプライバシーが強化され続けている

2017年6月5日のWWDCにおいてAppleが発表したITP（Intelligent Tracking Prevention） は、サードパーティCookieのサイト超えトラッキングを防止する機能で、サイト超え広告配信を行っていたベンダーに衝撃を与えました。

それから3年、2020年6月22日のWWDCで発表されたiOS 14では、さらなるプライバシー強化が行われ、ITPのみならずIDFA(Identifier for Advertisers)と呼ばれる広告主向けの端末情報取得にもユーザーの許可がいるようになっています。

そもそもアップルは何がしたいの？

そもそも、アップルは何がしたいのでしょうか？ アップルはプライバシーについてとても重視しており、見たことがある人も多いとは思いますが最近ではCMまでやっています。

10月14日午前2時からのiPhone12が発表されたAppleEventでもセキュリティやプライバシーの話が本当に多かったです。

GAFAの中でも、Appleだけはユーザーの個人データを保持せず、プライバシーを重視するポジションを打ち出しています。

www.apple.com/jp/privacy/

上記のページにはっきりと「Safariは追跡者からあなたを守ります。インテリジェントトラッキング防止機能（つまりITP）がインターネット広告から追いかけられないようにします」と書いてあります。

つまりアップルは、ユーザーが不快な広告（少なくともアップルはそう思っている）に追いかけられないように配慮したいと思っているということです。

推測の域を出ませんが、アップルがプライバシーを重視するのには下記の理由があるように思います。

  • 企業ポリシー（もともとロックで自由を愛する企業）
  • 勝てるポジショニング（AppleはGAFのようにデータを取得せずとも成立するビジネスモデル。エッジコンピューティング型）
  • GDPRなどの個人情報保護の流れ（対立して制裁をうけるのは避けたい）

なんとなくですが「機械は各個人のために、その個人のプライバシーを守りながら働くべき」というポリシーを感じます。 GAFAの中でも特殊ポジションです。

そもそも我々はなぜユーザーを把握（トラッキング）したいの？

Appleの思惑とは別に、多くのインターネット企業は各個人の情報をなるべくたくさん欲しいと思っています。

もし個人の趣味や誕生日などが詳細にわかれば、その人向けにカスタマイズした案内（広告）を届けることができ、結果的に購入率があがる可能性が高いからですね。

これってテクノロジー企業が行うと気持ち悪いような気がしますが、今まで保険の営業さんなどが普通に行っていたようなことです。 追っかけ広告は気持ち悪いですが、仲の良い営業さんから誕生日に電話がかかってくると嬉しかったりしますよね。

こういった行為自体についてはAppleも頑なにダメだとは思っていないようで、問題は「ユーザーの許可なく情報を収集していること」と捉えているようです。GDPRでもユーザーの許可なくCookieにユーザーの推測につながる情報を保存することは禁止しています。

どちらが良いのか？についての論争は平行線を辿ると思いますのでここでは避けますが、こういった事情があるという前提でiOS14に搭載されているITPとIDFAについてそれぞれまとめます。

ITPについて

ITPは「ユーザーを追跡するCookieなど」への対策

ITP（Intelligent Tracking Prevention）は第三者の追跡を防止するブラウザの機能です。iOSやMacなどに搭載されています（※）。 「サイト超えトラッキングを防ぐ」という命名でデフォルトでONになっています。

アプリで利用するWK WebView classにも適用されるためiPhoneのChromeなどサードベンダーのブラウザにも適用されます。

このITPがオンになっていると、「このサイトはデータ収集している（サイト超えトラッキングしている）」という怪しいドメインに対してJavaScriptで発行されたCookie情報をブロックします。

上記の怪しいドメインの分類はAI（機械学習）で行われていますが、イメージを掴むために大雑把にいえばITPは、GoogleやFacebookなどサイト超えして情報を収集している第三者に、サイト閲覧者の情報を渡さないための機能です。

※ ITPはアップルだけではなくWebkitの仕様です
ITPは実はAppleだけのものではありません。WebkitというAppleが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の仕様で作成されており、このWebkitはプレステなどのゲーム機にも利用されています。

そのWebkitに搭載されている機能の一つがITPです。

▼Intelligent Tracking Prevention -Webkit（英語）
webkit.org/blog/7675/intelligent-tracking-prevention/

余談ですがWebkit開発には以前Googleも積極的に参画していましたが、やはり開発方針の違いがあり、離脱はしていませんがGoogleがメインで関わるのはBlink/ChronimumというWebkitから派生したプロジェクトになっています。

ITPの影響を受けるのは？

ITPはもともと「ユーザーを追跡する第三者のCookie」を排除しようとしており、JavaScriptで発行されたCookieを対象にしています。従ってPHPなどでCookieを発行できる（つまり自社サーバーでCookieを生成できる）場合は対象になりません。※サーバー側でCookieをセットする場合はJavaScriptで書き換えられないようHttpOnlyとSecure属性の付与が推奨です。webkit.org/blog/8613/intelligent-tracking-prevention-2-1/

しかし、より根本的には「許可なくユーザーを追跡しようとする第三者を排除」しようとしています。 その目的のためITPは段階的にアップデートされており、その度にCookieや代替手段の利用制限が強化されています。

この進化の過程で、上述のようにGoogle Analyticsも対象になりました（※）。

Googleアナリティクスは我々のサイトの計測を行っていますが、やはり第三者による計測で、かつJavaScriptを使ってCookieを発行しています。つまり思いっきりサイト超えトラッキングをしています。

そのため対象になってしまうのです。

※WebkitのITPは仕様の説明なので、実際のiOSへの実装はバグなども含めて違っていたりします。 細かい検証はこの方がやってくれているので参考になると思います。

▼ITPの変遷・最新の仕様と挙動の違い／対策の必要性と方法 -marketechlabo www.marketechlabo.com/itp-latest

GoogleアナリティクスへのITPの影響

冒頭でもお伝えしましたが下記になります。

  • ITPはiOS（iPhoneなどが採用するOS）の機能で「第三者の追跡サービスである」場合に発動する
  • Google アナリティクスは第三者の追跡サービスと認定されているため、ITPの対象となっている
  • ITPが発動すると7日間、もしくは24時間でGoogleアナリティクスのCookieが消える（流入経路によって違う動き）
  • Cookieが消えるので、GoogleアナリティクスではiPhoneユーザーを追跡できなくなる
  • 従って、Cookieが消えたあと再訪問しても、新規ユーザーのアクセスとして記録される
  • Cookieが消えるので、Googleアナリティクスリマーケティングができない

これ以上の影響が考えられるかどうかはわかりませんが、ITPの根本目的がプライバシー保護である以上、極端な話、第三者のGoogleを頼った場合、まったくデータ収集が行えなくなる可能性も0ではないかも知れません。

ITPへの対策は？

ITPへの対策はCNAMEクローキングなど様々な情報が出ていますが、あまりテクニックに走ると本質を見失います（SEO対策における「キーワードを詰め込め！」などと一緒です※）。

ITPの根本はアップルがプライバシーを重視して「許可なくユーザーを追跡する第三者」を排除しようとしていることであり、第三者はいつかバレます。その観点に立てば、Googleなどの第三者を（少なくとも表向きには）排除して自社内に解析サーバーを立てるしかありません。

この目的で出てきたのが、最近話題になったGoogleタグマネージャーのサーバーサイドタグです。サーバーサイドタグの仕組みをざっくりいうと、自社内に解析サーバーをたてて、そこからデータをGoogleアナリティクスなどに分配するという仕組みです。表向きは第三者が絡まず、裏で第三者にデータを配信するため、ITP対策になります。

しかしおわかりの通りGCP（Googleのレンタルサーバー）を別途借りる必要があるためお金もかかるし、そもそもサーバーエンジニアがいないと構築の難易度が高いです。

もっと手軽にということであれば、我々が開発しているワードプレスのプラグインQA Heatmap Analyticsを活用してもらう手もあります。こちらであればワードプレスにプラグインをいれるだけで、自動的に自社解析サーバーを構築でき、データ収集を行えます。裏でデータを配信するわけでもないので元々のITPポリシーとしても合致します。

最後にもお話しますが「そもそもユーザーを特定するための追跡って必要？」という観点は忘れたくないと思って我々はツールを開発しています。その点で自社のスタンスによって対策（そもそも対策するかどうかも含め）はわかれてくると思います。

※実際、CNAMEクローキングへの対策は現在開発中のWebkitにて行われていますので、そのうちiOSに搭載されるでしょう。

IDFAについて

IDFAは広告向けのiOSデバイス固有ID

IDFA(Identifier For Advertising)はITP（Intelligent Tracking Prevention）とI繋がりで名前に関連を感じなくもないですが、IDとIntelligentなのでまったく別物です。

IDFAはアプリが取得できる端末固有IDです。なんのために存在しているかというと、For Advertisingが示すようにアプリ開発者が広告効果の計測や広告表示を行うために存在しています。

つまり「広告のために端末（個人）を特定する」という現在のアップルのポリシーと対立するような仕組みをアップルが作っていたということになります。

IDFAの取得制限がかかる（ユーザー許可制に）

もうおわかりだと思いますが、このIDFAはAppleの現在のポリシーにあわないため、大幅に制限がかかることになりました。 具体的には「ユーザーが許可を出さないアプリにはIDFAは教えない」という改定です。

そもそもアプリの広告のために「取得OK」を押す人はいないでしょうから、ほとんどのアプリでIDFAはほぼ取得できないと考えた方がいいでしょう。

つまり、各アプリ開発ベンダーはiOS搭載機器に関して、個人を特定することができなくなったのです。

IDFA制限によるGoogle Analyticsやアクセス解析への影響は？

そもそもWebサイトのみの分析を行うのであれば、アプリも開発していないでしょうしIDFAを取得することはなかったと思いますので、影響はありません。もちろんGoogle アナリティクスにも影響はありません。

つまりIDFAの影響はアプリを開発していたベンダーに限られます。 これは自社アプリだけでなく、アプリ分析も含めて個人のターゲティング精度をあげていた広告配信業者やアクセス解析業者も対象になります。

想像の通り、Google、Facebook、Twitter社などはアプリを出していますし、そのアプリも計測して個人を特定していますので、もろに影響をうけます。つまり彼らのアプリ広告の配信精度が悪くなったり、アプリインストールのコンバージョン計測数に欠損が生じる可能性が極めて高いです。

広告についての影響は、アナグラムさんのブログが参考になります。
anagrams.jp/blog/impact-of-ios-14-on-operational-ads/

最後に。そもそも追跡ってどこまで必要？

以上、ITPとIDFAに関して主にアクセス解析の観点で書いてきました。

個人的にはICT業界って毎回3文字の新しい言葉が出てくるので辟易する部分もありますが、仕事なので覚えないと仕方が無いですね（苦笑）

さて、この問題は昨今の個人情報保護の高まりに関連しているのは間違いありません（もっと大きな流れでいうとデジタルと人間というテーマだと思いますが、それは本題とはそれるのでやめておきます）。

Appleはこの点においてプライバシー重視の立場を明確にしてきて、それはスティーブジョブズが生前言っていた個人のためのコンピューターと被る気がします。

私個人としては、ロジックにより個人最適化された情報（広告含む）は便利な面もあるので、立場的には中道なんですけど、マーケティング目的のアクセス解析という観点においてはちょっとアップルに近く「個人の追跡って必要？」と思う部分があります。

個人を特定しなくても、その正確性がたとえファジーでも、「だいたいこんな感じ」「ユーザーはたぶんこういう気持ち」ということが把握できれば、改善できる余地があります。全体像がわかればよいというか。

「個別最適化」「ユーザー志向」「全体傾向の把握」の３つをごちゃごちゃにしない

個別最適化

ユーザー個別の最適化は、営業さんみたいなもので「あなたにはこの車がオヌヌメ！」というヤツですから、これはこれで意義のあることだと思います。特に広告出稿では絶大な威力を発揮しますので、巨人であるGoogle広告やFacebook広告の精度向上にとって極めて重要なポイントの一つです。

しかし、これをコンピューターに自動でやらせると気持ち悪いし、ましてやインターネット全体を把握する第三者ツールを使ってそういうのはやめましょうよ、というのがアップルの立場ですね。

こうなると、まぁ広告系の費用対効果が悪くなる可能性はあるのですが、そもそもこのあたりの巨人達の戦いは我々のコントロール外です。エレンになにを言っても聞いてくれないでしょう。

立場をかえてアクセス解析の観点でいえば、自社で保有するデータだけでやればいいじゃない、という解決策はあります。「Aさんの誕生日が近いからお手紙を書こう」みたいな。まさに従来の営業ですね。これはアップルもOKですし、ユーザーも同意して渡した情報だから気持ち悪くない可能性が高いです。

ユーザー志向

一方ユーザー志向というのは、自社サイトのUI/UX関連の改善や、そもそもの商品・サービスの改善に繋げるためにユーザー目線を重視するという姿勢で、ユーザーの個別性は全く不要です。

この点において考えると、そもそもITPやIDFA制限は関係ないといえます。Google アナリティクスへの影響といっても新規ユーザーが増えるくらいでユーザー志向とは何ら関係ないですし、そんな細かいデータにこだわるよりユーザーインタビューをやった方が立派な情報量をもつ分析になります。

全体傾向の把握

全体傾向の把握は、自分達の思い込みを排除し、事実を中心とした判断を行うために必要ですが、その観点に立てばITPやIDFA利用制限は関係があります。

とはいえGoogleアナリティクスを中心としたサイト解析を考えるなら、たいしたことはありません。事実として「ITPによってiPhoneに関しての新規ユーザーはあてにならない」ということを知っていれば少なくとも大きく判断を間違えることはありません。

まぁ仮に知らずに間違えていたとしてもたぶん大きな判断ミスというのはないだろうと思います。

目的は「サイトをユーザーに気に入って貰うこと」であり、手がかりを得る手段の一つがアクセス解析にすぎない

もちろん巨額の広告費を使ってアプリ配信をしていたり大企業だとそうも言っていられないと思いますが、多くの一般中小企業においては、正確性にこだわるより「ユーザーに気に入って貰う」というファジーな考えで運用した方が、結果的に、ユーザー志向度があがってサイトが跳ねるかも知れません。

我々が開発しているQA Heatmap Analyticsでも個人を特定するような情報は保存しないようにしています。要望はあると思うので、社内データ活用におけるユーザー個別最適化には使えるようにしたいとは思っていますが。

より正確に個人を把握することは経済的な成功確率をあげるかも知れませんが、やはりデジタルが意図せぬ悪意のもと運用されると、個人のコントロールに近いところまでいってしまうと思うのです。

生存に関わらない範囲のデジタル活用については、もう少しファジーであっても、パズルじゃないですけど、むしろ隠されている部分がちらほらあった時に行う創意工夫の方が、実は楽しいのではないかな、と思っています。

間違いがあったらTwitterまで頂けると嬉しいです。

今回は主に参考サイトとSafariブラウザの機能を用いた検証をもとに記事を書いていきました。もし間違いがあったらTwitterまで頂けると嬉しいです。
twitter.com/koji_maruyama

参考サイト

【日本語】
a2iの大内さんのコラム
a2i.jp/column/post-25431/
ITPの変遷・最新の仕様と挙動の違い／対策の必要性と方法 -marketechlabo
www.marketechlabo.com/itp-latest
アナグラムさんのブログ
anagrams.jp/blog/impact-of-ios-14-on-operational-ads/

【英語】
ITPに関するWebkit公式サイトの情報など
webkit.org/blog/7675/intelligent-tracking-prevention/
www.digiban.co.jp/blog/marketing/itp
ITPに関するテスト結果の共有
www.simoahava.com/analytics/itp-2-1-and-web-analytics/ www.simoahava.com/privacy/intelligent-tracking-prevention-ios-14-ipados-14-safari-14/
各ブラウザのCookieやReferrerなどに対する取組がわかるサイト
www.cookiestatus.com/
Apple公式開発ドキュメント developer.apple.com/documentation/adsupport/asidentifiermanager/1614151-advertisingidentifier

]]> SEOを考慮したGoogle推奨の画像の遅延読み込み処理まとめ https://webtan-tsushin.com/seo-lazy-image-load Sun, 21 Jul 2019 12:18:13 +0000 https://webtan-tsushin.com/?p=20537

Googleはなぜページ表示速度を重視するのか？

そもそもなぜGoogleが、特にモバイルで画像の遅延読み込みを推奨しているかというと、世界中の回線環境の悪いユーザーを意識しているという理由が大きいと思われます。

そのような回線環境が悪いユーザーは、大きな画像をダウンロードすると、全然ページが表示されず、イライラします。ですから、グローバル展開しているGoogleとしてはモバイル向けの表示速度を無視できません。

実際GoogleのPageSpeed Insightsのアドバイスでも、特にモバイルで「画像の遅延読み込み」を推奨されます。

画像の遅延読み込みという対策

上記のような回線環境が悪いユーザーへの対策として。

まずファイルサイズの小さいダミー画像（下記のような画像）をダウンロードさせます。そうすれば、すぐにページが表示されるのでユーザーがイライラしなくてすみます。

しかしユーザーはダミー画像を見たいわけではないので、ユーザーがスクロールして該当の画像を見た時に、JavaScriptを用いて本当の画像を表示させる。

つまり画像を遅延読み込みさせることで、表示速度UPとユーザーの満足度UPを狙おうというのが「画像の遅延読み込み処理」になります。

画像の遅延読み込み処理を実現する方法

画像の遅延読み込みを実現するには、2つの対応が必要です。

  1. サイズの小さいダミー画像を用意する
  2. JavaScriptプログラムを用意する

1に関しては、サイズが小さければどんな画像でもよいです。

主に悩むのは2の部分でしょう。 まず、JavaScriptプログラムの用意の仕方は、だいたい以下のパターンにわかれるかと思います。

  • 自分で簡単なJavaScriptプログラムを書く
  • JSの画像遅延ライブラリを探して自分で書く
  • プログラムが組めないので、ネットでプログラムを探してコピペする
  • プログラムが組めないので、WordPressのPluginを使う

今回は、主に自分でプログラムを組む人に向けて情報を記載します。 WordPressも対象にして書きます。

プログラムが組めない人は、WordPressを使っているならPluginを使うのが最も良いと思います。

どのPluginがいいの？ということで悩まれると思いますが、「最新にメンテナンスされていそうなもの」がオススメです。なぜかというと、後述するのですが、Googleの推奨方式が時々かわるからです。

最新のおすすめプラグインはこちら
→Web運用本の著者にも聞いた！WordPressサイトで絶対導入すべきおすすめプラグイン3選と注意するポイント【2021年版】

ライブラリは使わない方がよい！？実装方法の比較

JSのプログラムを組もうという人であれば、まず自分で1から書くより、ライブラリを探す人が多いと思います。

しかし、少しお待ちください。画像の遅延読み込みで実現したいのは下記ですよね。

  • 一番Googleに強い
  • ユーザーに対して一番早く軽く画像を表示できる
  • 実装（プログラム）が簡単

これらを考えると、ライブラリが唯一の選択肢ではありません。 以下、順番に。

Googleが推奨する画像遅延の手法はどれ？

Googleが推奨する方法は、ちゃんと公式ページに出ています。 こちらです。

イメージと動画の遅延読み込み -Developers Google

上記を読んでもらうとわかるのですが、GoogleはモダンブラウザでサポートされているIntersection Observerを使うことを推奨しています。 Intersection Observerは、まさに「要素が表示されたら」といった状態をコントロールするためのブラウザAPIで、画像の遅延読み込みに適しています。

普通に考えると、「ユーザーがスクロールしたら」ということで「スクロールイベント」を使ってしまいそうなのですが、GoogleはIntersection Observerの使用を推奨しています。

まぁGoogleのクローラーはユーザーではないので、スクロールして画像をちゃんと取得するというのはちょっと辛いですよね。だからこそ最近、公式サイトでGoogleクローラーはIntersection Observerを読み込めるようになった、とアナウンスするわけです。
※今後変わる可能性はありますので、上記リンク先は一度みておいてください。

JSの画像遅延ライブラリの比較

Googleの推奨を考慮するならば、ほとんどのJSのライブラリは、スクロールイベントを監視しているため、危険です。 有名なLazyLoadでもGoogleが認識できないことがあると指摘されています。私もスクロールイベントを使って少し影響があったサイトを知っています。

Lazy LoadはSEOに不向き？ Lazy Loadで表示する画像をGooglebotは認識できないことがある -海外SEO情報ブログ

ある程度メンテナンスが入るライブラリであれば、そのうちIntersection Observerを採用するかも知れませんが、やはり未来は誰にもわかりません。

従って、私の推奨は「Intersection Observerを採用し、自分でJavaScriptを組む」ということです。

そもそも、とても簡単なんです。

自分で画像遅延を実装する方法

画像の遅延表示はなんら難しい処理ではありません。下記の順番で処理するだけです。

  1. 全てのimgタグを変更する。srcにダミー画像を指定し、data-src属性などに本当の画像を指定する。また処理対象にするために任意のclass名をつける
  2. JavaScriptで、各imgタグを監視する（ここにIntersection Observerを使う）
  3. 2.で表示されたら、data-src属性をsrc属性と入れ替えて本当の画像を表示させる

Gogole公式サイトにもコードサンプルあるのですが、ちょっとエラー処理が緩いので、実働するコードのサンプルを貼っておきます。

1の対応

imgタグを下記のようにします。 dummy.jpgがダミー画像。realimage.jpgが本当に表示したい画像です。

<img src="dummy.jpg" data-src="/img/realimage.jpg" class="lazy">

2と3の対応をするJavaScriptをいれる

下記のスクリプトを<head>の中に書くだけです。

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          if (typeof lazyImage.dataset.srcset === "undefined") {
          }else{
              lazyImage.srcset = lazyImage.dataset.srcset;
          }
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});
</script>

問題点とその対処

画像の遅延処理自体は簡単なのですが、2つの問題点があります。

IntersectionObserverのサポート外ブラウザの対応と、WordPressの問題です。

IntersectionObserverサポート外のブラウザ対応

IntersectionObserverは比較的新しいブラウザでしかサポートされていないAPIです。従って、古いブラウザのために対策を考えなくてはいけません。

※先ほどのコードにもifのelse条件に”Possibly fall back to a more compatible method here”と記載があります。

一番簡単なのは「polyfill（ポリフィル）」を活用することです。

polyfill（ポリフィル）とは？

polyfillとは、「サポート対象外のブラウザ用に、自分で同等機能を供給する方法」のことです。 polyfillとは、海外にある「壁の隙間を埋めるペースト」の商品名（Polyfillaというらしい）から来た造語だそうで。

つまりIntersectionObserverのサポート対象外のブラウザでも、IntersectionObserverが使えるようなライブラリを、有志が作ってくれているのですね。 「polyfillを活用しよう！」という場合、そのライブラリを活用しよう、という意味になります。

ライブラリは下記からダウンロードできます。 github.com/w3c/IntersectionObserver/tree/master/polyfill

上記のpolyfillを活用する場合、冒頭に読み込みを一行いれて下記のようになります。

メリットはもちろん、そのライブラリを読み込めば、サポート対象外のブラウザであっても、普通にIntersectionObserverを使えるということです。

ポリフィルのライブラリを最初に読み込んだコードを下記に示します。パスはあたなの環境にあわせて書き換えてください。

<script src="/js/intersection-observer.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          if (typeof lazyImage.dataset.srcset === "undefined") {
          }else{
              lazyImage.srcset = lazyImage.dataset.srcset;
          }
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});
</script>

WordPressの問題

WordPressで画像遅延読み込みを実装しようとすると一つ問題が生じます。 それはimgタグが自動で吐き出されてしまうので簡単には置き換えられないという問題です。

  • WordPressでは画像挿入時に勝手にimgタグが作成されてしまう。
  • プラグインなどを入れると、それが勝手にimgタグを書き換える時がある

従って、上記問題を解決する必要があります。

※プログラムを避けたい人は、先ほどもお伝えしましたが「メンテナンスされている画像遅延系のプラグイン」を試してみるのがオススメです。

WrodPressの画像遅延の実装方法

今までもお伝えしましたが、画像の遅延読み込みをするためには、imgタグを書き換える必要があります。

WordPressでは下記3つを実行するとよいです

  • header.phpなどに、上記で示したJavaScriptプログラムを貼り付ける
  • テンプレートでimgを読み込んでいる箇所を変更する（これは簡単）
  • functions.phpにimgタグの変更プログラムを登録しておく

各imgタグは下記のように変更します。

<img src="dummy.jpg" data-src="/img/realimage.jpg" class="lazy">

dummy.jpgがダミー画像。realimage.jpgが本当に表示したい画像です。

functions.php内preg_replace（正規表現）でimgタグを置換する

WordPressが自動的に書き出す<img>タグを置換するには、functions.php内で処理を登録します。下記3つの手順で置換を順番に行えば、求めているimgタグに置換できます。

  • classの中にはlazyを必ず入れる（遅延読み込み対象にする目印）
  • classを持っていないimgタグにはclass=”lazy”を付与する
  • srcとdata-src、srcsetとdata-srcsetを入れ替えてセットし、src、srcsetにはダミー画像を指定する

functions.phpに登録する内容

functions.phpに記述すると、contentsの中身の置換処理などを行えます。 以下にfunction.phpに掲載するコードサンプルを出しますので、ぜひ参考にしてみてください。

※dummy.jpgはご自身で用意したものに書き換えてください。

function customize_img_lazy($content) {
  //classにlazyを付与
  $re_content = preg_replace('/(<img.*class=")/', '$1lazy ', $content);

  //classがないimgタグにもclass="lazy"を付与
  $re_content = preg_replace('/(<img*(?!.*class)[^>]*)/', '$1 class="lazy"', $re_content);

  //srcを入れ替え
  $re_content = preg_replace('/(<img[^>]*)\s+src=/', '$1 src="/img/dummy.jpg" data-src=', $re_content);

  //srcsetを入れ替え
  $re_content = str_replace('srcset','srcset="/img/dummy.jpg" data-srcset',$re_content);

  //置換したcontentsを返す
  return $re_content;
}
add_filter('the_content','customize_img_lazy');

上記では、正規表現を使っています。 一般的にうまくいくように記述していますが、場合によっては、あなたの環境ではうまく動かないかも知れません。

事前に正規表現チェックサイトなどを使って、置換がうまくいくかチェックされると良いと思います。

まとめ

本日は、画像の遅延読み込みについてご説明しました。ライブラリを使わなくても、自分で簡単に実装できますし、そちらの方がGoogleから評価もされやすくなりますので、ぜひチャレンジしてみてください。

]]> WPのカスタム分類（タクソノミー）とは？活用法とメリットとデメリットまとめ https://webtan-tsushin.com/wp-custom-taxonomies Sun, 07 Jul 2019 08:47:30 +0000 https://webtan-tsushin.com/?p=20431

WordPressには便利な2つのカスタム機能があります。 カスタム投稿タイプと、カスタムタクソノミー（分類）です。 一緒に使うことも多く、同時に紹介されることが多いのですが、この2つ、機能としては全く別物です。

カスタム投稿タイプは、記事を「投稿」する時に使うもの。つまり投稿機能を拡張（カスタム）するもの。 一方、カスタムタクソノミー（分類）は、記事を分類する時に使うもの。つまりカテゴリやタグ機能を拡張するものです。タクソノミーとは「分類」という意味の英語です。

残念ながら後者のカスタムタクソノミーについてはあまり情報が多くありません。 そこで、今回の記事ではこのカスタムタクソノミー機能を深掘りしたいと思います。

【目次】

  1. なぜカスタムタクソノミーを使うのか？
  2. カスタムタクソノミーの使い方
  3. カスタムタクソノミーを使うメリットとデメリット
  4. カテゴリー、タグ、カスタムタクソノミー、どれを使うべきか？その判断基準
  5. カスタムタクソノミーのテンプレート
  6. カスタム分類（タクソノミー）のURL
  7. SEO対策として、カテゴリ構造とパーマリンク（URL）はどうするべきか？
  8. カスタムタクソノミーの一覧の取得方法（関数）
  9. カスタムタクソノミーを作るためのプラグイン
  10. まとめ
  11. 【基礎知識】カテゴリとタグの違いとは？

 

※QA Heatmap Analyticsは弊社で作った無料で簡単につかえるのに高機能な行動分析ツールです

なぜカスタムタクソノミーを使うのか？

一言でいえば、カテゴリとタグだけしか使えないと、ごちゃごちゃする情報をカスタムタクソノミーを使えばビシッと整理できるからです。

たとえば、ゴルフのノウハウを発信するサイトを運用しているとします。 最初はカテゴリとして「コラム」とか「特集」なんてカテゴリを作ります。こんな感じ。

【タイトル】ゴルフのボールはなぜ飛ぶのか？

【カテゴリ】

  • ゴルフコラム

ところが、しばらく運用していると以下のようになってきます。

【タイトル】接待ゴルフは嫌だー！最初のドライバーショットは手を抜くべき？

【カテゴリ】

  • レッスン
  • ゴルフコラム
  • 初心者
  • ゴルフクラブ→ドライバー

【タグ】

  • マナー
  • 接待
  • 初心者
  • …

だんだんと、タグを使うべきかカテゴリを使うべきか混乱してきますし、分類も増えます。 このように長年ブログを運用していくと、「なんかうまくカテゴリを整理できていないな」「タグが多くて選びづらいな」と思ったことがあるはずです。

まさにこのような問題に対処するために、カスタムタクソノミーが存在します。

カスタムタクソノミーの使い方

カスタムタクソノミーは、前出したように、情報の分類を自由に作っていける機能です。 分類をカスタムできるから、カスタム分類（タクソノミー）と言われます。

階層化（hierarchical）してカテゴリのようにも使えますし、階層化せずタグのような分類も作ることができます。

※カテゴリとタグの違いがわからない人はこちらもご覧ください。

カスタムタクソノミーを使った場合の投稿画面の変化

たとえば先ほどの例で考えます。

【カテゴリ】

  • レッスン
  • ゴルフコラム
  • 初心者
  • ゴルフクラブ→ドライバー

上記では、どれがメインカテゴリか分かりづらい上に、サブカテゴリも増えたら記事の投稿画面もごちゃごちゃしますよね。

ところがカスタム分類で作ると、投稿画面で選ぶのがとてもわかりやすく選べるようになります。 先に画面を見て頂いた方が早いので、お見せします。

 

普通は「Categories」しか表示されていないですが、その下に「道具」「性別」などの分類が表示され、それぞれ選べるようになっています。

  • 道具
  • 性別
  • レベル
  • 年代
  • ゴルフウェア

カスタム分類を使うと、このような分類を無限に作っていけるのです。 だいぶ情報が整理されて、投稿がやさしくなると思いませんか？

カスタムタクソノミーを使うメリットとデメリット

上記で見て頂いた投稿画面がやさしくなる以外にも、カスタムタクソノミーには様々なメリットがあります。

メリット

  • カテゴリーの一覧で表示されない隠れた分類をシステム的にもつことができる
  • それぞれ独自のテンプレートをあてやすくなる
  • 検索条件を柔軟にプログラムしやすくなる
  • 投稿画面がやさしくなる
  • ユーザーにわかりやすいUIを提供できる

一言でいうと「情報をきれいに分類し、個別に細かくプログラムで管理できる」ことが主なメリットです。

一方、もちろんデメリットもあります。

デメリット

  • カテゴリ系の一覧記事にはそのままでは表示されない（つまりカテゴリ系の関数{get_the_categoryなど}ではデータが取得できない）
  • 汎用ではarchive.phpテンプレートが適用されるが、category系とは違う関数を追加で組み込まなくてはいけない
  • 上記の流れからもわかるように、基本システムがわかる人でないと使いづらい

デメリットは、メリットの裏返しで、「個別管理する手間とプログラム量が増える」ということです。

カテゴリー、タグ、カスタムタクソノミー、どれを使うべきか？その判断基準

結論からいうと下記の判断基準がよいと思います。

【WordPressのシステムにあまり詳しくない人】

  • カスタム分類（タクソノミー）は基本的に使わない
  • 基本的に、タグも使わない。全部カテゴリで作る方向で考える
  • タグを使うのは、上記カテゴリを横断する必要のある分類のみで使う

カテゴリでも工夫すればいろいろ対応はできますので、基本はカテゴリを使います。 タグは階層化ができない上に、増えてくるとカオスになるので、なるべく増やさず「カテゴリを横断する必要がある場合」にうまく使うようにします。

ただサブカテゴリも含めてカテゴリが100以上できそうな場合は、やはりカスタム分類があった方が綺麗にまとまりますので、その場合はシステムに強い人と一緒に作る方がいいかも知れません。

【WordPressの関数が（なんとなくでも）わかる人】

  • ユーザが読みたくなるような記事の分類はカテゴリを使う
  • 上記のカテゴリを横断する分類やシステム的な分類は、カスタム分類を使う
  • タグも情報が混沌としていくので基本的には使わない。カスタム分類を使う

カテゴリはマーケティング目的、カスタム分類はシステム目的で使う

カテゴリはユーザーが読みたくなるような記事の分類に使います。近いイメージでいうと「サイドメニューに出したいメニュー（サブカテゴリも含む）」です。例えばゴルフで言うと「レッスン」や「マナー」、「ゴルフ場レビュー」といった分類が該当します。

上記のようにカテゴリを使うと、以下のメリットを享受できます。

  • いつも通りカテゴリを使うので初期構築が簡単になる
  • パーマリンクの%category%にもうまく対応できる
  • カテゴリを使う前提のプラグインにも対応できる

多くのウェブサイトは「記事を読んでもらう」ことが主目的ですので、カテゴリはユーザー目線（マーケティング目的）で作るというのがポイントです。

そこまでで基礎を構築した上でカスタム分類を追加すれば、将来の拡張にも柔軟に対応できます。

つまりスモールスタートをする人には特に向いている考え方です。余談ですが、私はこの考え方が一番好きです。

一方デメリットとして、プログラムを組むときには「この時はカテゴリ系の関数」「この時はカスタム分類の関数」と意識的に切り替えねばならず、統一したコードにならないので、プログラマが混乱しやすいというのがあります。

【WordPressを細かくカスタマイズしたい人】

  • カテゴリやタグは使わず、最初から全てカスタムタクソノミーを使う
  • つまり、カテゴリやタグ系の関数は使わず、最初から全てのテンプレートを0から作る

すべてカスタム分類で作ると、同じルールと同じカスタム分類系の関数を適用できるので、プログラムに統一感が出るのが一番のメリットです。

デメリットとしては、最初の構築に手間がかかるのと、%category%をパーマリンクで使えなくなること。また投稿の画面もカテゴリを使用しなくなるので、一般の人にはわかりづらい投稿画面になります。

つまり標準と違うことをするので、その分、運用で考えなければいけないことと、使えないプラグインが増えたり、ユーザー教育の手間が増えます。

判断の基準になるもの

標準で用意されているカテゴリーやタグと、カスタム分類の主な違いは下記になります。

  カテゴリ タグ カスタム分類
よく使われるカテゴリ系の関数が使えるか ○ ○ ×
ネット上の情報の多さ ○ △ ×
適用されるテンプレート category.php  tag.php taxonomy.php 
パーマリンク設定のカスタマイズ %category%で対応  ※通常使わない 標準では非対応 
対応しているプラグイン  多い 多い 少ない

上記の違いを考慮すると、なるべくカテゴリやタグを基本路線として使った方が、ネット上の情報も多くサイト構築が容易なため、上述の判断になっています。

カスタムタクソノミーのテンプレート

カスタム分類のテンプレート

カスタムタクソノミーでは、下記の順番でテンプレートがあたります。 {taxonomy}は分類名のslugで、{term}はターム名のslugです。 例えば性別(sex)というカスタム分類を作った場合は、{taxonomy}がsexで、{term}はwomanになります。

  1. taxonomy-{taxonomy}-{term}.php
  2. taxonomy-{taxonomy}.php
  3. taxonomy.php
  4. archive.php
  5. index.php

▼参考
タクソノミーテンプレート -WordPressCodex日本語版

カスタム分類（タクソノミー）のURL

カスタム分類のURL（パーマリンク）はどうなるか？

カスタムタクソノミーのアーカイブ（記事一覧）を出力するURLは、基本的に下記のルールで適用されます。

example.com/{taxonomy}/{term}/

注意点としては、階層化されていたとしてもそれは反映されません。

× example.com/area/tokyo/shibuya/
◯ example.com/area/shibuya/

記事のURLはどうなる？

記事自体のURLは、カスタムタクソノミーに属していてもいなくても関係なく、WordPress標準のパーマリンクの設定が有効になります。

それら標準のパーマリンクを変更したい場合は大抵プラグインが出ていますが、私は基本的にプラグインはなるべく使わない方がよいと思っています。 なぜなら、脆弱性のもとになったり、WordPressのバージョンアップで動かなくなったり、動きが重くなったりするからです。

そこで、そもそもパーマリンクを変えるべきなのか？ということを下記項で考えてみます。

SEO対策として、カテゴリ構造とパーマリンク（URL）はどうするべきか？

カスタム分類は、前出の通りパーマリンク設定の対象外です。問題はカテゴリです。

カテゴリを作る場合、パーマリンクに/%category%/%post%/とカテゴリを入れるべきかどうかは、悩む人も多いと思います。 なぜ悩むかというと、まずパーマリンク（URL）のディレクトリがSEOに効くと言われているからですね。

しかしそれは昔の話。たしかに200以上あるといわれているSEOファクターの一つでありますが、その効果はほとんどありません。そんなことより今のGoogleに対しては、ユーザーの好む内容の濃いページを作る方がはるかに効果的です。

複数カテゴリを設定した時、パーマリンクの制御は難しい

WordPressの標準機能では、複数カテゴリを指定した場合、記事のパーマリンクで使われている%category%には、「一番初期にできたカテゴリ（IDが若いカテゴリ）」が選択されます。標準ではカスタマイズ不可です。

どうしてもカスタマイズしたい場合、function.phpでやろうとするとかなり複雑になるので（※）、プラグインを使うのがオススメですが、たくさんのプラグインをいれると問題が発生します。

一番のオススメは、後述しますがYoast SEOプラグインを使うことです。

※ WordPressのパーマリンク処理は、基本的にDBのwp_optionsテーブルに入っている値をみながら行われます。それらを書き換えるには仕組みを理解しなくてはなりません。

■ WordPressのパーマリンク処理の参考になる記事

▼WordPress の表示ロジックを理解する
www.prime-strategy.co.jp/2499/

▼wordpressで謎の転送処理されているのを突き止める
aulta.co.jp/2017/08/15/3805.html

▼WordPressに独自リライトルールと独自URLパラメータの追加（wprewrite/wp_query） rensrv.com/wp/apps-and-sitemap/prepare-app/add-rewrite-rules/

ディレクトリのユーザビリティについて

SEO以外のパーマリンクのメリットを考えると、ユーザーにとってわかりやすいという利点はあります。 例えば、下記の例では、ディレクトリ構造をみれば「タワーレコード渋谷店」がどこにあるか、よりわかりやすくなります。

例）
○　http://example.com/area/tokyo/shibuya/towerrecord-shibuya
△　http://example.com/shibuya/towerrecord-shibuya

しかし、今どきのスマホで見るユーザーはURLを見ないので、あまり意味をなさないです。かつ上記のような階層化されたURLにこだわるためには、プラグインなども入れなければいけなく、それでサイトの表示速度が遅くなったらトータルではマイナスかも知れません。

総じてユーザビリティのためだけにディレクトリ構成にこだわる必要性は低いです。

パンくずナビ（breadcrumb）の重要性

GoogleはURLのディレクトリ構成よりも、パンくずのリンク構造の方を重視します。つまり、ディレクトリは割とどうでもよく、それよりパンくずをしっかり考えた方がメリットがあるのですね。

ですからYoast SEOなどのプラグインは、複数カテゴリを選んだ場合に、メインカテゴリを選べるようになっており、パンくずもうまく制御できるようになっています。

結論：記事のパーマリンクにカテゴリを含めるか否か？

上記を踏まえ、私は、下記の判断で良いと思っています。

  1. 基本的に記事のパーマリンク（URL）にはカテゴリを含めない
  2. もしカテゴリを含めるならば、Yoast SEOプラグインをいれて、メインカテゴリを設定して運用する
  3. そもそもパーマリンクより、パンくずナビを優先する

記事のパーマリンクは標準の%postname%がよいと思います。カテゴリを含める必要はありません。

一方で、やはり含めたいという判断をされる場合。

SEOだけのために多くのプラグインを入れると脆弱性のもとになるので、あまりオススメできません。メジャーであるYoast SEOプラグインさえ入れれば、カテゴリを意識したパーマリンクとパンくずを設定してくれますので（パンくずはYoastSEOの関数を使う必要があります）安心です。

なお、Yoast SEOプラグインは、上記にかかわらず、様々なSEO補助機能があるので自分でプログラムをガリガリ書くのがメンドクサイ人にはお勧めです。

カスタムタクソノミーの一覧の取得方法（関数）

まず、関数をご紹介する前に、そもそも、データ上は、カテゴリもタグもカスタムタ分類（クソノミー）もほぼ一緒の扱い、つまり同じwp_term関連のTableに保存されています。 従って、カスタムタクソノミーは、それらTableのデータを扱う、よりWPのネイティブに近い関数を使って制御します。

関数は二種類にわかれる

関数はタクソノミー(taxonomy)に関するものと、ターム(term)に関する2種類にわかれます。

例えば、「女子向けゴルフおすすめファッション！」という記事があり、それが「性別」というタクソノミー（分類）の「女性」というタームに所属しているとして説明します。

タクソノミーに関する関数は少ない。

タクソノミー（分類）に関する関数は少な目です。その理由は、そもそも利用機会が少ないからだと思われます。

例えば上記の記事中で「性別」という言葉を使う機会など、めったにないですよね。だいたいタクソノミー名が必要な場合とは、サイドメニューに表示するか、何かバックグラウンドで処理をする時に必要かぐらいです。

以下に代表的な関数をリストアップします。

▼投稿オブジェクトからタクソノミーオブジェクトを取得
get_object_taxonomies( $object, $output );

▼検索条件を指定してタクソノミーオブジェクトを取得
get_taxonomies( $args, $output, $operator ) 

おわかりのように、タクソノミーに関する関数は、get_object_taxonomiesなどのようにtaxonomyという言葉が入っています。他にもいくつかありますので、詳しくは上記リンクを押してみてください。

タームに関する関数は多い

タクソノミーと違い、タームに関する関数は結構多いです。その理由は「女性」というタームに所属している記事一覧を表示したかったり、記事が所属しているタームを表示したいというニーズが結構多いからだと思われます。

以下に代表的な関数をリストアップします。

▼idからtermオブジェクトを取得
get_term( $term, $taxonomy, $output, $filter )

▼slug名からtermオブジェクトを取得
get_term_by( $field, $value, $taxonomy, $output, $filter )

▼ある任意の投稿に含まれるtermオブジェクトを取得
get_the_terms( $id, $taxonomy） 

その他にもいろいろあります。詳しくは上記のリンク先をご覧ください。

タクソノミー一覧取得で使える関数と、投稿(single.php)で使える関数

カテゴリなどでもそうですが、タクソノミーでも「タクソノミーテンプレート(taxonomy.php）で使えるもの」と「投稿（single.php）で使えるもの」の二種類にわかれます。

投稿(single.php）だと投稿IDが確定しているので、その投稿が属するタクソノミーをシンプルに取得できるような関数が用意されています。こちらもどこかで分類して提示したいと思います。

カスタムタクソノミーを作るためのプラグイン

カスタムタクソノミーを作りたい場合、function.phpに細かい定義を直接書き込むこともできます。 しかし定義項目が意外と多いですし、URLなども制御したい場合はいちいち調べながら進めなければいけないため、設定しやすいプラグインを使ってしまうのも手です。 

メジャーで私も使っているのはCustom Post Type UIです。これを使っていて困ったことはないです。 使い方はインターネットで検索するとたくさん出てきますし、ヘルプも充実してるのでここでは割愛します。

最新のおすすめプラグインはこちら
→Web運用本の著者にも聞いた！WordPressサイトで絶対導入すべきおすすめプラグイン3選と注意するポイント【2021年版】

まとめ

この記事では、カスタム分類（タクソノミー）について、情報をまとめました。

カスタム分類を使える（WordPressの関数がわかる）人であれば、結論として、

カテゴリはマーケティング目線の分類で使って、他はカスタムタクソノミーで作る。そしてYoastSEOプラグインを入れる

ということがオススメです。

カスタムタクソノミーを使うと、できる幅が拡がるので、ぜひチャレンジしてみてください。

【基礎知識】カテゴリとタグの違いとは？

付録的な情報ですが、カテゴリとタグの違いがわからない人は、カスタムタクソノミーを使う前に基本をおさえておきましょう。

実は、カテゴリとタグは、記事を分類するという意味では、一緒の機能です。でも2つ存在しています。なぜでしょうか？

両方使ってみると感覚的にわかると思いますが、タグは、分類するだけ。一方でカテゴリは「サブカテゴリ」を作ることができます。つまり階層化できるのです。

階層化の例は、百科事典を思い出してみるとわかりやすいでしょう。哺乳類→ネコ科→ライオンのように階層化して整理してあげるとわかりやすくなります。 一方で、タグは階層化できない分類に適しています。先ほどの例でいえば「ひげ」とか「かわいい」といったタグが考えられます。

実際に投稿画面でも、カテゴリ設定画面は階層化がわかりやすく表示されます。一方でタグは多くの中から選ぶような画面になっています。

このように分類する手法は「階層化するか否か」で2つにわかれます。

なお階層化のことを英語でhierarchicalと言います。カスタム分類の設定では、分類を階層化するか否かを選ぶことができますが、その時によくこの「hierarchical」という言葉が出てきますので、覚えておきましょう。

]]> 怠け癖がなおるかも？自分自身のエネルギーの使い方 https://webtan-tsushin.com/stock_201906_energy Tue, 11 Jun 2019 04:10:15 +0000 https://webtan-tsushin.com/?p=20383

以前、馬車馬のように働かないと成功できないのか、考えてみました。

▼馬車馬のようにハードに働かないと成功できないのか？
webtan-tsushin.com/basyauma-hardwork

結論としては「考えて計画性をもって働けば、なんとかなりそう」というものです。

でも「自分は計画通りにちゃんと働けるか」というのは別問題ですね。

「一年の計は元旦にあり」とは有名な言葉ですが、残念ながら「三日坊主」という言葉はそれ以上に有名です。
人間誰しも、自分を計画通りに動かすのは大変難しい。

私自身、あのイチローが「本当は球場なんかに行きたくない」とインタビューか何かで語っていたのには、大変勇気をもらった記憶があります。

自分のエネルギーの使い方を考えてみる

計画通りに働けるかどうか、このような問題は「意思の強さ」として語られます。
意思が強い人は、苦しい時でも自分を律しながら、大義をなしていきます。
逆に、意思が弱く自分を律せられない人は、周りからも尊敬されづらいし、何より自分自身で残念に思いますよね。

しかし、私は最近、森羅万象とエネルギーを結びつけて考えるようになり、「怠け癖は、エネルギーの問題として考えられるのではないか」と考えています。

怠けてしまうのは意思が弱いのではなく、エネルギーの量と使い方の問題なのではないか、ということです。

意思の問題として考える最大のデメリットは、自己肯定感が減るということです。
「自分は意思が弱い」と考え続けていたら、どんどん元気がなくなっちゃいますよね。
そうすると、そもそも継続する元気もなくなってしまう。

これって本末転倒なのですが、止めることは難しい。

ところが、継続と意思とは無関係で、ただエネルギーの効率的な使い方を知らないせいだとしたら、どうでしょう？

私たちの脳や身体の仕組み知ることで、何か捉え方が変わる可能性があるかもしれません。
実際、私はそのように捉えることで、生産性と満足度が向上しました。

脳についてわかっていること

継続できない（怠け癖）のは、ただ自分のエネルギーの効率的な使い方を知らないせいかもしれません。
意思の問題だけではない、ということですね。

最先端の脳科学からわかってきていることをお伝えします。
列挙してみますね。

  • 脳は一日の全人体エネルギーの20%も使っている。
  • 脳は何もしないでもアイドリング状態にあり、そのアイドリングで60〜80%ものエネルギーを使っている
  • アイドリング時は、意識しないとぼーっと未来や過去のことを思い浮かべている
  • アイドリング時の思考が取り越し苦労などのストレスを生むと、脳の活用法が変わり、理性が本能を押さえつけようとする
  • ストレス反応が過剰になると、パニックなどの症状を生む
  • 眠りは、まだ未解明なことが多いが「情報を整理する」という役目を果たしているようだ
  • 眠りを減らした方が生産性が高いというのは、一方向からみた考え方でしかない。別の角度からみれば生産性を低めている
  • 「疲れがとれない」という感覚は脳が感じていることで、実際には疲れていない
  • ただし「疲労感」を感じた場合に運動したりカウンセリングをうけたりすると、脳の配置が若返えることがある。疲労感には意味があると考えられる
  • 自由に発想したい時はリラックスしていた方がよく、モノを作る時は集中していた方がよい。つまり集中することだけが善ではない

上記を読んでどう思われたでしょうか。

私は、思ったよりも意識的にコントロールできることが少ないことが多いなぁという印象でした。
というか、むしろ脳は暴れ馬に近いですよね。

だからこそ、自分の身体の特性を知って、意思の問題だからと自分を攻めない方がよいと思うのです。

脳の特性を知った上で、どうしていくとよいか、というのを考えてみたいと思います。
あくまで個人差があるという話を前提に。

脳に向けてのアプローチ

脳は思ったよりコントロールができない器官で、継続できない（怠け癖）は、そのあたりを意識すれば対応可能かもしれないというお話をしました。

脳に向けてのアプローチの一つとして、近年注目されているのが「マインドフルネス」です。

マインドフルネスとは、科学的に裏付けられた瞑想のことです。
「瞑想！？」と訝しむ人もいるかもしれませんが、Googleが採用して生産性をあげたことでも注目を浴びています。
日本でもYahoo!やメルカリが取り入れているといわれていますね。

マインドフルネスは、下記に効果があると医学的にも検証されています。

  • 集中力向上
  • ストレス耐性の向上
  • 生産性向上
  • 自律神経が整う

実際にCTスキャンでみても、脳の反応が変わるそうです。

瞑想をする会に通っていました

ところでこの瞑想ですが、私は近年の研究結果が出る前、それこそ15年くらい前に試していたことがあります。
試した理由は、なにかの書籍で「修行僧の脳をCTスキャンすると、まったく別の反応を示した」という研究結果を見て興味を持ったからです。

その時私は会社員で、池袋に近い「護国寺」駅のあたりに住んでいました。護国寺はお寺の名前でもあり、毎週日曜日に瞑想をする会をやっていました。
瞑想をする会は、松下幸之助さんや京セラの稲森会長に教えていたこともあるらしい中村天風さんという人が始めたものだそうで。

それにも興味をもった私は、その瞑想する会に半年ほど通っていたのですね。

結果なのですけど、継続する力は身につかなかったのですが（汗）、あっさり夜に眠れるという力を手に入れまして。
それは今でも続いていますし、今考えると、ストレスに強い精神力も培ったのかなと思っています。

護国寺から引っ越してからはその瞑想からも離れていたため、しばらく忘れていたのですが。
このマインドフルネスが流行っているのをみて、また始めています。

マインドフルネスを始めてみて

マインドフルネスは、無理しない範囲で健康のためにしばしば行う筋トレのようなものなのかも知れません。
脳の筋トレですね。

ということで、怠け癖がある人もそうですし、そうじゃない人にも、私としてはぜひマインドフルネスをオススメしたいと思っています。
私が実感しているマインドフルネスの効能は下記です。

  • 夜あっさり寝られるようになる
  • なんかすっきりする
  • 三日坊主になったとしても「まぁいいか」と思い自分を責める機会が少なくなる
  • 結果的にストレスが減り、無駄なエネルギーが減らないので、ぼちぼちは継続できるようになる
  • ぼちぼち継続できている自分が誇らしくなり、自信がつき、全体の生産性もあがる

マインドフルネスのやり方は、ネットを検索したら出てきますので､詳しくは書きません。

一ついえるのは、15年前の瞑想をする会も、マインドフルネスも、共通項は「ぼーっと何か（呼吸もしくは音）に集中する時間を作る」ということですね。
そして「その時集中できなくても、雑念が浮かんできても気にしないで続ける」ということです。

よかったらお試しください。

]]> 馬車馬のようにハードに働かないと成功できないのか？ https://webtan-tsushin.com/basyauma-hardwork Mon, 01 Apr 2019 01:58:36 +0000 https://webtan-tsushin.com/?p=20220

ソフトバンクで働いていた人の、馬車馬ハードワーク人生がYahoo!で記事になっていました。

▼元ソフトバンク社畜が語る「2人の鬼上司」孫正義が激高して…
headlines.yahoo.co.jp/article?a=20190310-00010003-flash-peo

上記を読むと、やはり孫社長の徹底した無茶なスケジュールがわかりますし、ハードワークしている人が成功を掴むのだなと思わされます。

私の周りを見ても、ずっとのんびりして成功したという人は見たことがないです。ベンチャー企業だとなおさらです。

とはいえ、僕自身は成功しないのは嫌ですが、馬車馬のように働き続ける人生はもっと嫌です。

ということで、この「馬車馬問題」を考えてみました。

すると、馬車馬ハードワークには合計で5つのメリットがあることがわかりました。

  • ハードワークしている人の要求に応えることができる
  • 様々な活動を行うのでチャンスを掴む確率があがる
  • 苦労が美談や共感をうみ、PR効果がある
  • 量をこなすのでスキルアップする確率があがる
  • 生産量が増える確率があがる

確かに成功確率があがるのは間違いなさそうな気がします。

この現象を逆にとらえると、孫さんのようにハードワークしている人は成功確率が高いと言わざるを得ない。
そういう人の要求に応えることで、よりチャンスというのも増えるわけですから、やはりハードワークをすれば、成功確率があがると言わざるを得ないでしょう。

とはいえ、インテル経営者であったアンドリュー・グローブは毎日8時に出社して、18時に退社していたそうです。
彼の言葉は含蓄深いです。

「経営者の仕事には終わりがない。やらなくてはならいないこと、やったほうがよいことが常に無限にあって、やりきれる量を常に超えているのである。これこそが秘訣だ。つまり・・・」

（「1440分の使い方 -成功者たちの時間管理15の秘訣」より）

日本のGDPは世界第三位ですが、それは人口が多いから。一人当たりのGDPは25位（2017年）です。つまり日本全体の生産量は多いが、1人1人の生産効率は悪い。

そう考えると、なんとかインテルのアンディ・グローブのような生活を送れないか、と考えてみたくなります。

■定時退社で成功する方法

最初に「生産活動」を定義するところから

もしハードワークをせずに生産性をあげたいならば、それこそ最初に「自分にとっての生産活動」の定義が必要でしょう。

一般的に生産活動とは「求められている成果物を作り上げる活動」を指します。
それは各人ごとに基準も相手も違いますね。

この時点でハードワークを避けるために対処しなければいけないのは下記2つ。

  • ハードワークしている人の要求に応えることができる
  • 様々な活動を行うのでチャンスを掴む確率があがる

まず定時退社では、当然、孫さんのようなハードワークをする人の要求には応えられませんね。最初から矛盾してしまいます。

じゃぁどうすればよいか。

そういう「ハードワークを求められる職場」を選ばない。それしかないでしょう。こればかりはどうしようもない。生きがいと定時退社はイコールではないので、人生の選択の問題ですね。

「チャンスを掴む確率があがる」はどうでしょう？
これもやはり、定時退社ではチャンスを掴む確率は下がるでしょう。

ということでやはり選択の問題ですが、ひょっとしたら仕事以外の課外活動でチャンスがうまれるかも知れません。
またモノ作りなどでは、広さよりも濃い人脈から縁が生まれることもありますので、必ずしもハードワークが生産性とイコールではありません。

やはり生産性を定義した上で何を選択をするか、という問題ですね。

苦労ではなく「別の何か」で共感を得る

次に対処をすべきなのは

  • 苦労がPR効果になる

というものです。

これは別の何かを活用するというか、例えばサイボウズさんのように「幸せな働き方」というテーマで共感を得ることもできます。
むしろハードワークせず、ワークライフバランスを目指す方が、これからの新しい時代にあっているかも知れません。

自分の能力をどう引き上げるか

最後に、やっかいな2つの課題が。

  • 量をこなすのでスキルアップする確率があがる
  • 生産量が増える確率があがる

この問題に対処するには頭を使うしかないですね。

まず、スキルアップについては、学ぶべきスキルを見定めたら、どう勉強するのが効率がよいか？を考えます。そうすれば、単位時間に学べる学習量が増えるので、より少ない時間で目的まで達する可能性があがります。

また生産量についても同様で「自分にとっての生産活動とは何か？」を見定めたら、いかに短時間でその生産量が増やせるか頭を使います。そうすれば、作業が効率化し、より少ない時間で同等以上の成果を出すこともできるかも知れません。

そもそも、直接的なパワーポイント作成などの作業ではなく、家族と旅行にいくことが生産活動に結びつくこともあるはずです。

そういう広い目で捉えれば、定時退社の方が生産性が高く、残業の方が非生産的な活動になる可能性もあります。

…

ということで、だいたいハードワーク推奨論に対するいくつかの対処は考えられたかと思います。

理屈っぽくなるのは良くないが、ハードワークばかり称賛されるのは古い

前回で、ハードワークせずとも成功する方法について考えてみました。
結論は、頭を使えば、なんとかなりそうというものです。

とはいえ私自身ハードワークをしなかったわけではなく、「若いウチの苦労は買ってでもしろ！」で多大な時間を仕事に投資して学んだ部分は多いです。

新入社員の時は毎日午前様でしたし、プログラムも夢に出てくるまで、倒れるまでやりました。

ですので、先にお伝えしたのは自分に経験がない話ですから、鵜呑みにしてもらってうまくいくか、というと悩ましい。

ただ、いざ自分の歴史を振り返ってみると、もう少しうまくやれた気がするのですよね。
それを若さ故のハードワークだったと、良き思い出に甘えているというか。
周りの意識もそうで、やはり古い人間ほど「ハードワーク礼讃」の気は強いと思います。

古い価値観にとらわれる必要はない

現代のスポーツ選手をみれば、圧倒的に今のトレーニング方法の方が合理的だし、今どき水を飲まずに根性のウサギ跳びなんて提唱していたら笑われてしまうだけです。

経験した方がわかることも多いですが、今の時代にそもそも経験しなくてもいいこともあるでしょう。

結局は、自分のエネルギーを生産活動に振り分けるわけなので、無理なハードワークを続けていたら、どこかで無理がたたります。
そうすると、何を自分の生産活動と定義し、それに対しどのようにエネルギーの絶対値を増やし、どのように充電し、どのように効率的にエネルギーを使うかが最重要です。

ハードワークをすることで筋トレのようにエネルギーの絶対量は増えるかも知れませんが、それもバランスです。

むしろ楽しいことをやっている方がエネルギーが沸くということもあるでしょうし、よく考えるとハードワークしている成功者というのは、本人は楽しんでいるだけかも知れません。

ということで、私の結論としては下記です。

  • 何かをはじめるなら、頭は絶対に使った方がいい
  • 最終的には、生産性の定義と、その人のエネルギーの問題。
  • 人それぞれでエネルギーの湧き方は違うので、自分はどういうタイプか意識した方がいい

もしベンチャー企業などで働いていて「ハードワーク礼讃」の必要性で悩んでいるのだとしたら、それは実は関係ないと信じてみることから始めてみてはいかがでしょうか。

スポーツ業界のように、今までの常識は、非常識かも知れないのです。

 

]]>