JUGEM（ジュゲム）ブログのスマホ版に4つのフリースペースが追加されて大幅にパワーアップ!!

さっそくカスタマイズしてみたのでレビューしてみます。
..._φ(ﾟ∀ﾟ )



ども、ピアノ教室管理人でごわす。


普段はWordPressオンリーのWeb界隈の人でも、好きなブログのひとつにあげるという「JUGEM」。（少なくとも２人は知ってるw）


比較的検索に強いサブドメインと、HTMLとCSS両方ともカスタマイズ可能という自由度の高さ。


月額300円ちょいの有料版JUGEM PLUSにアップグレードすれば、広告を非表示にできる上に独自ドメインも利用可能で画像容量も無制限に。


さらに携帯版HTMLも編集可能という神っぷりが隠れた人気の秘訣なんでしょうか。


管理人もアメブロよりJUGEMの方が扱いやすので好きだったりします。


アクセス数も水増しされたりしませんしね。^^;




そんなJUGEMの唯一の泣き所が、スマホ版の貧弱さでした。


なんせ、スキンというかテンプレートの選択くらいしか出来ることがなかったんですから、スマホ版を好きにカスタマイズするなんて夢のまた夢だったんですよね・・・。

ついこの前までは！
Σ(ﾟДﾟ)ﾊｯ

この記事の目次

1. 時は来た！満を持してJUGEMスマートフォン版フリースペースの登場！
2. 禁断のheadタグ内へのフリースペース追加で出来ることと最大の恩恵とは？
3. 今回スマホ版JUGEMに追加された4つのフリースペースの特徴と使用例
4. スマホ版フリースペースの編集画面はこんな感じ【追記】
5. カスタマイズに適したJUGEMスマホ版デザインはどれか？
6. 賞賛とちょっとした要望

時は来た！満を持してJUGEMスマートフォン版フリースペースの登場！

2014年10月28日、満を持して発表されたスマホ版新機能、それがこのスマートフォン版フリースペースです。


要約すると、有料版JUGEM PLUSのユーザーのスマホ版ブログには、記事部分以外の計4カ所にフリースペースが挿入され、自由にコンテンツを追加できるというもの。


バナーや広告、アフィリタグなどを貼ったり、自社のPRに使ったりなど、使い方はそれぞれ自由。


またそれに合わせて、JUGEM PLUSへのアップグレードキャンペーンも行っているようです。




な〜んだ、有料版への加入促進策じゃん、それ。


いや、だが待ってほしい！
( ﾟДﾟ)ノ ﾊﾔﾏﾙﾅ!!


今回のスマホ版新機能のスゴイところは、計4カ所のフリースペースのひとつが、headタグ内にあるということなんだよ、ドレン。

禁断のheadタグ内へのフリースペース追加で出来ることと最大の恩恵とは？

ブログサービス提供事業者にとってスマホ版は、唯一残された最後のフロンティアであり、収益アップのためのブルーオーシャン。


ユーザーのカスタマイズを制限して、無理矢理な広告や、ブログに関連性の薄いコンテンツをブッコミ放題です。


ましてやheadタグ内なんて、自由にイジらせたくない聖域のハズ。


カスタマイズに関してはザルといっていいほど高い自由度を誇るこのSeesaaブログですら、スマホ版のheadタグ内は指一本触れさせてやくれません。

エリコの壁のごとき鉄壁のガードです。



し　か　し



今回のJUGEMスマートフォン版フリースペースの追加では、禁断のheadタグ内を解放し、カスタマイズを可能にしてくれました。


headタグ内をカスタマイズできることで、

• 外部スタイルシートの読み込み


• 外部JavaScriptファイルの読み込み


• Googleアナリティクスなど外部アクセス解析の設置

など、いろいろと捗りまくります。



特に外部スタイルシートの読み込み。

この機能が登場する以前は、記事内から外部スタイルシートを読み込むなどして、何とか見てくれだけはPC版に近づけるという涙ぐましい努力をしていたわけですが、もうそれも今は昔。


正々堂々とheadタグ内から外部スタイルシートを読み込むことができます。


当たり前ですが、やっぱり外部スタイルシートは記事内から読み込むより、headタグ内から読み込んだほうが、圧倒的に表示のスピードが上がります。


今回のスマホ版JUGEMのパワーアップの最大の恩恵ですね。


では追加されたフリースペースをちょいと見ていきましょう。

今回スマホ版JUGEMに追加された4つのフリースペースの特徴と使用例

こちらが今回追加された4カ所のフリースペースになります。


▲クリックすると拡大します。

公式の画像を丸パクしたんじゃないよ。同じものをパワポで作ったんだよ。
ミンナニハ ナイショダヨ


