Tag: Wordpressテンプレート

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等でコンタクトしていただければと思います。

2811月

一目で惚れる。WordPressの厳選レスポンシブ・テンプレート5つ

WordPressはテンプレートも豊富です。無料で利用できるものもたくさんあります。コストが安く済むのもWordPressのメリットですよね。

……と、思っていたのですが。

最近、ブログのリニューアル作業を経て、考え方が変わりました。「3,000円とか4,000円払ったら飢え死にしちゃう!」という方でなければ、有料のテンプレートをおすすめします!!

なぜなら、一目で違いがわかるほどにクオリティが高いからです。

今回は、リニューアル作業時にチェックして回った有料テンプレートのうち、ベスト5を紹介します。すべて、そのまんまでスマートフォンやタブレットに対応するレスポンシブです

 

Core Minimalist Photography Portfolio

スーパーかっこいい。いきなりTOPページ全面がスライドです。マウスでクリックするとくるくる動き、中央写真のクリックで全画面表示になります。もちろんブログ機能もあります。

これにはやられました。写真メインのサイトだったら、次は絶対に使おうと心に決めました。

Core Minimalist Photography Portfolio ($45)
http://themeforest.net/item/core-minimalist-photography-portfolio/240185

Live Preview
http://themes.themegoods.com/?theme=Core 

Arcadia Responsive WordPress Blog

シンプルで見やすいヘッダー、ナビゲーションメニューに、大きな写真スライダー。

これもいいんですよね。ヘッダーの広告掲載をサポートしていないので今回は見送りました。が、広告不要、かつ一つのテーマをがっつり見せたいときには使えそうです。

Arcadia Responsive WordPress Blog ($40)
http://themeforest.net/item/arcadia-responsive-wordpress-blog/1944474 

Live Preview
http://themeforest.unitedthemes.com/?theme=arcadiawp 

Sahifa – Responsive WordPress News,Magazine,Blog

当WEBマガジン『Handmade Future !』のテンプレートです。デザインが気に入っています。何より、テキストがメインコンテンツになるので、文章の見せ方で決めました。唯一不満だったのは、設定画面から引用の文字の大きさを変更できなかったことくらいですね(CSSをちょこっと変えるだけなので大した手間じゃありませんが)。

機能も豊富で、使い方も分かりやすいですし、とても満足しています。

Sahifa – Responsive WordPress News,Magazine,Blog ($45)
http://themeforest.net/item/sahifa-responsive-wordpress-newsmagazineblog/2819356 

Live Preview
http://themeforest.net/item/sahifa-responsive-wordpress-newsmagazineblog/full_screen_preview/2819356

Deadline – Responsive Premium WordPress News / Magazine Theme

シンプルな作り、かつヘッダーでの広告をサポートしていて、最後まで上記Sahifaと迷いました。

テキストメインのブログをやるのなら、とても使い勝手がいいはずです。

Deadline – Responsive Premium WordPress News / Magazine Theme ($50)
http://themeforest.net/item/deadline-responsive-premium-wordpress-news-magazine-theme/117203

Live Preview
http://demo.awesem.com/?theme=deadline

Super Skeleton WP: Responsive, Minimal, Beautiful

ミニマルデザインの極地、と言えるような超クールなテンプレート。テキストメインでも写真メインでもいけます。

これも最後まで迷った一つです。かっこいいですよねー。何より評価が凄くいいんですね。

1年前、2011年10月にリリースして、3700人以上が購入し、Ratingは五つ星。

有料テンプレートは、買って使ってみないと使い勝手がわからないところがあるんで、この評価は大きいです。

Super Skeleton WP: Responsive, Minimal, Beautiful
http://themeforest.net/item/super-skeleton-wp-responsive-minimal-beautiful/647570 

Live Preview
http://themes.mdnw.net/?theme=SuperSkeleton
以上、5つ紹介しました。どれも無料テンプレートにはないクオリティを感じていただけたと思います。

オフィシャルブログがあると知って飛んだらアメブロだったら、なんだかガッカリしませんか? いや、個人的な好みかもしれないですが(^^;)

少なくとも、ブログは自己表現の重要なツールであることは事実です。スーツがよれよれだったり、家庭用プリンターで印刷した名刺だったりがあまりポジティブな印象を与えないように、ブログも綺麗に整えておい損はありません。

WordPressが一通りいじれるようになったら、ぜひ有料テンプレートに挑戦してみてください。

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