Tag: Wordpress

51月

スマホ最適化、やるなら今! 現在は解消されているレスポンシブ・レイアウトの3つのデメリット

WordPressで運営しているブログのスマートフォン最適化には、レスポンシブ・デザインがおすすめです。

1年前にはデメリットとされていた、信頼性、選択肢、広告やコンテンツがはみ出す問題、ノウハウの蓄積不足も、現在は大部分が解消されています。

 

モバイル専用サイトでは「自分らしさ」を出しにくい

「オピニオン系ブログでもモバイルからのアクセスがパソコンを明確に上回るようになった」という記事を書きました。

あなたのブログ、知らないところで「何これ見にくい」って酷評されてますよ。

モバイル(スマートフォン&タブレット)からのアクセスが過半数なのであれば、スマホ最適化に本腰を入れない理由はありません。というよりむしろ、パソコン環境は後回しにして、モバイル環境を基準にカスタマイズしなければ、本末転倒ですよね。

スマートフォン、タブレットに対応するには、大きく2種類の方法があります。一つは、現在主流の、モバイル用のサイトを用意する方法です。

ただ、僕のように個人規模で運営していて、本格的なWebデザインの知識がない場合、思ったようにカスタマイズできません。WrordPressのプラグインで、モバイル用サイトを自動生成してくれるものもありますが、オリジナリティのない画一的な見た目になってしまいがちです。

ブログ運営をしている人は、少なからず、「自分のサイトらしさ」を追求しているはずです。パソコン環境では積極的にカスタマイズしているのに、スマホではどうでもいいという人は少ないでしょう。モバイルからのアクセスが過半数を越えたとあっては、なおさらです。

 

レスポンシブデザインがおすすめ

そこでおすすめなのが、もう一つの方法、レスポンシブ・デザインの採用です。レスポンシブは、閲覧環境によって(ブラウザの横幅によって)、デザインを保ったままでシームレスに変化します。

『Handmade Future !』はレスポンシブ・デザインを採用しています。パソコンで開いて、ブラウザの横幅を狭くしてみてください。まずサイドバーが消え(正確には、記事下に移動する)、次にタブレット用デザインになり、最後にスマホ用デザインに変化していきます。

このように、WordPressで構築したブログであれば、レスポンシブ・デザインのテーマを採用しさえすれば、「自分のサイトらしさ」を維持したまま、スマートフォンに対応できます。

 

現在はレスポンシブデザインのデメリットはほとんど無い

1年前はまだ、レスポンシブデザインのデメリットを気にして、導入に踏み切れない人が多くいた印象です。

が、現在は、当時存在したデメリットは、ほぼ解消されています。

 

1. HTML5の信頼性が低く、選択肢も少ない問題

当時はまだ、レスポンシブの根幹となるHTML5は、比較的新しい技術であり、使いこなせるWebデザイナーが少ない事情がありました。見た目は良くとも、レンダリングがうまくいかず、許容できないくらいサイトが重くなってしまうケースも存在しました。

また、そもそもレスポンシブ・デザインを採用しているテーマの数が少なく、好みのテーマを選ぼうにも、選択肢があまりありませんでした。

が、これらについては、時間が解決してくれています。現在は、信頼性の高いレスポンシブデザインのテーマが多数リリースされていて、充分に「自分らしさ」を追求できるはずです。

layout:responsive – attributes | ThemeForest

 

2. 広告やコンテンツがはみ出しちゃう問題

テーマがシームレスに変化できても、広告や一部コンテンツはそうはいきません。パソコン用に、大きなサイズの広告や、YouTube動画を貼付けても、スマートフォンで見ると枠をはみ出してしまって格好悪くなってしまう状況がありました。

逆に、スマートフォンにサイズを合わせてしまうと、今度はパソコンで見たときに小さすぎて、格好悪かったり、思ったように効果を発揮できなかったりしてしまうわけです。

PHPコードを利用して、ユーザエージェントを判定して表示するコンテンツを切り替えるなどの方法もあったのですが、手間がかかり、あまり知識がないと使いにくいという大きな課題もあり、完璧とは言えませんでした。

この点についても、現在は各方面でレスポンシブ対応を強化しているため、ほぼ問題にならなくなっています。

Google Adsenseは、レスポンシブ広告を登場させています(『Handmade Future !』でも利用しています)。YouTube動画なら、テーマのほうで対応し、動画埋め込み機能をサポートするケースが大半です。

 

3. 慣れていないので扱いにくい問題

たぶん、最も根本的なデメリットはこれだと思います。そもそも、スマートフォンが普及しだしたのがここ数年であり、スマホ最適化と言っても思うように具体像を掴めません。僕自身、1年前はそうでした。

なおかつ、レスポンシブデザインという新しい技術となると、「うーん、メリットはわかるけど、とりあえず様子見かな」となってしまいがちです。

現在は、インターネット上に、レスポンシブデザインに関するノウハウが蓄積されてきているので、どうしていいかわからない状況が出てきても、Google検索で大部分を解決できます。

モバイル環境をメインに構築する必要に迫られた今のタイミングで、読み手をうんざりさせないうちにチャレンジするのを、個人的にはおすすめします。

なぜなら、運用しているうちに慣れます、というのが、ここ1年間レスポンシブデザインをカスタマイズし続けてきての実感だからです。

ちなみに、『Handmade Future !』のスマホ最適化ノウハウは、こちらに整理しました。

