Tag: レスポンシブ

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年間カスタマイズをし続けてきて検証できた情報を掲載しています。

51月

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

ついに、オピニオン系ブログでも、モバイル(スマートフォン&タブレット)からのアクセスが5割を越える時代が来ました。

もはや、すべてのブログやWebサイトが、スマートフォンでの閲覧を基準にデザインや構成を考えるべきです。いくらパソコンで洗練された見た目でも、スマホ最適化がなされていなければ、時代遅れでしかありません。

もし、あなたが、パソコンだけしか見ていないとしたら、あなたの知らないところで「なにこのブログ、見にくいんだけど」と酷評されている可能性があります。

 

モバイルからのアクセスがパソコンの倍

『Handmade Future !』では、2013年下半期から目に見えてモバイル(スマートフォン&タブレット)からのアクセスが5割を越えるようになりました。

実は、エンターテイメント系の題材を扱うサイトでは、より早くからモバイル優勢になっていた事実は知っていました。が、『Handmade Future !』のような、スキル、ノウハウ、イベントレポート、オピニオンを発信するブログは、比較的に保守的な動向を見せていました。

2013年1月〜6月の数字を見ると、モバイル:パソコンの比率が、1 : 1.14となっており、まだパソコンからのアクセスのほうが優勢です。
2014-01-05_1350

2013年7月〜12月の数字を見ると、モバイル:パソコンの比率は、1 : 0.72。はっきりとわかるくらい、明確にスマートフォンからのアクセスが上回るようになりました。
2014-01-05_1351

モバイル優勢になるのは時間の問題だとは考えていたのですが、そのタイミングがついに訪れたようです。

SNSでバズった場合は、モバイルからのアクセスが、パソコンからのアクセスの倍近くを占めるケースもあります。

2013年12月度運営報告|162,900PV、118,129UU、売上135,000円
ユーザー環境は、モバイル(スマートフォン&タブレット)からのアクセスとパソコンからのアクセスの比率が、1 : 0.56となりました。

 

パソコンでの閲覧を基準にブログを構築するのはナンセンス

ブログのデザインや構成を実際にカスタマイズするのは、基本的にパソコンです。どうしても、パソコンでの見た目や機能性を重視してしまいがちです。

ところが、いくらパソコンでの見た目が洗練されていて、ヘッダーやサイドバーの機能が完璧だとしても、スマートフォンで実用的でなければ、過半数のユーザーに「なにこのブログ、見にくいんだけど」と酷評される結果になります。

モバイルとパソコンが拮抗していた状況であればまだしも、モバイル環境がはっきり優勢になった状況では、スマホ最適化に本気で取り組まない理由はありません。というより、パソコンでの閲覧を基準にブログを構築するのは、ナンセンスでしかないでしょう。

みなさんのブログはどうでしょうか? Google Analyticsをチェックしてみてください。

 
ちなみに、モバイル対応は、『Handmade Future !』でも採用している、レスポンシブデザインがおすすめです。

1年前はまだ、デメリットが目立ちましたが、現在は有力な選択肢の一つです。

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

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

2012月

レスポンシブデザインのWordPressユーザ注目。スマホ閲覧時に記事中のAdsense広告をはみ出させない方法

こんにちは! 寄金です。

もうすぐWEBマガジン『Handmade Future !』を書き始めて1ヶ月になります。60,000PVに届きそうな感じ。滑り出しとしては上々ですね。早期に10万PV / 月は超えたいと思っています。

当ブログの初期段階の評価指標は、

  1. 信用度を上げるため、ソーシャルプルーフの増大(=SNSのフォロワーを増やす)
  2. 活動基盤を整えるため、収益の確保

においています。

ソーシャルプルーフの成果については月末に改めて記事を書きます。今回取り上げたいのは、収益のほうです。

見てのとおり、ヘッダー、サイドバー、記事中にGoogle AdSenseやAmazonアソシエイトを設置しています。今月は1万円に届くかどうか、といったところ。

レスポンシブデザインだとモバイル閲覧時にAdsenseがはみ出る

今回、問題になったのは、Adsenseです。当ブログはレスポンシブデザインなので、スマートフォンやタブレットで閲覧すると、デザインを維持したままサイズがぐにゃぐにゃと変わります。

ところが、Adsense広告はサイズ固定なので、画面の小さなモバイル機器で閲覧すると、はみ出てしまうケースがあります。

iPhoneで閲覧すると、デザインからはみ出してしまっているのがわかる。

 

サーバー側で閲覧機器を判断して、表示する広告を切り替える

解決するには、閲覧する機器によって表示する広告を切り替える必要があります。これはWordPressなら簡単にできます。
[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com

手順としては、まずユーザーエージェントを判定してモバイルを定義するよう関数を指定します。次にテンプレートにPHPで、モバイル機器の場合に読み込むコードと、それ以外の場合に読み込むコードを指定します。

こう書くと難解なようですけど、上記記事のとおりにやれば問題ありません。

僕の場合は、モバイル機器では250×250サイズ、それ以外では336×280サイズを表示するようにしています。

 

ただし記事中ではPHPが使えない

テンプレート内、サイドバーや記事直下に表示させる場合は、これですんなり解決します。

サイドバーのAdSense広告。きっちり枠に収まっている。

が、問題は、記事中の任意の場所にAdsense広告を表示させたい場合です。

通常、WordPressの投稿ページでは、HTMLは使えますが、PHPは使えません。閲覧機器によって読み込ませるコードを指定できないわけです。

 

じゃあWordPressの投稿画面でPHPを使えるようにしよう

そこでプラグインを使って、投稿ページでPHPを使えるようにします。

WordPressのエントリーでPHPを利用する方法[to-R]

これで、テンプレートに組み込んだPHPコードが、記事中でもそのまま使えるようになります。

上記プラグイン『Exec-PHP』はエラーメッセージが出ますが、こちらの方法で解消できます。

WordPressにプラグインExec-PHP 4.9をインストール | あれこれ日記 – 一筆啓上

万事解決!

 

広告位置は最適化の途中ですが、現在はこの方法で、書き出しと本文の間に表示させています。CTRは平均と言われる0.2%台よりはいい数字が出ています。

参考までに。

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ページ サイトマップ 更新履歴