白黒のブログにしたい。スタイリッシュに見せたいけれど、キャラクターのポップな雰囲気も残したい。今回のブログでは、この希望を軸にデザインを整えました。
テーマはCocoon Childです。この記事は、設定支援を受けながら実際のサイトを整えた記録です。別のスキンでも同じ見た目になる設定手順ではありません。
最初にアイコンとバナーを置く
自分のアイコンとチャンネルバナーをトップページに入れました。ブログだけ別の印象になるより、YouTubeから来た人にも同じ発信者だと分かる入口を目指しています。
背景やボタンの色を考える前に、すでに使っている素材がどんな雰囲気かを確認しました。今回は白黒の素材があるため、背景と文字を白黒にそろえても、キャラクターが見た目のアクセントになります。装飾のために色を増やす必要はありませんでした。
茶色が残っていたメニューも黒にする
最初に全体が整ったあと、ホーム・note・YouTubeが並ぶバーに茶色が残っていました。そこで、その部分を黒にするよう依頼しました。
白黒のページでも、細い帯に別の色があると目に入ります。ヘッダーだけではなく、メニュー、ボタン、フッターを一緒に見ることが大切だと感じる変更でした。
変更箇所が分かるよう、作業前後の画面を保存しています。一度に何か所も変えるより、気になった場所を特定してから直すと、確認しやすくなります。
- 01読む場所白い背景・読みやすい本文・余白
- 02区切る場所黒い見出しで話題の切り替わりを示す
- 03選ぶ場所画像カードとボタンで行き先を伝える
今回の制作・設定記録をもとに、確認するポイントを整理しました。
余白と見出しにも役割を持たせる
トップには大きな見出しと短い説明を置き、下に発信テーマのカードを並べました。文章を全部同じ大きさで詰めるのではなく、最初に伝えたいことと、次に選んでほしい入口が分かる構成です。
文字のある画像を小さく表示すると、細かい文字が読みにくくなります。アイコンは形が分かる大きさで、バナーは文字と絵が切れない配置を確認します。白黒でも、背景と文字の差が小さい場所は読みにくくなるので、薄い文字の使いすぎにも注意します。
スマホで見るところまでがデザイン確認
パソコンで見やすくても、スマホではメニューや画像の幅が変わります。画像や本文を変更するたびに、見出しの折り返し、画像の切れ方、押しやすいボタンの大きさを確認します。
デザインが整ったら、記事を増やす段階です。枠づくり全体は記事を書く前に作った4ページ、始めた背景はnoteの制作記録（noteで近日公開）にまとめています。
Cocoonのスキンと、色の設定はどこを見る？
Cocoonのスキンの公式説明では、「Cocoon設定」の「スキン」タブで外観を選べると案内されています。子テーマとスキンは別のもので、子テーマは「外観」のテーマ画面、スキンはCocoonの設定画面で扱います。
私のブログはCocoon Childを使い、スキンを土台にして、画像やメニューを整えています。「Cocoon Childを有効にすれば、この白黒デザインになる」というわけではありません。
全体の色については、キーカラーの公式説明に、「全体」タブのキーカラーとサイトキーテキストカラーが案内されています。キーカラーは見出しなどにも反映されるため、一か所の色だけでなく、ページ内の見出しや表も見て確認します。
ただし、スキンや個別のスタイルがあると、同じ色の指定をしても、すべての場所が一度に同じ見た目になるとは限りません。私のブログでも、全体を見たあとにメニューの茶色が気になりました。色が残っている場所を特定して直した、という流れです。
白黒を決めるときは、場所ごとに役割を分ける
白黒なら、白と黒を適当に置けばまとまる、というわけでもありません。文字と背景が同じような明るさになれば読みにくくなりますし、黒い面が増えすぎると、画像や文字のどこを見ればよいか迷うこともあります。
今回の構成をもとに、調整するときの見方を整理すると、次のようになります。色の数値をそのまま再現する表ではなく、確認する場所を分けるための表です。
| 場所 | 役割 | 確認するところ |
|---|---|---|
| 背景と本文 | 長い文章を読む場所 | 文字が読めるか、薄い文字が増えていないか |
| メニュー | ページや発信先を選ぶ入口 | 背景と文字が区別でき、選べると分かるか |
| 見出し | 読む順番を知らせる場所 | 本文との違いが分かるか |
| アイコン・バナー | 発信者の雰囲気を伝える素材 | 絵や文字が切れずに伝わるか |
| ボタン・カード | 次に進む場所 | 押した先が想像できるか |
白黒でも、全部を黒い枠で囲む必要はありません。私のブログでは、大きな見出しや余白、キャラクターの画像で、場所ごとの違いを作っています。ポップさを足すために、別の色をいくつも増やす進め方にはしませんでした。
アイコンとバナーは、同じ扱いにしない
アイコンは、小さくても発信者を見分けるための画像です。バナーは、横長の面で文字やイラストを見せる素材。この二つを同じ幅や形で置けばいい、というものではありません。
自分の素材を使うときは、まず画像単体を見て、次にページに載せた大きさで見ます。画像だけなら読める文字も、スマホで小さくなると読めないことがあります。
確認するのは、絵が入っているかだけではありません。端にある文字が切れていないか、背景との境界が分かるか、アイコンが小さすぎて何の絵か分からなくなっていないか。このあたりを、ページの中で見ます。
同じチャンネルの素材を使うことは、YouTubeとブログのつながりを見せる方法の一つです。ただ、画像を共通にしただけで読者が増えた、という結果は確認していません。まず、同じ発信者だと分かる入口を作った段階です。
変更は一つずつ、見る場所を決めて進める
気になるところを見つけるたびに、スキン、色、文字サイズ、画像をまとめて変えると、何で良くなったのかも、何で崩れたのかも分かりにくくなります。
たとえばメニューの茶色を直すなら、変更前を残し、メニューを直して、本文やフッターも見る。これは今回の変更から整理した確認の進め方です。スキンをいくつも切り替えて比較した実験ではありません。
調整する場所が分からないときは、Cocoonの公式マニュアルで、ヘッダー、グローバルメニュー、フッター、モバイル表示などの目的別の説明を探せます。まず標準の設定でできるかを見て、必要な部分だけを調整する方が、変更内容を把握しやすいと思います。
白黒で整ったら、実際に読んで押してみる
見た目が好きになっても、メニューが分かりにくければ、読者は次のページへ進めません。完成画像のように眺めるだけでなく、初めて訪れたつもりで、ホームからプロフィールや記事へ進みます。
スマホでは、横並びの入口がどう折り返されるか、バナーの文字を読むために拡大しないといけないか、ボタン同士を押し間違えそうにならないかを見ます。私の構築記録でもスマホ表示は確認していますが、使う画像や文章が変われば、もう一度見る必要があります。
記事が増える前の段階なら、すべてを完成させるより、読めること、移動できること、自分の雰囲気が伝わることを先に整える。私はその先で、本文を増やす作業へ進みました。
ブログ名を「好きに生きる」にした話は、名前を変えたnote（noteで近日公開）に残しています。デザインも、その名前で何を発信していく場所なのかを伝えるための準備でした。
次に読みたい記事
気になるところから、続きをどうぞ。
コメント