なお、これらのフリースペースの公開、非公開の設定はそれぞれに可能ですが、表示位置は変更することはできませんゾ。

フリースペース1：headタグ内

これが先ほどご紹介したheadタグ内のフリースペースになります。


外部からスタイルシートやJavaScriptを読み込んだり、Googleアナリティクスなどアクセス解析などを設置できます。


サイトが表示されたときにスクロールせずに見える部分、いわゆるファーストビューとかAbove the foldとか呼ばれる部分の要素は、headタグ内にインラインで<STYLE>タグを書いくことで、多少なりとも表示が早くなると言われているので、そういったモバイルファースト的な使い方もできますよね。


なおJUGEMは画像以外をアップロードできないので、外部からスタイルシートやJavaScriptファイルを読み込む場合は、別途レンタルサーバーや参照可能なクラウドストレージを用意しておく必要がありんす。


管理人はいつも通りエックスサーバーにアップしますた。

フリースペース2：ヘッダー直下

ヘッダー直下のフリースペースです。


使い方としては、

1. トップページへ戻るリンク付ヘッダー画像の設置
2. オリジナルメニューリストの設置
3. 一押しコンテンツへのリンクやキャンペーンバナーの設置

などが考えられます。

今回管理人も上記1と2を追加しました。


ヘッダー画像を追加する場合は、元からあるJUGEMロゴ入りのヘッダー部分を非表示にし、ブログタイトルなどテキスト要素をtext-indent:-9999px;でぶっ飛ばしてから設置すると表示スペースを節約できてGood。


またオリジナルのメニューリストを設置する場合、後述するスマホ版デザインの選択が重要になってきます。

フリースペース3：記事下

記事の下に表示されるフリースペースです。


新着記事や重要度の高い記事へのリンクを画像付きで設置したりと、使い方はアイデア次第なんですが、実は記事とフリースペース3との間に予期せぬいろんなコンテンツが入ってくるので、後述するスマホ版デザインの選択がとても重要になってきます。

フリースペース4：ページナビゲーション下

ページナビゲーションの下に来るフリースペース4ですが、かなり下の方の配置になるので、クリック率など実用性は低いかもしれませんね。

フリースペース5：ページの一番下

フリースペース5はページの一番下、それもコピーライト表記よりも下にあるので、読者に対するアピール力はほとんど期待できないんじゃないかなぁ。


そのかわり、読み込み優先度の低いJavaScriptや各種解析タグなどを貼っとくにはうってつけ。


っていうか、そのために用意してくれたんだね、JUGEMUさん。
(ﾟ∀ﾟ)

スマホ版フリースペースの編集画面はこんな感じ【追記】

フリースペースの編集は専用のページが用意されているので、とっても簡単！


各フリースペースに対応する入力エリアにテキストや画像、動画、HTMLタグ、CSSなどを普通に書いたり貼り付けたりするだけでやんす。


またそれぞれのフリースペースは個別に「公開」「非公開」の設定が簡単にできるようになっています。


ちょっと入力エリアの縦幅が狭いのが玉にキズなんですが、ま、そこには目をつぶろう、うん。

カスタマイズに適したJUGEMスマホ版デザインはどれか？

今回可能となったJUGEMスマホ版のカスタマイズでは、選んだデザインによって難易度や自由度などが変わってきます。


またスマホでの表示速度なども考えて、デザインを選んでおくに越したことはありませんよね。

1.背景画像があるデザインを除外

まずスマホでの表示スピードを考えた場合、背景に画像が設定されているデザインはすべて却下。


「ナチュラル」「かわいい」「クール」「個性的」は一気に除外。
残った「シンプル」の中でも、背景画像があるデザインはすべて対象外。


すると「シンプル」の中でpink wall、blue wall、デフォルト_レッド、デフォルト_ホワイト、デフォルト_ブルー、デフォルト_ブラック、デフォルト_パールブルー、デフォルト_パールピンク、デフォルト_グレー、デフォルト_グリーン、デフォルト_ノーマルの11のデザインに絞られます。

2.初期配置のメニューがワンボタンにまとめられているデザイン

ヘッダー直下のフリースペース2にオリジナルのメニューリストを追加したい場合、初期配置のメニューが設定されているデザインだとメニューが2段になってしまい、とてもウザいことになります。


▲スマホでこんな2段メニューはイヤだ...


しかも初期配置のメニューというのが「カテゴリー」や「アーカイブ」、「エントリー」、「リンク」、「プロフィール」、「コメント」など、まぁ〜どうでもいいというか、PC版サイドバーの脇役たちばかり。


