ダッシュボードと公式サイトの UI を刷新しました（Editorial デザイン）

平素より BotShade をご利用いただき、誠にありがとうございます。

このたび、ダッシュボードと公式サイトのデザインを全面的に刷新いたしました。紙のような落ち着いた地に、インクの見出しと罫線で情報を組み上げる 「Editorial（エディトリアル）」 デザインを新たに採用しています。

本記事の目次:

• 何が変わったのか
• なぜ Editorial を選んだのか
• Editorial の特徴
• 2 つのデザインテーマ
• テーマの切り替え方
• 公式サイトも同じ思想で
• 今後について

何が変わったのか

雑誌の組版のように、罫線とタイポグラフィで情報を整理する方向へデザインを見直しました。装飾的な要素を減らし、余白と見出しの階層で読みやすさを高める 構成にしています。色は意味を持つ場所だけに使い、操作の主役は Plum ではやわらかなマゼンタ、Editorial では深いインクの黒、いずれも数値や ID といったデータ部分はニュートラルなモノで揃えています。

あわせて、ダッシュボードのナビゲーション構造も整理しました。Bot ごとの設定では「Bot 全体の設定（上タブ）」と「機能ごとの設定（左サイドバー）」の 2 軸ナビゲーションに刷新し、ホームでは稼働状況と制御を最上段に置き、運用者の「次の一手」がすぐに取れるレイアウトへ改めています。

なぜ Editorial を選んだのか

これまでの BotShade は、開発者向けツールでよくある「冷たいモノクロ」「装飾の少なさ＝モダン」という方向性で組まれていました。そのスタイル自体は清潔ですが、温かみと信頼の両方を必要とする Discord サーバー運営者の手元には、少し距離があるようにも感じていました。

そこで、編集デザイン（雑誌や新聞の組版）の語感を借りることにしました。Editorial の特徴は、過剰な装飾なく タイポグラフィと余白だけで読みやすさを成立させる ところにあります。読み物のような落ち着き、確かさ、そして「ちゃんと考えて組まれている」という気配 — ダッシュボードに必要なのは、こうした静かな信頼でした。

Editorial の特徴

Editorial デザインのいくつかの特徴的な要素を、簡単にご紹介します。

• 紙のような地色とインクの見出し — 純白ではなく、わずかに暖色を含む紙地に、インク（深い黒）の見出しを置いています。長時間見ても疲れにくい配色です。
• 罫線で区切る情報 — カードを重ねず、1.5 px のハイラインで領域を区切ります。「装飾なく、構造で語る」 — 雑誌組版の基本です。
• 硬いオフセットの影が署名 — 主要なボタンには、新聞や雑誌の見出しのような 3 px / マリーゴールド色の硬い影 をあえて残しています。クリックすると影が吸い込まれ、紙をめくるような触感が生まれます。
• Bricolage と JetBrains Mono — 見出しは Bricolage Grotesque、本文は Hanken Grotesk + Zen Kaku Gothic New、数値・ID・時刻には JetBrains Mono。それぞれの役割が、フォントの違いで一目で分かるようにしています。

2 つのデザインテーマ

ダッシュボードでは、お好みに合わせて 2 つのテーマから選べます。

• Plum — 温かいグレージュ地に白／黒アクセント（モノクロ）。角丸カードが浮く、やわらかな構成です。
• Editorial — 紙地・インク主役・硬いオフセットの影が署名。罫線で区切る雑誌のような構成です。

いずれのテーマも、ライト／ダークの両モードに対応しています。ライトは紙の落ち着き、ダークはサインに照らされた紙のような暖かい黒地で、どちらも目に優しい構成にしています。

テーマの切り替え方

設定 →「環境設定」→「デザインテーマ」 から、プレビューを見ながらいつでも切り替えられます。選択内容はブラウザに保存され、次回以降も維持されます。

設定画面では、各テーマの実際の見た目をミニチュアでプレビューしてから選択できます。お好みのテーマで操作感を確かめてから切り替えてみてください。

公式サイトも同じ思想で

公式サイト（このサイト）も、ダッシュボードと同じ思想で 余白主導・罫線中心 のレイアウトへ刷新しました。

• ナビゲーションは静かに、見出しは行長を均す text-wrap: balance、本文は孤立行を抑える text-wrap: pretty をサイト全体に適用し、改行品質を底上げしています。
• リソース一覧（ナレッジベース、ブログ、リリースノート、お知らせ、セキュリティ、インシデント）は 同じカード仕様 に揃え、行間には控えめな罫線で区切りを入れました。
• /product/security などのページには、専門用語の壁を低くするための 折りたたみの技術詳細ドロワー を新設し、興味のある読者だけが深掘りできる構成にしています。

今後について

引き続き、各画面の細部を磨き込み、より使いやすいダッシュボードへと改善してまいります。気になる点や「もっとこうしたい」というご要望があれば、ぜひフィードバックをお寄せください。