ArcBlock は、プロフェッショナルなカラーとタイポグラフィのデザインを指先ひとつで可能にする、新しいビジュアルテーマエディター テーマ設定（Theming） をリリースしました。ブランドカラーに合わせたい、読みやすさを向上させたい、あるいはより魅力的なビジュアル体験を作りたいといった場合でも、「テーマ設定」を使えば技術的な知識なしでウェブサイトの外観をカスタマイズできます。

注意：「テーマ設定」機能を使用するには、管理者権限が必要です。

テーマ設定（Theming）とは？

「テーマ設定」は、ウェブサイトの外観において最も重要な要素である 色とタイポグラフィ に焦点を当てたビジュアルエディターです。統一感のあるプロフェッショナルなカラースキームを構築し、読みやすさを高め、ブランドの個性を定義するフォントを選択できるように設計されています。

インターフェースは、直感的な3つのエリアに分かれています。

完全な変身：Discuss Kit フォーラム

実際に「テーマ設定」を使ってみましょう。標準的な Discuss Kit フォーラムを例に、デフォルトの外観から、モダンなコミュニティを反映した活気ある魅力的なデザインへと、色とタイポグラフィを一変させてみます。

ステップ 1：はじめに

管理ダッシュボードから ダッシュボード → ウェブサイト → テーマ設定 に移動してアクセスします。エディターが読み込まれると、ライブプレビューパネルに現在のウェブサイトが表示されます。Discuss Kit の場合、デフォルトの白い背景、黒いテキスト、標準的な緑のアクセントカラーのフォーラムが表示されます。

ステップ 2：色の変革

左パネルの最初のセクションは カラー（Color） です。紛らわしい16進数コードの代わりに、ボタンやリンク用のプライマリカラー、アクセント用のセカンダリカラー、テキストや背景用のニュートラルカラーなど、ウェブサイトのさまざまな要素を表す直感的なカラーブロックが表示されます。

Discuss Kit のためにより魅力的なカラースキームを作成しましょう。プライマリカラー のブロックをクリックすると、強力なカラーピッカーが開きます。定義済みのパレットから選択したり、カラーホイールを使用したり、特定のブランドカラーを入力したりできます。色を選択すると、プレビューパネルがリアルタイムで更新されます。また、ライトモードとダークモードを切り替えて、どのような環境でもテーマが完璧に見えるか確認することもできます。

色を選択すると、プレビューパネルが即座に更新されます。また、ライトモードとダークモードを切り替えて、異なる環境でテーマがどのように見えるかを確認することもできます。

ステップ 3：想いを伝えるタイポグラフィ

次に、タイポグラフィを完成させましょう。タイポグラフィ（Typography） セクションでは、何千もの Google Fonts にアクセスでき、サイト上でどのように見えるかを正確に示すライブプレビューも備わっています。

Discuss Kit のようなフォーラムでは、モダンで視認性の高いフォントが求められます。見出しには目を引くクリーンなサンセリフ体を選択し、本文にはそれを補完する読みやすいフォントを選びます。プレビューでは、これらの選択がサイト全体の読みやすさにどのように影響するかがすぐにわかります。

ステップ 4：仕上げのタッチ

最後の仕上げとして、角丸（border radius） を調整します。このシンプルなスライダーを使えば、ボタン、カード、コンテナにモダンで少し丸みを帯びた外観を与えることができます。ライブプレビューにより、シャープな角とソフトな角の完璧なバランスを即座に見つけることができます。

ステップ 5：完成の披露

色とタイポグラフィの調整に満足したら、保存（Save） ボタンをクリックするだけです。新しいテーマが即座に公開サイトに適用されます。待ち時間も、デプロイのキューも、技術的な障害もありません。

なぜ「テーマ設定」は誰にでも使いやすいのか

「テーマ設定」が非常に強力である理由は、そのシンプルさにあります。デザイナーや開発者だけでなく、すべての人のために作られています。その理由は以下の通りです。

「テーマ設定」をさらに活用する

この例では基本を説明しましたが、「テーマ設定」はパワーユーザー向けにさらに多くの機能を提供しています。季節やキャンペーンごとに複数のテーマを作成して保存したり、キーボードショートカットなどの高度な機能を使用してワークフローをスピードアップしたりできます。

始める準備はできましたか？

ArcBlock 202507 バグバウンティ