世界中でRating4.78の高評価を受けるWordPressレスポンシブ・テンプレート『Sahifa』|スマホ最適化カスタマイズまとめ

必要ないパーツや機能を徹底的に排除する、サイドバーを極力短くする、文字を大きめにする、Google AdSenseは記事タイトル下&記事直下がベスト、など、1年間カスタマイズをし続けてきて検証できた情報を掲載しています。

2712月

世界中でRating4.78の高評価を受けるWordPressレスポンシブ・テンプレート『Sahifa』|スマホ最適化カスタマイズまとめ

当Webマガジン『Handmade Future !』で利用している『Sahifa』は、スマホ時代に対応したレスポンシブデザインのWordPressテンプレートです。1,300人以上が評価して4.78/5.00という高評価を受け、世界中の7,500名以上ものブロガーに購入されています。

2013-12-26_1154

今や、ユーザ環境は、デスクトップパソコンとモバイル&タブレットで半々か、ややモバイルが優勢、というところまで変化してきています。

私事ですが、2013年11月で『Handmade Future !』は1周年を迎えました。『Sahifa』でのサイト運営1年を経て、モバイル・ファーストのノウハウが見えてきいます。

そこで今回は、スマートフォンでの閲覧に最適化するカスタマイズについて、レスポンシブデザインならではのポイントや、Google AdSenseの配置、プラグインとの相性などの情報をまとめました。

 

『Sahifa』の概要

特長は、モバイル対応のレスポンシブデザインである点、Retinaディスプレイへの対応を済ませている点、その他かゆいところに手が届くカスタマイズ性です。Google AdSenseなど広告への対応もしっかりしています。

多少、レンダリングブロックJavaScript & CSSを抱えていたり、キャッシュ系プラグインとの相性に難があったり、メニューが日本語化されていなかったりという問題はありますが、ニュースサイト、Webマガジンをはじめ、文字中心のブログを運営するなら、文句無しにおすすめできるWordPressテンプレートです。

ライセンス料金は現在55$。クレジットカードがあれば日本からでも購入できます。

WordPress – Sahifa – Responsive WordPress News,Magazine,Blog | ThemeForest

 

1,300人以上が評価して4.78/5.00の信頼性

WordPressのテンプレートは、無料も含めて豊富なので、多くの方は何を使うか迷うと思います。僕自身も無料テンプレートからスタートしています。

が、カスタマイズするにもそれほど知識がないので、結局は理想に近いテンプレートを見つけて細部のカスタマイズのみに着手するのがベストという結論になりました。

となるとやはり、無料では満足のいくテンプレートが見つからず、有料テンプレートの『Sahifa』にたどり着いています。

選んだ際にポイントにしたのは、第一に、多くの人の評価を受けていること。やはり買って使ってみなければ分からない点はあるし、どんな問題が出て、どんな対応策があるのかは知っておきたいと考えました。

第二に、バグフィックス&バージョンアップがきちんとされそうかどうか。やはりポッと出てきてパーフェクトということはありえないので、テンプレート作者の姿勢は重要だと考えました。

『Sahifa』の作者はエジプトのmo3aser氏ですが、『Sahifa』以外のテンプレートの出来も素晴らしく(僕は他にSokarも使っています)、英語ですがQ&Aも丁寧、サポートフォーラムも充実していたので、安心できました。

mo3aser | ThemeForest

1,300人に評価され、7,500名以上が購入しているということは、それだけ信頼性が高いと考えてOKです。1/10くらいの規模だとステマも考えられますが、『Sahifa』くらいになれば問答無用でしょう(実際、満足しています)。

加えて、7,500名以上が購入していると言っても、メニューが日本語化されていない影響か、日本国内での使用例はあまりありません。オリジナリティという意味でも、充分に魅力的です。

 

パーフェクトなモバイル対応

読者層にもよるのですが、当サイトの場合、直近3ヶ月のアクセスはモバイルが上回っています。SNS経由でバズったケースなどでは、より顕著にスマートフォンからのアクセスのほうが上回ります。

2013-12-26_1205

ブログメディアを運営するのなら、いまやスマートフォン、タブレットへの対応は欠かせません。というより、モバイルを中心に考えてサイトを構築すべきです。

『Sahifa』はレスポンシブデザインのテンプレートです。すなわち、PC、タブレット、スマートフォンと、ブラウザのサイズによってシームレスに形・デザインを変えます。どういうことかわからない方は、パソコンで当ページを開いて、ブラウザの横幅を狭くしてみてください。

加えて、Retinaディスプレイにも対応しています。最新のiPhoneやiPadで見ても非常に奇麗です。最近のバージョンアップでは、Retinaディスプレイに表示させるロゴ&アイコンと、通常ディスプレイに表示させるロゴ&アイコンを別々に登録できるようになりました。モバイル対応はパーフェクトです。

2013-12-26_1552

 

必要ないパーツや機能は徹底的に排除する

では、具体的にスマートフォンでの閲覧に最適化するカスタマイズについて紹介していきます。

最も大切なのは、徹底的に無駄なパーツを排除し、不要な機能をOFFにして、身軽にするということです。パソコンに比べればスマートフォンは非力で、回線も細いケースが多いからです。また、情報量を絞る意味もあります。画面が小さいからです。

『Sahifa』には多彩な機能が搭載されています。例えば、トップページはカテゴリごとに最新記事 or ランダムでの表示が可能です。スライダー機能も付いています。こちらから、画面中央のLive Previewをクリックして確認してください。これがニュースサイトやWebマガジンでは非常に便利で、見た目も優れています。

