デザインについて

読みやすさをいちばんに

「絶妙コラム」は、装飾よりも文章そのものが伝わることを大切にしています。

余白を広くとり、色数を抑え、視線の流れが途切れないよう情報を整理しています。コラムを読む体験に集中できるよう、画面全体を静かに保つことを意識しました。

文字組みを自分好みに

コラムの本文は、読者それぞれの好みに合わせて文字組みを変えられます。設定画面、またはコラム閲覧時の文字組みボタンから調整できます。

設定は端末のローカルストレージに保存され、見出しと本文に反映されます。アカウントやデータベースには保存されません。

各設定がどの CSS 値に対応するかは、このページ下部の「文字組みの CSS 値」を参照してください。

カラーモード

設定画面の「カラーモード」から、ライトとダークを切り替えられます。

夜間の閲覧や、周囲の明るさに合わせて、目に負担の少ない表示を選んでください。

UI の色は zinc 系パレットのみで統一し、純白・純黒は使いません。各色の CSS 変数・Tailwind クラス・カラーコードは、このページの「カラーモードの色」を参照してください。

UI パーツ

ボタン、入力欄、リンク、カード、アラートなど、画面を構成する部品は共通のクラス名で統一しています。

角丸・パディング・フォーカスリングのルールを揃えることで、どの画面でも同じ操作感になるようにしています。

各パーツのクラス名とスタイルの詳細は、このページの「UI パーツ」を参照してください。

文字数制限という枠

コラムには文字数の上限があります。短い枠のなかで言葉を選ぶことで、要点が際立ち、読み手にも伝わりやすくなると考えています。

制限は投稿ごとに設定でき、タイトルと本文のバランスを整えながら書く体験を支えます。

ロゴと書体

サービス名のロゴは、手書きのような温かみのある字形を採用しています。

画面のUIは Geist をベースにし、コラム本文には Noto Sans JP・Noto Serif JP・Zen Maru Gothic・Zen Kurenaido などを使い分けています。

これから

デザインは、使い方の声を聞きながら少しずつ整えていく予定です。

読みにくい点や、もっとこうしてほしいということがあれば、ぜひお知らせください。