ブログハックvol.3「デザインとcocoonカスタマイズ」

ブログ作りで役に立ったことなどをまとめたブログハックシリーズ、第3回目は「デザインとcocoonカスタマイズ編」です。

ブログデザインの裏話やカスタム内容を紹介できればと。

ブログのテンプレートは無料テーマのcocoonを使っているんですが、CSS含め少しカスタマイズしているので、その辺を一挙まとめて紹介しております。

そこまで凝ったことはしていませんが、何かしら参考になるものがあれば幸いです。

デザインの構想
1. 外観の方向性
2. 構造の方向性
パーツ別の設定とカスタマイズ
細かい装飾周りのカスタマイズ
自由にいじれることの面白さ

デザインの構想

僕のデザインの考え方は、第2回目のブログハックで紹介した「みんなが思わずお金を払いたくなる30の価値」をベースにしています。

僕の場合は「美的にカッコいい」「整理されている」などの価値をブログで表現したいと考えていたので、これらの要件をいかにデザインへ落とし込むかが考えるべきポイントでした。

デザインに落とし込む上でいくつか方針を作ったのですが、どんなトーンでまとめるかという外観面と、何をどこに配置するかという構造面に分けてまとめると次の通りです。

外観の方向性

外観のざっくり方針は以下2点です。

モノトーンベース
写真が目立つ

モノトーンベースにした理由は、僕が好きなThe minimalistsのブログがモノトーンベースで読みやすくカッコいいと思ったから。

なお、ベースとなる黒はただの黒ではつまらないので絶妙な色合いの黒をチョイスしていますが、これもThe minimalistsのサイトで使われていた色コードを参考にしました。

写真が目立つようにしたいと思った理由は、その方が「美的にカッコいい」という価値を表現しやすいと考えたからです。

構造の方向性

デザイン構想時のメモ — 現状と異なりますが、これが構想時に色々書いていたメモ。

構造のざっくり方針は以下の通りです。
※トップページの話です。

ファーストビューでブログの内容が想像できる
ファーストビューで主要カテゴリが分かる
ファーストビューで新着記事が分かる
スマホでメニューを開かなくても回遊できる

1〜3がファーストビュー（スクロールせずに最初に見える画面）の話ですが、ここにこだわった理由はファーストビューが印象を大きく左右すると仮説づけたからです。

これは僕の感覚なのですが、どこかサイトのトップページを訪れた際、

どんなサイトなのか
何が書かれているのか
更新されているのか

といった情報を0.5秒くらいで感じ取って、読みたいか否かを判断している気がします（いわゆる第一印象）。

なので、究極的には内容・主要カテゴリ・新着記事が0.5秒で認識できるようなファーストビューを作りたいと考えました。

4はスマホのメニュー（よくある3本線のボタン）の話です。

メニューを開かなくても回遊できるようにしようと考えたのは、メニューを開かなければ辿り着けないという構造は不親切だと思ったし、そもそもメニューはそんなに頻繁に使われるものではないと考えたからです（後述）。

パーツ別の設定とカスタマイズ

ここからはパーツ別のカスタマイズ内容をざっと紹介していきます。

cocoonの参考ページのリンクとともに、一部コピペで使えるCSSも記載しました。

ロゴ

ロゴはiPadアプリのArtstudio Proで作成しました。

Welcome to Lucky Clan | Lucky Clan

作るときに参考にしたのはAmity_senseiさんの動画。

「少しだけ、でも飛びっきり良いものを。」というサブタイトルを付けているのは、MINIMALOGという名称だけでは内容を想像できないからです。

内容が想像できないのは、「ファーストビューでブログ内容が想像できる」という方針に反するので、サブタイトルで補った感じ。

ちなみにアップロードしている画像の元サイズは1000×200、ロゴサイズ設定で指定しているのは300×60です。

この設定で、PC・スマホ・AMP全てのページで丁度良いバランスになりました。

何十パターンも試して行き着いたバランスでして、結構苦労したところです。

ヘッダーのロゴを画像に変更する方法

ヘッダーにあるロゴを用意した画像に変更する設定方法です。

グローバルナビ

グローバルナビにはまとめ記事を配置しています。

そのまとめ記事から、ブログ内の主要記事に回遊できるように設計しました。

このようにした理由は、初見の場合はカテゴリから選んでもらうのではなく、まとめ記事から回遊してもらう方が見て欲しい記事に辿り着いてもらいやすいかもと考えたからです。

PCと違って、スマホでは横にスクロールできる形にしています。

理由は、縦に並べてしまうとファーストビューが圧迫されて、配置できる要素が少なくなってしまうから。

当然、横スクロールしないと見れないリンクは必然的にクリック率も低くなるでしょうから、隠れてしまう部分にはクリック率が低くても良いリンクを配置しています。

隠れている要素＝それほど重要でない要素、というのを、デザインを作る上での基本思想としました。

なお横スクロール化は、cocoonの機能では対応できなかったのでCSSで対応しました。

グローバルナビの上下に枠線を付けるカスタムCSS