ただし、レンダリングがより複雑になるため、(環境によりますが)表示に時間がかかる可能性があります。こればかりは仕方ないので、機能性や見た目を取るか、身軽さを取るか、トレードオフになります。『Handmade Future !』では、現在は可能な限りのモバイル・ファーストに踏み切っているため、表示速度&スマホでのシンプルな見た目を優先させて、これらの使用を止めています。

また、表示速度以外にも、見た目がシンプルであればあるほど、読者の視線を誘導しやすくなるメリットがあります。たとえばFacebookページのフォロワーを増やしたいとして、フォローを呼びかけたとしても、ごちゃごちゃしていればしているほど、アクションしてもらいにくくなるわけです。

PC画面を見ながらカスタマイズしていると、あれもこれもと欲張りたくなりますが、スマートフォンのブラウザで閲覧してみてください。その派手な機能は本当に必要でしょうか。

 

サイドバーは極力短く

同様に、サイドバーも極力短くします。なぜなら、レスポンシブデザインの『Sahifa』では、スマートフォン表示時に、サイドバーの要素が記事下にズラッと並ぶ形になるためです。通常、記事を読み終えたら、記事下をどこまでもスクロールして丹念にチェックするようなことはありません。長ければ読み込みの負担を増やすだけなのです。

同時に、サイドバーを短くすることにより、スマートフォンではフッターにすぐにたどり着かせることができ、フッターを効果的に見せることができます。『Handmade Future !』では、ここにSNSアカウントのフォローを呼びかけるコールトゥアクションを入れています。

ぶっちゃけると、サイドバーなんて最上部以外は、読者はまったく見ていません。ほとんどは削ったところで砂粒くらいの影響しかないはずです。

たとえば最新数記事へのリンクはあったほうがよいかもしれませんが、『Sahifa』ではヘッダーメニューからカテゴリ別に見る事ができます。関連記事は、記事下に表示できます。

本当にそのウィジェットがなければいけないのか、考え直してみてください。効果がはっきりしないウィジェットなら、思い切って削除します。

 

文字は大きめに

基本、『Sahifa』の文字のデザイン等は、英文に最適化されていると思われます。

見ての通り、日本語表記でも不具合は起きず、文章を読ませるのに向いているテンプレートではありますが、文字の大きさについては細かく調整したほうがよいです。

特に、パソコン上とスマートフォン上では、見え方が変わるので、両方でチェックしながら良いバランスを見つけてください。

スマートフォンでは、少し大きいかな?と感じるくらいでちょうどいいのでは、と感じています。

なお、見出し<h1>等の大きさは、現在のバージョンではメニューからカスタマイズできないので、CSSを直接いじることになります。

 

Google AdSenseは記事タイトル下&記事直下がベスト

『Sahifa』は広告掲載サポートに力が入れられていて、専用ウィジェットや、バナーセッティング用メニューが用意されています。Google AdSenseなどの広告コードを入力しておけば、ボタン一つで表示・非表示を切り替えられます。
2013-12-26_1700

記事中に表示させたい場合は、ショートコードが使えます。あらかじめ広告コードを入力しておけば、投稿画面で[ads1]等と入力するだけで広告を表示させられます。
2013-12-26_1701a

『Handmade Future !』では記事タイトル下(正確にはリードの後)、記事直下、サイドバーの3か所にGoogle AdSenseを表示させています。モバイル環境では、記事直下(Below Article Banner Area)が非表示となるため、記事タイトル下とサイドバーの2か所のみとなります。

様々な配置を試してきましたが、ロゴ横のヘッダー、サイドバー最上部、フッター上等では、CTRが思ったように向上しませんでした。現在の配置の半分にも満たない水準にしかならないはずです。

 

レスポンシブデザインならではの広告配置の注意点

注意するべきは、レスポンシブデザインなので、閲覧環境によってサイトの横幅が変わる点です。パソコンではよくとも、スマホではデザインからはみ出てしまう、といった事態が起きます。対策は2種類あります。

1. スマートフォンの横幅を基準にして、はみ出ないサイズの広告を表示させる。デフォルトでは250×250サイズしか入らないはず。『Handmade Future !』では、横幅300サイズの広告を表示させるために、CSSをいじっています。

2. Google AdSenseレスポンシブ広告ユニットを表示させる。Googleもレスポンシブ対応を強化しています。『Handmade Future !』では、記事タイトル下でレスポンシブ広告を使用しており、PCでは最も効果が高いとされる336×280サイズを、スマホでは300×250サイズを表示させています。

以前は、PHPでユーザエージェントを判別して広告を切り替えていましたが、

WordPress|PCとスマホで記事中に表示させるコンテンツを切り替える方法

カスタマイズを重ねていると足かせになるケースが出てきているので、現在はやっていません。しっかりした知識があるわけではなく、恒常的に改善させていくつもりであれば、PHPコードによる切り替えは使わないほうが無難です。

 

プラグインでレンダリングブロックを解消

冒頭で少し触れた通り、レンダリングブロックJavaScript & CSSを抱えています。レンダリングブロック要素があると、読み込みが終わるまで、次の要素の読み込みが開始されず、表示速度が落ちます。

そこで、プラグイン『WP deferred javaScript』でJavaScript、『Async JS and CSS』でCSSのレンダリングブロックを解消しています。

