姉妹サイト『PLROG』がリニューアルオープンしました

姉妹サイト『PLROG』のリニューアルが終わりましたので、更新を再開します。

『PLROG』とは？

今年の4月に『PLROG』という姉妹サイトが誕生しました。『Moxbit』は“ジャガアポー”、“パイナポー”、“シナモン”の3人が登場し、WindowsやらMacやらの情報をお伝えするサイトですが、『PLROG』はキャラクター要素を大きく減らし、“売れるブログの作り方”をご紹介するサイトです。

『PLROG（プログ）』は“売れるブログ”の育て方を皆様へご提供するサイトです。

インターネットで「売れるブログを作る方法」と検索すると、HTMLの最適化やSEOの対策など技術的なことを指摘するウェブサイトがほとんどです。

『PLROG』ではそのような技術的な方法をお教えするのではありません。

• ブログの定番機能の必要性を考える“コンテンツの必要性”
• 我々人間が無意識で行動する“心理学”
• 色に対する人間が持つイメージである“色彩心理学”

以上3つの観点から“売れるブログ”の作り方を掲載していきます。

PLROG - インフォメーション より抜粋

しかし、公開してから半年も更新は続かず…。コンテンツがまったくといっていいほどありません。

そこで今回、『PLROG』のデザインと内部処理を大きく変更し、気持ちを改めることにしました！

この記事では、どこがどう新しくなったのかを説明していきます。

1. 「『PLROG』が売れなかったら閉鎖」の発言を撤回！

『PLROG』公開当初は、

“売れるブログの作り方”を教えるサイトが売れていなければ意味なくね？

という考えを持っていて、“公開から1年後（2013年4月）までに月間10万PVを突破できなければ閉鎖する”というポリシーのもと、運営していました。

しかし今回のリニューアルによって、この発言を撤回したいと思います。

撤回した理由は以下の5つです。

• 更新頻度がひどいのでコンテンツが増えない
• コンテンツが少ないのに売れるわけがない
• 100万PVを突破する自信がない
• 100万PVを突破する自信がない
• 100万PVを突破するなんて非現実的

というわけで、今後『PLROG』が売れても売れなくても閉鎖しません。売れなかったら泣きながら売れるようになるまで更新します。

2. 新しい表情“興奮”、“いらつき”、“つぶやき”、“じと〜”を追加

『Moxbit』に比べ、『PLROG』ではキャラクター要素をかなり減らしています。とはいっても、『PLROG』では“ジャガアポー”のみが登場し、毎回、記事の最下部で“管理人のつぶやき”として一言コメントが載っています。

当サイトの特徴の1つでもある表情機能『Bourbon』。先ほどの“管理人のつぶやき”部分にも、この『Bourbon』は搭載されていますが、搭載されていた『Bourbon』のバージョンが古く、『Moxbit』で追加された新しい表情にも対応していませんでした。

そこで最新の『Bourbon』であるバージョン3.1を『PLROG』に搭載。このバージョン3.1は『Moxbit』に搭載される予定のもので、先駆けて『PLROG』に搭載しました。

執筆時現在の『Moxbit』が対応している表情“いらつき”と“興奮”に加え、バージョン3.1で対応する“ぶつぶつ”、“ジト目”を追加しました。

3. iPadでの閲覧に最適化したiPad版レイアウト

PCで新しい『PLROG』を見ても、「どこが新しくなったの？」と思うでしょう。それもそのはず、PC版レイアウトは従来とほとんど変わっていません。

今回のリニューアルで大きく外観を変えたのはiPad版レイアウト。今までPC版レイアウトをそのままiPadへ表示させていましたが、今回はiPad版レイアウトを作成し、それを表示させるようにしました。iPad版レイアウトでは、ランドスケープ（横向き）モードでの閲覧はPC版とほぼ同じ外観を、ポートレイト（縦向き）モードでの閲覧は縦向きに配慮した外観を実現しています。

PC版レイアウトを見ると、右側の一部のナビゲーションがスクロールに追従してくることがわかります。この追従は“JavaScript”というプログラミング言語によって実装されていますが、iPadでは、PCの“JavaScript”による挙動と同じ挙動を再現できません。

そこでiPad版レイアウトでは“CSS”というマークアップ言語で、この追従機能を擬似的に実装しました。iPadのランドスケープモードで『PLROG』を見ると、右側のナビゲーションがしっかり追従してくることが分かります。

ポートレイトモードでは、記事のみに集中できるように、右側のナビゲーションが表示されないように設計しました。PC版レイアウトで閲覧したとき真っ先に目に入る『PLROG』のカテゴリナビゲーションは、ポートレイト時の縦幅を考慮して縦置きにしました。

Webデザインで重要なのは、『iPad』のようなモバイル端末であっても、サイト内すべてのページにアクセスできるようにすることです。ポートレイトモードによって失われた右側のナビゲーションは、すべてのページの最下部に表示するように設計しました。

もちろん、『Retinaディスプレイ』にも対応しています。

4. iPhone版レイアウトの改善

iPhone版レイアウトの見た目に大きな変化はないように見えますが、実はかなり大幅に改善しています。

まず、記事のヘッター部分。従来はカテゴリ名と投稿日時のみでしたが、今回のリニューアルによってコメント数も表示するようにしました。

僕が読者からのコメントに返信するとき、自分が書いた記事は読まずに最初からコメント欄まで移動します。そのとき、いちいちスクロールするのは大変でした。そのため、コメント欄までの移動リンクが欲しかったのです。このコメント数も表示する改善は、読者よりも僕にとってのメリットの方が大きいですね。

iPhone版レイアウトの『Bourbon』も、『Moxbit』のiPhone版レイアウトの『Bourbon』と同じスタイルに変更。ただし『PLROG』のカラースキームにあわせて、配色は少し変えてあります。ランドスケープモードにすると、顔アイコンの横にコメント本文が移動するのも『Moxbit』と同じ仕様です。

iPhone版レイアウトの改善リストの中に、『iPhone5』の対応も含まれていました。『iPhone5』では縦の長さが伸びたので、ランドスケープモードにすると従来のiPhoneよりも横幅が増えたことになります。つまり、従来のiPhoneよりも一度に表示できる情報量が増えたわけです。

新しい『PLROG』のiPhone版レイアウトでは、従来のiPhoneと『iPhone5』によって表示方法を少し変えてあります。

上の画像を見てもらえば分かりますが、『PLROG』のトップを『iPhone5』のランドスケープモードで表示すると、ロゴと3つのグローバルナビゲーションを表示できます。従来のiPhoneでランドスケープモードにしたとき、『iPhone5』ほど横幅がないことを考慮して、『PLROG』トップでは、ロゴと2つのナビゲーションを表示するようにしています。

『PLROG』を閲覧していくと、他にも、従来のiPhoneで見たときと『iPhone5』で見たときの違いが分かるでしょう。

iPhone版レイアウトも、もちろん『Retinaディスプレイ』に対応しています。

これからの『PLROG』にご期待ください！

というわけで様々な改善をしたわけですが、やはりコンテンツが充実していなければ意味がありません。

今回のリニューアルによって僕の“『PLROG』を更新したい感”がグングン上昇してきたので、『PLROG』の更新を続けていきたいと思います。

今後の『PLROG』にご期待ください！