こんにちは。
Cocoonカスタマイズが趣味かよってくらいいじりが止まらないLeoです。
まーだやっとんかよ。
多分もうやめます！！
先日こちらの記事で、一旦カスタマイズはやめると宣言していたのですが、諸事情あってもう一度”イチ”からいじりなおしました。
- 完成したはずのCocoonのカスタマイを見直した理由
- 変更したことあれこれ
- Cocoonの可能性
MoKuJi
再カスタマイズに踏み切るまでの経緯
Cocoonは無料テーマとして最強なことは周知のことですが、無料テーマというのは割と”カスタマイズ前提”なところもあります。
ボクはWordpressでブログを始めてからはGushだったりStingerだったり、そしてCocoonの前進であるSimplicityなどで結構カスタマイズを加えて使ってきたのでその辺の知識やノウハウ、やれる気持ち的なものは十分あるはずなのでそこに心配はありませんでした。
「有料テーマを買うべき人」とされる人には、こういうカスタマイズの知識や技能がない人が入りますが、ボクはそういう意味では有料テーマを買う必要はない人です。
カスタマイズは楽しい＆勉強になる
知識がない人や、「時間がもったいない」人、もしくはさっさとサイトを作って「書く方に集中したい」人などが有料テーマを買うべき人だと思いますが、
ボクも人気テーマでいうと、「THE THOR」や「AFFINGER5（WING）」は持っていて、別のブログで運用していますし、他にも多分20種類くらいの有料テーマを購入し、サイト制作してきた実績があります。
でも、パーソナルブログのLEOLOGではトールもアフィンガーも使っていない理由は、Cocoonがいっぱいカスタマイズできて楽しいからでもあります。
前から書いていますが、Cocoonを導入した6月初旬から約2ヶ月、カスタマイズに述べ何時間使ったかわかりません。その膨大な時間を時給換算するなら、今のマイCocoonの価値は有名有料テーマ10個分とかになってもおかしくないと思います。
が、
カスタマイズの過程でCSSの記述だったり、PHPのルールだったり、JavaScriptもHTMLもいっぱい検索して情報を得ます。
この中でめっちゃ勉強になるんですよね。
前にPHPやWordpressの基本から学ぼうと本を2冊買って、パソコンから離れて勉強してみたことがあったのですが、全然頭に入らなくて。。(´；ω；｀)
ゆうたら、本開いて英語勉強するより、
サクッと海外行って武者修行する方が英語が話せるようになる。
みたいなのと同じですよね。
基礎知識は絶対必要ですが、実践以上に身に付くものってないんですね。
一生カスタマイズしているわけにもいかない
でも、だからと言って終わりなきカスタマイズの日々を永遠に過ごすわけにはいきません。ある意味で答えのないカスタマイズの旅をどこかでランディングさせなければいけないので、そういう意味で一旦の答えとしてCocoon Demoを作ったわけです。
この時点では満足してたので、本当に終わらせる予定でしたよ！
終わってへんがな
はい、
終わらなかった理由は1つ！
直せない破綻があったから
そうなんです、自分のチェック環境であるiMac 21.5″、MacBook 13″、iPad 9.7″、iPhone XS、iPhone 7ではいけたはずで、その確認を持って完成の予定やったんです。
致命的な破綻を見つけてしまった！
が、たまたま立ち寄った携帯ショップでiPad miniでの表示を見たところ、サムネイルがはみ出す系の破綻を発見してしまいました。
それで焦ってAndroid系のスマホもチェックしたら、それは大丈夫だったものの、気になってiPad 9.7″とiPhone群の横向き表示を確認したら似たような破綻を発見。
帰宅後調整を試みるもボクの知識、力量では完全な解決に至らず。。。
Cocoon Demoにて紹介しているカスタムの状態にするにあたりかなり行ったり来たりを繰り返したため、どの部分が悪さをしているのかもわからず、
これは一度リセットするしかない
と思ったわけです。
ってことで、再度”イチ”からやる決断に
なるほどねぇ
「ゴール」と「目的」を決めて再出発
”イチ”からやり直すとはいえ、これまで書いたカスタマイズ用のコードを完全に破棄するつもりはないので、ノートパッドで横に置いて、取捨選択しながらstyle sheetに記述を加えていくやり方でやりました。
その際、
- ゴール（終着点）を決めること
- カスタマイズの目的を明確にすること
以上をちゃんとしようと思って、しっかり計画を持って、「何のためにカスタマイズするのか？」ということを考えました。
それを考える中で、
という疑問にもぶち当たりました。
そしてそれらの答えが、
ボクは一応”フォトグラファー”もやっていて、それってつまり、”アーティスト”なんですよね。
美意識は人それおぞれ好みが違うこともあるとして、しかし、
どうせ作るんやから美しいブログを持ちたい！
この思いが止められないということやったんです。
ボクのゴール
なので、
ボクのゴールは、
- 自分で納得いくデザイン（美しさ）を持つブログであること
だとわかりました。
つまり、ずっとカスタムカスタムしてきたのは、「これがわいの美しいと思うデザインや！」というところに行きつくための芸術活動やったということです。
一方、そもそも論ですが、なぜブログをやっているのか？ということも同時に考えました。
ブログをやっている目的（理由）
いつも書いていることですが、ボクはブログ歴は15年とベテランです。
しかし、多くの「ブロガー」と呼ばれる方々の様に収益化されていたり、PVが日に数千〜数万ある様な方々の活動とは全然違って、ほぼ”自己満足”でやっていました。
2012年、本格的にフォトグラファーとして活動しようと思った時くらいですね、セルフブランディングの一環としてブログの集客を意識したのは。
当時はだから、「Leo Miyanagaってこんな人！を発信するブログ」というのがサブタイトルでブログを書いていました。
しかし、
有名ブロガーになる様なことはなく、こじんまりやってきていて、別の本職も忙しくなったのもあって、本当にブログは趣味でした。
趣味として、
「こんなおもろいもん見つけた！」とか、「こんなことしたー」みたいなことを日記感覚で書いていく感じですね。
2020年、今はどうですか？
そして今、改めて色々考えた結果、
そんなに常にバズり続けることは求めないですが、でも愛読してくれる”ファン”がいる様なブログにしたいな、という思いが追加されているイメージがあります。
正直このブログは「雑記ブログ」ですので、固定ファンがつくには難しい前提があります。
が、
もう少しキャラ立ちを意識して記事の内容を整理していけばちょっとくらいはブックマークされることもありえるかな？とも思っていて、
今後はそっちも目指そうかと思った感じです。
他に運営しているブログはほとんどがカテゴリーが明確な「専門系ブログ」で、イメージとしては「阪神ファンの応援日記」とか、「兼業主婦の節約ダイアリー」とかそんな感じですね。
収益化（アフィリ）目的で、やっているブログもあります。
やっぱりアクセス数とかリピート率を見てもそれらのブログの方が断然多いし、もちろん収益性もそっちの方が桁が違うレベルで上です。
では、そんな雑記ブログでもっと読まれるにはどうすればいいか？
自分に置き換えて考えた時、やっぱり「読みやすさ」は大事で、もしかしたら自分だけかもしれませんが、ごちゃごちゃしたデザインだったり、色だったりするブログより、オサレで洗練されたイメージのサイトをよく見る気がしています。
カフェに例えると、
ごちゃついた喫茶店より、オサレなカフェでゆっくり読書する方が気持ちいい。
みたいな感じです。
なので、
もっと読まれたいな、というのを「目的」に設定した場合、ゴールは、「来客が心地よく読めるブログ」にしていくことだと思ったわけです。
よくわかります
ゴールへの道のり
で、
そんな「ゴール」が見えてきた中で、そこにたどり着くために何をしなければならないのかな？ということを考えました。
そしてふと湧いたのが、
いっそ有料テーマにしたろかな
っていう考えでした。
有料テーマへの移行を考えた4つの理由
なぜかというと、
- デザイン破綻は多分しない
- エディタ自体の機能性はCocoonより上になる
- 他のブログですでに使っているものを使えば実質無料
- 持っていない有料テーマも試してみたい
こういった気持ちがあったからです。
今回iPadでびっくりした破綻は、正直このブログのPVとか見る人の想定を考えたとき、捨ててもいいと思えるレベルでした。
基本スマホかパソコンで見ているというのはAnalyticsでもわかってるし、もういいかなって。
しかし、何十時間もかけてカスタマイズしてきた結果にそんな、環境がハマればかなり嫌な感じの表示になる破綻が残っているのがどうしても嫌でした。
それは無料テーマをカスタマイズして使っている時過去にもなんども経験してきたことなのである意味逃れられないことかなーと思う一方、有料テーマは対応機器の種類が記述を見てもかなり広いことがわかりますし、その辺の不安はないという考えがありました。
有料テーマは基本ほとんどCSSの追記はしないし（カスタマイザーなどでいじれるようになっている）、変な失敗もないです。
そして何より、エディタの機能面は、Cocoonも無料でここまで親切なのはすごいと思いますが、やはり有料テーマはさらに上を行っていて、かなり充実しているのは間違いありません。なのでより「執筆に力を入られる」という意味でも有料テーマに変更する考えに動きました。
そして、有料テーマと言っても、すでに持っているテーマなら追加料金は払わないので、ボクにとっては実質無料だということでハードルがありません。
まあ別記事で書いていますが、それらのテーマをLEOLOGで使わないでいた理由があるので、THE THORとかAFFINGER5をこのブログに適用するつもりはないんですが、
そうなると、
という流れですね。
で、
有名どころをかなりリサーチしました。
有名＆人気＆評価の高い有料テーマを調べてみた
- JIN
- SANGO
- STORK
有名どころから上記3つをピックアップしました。
ブログの目的や好みの方向性で他にも色々ありますが、ボクの方向性的にこの辺をチェック。
で、これも別記事に書いていますが、「複数ブログで使える将来性」を考えて、JINとSTORKは残念ながら落選。
→SANGOを深掘りしたわけです。
SANGOを知らない方は以下からどうぞ。
↑見た方は「あっ」なりましたよね、絶対。
だってめっちゃ寄せてるから（笑）（笑）（笑）
いやね、
買おうと思ったんですよ、本当に。でも書いませんでした。
有料テーマを買わなかった理由
JINやSTORKも人気のテーマで感じも似ている部類だと思いますが、1アカウントにしか使えないため選択肢から漏れましたが、SANGOについて調べているととてもオシャレで、洗練されたデザインがよろしいことがわかりました。
何より、ブログカスタマイズで情報を集める際にSANGO作者のSARUWAKAさんのサイトにはたくさんお世話になっているので、返礼の意味も込めて買ってもいいかなと思ったんです。
もしかしたらLEOLOGに適用することはなくても、ボクが他でやっているブログに使ったり、今後ローンチ予定のいくつかのブログでの使用も想定すれば11,000円は高くないと思えたし、
ほんとに、ポチる直前まで行ったんです、よ。
しかし、
- デザインの大きなカスタマイズができない
- 色合いなども含めてSANGOデザイン
- つまり、”似てるブログが多い”
- アフィ向きではないらしい
- Cocoonが好き
- カスタマイズした履歴も財産
細かくあげればもっとあるのですが、その辺は別記事に書いているので気になる方はそちらを読んでいただくとして、
SANGO最大の特徴は、最初っからかなり完成されたデザインであることだと思いましたが、
逆にいうと、そのまま使っている人が多く、似たブログが量産されているという事実に繋がる点が気になりました。
最初の方に書いた通り、知識がなかったり、カスタマイズがだるい（できない）、さっさと書きたい感じの人はサクッと有料テーマを買うべきです。
なので、SANGOのような洗練されたデザインのテーマを買われる方は、結構デフォルトのまま使っています。
そして、それを見越してか、SANGOは最初のままから大きくカスタマイズするテーマではなく、カスタマイズ事例もあまり多くないんですよね。
ボクはCocoonのstyle sheetに6,000行以上の記述をブチ込んでいます。
表示速度はそんなに変わらないのでそれだけ入れても大丈夫そうですが、これだけの記述を理解・管理するのは簡単ではないです。
イメージとしては、ユニクロと無印で服を買ってきて、100均一で帰るあれこれで自分なりにオサレな服をカスタムリメイクしている感じです。
すでにめっちゃオサレで洗練されたブランド物の服を何万円か出して買えば、買ったまま着て完成ですが、数千円で揃えたものを時間かけて作るという対比ですね。
服飾系の方はきっとリメイクとかオリジナルメイク自体が好きじゃないですか？
ブログデザインも同じやと思うのです。
ボクは車についてはからっきしなんですが、友人は車いじりが大好きで、メーターをアップグレードさせたり、燃費が良くなる液体を試したり、ルームミラーにナビが映るようにしたり、なんやかんや週末ごとにいじっています。
車についてわけわからないボクはワイパー変えるだけでもお店に行きますし、どれがいいかとかも店員さんの言いなりです（笑）。
別の友人はアクセサリー作りが大好きで、自分だけではつけられないので、作ったらメルカリで売ったり、友人にあげたりもしていますが、「最高傑作」が永遠にできないらしく、毎週10個以上作っていて、それを見てボクは、材料費とか考えたらお店で可愛いやつを見つけて買っちゃう方が早いと思っちゃうんですが、彼女に言わせると、
作んのが楽しいんやん！！
ってことですよね。
ボクにとってCocoonいじりというかWordpressいじりは同じで、
Themeforestとか見てるとマジで完成度高い、文句の付け所がないような、というか、数千円でこんな高機能でハイファッションなテーマ買えてええのか？って思う次第ですが、
同時に、
とも思ってしまうんです。
Cocoonへの愛着も
そして、
ここまで何十時間もかけて育ててきたCocoonへの愛着もあります。
いっぱい調べて、ボックスとか装飾パーツとかいっぱい作りました。
それらの一部は有料テーマならもとから備わっているものですが、頑張って作ったものへの愛着があります。
そして、逆に有料テーマでも備わっていないものもあって、それらは結局その有料テーマにCSSぶち込んで使うわけですよ。
だったらCocoonでええやん？
ってなるわけですね。
ここで少しだけ気になるのがSEO対策の件。
Cocoonのことを調べているとたまに「有料テーマに変えたらいきなりアクセスが増えた！」みたいな記事も見かけます。
有料なだけあって、SEO対策も上級なのかなーと思うのですが、
でも論理的に考えて、Cocoonと有料テーマでそんな劇的な差ってないハズなんですよ。
確かに、ギミック的に色々対策は取られているのだろうと思いますが、
Google先生のアルゴリズム的に、テーマ側でできることよりも、
だと思っています。
ボクはSimplicityで作って、ほぼデフォルト状態のまま放置していたブログがあるのですが、なぜか1つの記事だけアクセスがめっちゃあって、
数年ブログ自身更新もしていなくて、
それはGoogle的にはマイナス評価になるハズなのに、その記事はカテゴリ内では検索結果3位以上を1年くらい維持していたことがわかって、
結局検索結果に上位表示されるための要素は記事の質、つまり中身だと思いました。
居心地の良さも大事（かも？）
先ほど、
洗練されたデザインのブログにしたいと書きましたが、
これは自己満足的要素が大きいです。
ただ、
さっきのカフェの例えをもう一度使うと、
居心地のいいカフェだと「また来たいな」って思いませんか？
「もっと長くいたいな」って思いませんか？
ブログも同じで、
例えばCSSの情報を探している時でもいくつかのサイトを見ますが、
デザイン的にごちゃついていたり、古くさかったりするページは回避してしまう傾向があります。
SANGOのSARUWAKAさんのページはそういう意味でも見やすく、そして心地よく読ませていただけます。
Google先生は、ページを訪れて、その後の行動をどこまでフォローできるかわかりませんが、クリック率と離脱率（検索結果ページへ戻ること）は感知できます。
ゆうたら、住宅展示場で、外観をぱっと見て、「この家見て見たい」と思って入ったら、中が「思ってたんとちやう」と思ったら出ますよね？
それを監視カメラでチェックする人がいたら、「あの展示ハウスはあかんな」って評価しますよね、きっと。
逆に、入ってから全然出てこないことを知ったら、「めっちゃおるやん、興味持たれるんやな」って思います。
同じような情報はネット上にいくつも並ぶことはありますよね。
例えばボクが書いている「PHOTO LESSON」でも、同じ情報はネット上に山ほどあって驚きません。
しかし、読んでくれた方が、「Leo氏の話はわかりやすい」と思ってくれたらまた見にきてくれるでしょうし、「なんかこのブログ読みやすい」と思ったらずっと滞在してくれるでしょう。
逆に、「何書いてるかわからんな」って思ったら最後まで読まずとも離脱するし、戻ってくることもないですよね。
なので、
文章の書き方の工夫は当然ですが、「ずっとおりたいな」、「何回も読みたいな」と思うようなデザインって大事なんやろうな、って思うわけです。
ってことで、
- SANGOのデザインの方向性はかなり好きだなと思ったけど、
- 自分なりのカスタマイズ性がある方がいいし、
- Cocoonに今まで施してきた色々も大事やし、
- このデザインに寄せるとしても、他の運営サイトで使う将来はなさそうだな、
などなどのことを考えてSANGO購入は（一旦）やめることにしました。
奥が深いねぇ
もぐもぐタイム始まった（笑）
SANGO風にカスタマイズ
なんだか、前提的な色々がめちゃ長くなってしまいましたが！
前のデザインは一覧でもアイキャッチがどーーーんとでかく主張していて、今の最新デザインと全然方向性が違いました。
SANGOに寄せてしまった理由
アイキャッチは割とこだわって作っているので、そういう意味でもああいうデザインにしていたんですが、
SANGOを調べる中で、
- 色合いのこと
- Googleがマテリアルデザインが好きなこと
- モバイル版との相性
などを色々知り・考えました。
先ほどから居心地の良さについて書いていますが、SANGOは「居心地の良いデザイン」を謳っているテーマで、その良さについて自身で宣伝的に書いているページを熟読する中で、共感・共鳴することろが多いことに気づきました。
SANGOのページは全体的にパステル寄りのブルーになっていますが、背景も一見灰色ながらちょっとブルー要素が含まれています。
きっと目にも優しいし、主張通り、どこか居心地のいい雰囲気で満たされています。
イキフン良いカフェが木材とか、植物が多いのと同じで、人が居心地いいなって思う要素ってなんらかの法則があるのでしょう。
もちろんWebデザインの世界にも流行り・廃りはあるのでこのデザインがずっとトレンドというわけにはいかないと思います。
マテリアルデザインというトレンド
昔MacやiPhoneで多用されていた「スキューモーフィズム的」デザインは、iOS 7登場時急にフラットデザインへと置き換えられ世間がガラッと変わったという歴史もあります。
昔は立体感を出して、本物の素材に近い質感を演出するのが流行っていたのに、急に平らで、シンプルなデザインに主流が変わりました。
最近ではブランドロゴなんかもフラット化・シンプル化路線にあります。
マテリアルデザインはフラット化の次のステップ的な方向性でもあり、しばらくはトレンドは続くのかなと思いますのでそんなマテリアルデザインを意識したSANGOは現在の主流でもあり、とても気になった訳で、
参考にしつつリデザインを使用、と思ったのです。
んで、
色々中略してたら、
わけです（笑）。
ほんじゃあSANGO買っとけよ！
という話に戻るわけですが、
実はSANGOに変えると面倒なことも多いんです。
それは、Cocoon独自のショートコードを書き換える作業や、目次機能がデフォルトで備わっていないSANGOには再びTOC+を設置しなければならないなど、なんですけど、
さっき書いたSEOとか簡単に目に見えないものもあるとはいえ、
カスタマイズでほぼできちゃったし….
というのが本音かも知れません。
LEOLOGを見ていただいたらSANGOをよく知っている方なら思っていただけると思うし、知らない方も見てきてもらえればわかると思います。
ほぼ再現できています。
いや、丸パクリするつもりではないんですが、
記事本文側にはここまでやってきたLEOLOG独自のデザインを多用していますし、
カテゴリーのデザインとか、コメント欄とか全然違うやつもあるので、LEOLOG独自のデザインってことにしましょう。
もしかしたら、
サクッとSANGO買えば幸せになれるかなーって一瞬ほんまに思ったんですが、
「PORIPU」なんかのアドオン的子テーマが出ていることを考えても、やっぱりそこが完全なる終着点にはなり得ないと思ったのです。
だったら、Simplicity時代から使い慣れたCocoonをアレンジしまくる方が色々メリットが多いと思ったのが（現時点での）最終結論でした。
総括・まとめ
以上、
ちょっと話が長くなりすぎましたが、こんな経緯・理由で一旦打ち止めにしていたはずのcocoonカスタマイズをもう一度やり直し、
そして、
サイトデザインを全体的にSANGO風に仕上げる結果となりました。
今回のカスタマイズを含めたCocoonカスタマイズについてまとめたページと、自作したパーツも合わせてまとめている（本当は自分がチェックする用の）ページも公開しているので、Cocoomのカスタマイズを楽しんでいる方・悩んでいる方は参考にしてみて下さい！
SANGO風になる前のサイトイメージをチェックしてみたい方は、こちらのCocoon Demoページをご覧下さい。