『Async JS and CSS』は、JavaScriptのレンダリングブロックも解消できますが、『Sahifa』で使用すると不具合が起きるので、CSSのみに適用しています。設定はこんな感じ。
2013-12-27_0308

 

キャッシュ系プラグイン&CloudFlareは非推奨

『W3 Total Cache』『DB Cache Reloaded』などのキャッシュ系プラグインと、CDN『CloudFlare』も一時期使用していましたが、読み込みをリクエストしてから、実際に読み込みが開始されるまでに、許容できないタイムラグが発生してしまっていました。

[WordPress]素人がキャッシュ系プラグインやCDNを安易に導入するのは危険

実はGTmetrixではページグレードがダブルAになるのですが、体感ではかなり酷いことになります。GTmetrixの成績よりも、当然ながら体感のほうが重要です(レンダリングブロック解消も同様の観点から対応しています)。

結局、何が原因なのか特定できていません。しっかりした知識があるのであれば話は別ですが、『Sahifa』では基本的に使用しないのをおすすめします。

実際、キャッシュ系プラグインやCDNを使用するより、共有サーバー最高峰の『シックスコア』など、いいサーバーを利用するのが、一番の負荷対策になります。『Handmade Future !』はさくらインターネットの「さくらのレンタルサーバ スタンダード」(500円/月)からスタートして、現在はシックスコアのS1プラン(1,890円/月〜)です。

プラスして、検索流入が多い記事や、特定記事がバズったときに、シックスコアに備わっているページ・キャッシュ機能『Xキャッシュ』で、手動でキャッシュ化させています。

※『Xキャッシュ』は、サイト全体をキャッシュ化する設定にすると、どのページを開いても特定ページが表示されてしまう不具合が出たため、状況に応じて個別ページのみをキャッシュさせています。

これで、同時接続800名でも、まったく問題ありません。
2013-12-29_1705

300万PV/月クラスのサイトであれば、CDNの利用を考える必要はあるでしょう。が、このアクセス数にたどり着くまでには、かなりのサイト運営のハードルがあるのが普通なので、そのときになってから専門家に対策を依頼すれば、まったく問題ないはずです。

 

まとめ:スマートフォンを基準に考えるクセをつける

以上、レスポンシブデザイン『Sahifa』での、スマートフォンでの閲覧に最適化するカスタマイズを紹介しました。

1年間のサイト運営を振り返ると、最大のコツは、なんと言ってもスマートフォンを基準に考えるクセをつけることだと実感しています。

設定をいじったり、デザインをいじったり、ウィジェットを追加したりは、基本的にパソコンでやることになるはずなので、どうしてもパソコンを基準に考えてしまいがちです。

Google Analyticsとにらめっこし、スマホからのアクセスのほうが多いんだと認識し、モバイル・ファーストに頭の切り替えさえできれば、何が必要で、何が不要なのかは自然に見えてきます。

もし不明点があれば、お答えできる範囲でお答えしますので、Twitter等でコンタクトしていただければと思います。

312月

ブロガーのみなさん、年末のまとめは本当にPV数ランキングなんかでいいんですか?

「誰かに何かを伝えたい」という思いを最優先に発信しているなら、PV数よりも、平均ページ滞在時間のほうが適正な指標になる可能性があります。しかもおもしろいことに、ランキングのラインナップは、自分にとって渾身の記事ばかりに。結果として、読み手にとっても興味深いまとめ記事になりますよ。

 

「誰かに何かを伝えたい」と発信しているならPV数は最適な指標ではない

年末になると、ブログメディアの年間PV数ランキングを見かけます。が、ちょっぴり疑問なのは、あなたのブログは、本当にPV数で成果を測定できるんですか? ということなんです。

年間の総括記事そのものでアクセス数を稼ぎたい場合は、まぁPV数ランキングは悪い選択ではないでしょう。この記事にこんだけPV数がありました、という事実は、それなりに人を誘因する材料になるからです。

でも個人的には、年間の総括記事は、(そのものが読まれるにこしたことはない、とはいえ)どちらかと言えば、1年間のメディア運営を振り返る意図があります。

例えば、アドセンスをクリックしてもらうためにブログを運営しているなら、PV至上主義も理解できます。PV数が多ければ多いほど、収益が上がる仕組みだからです。

でも多くのブロガーは、収益は副次的なもので、「誰かに何かを伝えたい」と思って発信しているのではないでしょうか。僕自身もそうです。

他人に伝えられているか?を推測する指標としては、PV数は最適とは言えません。例えば、自分自身がブログ記事等を見ているときを思い浮かべてほしいのですが、魅力的なタイトルだと思ってクリックしたものの、中身にがっかりしたり、読みにくかったりして、数秒で閉じてしまうケースもありますよね。

 

ページ滞在時間を指標に、熟読されたかどうかを知る

そこで提案したいのが、年間ページ滞在時間ランキングです。誰かに何かを訴えかけられるような、はっきりとした価値のある記事であれば、熟読され、ページ滞在時間が伸びます。

もちろんこれも、パーフェクトな指標ではないですよ。

例えば、WordPressの機能がわからなくて、Google検索で調べものをするとします。こういうのは、知ってるか知らないかの単純な問題であるケースが多いので、解決できれば、そのページはさっさと閉じられてしまうでしょう。

当然ながら、ページ滞在時間は短くなります。が、誰かの課題を解決したという意味では、その記事は役に立っていると言えます。

発信しているコンテンツの性格は考慮しなければいけません。が、「誰かに何かを伝えたい」と思って発信しているのなら、PV数よりは効果的な指標になりえます。

