キタジマ タカシ Snow Monkey アドベントカレンダー9日目の記事です。
一昨日はものくろさんの「Snow MonkeyはWordPressのブログを初めて使う方、記事のコンテンツ部分に集中して作業したい方にオススメな価格以上の価値がある有料テーマ」、昨日はよっひーさんの「妄想案件にSnow Monkeyで挑んで美容室向けホームページを1つ作ってみる」でした。いずれもユーザー目線からの記事で、とてもよくまとめていただいていて感動しました。僕は自分がつくっているというのもありますし、そもそもが開発者気質の人間なのでどうも「なにができる」にフォーカスしてしまいがちなのですが、お二人とも「なにができてそれがどう良いか」まで書いてくださっていたので、なるほどな、と改めて思いました。ご参加ありがとうございました！
さて、2日前に、オンラインコミュニティで「Snow Monkey はメディア向けとのことですが、他のテーマのどんな点を参考にして、Snow Monkey ではどんなものを取り入れたのか等、どのようにメディアフレンドリーになっているのか知りたい」旨リクエストをいただきまして、今日はそのお題で書きたいと思います。
リサーチ
Snow Monkey を開発するにあたり、どのようなテーマがメディアやブログで人気なのか調査しました。僕がブロガーだったり、まわりにブロガーさんやメディア運営者が多かったりして僕に知識があればさっと開発に取り掛かれたのかもしれませんが、正直なところ全然そんなではなくて、僕にメディアやブロガーさんが必要とするものが何なのかという知識がほとんどなかったので（制作を仕事にしているのでもちろん一般論は知っていますが、本当に必要とされているもの、という意味です）、まず詳しく調査することからはじめました。
メディアについては特定の人気テーマを使っているものはほとんどみつけられなかったので、新聞・雑誌のオンライン版サイトとか、芸能ニュース系メディアサイトとか、バイラルメディアとかを片っ端からみて、どのようなレイアウトが多いか、どのようなコンポーネントが使われているかを見て回りました。
ブログについては WordPress テーマのレビュー記事や Twitter 検索である程度人気テーマが絞られたので、機能リストをエクセルにまとめたり、レビューで評価されているポイントをまとめたりして実装する機能を検討しました。
ブロガーさんに人気のテーマにおいて、多くの人が評価している機能
そうやって調査して、レビューで特に多くの人から評価されているものは以下の5点だということがわかりました。
- たくさんの便利ショートコード
- 吹き出し
- SEO/SNS 対応
- ウィジェットエリアがいろんなところにある
- レスポンシブデザイン
たくさんの便利ショートコード
これはボタンとかカラム分割とか、HTML を書かなくてもショートコードを入れさえすれば見栄えするボタンを入れることができたり、CSS がわからないと自分では実装が難しいカラム分割（2列・3列とかに並べるアレ）が実現できたりするものです。ショートコードの豊富さはどのレビュー記事をみてもまず評価されるポイントだということがわかったので、これはやろうと思いました。
ただ、確かにショートコードは HTML/CSS を自力で書くよりは便利なのですが、果たして本当の意味で便利なのでしょうか？よくよく考えてみると、ショートコードには次の2つの問題があることがわかります。
- ビジュアルエディタでも文字列として表示される
- 結局 HTML を書いているのと同じ
まず、基本的にショートコードはビジュアルエディタ上でも文字列として表示されます。こんな感じですね。
[btn url="https://2inc.org"]ボタン[btn]
これ、せっかく「謎の英語」を自分で書かなくて済む、見ないで済む、という一般ユーザーの心理を満たせてないですよね？そして、こんなショートコード、
<a class="btn" href="https://2inc.org">ボタン</a>
と書くのと何が違うのでしょうか？結局ほとんど HTML と変わらないのです。ではなぜどのテーマもたくさんのショートコードを実装しているのでしょうか？半分は僕の推測ではありますが、おそらくそれしか方法を知らないからだと思います。本当の意味ではユーザーの利便性をそれほど向上させてはいないけれど、HTML を書かせないでボタンなどのコンポーネントを記事中に挿入する方法を知らないのだと思います。
そこで僕は、ショートコードではなく「HTML でできたコンポーネント」をビジュアルエディタにそのまま挿入できる機能を独自につくりました。そのことで、
- ビジュアルエディタでも実際の画面と同じように装飾された状態で表示される
- ユーザーはビジュアルエディタにしておけば一切「謎の英語」を見なくてすむし、書く必要もない
という使い勝手を実現しました。
WYSIWYG だけでもかなり良い感じにページが作れるところまできた！ある程度できることは限られるにせよ、ショートコード使いまくったり独自のページビルダーでページを作るよりはかなり良いと思うんだけどどうだろう pic.twitter.com/Lv5sIJE83g
— キタジマタカシ (@inc2734) September 12, 2017
吹き出し
僕はこれは全然知らなかったのですが、吹き出しの有無でテーマを選ぶ人がいるほど、吹き出しというのは重要なようです。ただ文章を書くより、ポイントポイントで吹き出しを使うことで記事にリズムができるし、賑わい感が演出できて良い、ということのようです。
多くのテーマでは吹き出しもショートコードとして実装されていましたが、前述したように問題があるのでこちらも HTML のコンポーネントとして挿入し、ビジュアルエディタ上で吹き出しの見た目でちゃんと表示できるようにしました。
SEO/SNS 対応
まずどのテーマでもほぼ対応されていたのは OGP タグです。実際、これはほぼ業務でも必須ですし、入れない理由はありません。
そしてメタタグ。description ですね。これは以前「あなたもアフィリエイト✕アドセンスで稼げる! はじめてのWordPress本格ブログ運営法」の付属テーマをつくる際に、共著者でブログ飯の著者でもある染谷さんが「記事毎に description の設定ができるのは需要がある」とおっしゃっていたので、Snow Monkey にも入れました。
あと、他のテーマのレビューで意外に重要視されているのが robots.txt の設定。僕はあまり詳しくありませんが「消したくはないけど低品質だからクロールはされたくない記事」とかを除外したい需要があるみたいです。なので記事毎に robots.txt の設定ができるようにしました。
あとはオンラインコミュニティのメンバーさんから「記事の日付が検索結果に反映されるので、公開日・更新日が SEO に何らかの影響があるかも」ということを聞いたので、記事の公開日・更新日に構造化データを仕込みました。
ちなみに、僕は「このテーマは SEO に強い！」といわれているのはほとんどバイアスがかかった妄想だと思っているのでそういう意味での SEO は、当たり前のことを当たり前にやるだけで、それ以上のことはあまり考慮していません。
ウィジェットエリアがいろんなところにある
これはページ制作の自由度が上がるという面より、広告を好きな位置に入れることができる、ということが評価のポイントのようでした。なので Snow Monkey では記事の上下やサイドバーはもちろん、それぞれを投稿タイプごとに出し分けるようにしたり、また要望があれば追加するなどしています。
レスポンシブデザイン
これも僕的には結構意外でした。だってもはや現代ではレスポンシブデザイン常識じゃないですか。だからなんであえて「レスポンシブデザインだから良い」と書いてあるのかが理解できませんでした。で、おそらくこれは2点あると思っています。
- 多くのテーマでレスポンシブデザインは不完全（例えばスマホサイズでのバランスが微妙とか）
- テーマの公式サイトでそう謳われているから単にレビューに書いている
まず、どのテーマもレスポンシブはレスポンシブですが、結構スマホだとバランスが微妙になったりということが多いなと感じました。そういった意味で、どのデバイスサイズでもきちんとバランス良くデザインされているというのは評価されるポイントになるのかなと。なので Snow Monkey では見出しサイズや余白サイズ等々、デバイスサイズごとに結構細かく調整をいれました。
2点目についてはコメント割愛しますw
特に言及されていることが多くはないけど、多くのブログやメディアにある機能
以下は主にメディアサイトを見てまわっているときによく見かけるな〜と思ったものです。よく見かけるということは需要があるということなので、いずれも実装しました。
- シェアボタン
- 気に入ったらいいね！しようボックス
- プロフィールボックス
- スクロール追従サイドバー
- 記事のサムネイル
シェアボタン
シャボタンはメディアサイトに限らず業務でつくるサイトにもほぼ必須で入っているものですね。だから入れることは最初から確定していましたが、特に次の点に力を入れました。
- デザインを数パターンから選べる
- HTTP と HTTPS のカウントを合算して表示できる
- カウントを一定時間キャッシュできる
シェアボタンというのは結構カラフルなので、意外に目立ち、印象に残ります。テーマ選びの基準で「他の人とかぶるのがイヤ」ということは結構あるようで、そういう意味でシェアボタンの印象っていうのは結構強烈だなと思ったのでいくつかのデザインから選べるようにしました。
あと、ちょうど今常時 SSL 化がブームで、HTTP から HTTPS に移す人が多いですよね。そのときに問題になるのがシェアボタンのカウントが0に戻ってしまう、ということです。URL が http:// から https:// に変わってしまうので、ということですね。僕もちょうど HTTP から HTTPS に変えたところでこれがイヤだなーと思っていたので、HTTP と HTTPS のカウントを合算して表示できるようにしました。
そして、カウントのキャッシュ機能もつけました。これはものくろさんからアドバイスをもらったことなのですが、どうしてもシェアカウントって取得してきて表示するのに時間がかかるんですよね。あと、HTTP と HTTPS の合算をできるようにもしたので、つまり HTTP と HTTPS の2つのカウントをとってきて合算するので、そういう意味でもパッと表示されないのがイヤだなというのがありました。そこで数分キャッシュするようにして、キャッシュが有効な間はパッとそのカウントを表示するようにしました（キャッシュ時間は任意に変更できます）。
気に入ったらいいねしようボックス
これは特にバイラルメディアにほぼ 100% ありますね。やはり何らかの方法でユーザーを囲い込んで、そこに一斉に通知を送ることができるというのは運営側からすればとても良いし、ユーザーにとっても新着記事を見逃さなくて済むというメリットもあるかと思います。そういうことで Snow Monkey でも記事下にいいね！ボックスを入れるようにしました。僕はいままでこのボックスは入れていなかったのですが、このサイトで入れるようになって、実際 Facebook ページのいいねが増加傾向です（微増ではありますが）。
プロフィールボックス
こちらもメディアサイトでよく見かけました。メディアサイトはブログと違って多人数で書いていることが多いので「この記事は誰が書いた」というのを表示したいということだと思います。また、最近はライター個々人をブランディングするというのは当たり前になってきていますよね。だから記事下にプロフィールを書いたり、その人の書いた記事の一覧にすぐいけるようになる、というのはなかなか良さそうです。ということで Snow Monkey にも取り入れました。
スクロール追従サイドバー
PC でこの記事を閲覧して下の方にスクロールすると、右側に目次が固定されて表示されると思います。これのことですね。メディアサイトやブログでは広告を配置するために使われていました。僕は Qiita がサイドバーに目次固定しているのがすごく便利だなと思っていたので目次をいれています。この追従サイドバーはウィジェットエリアになっているので、広告でも目次でも自由にいれることができるようにしています。
記事のサムネイル
メディアサイトではほぼ 100% 記事にアイキャッチ画像が設定してあり、特に芸能系のサイトや新聞社のサイトではその画像が一覧で大きめに表示されていたり、記事ページではヘッダーに大きく表示されていたりしていました。Snow Monkey はデザインもシンプルなので、写真が目立つようにそのレイアウトを取り入れました。
特に僕がこだわったこと
リサーチで他がこうしているからこうしようと思ったもの、そうでないもの合わせ、特に僕がこだわったのは快適に記事がかけるようにしたいということです。やはりメディアやブログは普通のウェブサイトと違ってばんばん記事を書くし、ライターさんも書くことが好きだと思うので、いかに集中して快適に記事が書けるか、というのは大事なことだと思います。僕は装飾のためにビジュアルエディタとテキストエディタを行き来するのが最もストレスだったので、ビジュアルエディタで必要なこと全てができるように、ということに力をいれました。
ショートコードではなく HTML コンポーネントを挿入できるようにしたのも、コード挿入ボタン（ビジュアルエディタツールバー2段目の一番右のボタン。広告コードの挿入を想定）をつくったのもそのためです。また、いちいちプレビューと行き来するのもストレスだったので、ビジュアルエディタで実際の画面とほぼ同様の見た目が再現できるようにビジュアルエディターも頑張りました。
この辺りは実際に使ってみないと見えない部分なので、気になる方はぜひ試用版のリクエストを送ってください！
明日は
自分にメディア運営やブログ運営のノウハウが無く、他で使われているものを基準に実装、つまり機能面に着目して実装していく流れになってしまったので、結局この記事も機能面よりの記事になってしまいました。本当は「メディア・ブログはこうだから、こういうことが効果がある、だからこれを実装したんだ・こういうことが重要なんだ！」という流れにしたかったのですが…。このあたりも今後の課題ですね…。
それと、本日 WordBench 群馬 に参加させていただいたのですが、とても楽しかったし、参加して良かったです！ライターさんが多かったり、アフィリエイターさんがいたり、様々な経歴の方がいたりと、Snow Monkey を育ててていく上での参考になったこともあったし、いろいろな人の人生が垣間見れてとても刺激を受けました。こちらも後日記事書きたいなと思います！とても良い雰囲気だったので、長く続くコミュニティになれば良いな〜うらやましいな〜と思いました。
アドベントカレンダーは明日はどなたも参加がありませんが、随時ご参加絶賛募集中なので、お気軽にご参加くださいませ。既にネタが枯渇しており…^^;