しかし、だからといってまったく非表示にしてしまうと、それはそれで何かと不都合があります。
(´ε｀；)ｳｰﾝ…


そこでこれらをひとまとめにしてワンボタンの中に収めてあるデザインを探すと、「シンプル」のpink wallとblue wallの2つだけになりました。

3.記事下に表示されるフリースペース3の位置を確認

選んだデザインによって、記事の下に表示されるというフリースペース3の位置が大きく異なります。


たとえばデフォルト_パールピンクなどデフォルト系のデザインでは、記事の下に関連するエントリーやカレンダー、フォトアルバムへのリンクボタンなどが配置され、その次にやっとフリースペース3が来ます。


▲スマホ実機で見ると、体感的にもっと離れている印象を受けます。


これだと記事の最後からフリースペース3までずいぶん距離ができてしまい、たくさんスクロールしないと表示されませんから、読者にアピールできる機会が激減すると思います。


またフリースペース3と4が近くなりすぎて、分けている意味がないような...。


そんなことを考慮してデザインと選ぶと、やはり先ほどの「シンプル」pink wallとblue wallの2つだけにたどり着きました。

4.何気にカスタマイズが面倒になるページナビゲーション

記事下に表示されるページナビゲーションも、選んだデザインによってはカスタマイズが非常に面倒になります。


たとえば次のようなページナビゲーションの場合、カスタマイズ途中でもう無理って思って投げ出しちゃいました。
｡゜（ﾟ´Д｀ﾟ)゜｡

前の記事のタイトルとリンク前の記事のタイトルとリンク｜main｜次の記事のタイトルとリンク次の記事のタイトルとリンク

このタイプのページナビゲーションを実際にカスタマイズしようとするといろんな困難に直面する上に、スマホ版トップページ下部にあるページャーとの兼ね合いもおかしくなってしまいます。
('A`)ﾏﾝﾄﾞｸｾ


しかし先程の「シンプル」pink wallとblue wallの2つだと、次のようなスッキリとしたカスタマイズが可能になっているんですよね。

<< 前へ

次へ >>

スマホのページナビはこうでなくっちゃ！

5.結論

スマホ版JUGEMカスタマイズ用デザインは「シンプル」のpink wall、もしくはblue wallがオススメです。



カラーリングがちょっとキツイので、スタイルシートで調整しちゃいましょう。

賞賛とちょっとした要望

今回スマホ版JUGEMにheadタグ内を含め4ヶ所のフリースペースが追加されたことで、カスタマイズの自由度が大きく向上しました。

これは素直に賞賛を贈りたいと思います。
ﾟ･*:.｡..｡.:*･゜ヽ( ´∀｀)人(´∀｀ )ノ･゜ﾟ･*:.｡..｡.:*


しかし、不満点というわけじゃないですけど、同時にいくつかの要望も生じてしまいました。

1.トップページやカテゴリー、アーカイブなどの記事タイトル一覧に、記事内の画像を表示して欲しい

画像のクリック訴求力はとても高いわけですから、トップページなどの新着記事一覧には、記事タイトルだけでなく記事内の画像も一緒に表示して欲しいと思います。


▲これを是非！


残念ながら今回この機能は盛り込まれなかったので、仕方なくJavaScriptでやってみたのですが、各記事から画像を探しだしてきて表示させる処理は、スマホのブラウザにはちと荷が重かったみたいで、表示速度が大幅に低下しちゃいました。


やはりサーバ側で処理された方がスムーズなんでしょうね。

2.トップページやカテゴリー、アーカイブ、記事などページの種類ごとの判別ができるようにして欲しい

現状のスマホ版JUGEMでは、トップページやカテゴリーページなどと記事単体ページを見分けるための属性値などがありません。


そのため特定の要素を記事ページでは表示し、トップページでは非表示にするなどのスタイルシートでの指定が困難なんですよね。


PC版ではJUGEM独自タグを使ってページの属性を追加できるので、同じように、あるいは別の方法でもいいので、ページの判定ができるような属性値を是非オナシャス。
m(_ _)m



* * * * * *



というわけで、今回はJUGEMスマホ版フリースペースの追加によるカスタマイズのレビューでした。


なおスマホ版のフリースペースを使うには、有料版のJUGEM PLUSにアップグレードしておく必要がありますのでお忘れなく。

⇒ JUGEM PLUSはコチラから。



それではまた。
(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ


【オヌヌメ】

ペパボの教科書 インターネットサービスではじめる、あたらしい自分

ロリポップ! 、JUGEM、パブーなど、ペパボのウェブサービスを愛用するクリエイターたちに聞いた素敵な話を、とっておきの活用法とともに紹介。※ペパボはJUGEMの運営元です。amazon

このブログの目次