※また、コンテンツの量(記事の長さなど)は、よほど極端な場合をのぞき、あまり考慮する必要はないと感じています。人は自分が気になっている部分にしか注意を払わないので、記事が長かろうが、短かろうが、コンテンツに触れる時間はそんなに変わらないようです。量より質のほうが、滞在時間に影響を与るというのが実感です。

(疑問に感じる方は、ぜひ自分のブログで、コンテンツの長さとページ滞在時間の関連性をチェックしてみてください。意外なほど関連性が薄い事実に、驚くんじゃないかと思います)

 

おもしろいことに、ラインナップは自分にとって渾身の記事ばかりになる

論より証拠、実際に平均ページ滞在時間ランキングを紹介します。

まずは【子育て&ワークスタイル/2013年平均ページ滞在時間ランキング】から。

1. 僕がフリーランスを天職だと感じるのは、我慢せずに自分らしく生きられている実感があるから

平均ページ滞在時間|00:07:15(1,298PV)

僕がフリーランスを天職だと感じるのは、我慢せずに自分らしく生きられている実感があるから

2. 「やってて楽しいこと」が少ない人は趣味を仕事にできない

平均ページ滞在時間|00:07:06(10,137PV)

「やってて楽しいこと」が少ない人は趣味を仕事にできない

3. 夫婦仲がうまくいかないのは言葉足らずが原因

平均ページ滞在時間|00:06:33(26,131PV)

夫婦仲がうまくいかないのは言葉足らずが原因

4. ペットの死に際して子供たちに伝えたかったこと

平均ページ滞在時間|00:06:09(4,783PV)

ペットの死に際して子供たちに伝えたかったこと

5. 尾崎豊のように窓ガラスを割ることなく、早くから自分らしく生きることに全力を注ぐために

平均ページ滞在時間|00:05:52(10,170PV)

尾崎豊のように窓ガラスを割ることなく、早くから自分らしく生きることに全力を注ぐために

6. 子育てと仕事は両立できる?|子育て中の両親には「仕事量半分」で働ける権利を。

平均ページ滞在時間|00:05:34(9,481PV)

子育てと仕事は両立できる?|子育て中の両親には「仕事量半分」で働ける権利を。

7. [パパ育]母親が1人で“子育ては自分の役割”という意識を持った時点で敗北決定

平均ページ滞在時間|00:05:08(3,340PV)

[パパ育]母親が1人で“子育ては自分の役割”という意識を持った時点で敗北決定

8. 現実問題として育児休暇なんて取れない

平均ページ滞在時間|00:05:03(3,748PV)

現実問題として育児休暇なんて取れない

9. 37.4℃を超えたら一律で子供を帰宅させる保育園。クレームをつける親はモンスター?

平均ページ滞在時間|00:04:42(10,844PV)

37.4℃を超えたら一律で子供を帰宅させる保育園。クレームをつける親はモンスター?

10. 僕が子供を仕事に連れて行きたい5つの理由

平均ページ滞在時間|00:04:39(2,745PV)

僕が子供を仕事に連れて行きたい5つの理由

 
最も熟読されている記事のPVは、わずか1,300ほど。3,000〜4,000PV程度の記事も目立ちます。

いやー、これ、自分でも驚くんですけど、渾身の記事ばかりなんですよね。狙って書いた記事というよりは、日常の中から出てきた気づきだとか、疑問だとかをベースに、心情を吐露したものが多い。

ちなみに、PV数でランキングを作ると、こんな感じになります。

【子育て&ワークスタイル/2013年アクセス数ランキング】
1. 母親にも「もう無理!」と声を上げて投げ出す権利がある|64,485PV
2. なぜパンツをはく必要があるのか子供に説明できない|27,030PV
3. 夫婦仲がうまくいかないのは言葉足らずが原因|26,131PV
4. 子供の多様性の行方。保育園で見たのは「異様な光景」か「ベストな方針」か|19,115PV
5. 37.4℃を超えたら一律で子供を帰宅させる保育園。クレームをつける親はモンスター?|10,844PV
6. “産後クライシス” は原因不明の難病ではないよ。|10,625PV
7. 尾崎豊のように窓ガラスを割ることなく、早くから自分らしく生きることに全力を注ぐために|10,170PV
8. 「やってて楽しいこと」が少ない人は趣味を仕事にできない|10,137PV
9. 子育てと仕事は両立できる?|子育て中の両親には「仕事量半分」で働ける権利を。|9,481PV
10. 17,200時間、地球約17周の無駄について。|7,346PV

顔ぶれがかなり変わります。

 
もう一つ、【情報発信スキル/2013年平均ページ滞在時間ランキング】もやってみましょう。

1. 個人ブログメディアの作り方|ニッチ分野における情報収集の3つの基本

平均ページ滞在時間|00:07:43(1,508PV)

個人ブログメディアの作り方|ニッチ分野における情報収集の3つの基本

2. 開始1ヶ月で7万PV|『はてなブックマーク』で読まれる記事を書く訓練をしよう。

平均ページ滞在時間|00:07:23(1,153PV)

開始1ヶ月で7万PV|『はてなブックマーク』で読まれる記事を書く訓練をしよう。

3. 東京ディズニーリゾートとソーシャルゲームの違い

平均ページ滞在時間|00:07:06(249PV)

東京ディズニーリゾートとソーシャルゲームの違い

