nikkiの配色・フォント・
レイアウト設定

nikkiは、配色パレット、本文フォント、ホームの投稿一覧レイアウトをそれぞれ選べる設計です。さらに主要5色だけを個別に上書きできます。最初から全色を変更するより、パレットを土台にして必要な箇所だけ調整すると、コントラストと世界観を保ちやすくなります。

カスタマイズでは、好みの色を増やすことよりも、記事を読み進められることを優先します。背景、本文、リンク、ボタンの役割が見ただけで分かれば、方眼紙や付箋の個性を保ったまま情報を伝えられます。以下では、影響範囲の大きい設定から順に決めていきます。

配色パレットは用途から選ぶ

用意されているのは「パステル」「ナチュラル」「ポップ」の3種類です。パステルは淡いピンク・水色・黄色で日記らしい軽さを出します。ナチュラルは紙や木を思わせる落ち着いた色で、長文や写真中心の記事に合わせやすい構成です。ポップはアクセントの差が強く、短い記事や作品紹介でカードを目立たせたい場合に向きます。

パレットはトップの印象だけで選ばず、長い記事、カテゴリ一覧、検索結果まで切り替えて比較します。同じ淡い色でも、大きな面積の背景と小さなラベルでは見え方が異なります。写真が多いサイトでは、画像の色と背景が競合しないかも確認してください。

迷った場合は、通常の記事を一つ開き、本文を5分ほど読みます。装飾へ視線が引かれ続けるなら、より落ち着いたパレットが候補です。反対に作品カードや短文が埋もれるなら、ポップのようにアクセント差がある配色を試します。

パステル

紙 #fffdf6 ／ 文字 #574e44

メイン
#f7a8c4サブ
#aedbef差し色
#ffe39a

ナチュラル

紙 #f8f2e4 ／ 文字 #574a38

メイン
#d39a7cサブ
#9bb394差し色
#e7cd78

ポップ

紙 #ffffff ／ 文字 #39394a

メイン
#ff6f9cサブ
#56c8e2差し色
#ffd23f

設定は「外観 → カスタマイズ」のnikki設定内「デザイン」で変更します。初期値はパステル、Yomogi、日記レイアウトです。配色とフォントの選択はページの再読み込みで反映される実装なので、プレビューの更新が終わってから比較してください。

個別色は5項目に絞る

上書きできるのは、メイン・サブ・差し色、文字色、紙の色です。空欄ならパレット値が使われます。変更するときは、まず文字色と紙の色の組み合わせを確認し、その後アクセントを一色ずつ変えます。アクセントだけを濃くしても、リンクと装飾の区別がつかなくなることがあるため、通常文字、リンク、ボタンを同じ画面で比較します。

安全な順番は「紙の色 → 文字色 → メイン → サブ → 差し色」です。背景と本文の組み合わせを先に安定させると、その後の色が読みやすさへ与える影響を判断しやすくなります。一度に5色すべてを変えず、変更前のカラーコードをメモして一色ずつ比較します。

色を確認するときは、リンクを色だけで識別していないか、ボタンと装飾ラベルが同じ見た目になっていないかを見ます。明るい部屋と暗い部屋、スマートフォンの低い輝度でも本文が読めるか試すと、淡い配色で起きやすいコントラスト不足に気づけます。

パレットを変えても一部の色が変わらない場合

nikkiはパレットを読み込んだ後、入力済みの個別色で上書きします。たとえばメイン色を独自のピンクにしたままナチュラルへ変更すると、紙やサブ色は変わってもメイン色は残ります。これは設定の優先順位による動作です。上書きした色を控えてから、その入力欄を空欄に戻すとパレットの色が使われます。既定のカラーコードを入力することと、空欄でパレットへ追従させることは異なります。

4種類のフォントを本文量で選ぶ

Yomogi、Klee One、Zen Kurenaido、Kiwi Maruから選択できます。手書き感の強さだけでなく、漢字が続く段落、数字、英字、括弧の読みやすさを確認します。写真日記や短文なら個性を優先し、解説記事や長文が多い場合は、細い文字が小さな画面でつぶれないかを基準にします。

テスト用の記事には、ひらがなだけでなく、画数の多い漢字、日付、URL、英単語を含めます。見出しでは魅力的でも、本文が数百文字続くと字形の個性が負担になる場合があります。段落の行間や一行の長さも合わせて見て、読む速度が落ちないものを選びます。

Google Fontsが読み込まれる前後でレイアウトが動かないかも確認します。通信が遅い環境では代替フォントが先に表示されるため、長いタイトルの改行位置が変わることがあります。フォント読み込みに失敗しても、メニューや本文が重ならず読める状態を合格とします。

ホームレイアウトは記事の素材に合わせる

• 日記：横並びの一覧。公開順と見出しを追いやすく、文章中心の更新に向きます。
• スクラップ：写真を散らす構成。アイキャッチの質と比率が揃っているサイトで効果を発揮します。
• グリッド：カード型。カテゴリの異なる記事を一覧で比較しやすい構成です。

日記レイアウトは、新しい順に読み進める体験と相性があります。更新頻度が高く、記事ごとの写真を必須にしたくない場合にも運用しやすい選択です。公開日とタイトルだけで内容が想像できるよう、曖昧なタイトルを避けると一覧性が上がります。

スクラップは写真の存在感を活かせますが、アイキャッチがない投稿のためにデフォルト画像を設定します。画像のないカードだけ空白になる状態を避けられます。同じ写真が何度も並ぶ場合は単調になるため、数件分の記事で一覧を作ってから判断してください。

グリッドは複数カテゴリを並べて比較しやすく、記事数が増えても規則性を保ちやすい構成です。ただし、長いタイトルや縦長画像が混ざるとカードの高さが不揃いに見えることがあります。実際に使う最長タイトルと、縦横比の異なる画像で崩れを確認します。

ヒーローとSNSは目的を一つにする

ヒーローには背景画像、タイトル、本文、ボタンのラベルとURLを設定できます。ボタンを複数目的で使い回さず、「プロフィールを読む」「最新記事を見る」など一つの行動へ絞ります。ヒーローを見れば、このサイトが誰の、どのような記録なのか分かる状態を目指します。

背景画像には、文字を置く余白がある写真を選びます。人物や作品の重要な部分にタイトルが重なる場合は、画像を変えるか、トリミング位置を調整します。スマートフォンでは横長画像の左右が切れやすいため、中央だけが表示されても内容が成立するか確認してください。

SNSシェアはX、Facebook、LinkedIn、メール、はてなブックマーク、LINE、Pinterest、URLコピーを個別に選択できます。利用できるサービスをすべて並べるより、想定読者が使うものへ絞ると記事末尾が整理されます。シェア先でタイトル、URL、画像が正しく渡るかも一度テストします。

設定後の確認順

変更の影響を切り分けられるよう、次の順番で確認します。途中で読みにくくなった場合は、その直前の変更だけを戻し、色とフォントを同時に修正しないようにします。

確認ページには、トップ、長文記事、画像のない記事、カテゴリ一覧、検索結果、404を含めます。最後にログアウト状態でキャッシュを削除し、別のブラウザまたは端末から同じページを見ます。管理者だけに表示される状態を完成形と誤認しないためです。

まとめ

nikkiでは、パレット、フォント、一覧レイアウトの3点を先に決め、個別色は最後に調整するのが安定します。世界観を作る設定ほど全ページへ影響するため、実際の記事と画像を使って一項目ずつ比較してください。

完成の基準は、装飾の多さではなく、読みやすさを保ったまま書き手らしさが伝わることです。Luccaとの方向性の違いはLuccaとnikkiの選び分けで比較しています。