【Cocoon初心者向けカスタマイズ】デザインコンサルをしてわかった!素早く楽にキレイにする方法4つ

Cocoon カスタマイズ 初心者

「ホームページ作成のコンサルなどもされてますか?」

1通のメールがきっかけで、人生で初めて「デザインコンサル」という経験をさせていただいた。

この記事では、コンサルの過程で発見した

「ううううぅ……ここをちょっと直せば、キレイに整うのにもったいない……」というポイントを4つにまとめてみた。

「カスタマイズてどこから手をつければいいのーーー!わからない……」

と悩んでいる方々の力になれば嬉しいな、と思う。

ちなみにコンサル前はこんな具合で、

CocoonカスタマイズBefore画像

コンサル後はこんな感じ。

CocoonカスタマイズAfter画像
スポンサーリンク

この記事はこんな人にオススメ

  • ブログを始めたばかりで、どこからカスタマイズしていいかわからず悩んでいる人
  • 少しでもブログの見た目をキレイに整えたいと思っている人
  • Cocoonユーザー

この記事を読めば、わかること

ブログ初心者でもカンタンにできる!見た目をキレイにする方法 4つ

デザインをキレイに整えるメリット

  • ファーストインプレッションでユーザーが離脱しにくくなる
  • 記事を読んでもらえるようになる

それでは、さっそく1つずつ紹介していきたい。

カスタマイズ1 : 文字色は濃いグレーにする

Cocoonカスタマイズ文字色を比較した図

・・・・・・・・

Cocoonは「真っ黒(#000000)」がデフォルトになっている。背景が白(#ffffff)の場合、文字色をグレーにすると、優しい印象になり、読みやすくなる。ブログ世界では有名な話。

オススメのカラーコードは、#222222, #333333

細いフォント(明朝体など)を使うなら少し濃いめにしたり、逆に太いゴシック体なら若干薄めにしたりするとよさそう。最終的には、好みかな、と。

Cocoonで文字色を変更する方法

1.「Cocoon設定」→「全体」を選択

Cocoonカスタマイズ 文字色の設定方法

2. 下の方にスクロールすると出てくる「サイトフォント」→「文字色」から変更できる

Cocoonカスタマイズ 文字色の設定方法02

カスタマイズ2 : アイキャッチ画像のサイズを揃える

画像サイズがバラバラだと落ち着かないし、美しくないのだけれど……..

Cocoonアイキャッチ カスタマイズ前画像

揃えると、突然そこに秩序が生まれて、すごく見やすくなる。

Cocoonアイキャッチ カスタマイズ後画像

おしゃれなアイキャッチ画像の作り方 でも紹介したし、本にも書いてあるけれど、押さえておきたいのは、

デザインにおいて「揃える」は基本中の基本

ということ。ちなみに私は、カラーや枠の役割、記事内の画像サイズもこれを意識している。

サイズを揃える方法

オススメのツールは、無料なのに簡単な操作でプロフェッショナルな画像が作れる「Canva(キャンバ)

1.まず、「Canva」にアクセス。右上の「登録」をクリックし、会員登録する

Canva登録画面

2. 右上の「デザインを作成」をクリックし、「カスタムサイズ」を選択

Canvaの使い方01

3. 幅と高さを指定すると、アイキャッチの大きさを揃えることができる

Canvaの使い方02

次に、

「Cocoonのアイキャッチサイズはいくつにすればいいの……??」

というお悩みに対して。

横縦比 9 : 16 、横幅 800px以上で作るのがオススメ

なぜなら、Cocoonの初期値(画像比率)は、9 : 16 で設定されているから。(「Cocoon設定」→「画像」を選択。下の方にスクロールすると出てくる「全体画像設定」エリアの「サムネイル画像」から確認・変更できる)

そして、開発者のわいひらさんも

なるべくアイキャッチには、大きな画像を設定しておくことをおすすめします。

少なくとも、横幅 800px、できるならば横幅 1280px以上の画像を設定することをお勧めします。

引用元 : Cocoon 「テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法」より

と言っているから。ちなみに今回のコンサルでは、675 × 1200 pxで統一した。

4. 最後に。 「Canva」には、テンプレートが豊富に用意されているので、ノンデザイナーでも簡単におしゃれな画像を作ることができる。作り方を語り始めると長くなってしまうので、またの機会にすることをお許し願いたい。

Canvaの使い方03

カスタマイズ3 : 見出しをデザインする

こちらがBeforeで……

Cocoon見出し カスタマイズ前画像

こちらがAfter。

Cocoon見出し カスタマイズ後画像

テーマカラーを使うなど、サイトの雰囲気に合わせてデザインすると、ブログに「らしさ」がでてくる。

吉田あみ公式ブログの「【cocoon】初心者向け見出しカスタマイズ!コピペだけで簡単にできるよ」という記事を参考にすれば、素早く楽に自分好みのデザインを実現することができるのでオススメ!

今までH4~6は使ったことがないので、とりあえず、初心者はH2とH3を装飾すればOKかなと。

こちらもオススメ
ブログの配色どうしよう…と悩んでいる人に向けて書いたので、気になる方はぜひ!

カスタマイズ4 : タイトルをGoogleフォントにする

Cocoonのデフォルトデザインも、

Cocoonヘッダー カスタマイズ前画像

Googleフォントにしただけで、なんだかおしゃれになった……!今回のコンサルで一番の発見だったと思う。

Cocoonヘッダー カスタマイズ後画像

この方法は、

  • ブログ名にまだ違和感がある…
  • デザインは最低限整えばOK。記事に注力したい!
  • ノンデザイナーだから、ヘッダーデザインなんて出来ない

そんな方向け。

すべての人にしっくりくることはないかと思うけれども、「やってみたい!」「なんか気になる…!」と思った方は、NOHMISO.COMの「wordpressテーマCOCOONでブログタイトルをGoogleフォントにする方法」を読み進めてもらえれば。

丁寧に説明されているので、初心者でもタイトルをGoogleフォントに変更することができる。

スポンサーリンク

おわりに

ブログのカスタマイズが楽しく、デザイン関連の投稿が自然と増えていってただけなので、お問い合わせを通して依頼がきた時は、本当におどろいた。

やってみたい!という気持ちと、私で大丈夫だろうか……という思いが交差したけれども、せっかくいただいた機会、引き受けることにした。

やりながら改めてcssをいじって画面が劇的に変わる瞬間が好きだと感じたし、上記に書いたようなことを含め気づきがたくさんあったので、想定外の展開にも柔軟に飛び込む心の準備はいつでも整えておきたいと、強く思った。

最後は、Googleという広い海の中から私のブログを発見し、アクションまで起こしてくれたkanaeさんに感謝しておわりにしたい。

文章・デザイン: yoko( @_yoko51_

Comment