4. mixiとLINEが1記事10万PV以上を生む衝撃

平均ページ滞在時間|00:06:59(3,219PV)

mixiとLINEが1記事10万PV以上を生む衝撃

5. 書評ブログがトレンドになる可能性|“本を推薦できる人”の存在価値が高まっている

平均ページ滞在時間|00:06:53(734PV)

書評ブログがトレンドになる可能性|“本を推薦できる人”の存在価値が高まっている

6. WordPressの使い方。初心者が必ず押さえておきたいプラグイン7つ

平均ページ滞在時間|00:06:34(16,037PV)

WordPressの使い方。初心者が必ず押さえておきたいプラグイン7つ

7. Twitterで価値のあるフォロワーを確実に増やすたった3つのステップ

平均ページ滞在時間|00:06:28(14,479PV)

Twitterで価値のあるフォロワーを確実に増やすたった3つのステップ

8. 検索上位を実現するたった3つのステップ

平均ページ滞在時間|00:06:25(4,455PV)

たった5分。検索上位を実現するたった3つのステップ

9. ブログを自己満足で終わらせないために意識するべき7つのポイント|田端信太郎『MEDIA MAKERS』より

平均ページ滞在時間|00:06:22(3,739PV)

ブログを自己満足で終わらせないために意識するべき7つのポイント|田端信太郎『MEDIA MAKERS』より

10. ブログで稼ぐ2つの基本モデル|「PV依存モデル」と「インバウンドマーケティングモデル」

平均ページ滞在時間|00:05:53(2,977PV)

ブログで稼ぐ2つの基本モデル|「PV依存モデル」と「インバウンドマーケティングモデル」

3位と5位なんか、それぞれ249PVと734PV。ここまでPV数が少ないのは自分でも驚いちゃいますけど、記事自体はやはりそれなりに自信のある内容です。

PV数のランキングはこちら。

【情報発信スキル/2013年アクセス数ランキング】
1. ジョブズ(天才)じゃなくてもできる、伝えるプレゼンテーション7つのコツ|32,185PV
2. 一目で惚れる。WordPressの厳選レスポンシブ・テンプレート5つ|18,258PV
3. たった5分。検索上位を実現するたった3つのステップ|17,946PV
4. 一目瞭然。読まれるブログ記事の書き方|17,241PV
5. WordPressの使い方。初心者が必ず押さえておきたいプラグイン7つ|16,037PV
6. Twitterで価値のあるフォロワーを確実に増やすたった3つのステップ|14,479PV
7. 田中ゆうたろう杉並区議はなぜ炎上したか?|8,988PV
8. Amazonアソシエイトの使い方。ブログを収益化する7つのコツ|7,369PV
9. 必見。Googleが公式にAdWords広告ランクの仕組みを解説|6,309PV
10. Gunosyは情報収集を助けるだけではない。「ブログで食う」の実現性を高めてくれている。|4,913PV

 

熟読されている記事ランキングのほうが、興味深くない?

いかがでしょうか。

僕自身もランキングを作成してみて意外だったんですが、熟読されている記事ランキングのほうが、記事を読んでみたくなりませんか?

僕は、単に「たくさんの人に読まれた記事です」というよりも、「PV数は少ないけれど、読んでいる人は熟読している」記事のほうが、断然気になります。

もちろん最強なのは、PV数が多くて熟読されている記事ですけどね。

 

PV数では測れない記事の価値を掘り起こす

ちょっと真面目な話もしておくと、メディア運営者として、特にページ滞在時間に着目する理由は、“たくさんの人に読まれてはいないけれど、価値のある記事” をしっかり掘り起こして、コンテンツ制作の方向性が適正かどうか、再確認するためです。

特に、検索流入がメインの記事は、SNSでバズったケースより、PV数が少なくなりがちです。

でも、検索流入がそれなりにあるということは、その記事に価値がないわけではない。

一概に、PV数が少なかったから失敗、とは言えないわけです。

ふつうは、自分が書いた記事で誰かが影響を受けた事実は、なかなか知れないものです。ゆいいつ、平均ページ滞在時間が、「熟読してくれたのなら、それなりに印象に残ったはずだ」と推測する指標になりえます。

Web上で一つの記事を10分近く読むって、なかなかすごいことだと思いませんか?

ということで、みなさんもぜひ、年間PV数ランキングなんかやめて、平均ページ滞在時間ランキングにしましょう。僕は平均ページ滞在時間ランキングのほうが読みたいですね。

164月

mixiとLINEが1記事10万PV以上を生む衝撃

mixiはまだ終わっていない(&LINEは本当に凄かった)

『Handmade Future !』では、SNSマーケティングに関して、TwitterとFacebookに絞って紹介しています。

なぜTwitterとFcebookかと言うと、ソーシャル題材との親和性があり、学生団体やNPOが成果を出せる可能性が高く、なおかつ個人レベルでもマーケティングに利用しやすいからです。

とは言え、題材によっては、TwitterやFacebookよりも、mixiやLINEのほうが向いているケースもあります。例えば、エンターテイメント系の話題を10代〜20代の若年層に届けたい場合には、mixiやLINEのほうがはるかに有効です。

先日、mixiやLINEの衝撃的な効果を実感する機会がありました。そこで今回は、mixiとLINEにおけるマーケティングの可能性について紹介します。

学生団体やNPOでは、なかなか活用できる場面は少ないはずですが、参考までに頭に入れておいていただければと思います。

 

mixi、LINE経由で10万PV超え

