ダッシュボードと公式サイトの UI を刷新しました（Editorial デザイン）
BotShade のダッシュボードと公式サイトのデザインを全面的に刷新しました。あわせて、ダッシュボードでは「Plum」と「Editorial」の 2 つのデザインテーマを設定から選べるようになりました。
|
|
最終更新: 2026年6月14日
平素より BotShade をご利用いただき、誠にありがとうございます。
このたび、ダッシュボードと公式サイトのデザインを全面的に刷新いたしました。新たに採用した 「Editorial (エディトリアル)」 デザインは、紙のような落ち着いた地色に、インクの見出しと罫線で情報を整理するスタイルです。
本記事では、次の内容をご紹介します。
何が変わったのか
雑誌の組版のように、罫線とタイポグラフィで情報を整理する方向へデザインを見直しました。装飾的な要素を減らし、余白と見出しの階層で読みやすさを高めています。色は意味のある場所だけに使います。操作の主役となる色は、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などのページには、折りたたみ式の技術詳細ドロワー を新設しました。専門用語に不慣れな方でも本文を読み進められ、技術的な詳細は興味のある方だけが開いて読めます。
今後について
今後も各画面の細部を見直し、より使いやすいダッシュボードへ改善してまいります。気になる点や「もっとこうしたい」というご要望があれば、ぜひフィードバックをお寄せください。