/* グローバルナビ上下枠線 */
#navi{
     border-bottom:1px solid;
     border-top:1px solid;
}

グローバルナビをスマホで横スクロールにするカスタムCSS

/* モバイルトップメニュー */
@media screen and (max-width: 480px){
    ul.menu-mobile{
        overflow-x: auto;
        overflow-y: hidden;
        display: flex !important;
        flex-wrap: nowrap;
        font-size: 14px;
        justify-content: flex-start;
        padding: 0 1em;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    ul.menu-mobile > li{
        padding-right: 1em;
        white-space: nowrap;
    }
    ul.menu-mobile　.item-label{
        white-space: nowrap;
        font-size: 14px;
    }
}

通知枠

全ページのグローバルナビ直下には通知枠を配置しています。

どのページに訪れても新着記事が分かるようにする
定期的に更新されているブログであることを知ってもらう

というのが主な設置意図ですが、「デザイン観点で黒い帯があった方がデザインが引き締まるから」という理由もあります。

これはcocoonにデフォルトで付いている機能です。

サイト全体に表示されるメッセージ通知エリアの設定方法

サイトを訪れた方になるべく見てもらいたいメッセージを表示したり、ページ誘導するための機能です。

記事一覧

記事一覧の表示方法は、縦型カード2列を採用しています。

理由は画像が大きく表示されるので、綺麗に撮った写真をアピールできるからです。

また、3列ではなく2列にしているのは、PCでは3列目にサイドカラムを表示させて回遊しやすいようにしたかった為。

なお、スマホは画面が小さいので、1列で表示されるようにしています。

エントリーカードの設定方法（一覧ページのカードの種類）

インデックスページ（一覧ページ）のカードスタイルの見本です。スタイルの変更方法も。

モバイルメニュー

スマホのメニューはフッターモバイルボタンを採用しています。

メニューはヘッダーに付けるという選択肢もありますが、InstagramやAmazonアプリのメニューがフッターに配置されていることから、フッターの方が使いやすいのかもしれないと考えフッターに配置しました。

ただ、このメニューが使われることはほとんど期待していません。

なぜなら、AMPページではこのメニューが表示されないからです（※当ブログはAMP対応しています）。

たとえ表示されたとしても、毎回使われるようなものではなく、使用されるシーンは限定されるのではないかと考えました。

ですから、メニューは基本的に使われないという前提で設計しており、「このフッターメニューを押さないと辿れない」みたいな導線は存在しないようにしています。

（それでも設置している理由は、下までスクロールしなくてもランキング等にアクセスできるというメリットが一応あるからです。）

フッターモバイルボタンの設定方法

スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

細かい装飾周りのカスタマイズ

記事内の細かな装飾周りも多少カスタマイズしているので、その辺のまとめです。

ラインマーカー

ラインマーカーの色は元々黄色だったんですが、もう少し落ち着いた色にしたくてグレーに変更しました。

ラインマーカーの黄色をグレーに変更するカスタムCSS

/* 下半分のマーカー色変更 */
.marker-under {
background: linear-gradient(transparent 70%, #e1e1e1 60%);
}

Amazonと楽天のボタン

サイト内のボタン類は黒に統一するというルールを設けているので、Amazonと楽天へのリンクボタンは黒にカスタマイズしています。

↓こういうやつです。

あるミニマリストの物語―僕が余分なものを捨て人生を取り戻すまで

フィルムアート社

黒と言っても実はボタンの表面部分と下線部分で絶妙に色を変えていて、多少立体感を演出しています。

ほとんど気づかないレベルの装飾ですが、特に深い意味はありません。

単に遊び心で、誰も気づかないようなデザイン（潜在意識でしか認識できないようなもの）を入れてみようと思っただけであります。

Amazonと楽天のボタンのカスタムCSS

/* amazon */
.shoplinkamazon a {
background: #2e2e2e;
border-bottom: 4px solid #000000;
}
/* rakuten */
.shoplinkrakuten a {
background: #2e2e2e;
border-bottom: 4px solid #000000;
}

CTAボックス

記事下部に設置しているCTAボックスは、背景とボタンの色をカスタムしています。

↓これです。

CTAボックスの背景とボタン色のカスタムCSS

/*CTAボックスの背景変更*/
.cta-box {
border: solid 1px #9d9d9d;
border-radius: 8px;
background-color: #fff;
color:#444;
}
/*CTAグレーボタンを黒に変更*/
.btn-grey {
background-color: #2e2e2e;
}

コメントを書き込むボタン

同様に、コメントを書き込むボタンも黒に変更。

他のボタンに合わせる為に、若干ボタンの角に丸みをつけています。

コメントを書き込むボタンの色と形変更のカスタムCSS

/* コメントを書き込むボタン色変更 */
.comment-btn {
  background-color: #2e2e2e;
  color: #fff;
  border: none;
  font-size: 20px;
  transition: 0.5s;
  border-radius:4px;
}
.comment-btn:hover {
  background-color: #707070;
  color: #fff;
  transition: 0.5s;
  border-radius:4px;
}