個人的な話になるのですが、我が家は年間パスポートで通っているディズニーファンです。当ブログ経由の(全く別件の)問い合わせがきっかけとなり、2月頃から大手メディアの一つでディズニー記事を書いています。先週は、30周年イベントのプレスプレビューがあり、取材&記事ライティングで大忙しでした。

僕個人としては、やってて楽しいことだけを徹底的にやって、そのすべてをお金に換えていくということに挑戦しています。ディズニー取材&記事執筆もその一つです。例えば、先日は娘の誕生日で、バースデーパスポートでディズニーシーへ行ってきました。誕生日限定グッズを始め、さまざまな特典があります。ただ楽しんできただけですけど、それがそのまま取材になります。楽しめば楽しんだだけお金になる、逆に言えばどんどん楽しまなければお金を稼げないという、ある意味攻撃一辺倒なスタイルです。

ライターとしては「コアなファンだからこそ書ける」+「ブロガーとして培ったマーケティング感覚(どういう題材をどういう切り口で書けば読まれるか?)」を明確に武器と捉えています。2月〜3月に書いた記事は、mixi、LINE経由でバズらせることができ、とある記事は単体で10万PVを超えたとの報告をいただきました。

10万PVというと、おおよそHandmade Future !1ヶ月分のページビューに相当します。僕の感覚では、ブログ記事+Twitter・Facebook・はてなブックマークの組み合わせでは、1記事3万PV前後が限界です。単体で10万PVを稼ぐブログ記事が存在しないとは言いませんが、極めてハードルは高いはずです。

一時期の勢いが完全に止まり、どうにもマイナスイメージが拭えないmixiですが、いまだ他にはない価値があります。また、「凄い凄い」と言われつつ、個人レベルのマーケティングでは、なかなかその威力を実感できないLINEも、やはり評判そのままに凄かったと実感できました。

 

mixiニュース、LINEニュースの関連記事から流入

10万を超えるPVがどういう経路で生まれたかというと、mixiはmixiニュース(各メディアから配信)、LINEはLINEニュース(各メディアから配信されているlivedoorニュースからピックアップ)に取り上げられた記事の、関連記事からの流入です。

mixiニュースのトップページ

mixiニュースのトップページ

構造としては、ヤフートピックスの関連記事流入と同じです。ブログメディアを運営していると、ニュースの関連記事として、Yahoo!に記事タイトルとURLが掲載されることがあります。国内最大のポータルサイトだけあって、この威力は凄まじく、数時間で1万〜2万PVの流入があるケースもあります。

今回のディズニー記事の場合は、mixiやLINE(livedoor)に配信した記事そのものも僕が書いた記事ですが、配信した記事は転載の形になるので、PVはカウントされません。ただし、転載記事の中に関連記事としてURLを3個程度表示できます。

livedoorニュースの場合。最下部に関連記事を表示し、本サイトへ誘導できる

livedoorニュースの場合。最下部に関連記事を表示し、本サイトへ誘導できる

この関連記事流入が中心となり、10万を超えるPVが生み出されました。

パッと見た感じでは目立たないので意外に思うかもしれません。が、読み終えれば必ず別ページに遷移するので、記事下は最もアクション率が高い場所の一つです。WEBメディア運営の経験がある方ならそれほど違和感はないでしょう。

 

mixiの特殊なソーシャルグラフ

mixiでは、マーケティングの手段として、Facebookページと同じようなmixiページという機能がありますが、どうも評判はよろしくないようです。僕も20代の頃はユーザでしたけど、むしろmixiの強味は、例えば女子高生のマクドナルドでのおしゃべりのような、気の合う人たちとざっくばらんにコミュニケーションできるところにあります。

mixiニュースでは、ニュース記事を元に日記を書いたり、つぶやいたり、mixiチェックを付けたりすることができます。誰かが記事を元に日記を書けば、その人とつながりのある人がコメントを書き込んだりイイネ!をつけたりして盛り上がり、より多くの人の目に触れる結果になります。

チェック、つぶやき、日記を合計した話題数は5000以上

チェック、つぶやき、日記を合計した話題数は5000以上

「なにか一言いいたい」と思わせるような記事であれば、TwitterやFacebookと同様に大きく拡散します。TwitterやFacebookと違うのは、半匿名空間であり、またユーザ層が若い点です。笑い、エンターテイメント、ゴシップほか、「じゃがりこのフルーツ味が出た」というような話題でさえ盛り上がったりします。

また、おそらくmixi編集部が人力で選んでいる「注目のピックアップ」に取り上げられると、注目度があがり、話題にされやすくなります。人が選んでいるのは、ヤフートピックスと同じですね。どれだけmixiユーザに響くコンテンツを配信できるかが勝負になります。

 

LINEの特徴は10代〜の最も若いユーザ層

一方のLINEは、Facebookページのような公式アカウントの運用に費用がかかり、完全に企業向けになっています。続々と開設する企業が増えているところを見ると、それなりに効果はあるようです。

LINE@ 料金体系 | LINE公式の法人・ビジネスアカウントで集客

LINEの特徴として、“スマートフォン時代に合わせて設計されたSNSである”という事実が挙げられます。メールよりもストレスフリーなコミュニケーション手段を武器に、ケータイからスマホに持ち替えた10代〜の若年層に深く食い込みました。

「LINEニュース」という公式アカウントをフォローすることにより、livedoorニュースの中から編集部がピックアップした“注目ニュース”、大きな事件の速報“速報ニュース”などを受け取れます。

LINEニュースの一例

LINEニュースの一例

詳しいデータはもらっていないのですが、「LINEニュース」の“注目ニュース”で紹介されたときの流入が、とくに凄かったと聞いています。ちょうど春休み期間だった影響もあり、中学生、高校生、大学生などLINEのメインユーザに、ディズニー記事が強く響いたのだと考えられます。

 

mixiは終わった、はトレンドが終わっただけ

マーケティングをトレンドで考えるのは危険です。新しく流行っているところで露出しようとばかり考えると、視野が狭くなってしまい、実は古びたのではなく円熟味を増していて、成果を出せる場所があるのに、見落としてしまう可能性が高くなるからです。

もう一つ無視できないのは、トレンドが局所的なものになりつつある事実です。例えば、以前より減ったとはいえ、mixi内で活発にコミュニケーションしている人々は、確かに存在しています。題材によっては、無視するのはもったいないほどの勢力です(ディズニー記事で10万PVを稼ぐ手段は他にあまりない)。しかし、自分がFacebookばかりやっていてmixiを利用していなければ、まったくその事実に気がつけません。

mixiは終わったというイメージに引きずられて、mixiを選択肢から除外してしまうとしたら、たいへんもったいない結果になります。僕も今回、かなり勉強になりました。

122月

WordPress|PCとスマホで記事中に表示させるコンテンツを切り替える方法

Google Analyticsを見ると、Handmade Future ! にアクセスしてくださる方の環境は、4割がモバイル(スマートフォン&タブレット)です。

2013-02-12_0946

ほとんどのブログやWebサイトは大差ないはずです。それどころか、スマートフォンからのアクセスが上回る時代が近いうちに来るでしょう。もはやスマートフォン対応は必須ですよね。

スマートフォン対応には大きく2つの方向性があります。1つはスマートフォン用のサイトを構築する方法。もう1つは、Handmade Future ! もそうですがレスポンシブデザインです。PCで閲覧している方は、ブラウザの横幅を小さくしてみてください。Handmade Future ! は、ある一定の大きさになるとタブレット用のレイアウトに、もっと小さくするとスマートフォン用のレイアウトに、シームレスに変化します。

スマートフォンで見せる場合には、PC環境に比較して「貧弱な通信回線」「処理速度の遅いCPU」という2つの課題を解消する必要があります。同じコンテンツを見せれば、スマートフォンのほうがより時間がかかり、「重い」印象になるわけです。

例えば、Handmade Future ! では、読み込み負荷を軽減させるために、スマートフォン環境では、記事下コールトゥアクションのFacebookページ『Like Box』を表示させていません。

このように、WordPressで構築しているサイトで、閲覧環境(パソコンor スマートフォン)によって記事中に表示させるコンテンツを切り替える方法を紹介します。

 

1. ユーザエージェントを判定するコードを追加する

WordPressの管理画面から、外観 → テーマ編集へと進みます。『functions.php』に、以下のコードを追加します。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

なお、このコードにはiPadが含まれていません。Handmade Future ! のレイアウト&コンテンツの場合は、タブレットはPCと同じ内容で良いとの判断からです。

iPadもモバイルに含めたい場合は、iPhoneの下あたりに、

        'iPad',           // iPad

を追加してください。

また、モバイルに判定するべきユーザエージェントが増えた場合は、追加していく必要があります。

 

2. 記事中でPHPコードを利用できるようにする

手順1の段階で、PHPコードを利用して表示の切り替えができる状態になります。サイドバーやフッターなど、テーマ内ではPHPコードが利用できるので、すぐにでも機能します。

がしかし、記事中では、PHPコードを利用できません。

そこで、記事中でPHPコードを利用できるようにするWordPressプラグインをインストールします。『Insert PHP』や『Allow PHP in Posts and Pages』など、いくつか種類があります。Handmade Future ! では『Exec-PHP』を使っていますが、2年以上アップグレードがない古いプラグインなので、今後もきちんと動作するか不透明です。

WordPressの管理画面から、プラグイン → 新規追加と進みます。プラグイン名で検索するか、「PHP」などの単語で検索して見つけてください。

同様に、ウィジェット内でPHPコードを利用できるようにするプラグインもあります。必要に応じて検索してインストールしてください。

 

3. PHPを利用し、表示させるコンテンツを指定する

準備が整ったら、PHPコードで、環境ごとに表示させるコンテンツを指定します。

<?php if(is_mobile()) { ?>
【スマートフォンで表示させるコンテンツ】
<?php } else { ?>
【スマートフォン以外(PC&iPad)で表示させるコンテンツ】
<?php } ?>

簡単なコードですよね。これ1つで、記事中でもサイドバーでもウィジェット内でも表示の切り替えができます。

例えば、PCとスマートフォンで読ませる文章を変えることもできますし、PCでは埋め込んだ動画を読み込ませ、スマートフォンでは動画が置いてある元ページのリンクを読み込ませる、といった動作が可能になります。

 

地道に最適化していこう

初心者の方は、はじめはスマートフォン対応に苦戦すると思いますが、スマートフォンでアクセスする割合が4割を超えてきているので、もはや無視はできません。

最初から完璧なWebサイトはありません。記事をUPしたら手持ちのスマートフォンでチェックして、違和感のある箇所を見つけ次第、地道に修正していくクセをつけるのがベターだと思います。

TOPページ サイトマップ 更新履歴