Discuss Kit v2.0 リリース: ユーザーインターフェースを全面刷新

Discuss Kit 1.0のリリースから1年以上の反復を経て、私たちはDiscuss Kitがコミュニケーション、コラボレーション、そして多様なコンテンツの管理をより効果的にサポートできることを願っています。そのため、ディスカッション、ブログ、ドキュメント、チャット、ブックマークなど、多くのコアモジュールを段階的に開発してきました。現在までに、ArcBlock開発チームのTeam DAO、ArcBlockコミュニティ、そしてArcBlock公式サイト(ブログや開発ドキュメントを含む)といったサービスは、いずれもDiscuss Kitから強力なサポートを受けています。

2023年末から2024年第1四半期にかけて、私たちはDiscuss Kit 2.0の準備を開始し、ユーザーインターフェースの全面的な最適化を計画しました。1四半期にわたる継続的な反復と100を超える小さなバージョンアップを経て、ついにバージョン2.0をリリースしました。バージョン2.0の主な目標はユーザーインターフェースの改善であり、加えていくつかの新機能と多数のバグ修正が含まれています。以下のセクションでは、バージョン2.0における新機能と改善点の詳細について説明します。

Discuss Kit

ディスカッション

ディスカッションモジュールは、ユーザーが特定のトピックについて議論しアイデアを交換できるインタラクティブなプラットフォームを提供するために設計されています。ユーザーは新しいディスカッショントピックを開始したり、既存のディスカッションに返信したりできます。チームワークやコミュニティコミュニケーション、あるいはあらゆる集団的な意思決定の議論を必要とするグループに適しています。

投稿一覧ページ

投稿一覧ページのレイアウトは基本的に変わっていません。左側はボード一覧、右側は投稿一覧で、ページ上部にはバナーエリアが追加され、ダッシュボードでタイトルとサブタイトルをカスタマイズできます。

投稿一覧ページには、以下のような多くの細かい改善も含まれています。

投稿詳細ページ

上の図は投稿詳細ページです。タイトルの上部にはよく使う操作ボタン(戻る、お気に入り、共有、メニュー)がいくつか配置されています。タイトルの右側には「ピン留め」と「注目」を示すバッジがあります。タイトルの下には、投稿が属するボード、閲覧数、関連ラベルが表示されます。今回の改善では、アイコンボタンやメニューリストのスタイルを刷新し、ボタンなどのUIコンポーネントのサイズ、境界線の色、アイコンサイズがより調和するようにしました。アイコンの線の太さも統一しています。

タイトルの下は投稿の本文です。バージョン2.0では、Material Designテーマに基づいてコンテンツ全体のタイポグラフィを改善しました。フォント、フォントサイズ、フォントウェイト、文字色、行の高さ、行間、段落間隔などが含まれます。さらに、リンク、引用、リスト、ToDoリストなどの要素のスタイルも最適化し、読みやすさと読書体験を向上させました。

コメント一覧は本文の下に配置されており、コメント一覧内のスタンプ/返信アイコンボタン、リアクションコンポーネント、並べ替えコンポーネントのスタイルを改善しました。コメント間に区切り線を追加し、より見やすく読みやすくしています。

投稿編集体験の改善

投稿編集ページ(上図)は、編集体験とレイアウトの両面で多くの改善が加えられました。投稿を編集する際、従来のポップアップ形式の編集方法に代わって、専用の編集ページにリダイレクトされ、ユーザーにできるだけ広い編集スペースを提供します。ボード選択、ラベル選択、投稿のピン留め、注目設定といった機能は設定パネルに統合されており、右上の設定ボタンをクリックするとこのパネルを開くことができます。

編集中にページが誤って閉じられたりジャンプしたりした場合、Discuss Kitは未保存のコンテンツがあるかどうかを検出し、ユーザーが予期しないデータ損失を避けられるようサポートします。

あるユーザーが投稿を編集している最中に、編集権限を持つ別のユーザーが同時に投稿を変更・保存した場合、そのユーザーには通知が表示されます。ユーザーはコンテンツをバックアップしてページを更新することを選択でき、コンテンツの競合を回避できます。(Discuss Kitは今後、複数ユーザーによる共同編集をサポートする予定です)

バージョン2.0では、エディタのスタイルを大幅に改善し、あまり使われないツールボタンを削除し、ツールバーのボタンを再編成し、ツールバーボタンのアイコン表示を最適化することで、アイコンの一貫性と美しさを高めました。

ブログ

ブログモジュールは、ユーザーが記事を公開し、知識を共有できるようにするもので、強力な多言語対応と翻訳サポートを備えており、個人または企業のブログを構築したいすべてのユーザーに適しています。

Discuss Kitは「Standard」と「Corp」という2種類のブログテンプレートスタイルをサポートしています。デフォルトでは「Standard」テンプレートが使用され、ユーザーはダッシュボードでテンプレートの選択を設定できます。今回のv2.0の改善では、Standard/Corp両テンプレートのブログ一覧ページとブログ詳細ページを改善しました。

Standardテンプレート

下図はStandardテンプレートのブログ一覧です。左側にブログのカテゴリとトピックラベル、右側にブログ一覧があり、各ブログのカバー画像、タイトル、概要、ラベルなどの情報を閲覧できます。

モバイル版:

以下はStandardテンプレートのブログ詳細ページです。ページ上半分にはカバー画像、共有ボタン、ブログカテゴリ、ブログタイトル、ラベルが含まれます。タイトルの下には公開日時、著者、閲覧数などの情報が表示されます。続いてブログの本文があり、本文の下にはおすすめ記事が表示されます。ページ下部にはコメント欄があります。

Corpテンプレート

Corpテンプレートのブログ一覧(下図)のレイアウトはStandardテンプレートのブログ一覧と似ていますが、ブログ一覧がカード形式で表示される点が異なります。

モバイル版:

Corpテンプレートのブログ詳細ページ(下図)はStandardテンプレートと似ており、カバー画像、タイトル、著者、公開日時などの主要な要素を表示します。異なる点は、Corpテンプレートが2カラムレイアウトを採用しており、左側にメインコンテンツ、右側に目次とおすすめ記事リストを配置していることです。

ブックマーク

ブックマークモジュールは、ユーザーがインターネット上のリソースを保存・整理するのに役立ちます。ユーザーは任意のWebページをブックマークとして保存し、後で簡単に検索・参照できるようにカテゴリ分けやタグ付けを行うことができます。

v2.0では、特にユーザーインターフェースとインタラクション体験の面で、ブックマーク機能に多くの改善が加えられました。一覧ページ(下図)は2カラムレイアウトを採用しており、左側にブックマークのカテゴリ、右側にカード形式のブックマーク一覧が表示されます。ユーザーはキーワードやラベルでブックマークを検索できます。

ブックマーク詳細ページでは、スナップショットを閲覧したり、「View Source」ボタンをクリックして元のリンクにアクセスしたりすることができます。

ドキュメント

ドキュメントは汎用性の高いモジュールで、技術文書の管理だけでなく、チームが体系的なナレッジベースを構築する際にも役立ち、個人のノート用途にも適しています。特に多言語コンテンツを扱う場合、ドキュメントモジュールは非常に便利です。高度なAI翻訳技術を統合しており、コンテンツの形式を保ちながら高速かつ正確な言語間変換を実現し、文書処理の効率と精度を大幅に向上させます。

v2.0の改善では、ドキュメントへの複数のエントリーポイントのサポートも追加しました。以下の図のように、プロジェクトごとにドキュメントを整理できます。

ユーザーがドキュメントのホームページを訪れると、さまざまなプロジェクトのドキュメントが表示され、ドキュメントカードのスタイルも入念にデザインされています。

さらに、Discuss Kitはドキュメントを整理する高度な方法もサポートしており、システムラベル(Get StartedやGuideなど)を設定することでドキュメントをコレクションに分類できます。

異なるドキュメントの異なるセクションは、指定された「コレクション」にまとめられて表示されます(下図参照)。

チャット

チャットモジュールはインスタントメッセージング機能を提供し、ユーザーが個別またはグループでコミュニケーションできるようにします。このモジュールには通知システムも統合されており、投稿へのコメントやコメントへの返信があった際に通知メッセージを受け取ることができます。

会話リストとメッセージリスト

バージョン2.0では、会話リストとメッセージリストのレイアウトとスタイルを改善し、アプリケーション全体の見た目をより魅力的にしました。現在、会話リストではユーザーは各会話の最新メッセージを簡単に確認でき、最近アクティブだった会話は自動的にリストの上部に固定されるため、興味のあるコンテンツを素早く見つけ、より簡単に議論に参加できるようになります。

通知メッセージリストのスタイルも改善しており、Discuss Kitがサポートする通知メッセージの種類も継続的に増えています。

ユーザーインターフェースの最適化に加えて、セッションの読み込み効率とリアルタイム通信の安定性も大幅に向上しました。

ユーザー検索のサポート

チャットモジュールにはユーザー検索機能が追加され、ユーザーを素早く見つけてチャットを開始できるようになりました。

モバイルUIの改善

ボードとラベルの管理

ボードとラベルの管理はユーザーインターフェース面で大きく改善され、ボード一覧とラベル一覧はより整然として見やすくなりました。

v2.0以前、ボードは投稿にのみ適用されていました。今回の改善では、ボードの適用範囲をブログ、ドキュメント、ブックマークにも拡張しました。さらに、ボードをパスポートに紐付けることで(下図参照)、ボード(およびボード内のコンテンツ)を保護する目的を達成できます。

バージョン2.0では、ラベルをシステムラベル(下図参照)と通常のラベルに明確に分けるようにしました。投稿や記事にタグを付ける必要がある場合、通常はシステムラベルを使用できるのは管理者のみです。もちろん、どのラベルであっても、パスをそれに紐付けることで、ラベルの使用範囲を制限したり開放したりすることができます。

図中のラベルはパスポートに紐付けられており、「Restricted Access: Owner, Admin, Guest」というプロンプトが表示されているのが確認できます。

共に成長する、コミュニティ主導のアップデート

私たちは、製品の核心はユーザーの活気あるコミュニティにあると信じています。皆さんのご意見やご提案は私たちにとってかけがえのないものであり、フィードバックを取り入れることでDiscuss Kitをさらに良くしていくことに力を注いでいます。このセクションでは、ユーザーの皆さんからのフィードバックをきっかけに実現した最新のアップデートとバグ修正を取り上げます。小さな調整から大きな変更まで、すべてのアップデートは皆さんの体験を向上させ、ニーズに応えるための一歩です。継続的なご支援とご関与に感謝いたします。それでは、今回のリリースでフィードバックがどのように改善に役立ったのかを見ていきましょう!

おわりに

Discuss Kit v2.0はv1.0と比較して大きく進化しており、私たちは今後もユーザーインターフェースとインタラクション体験の改善を続けていきます。次のステップとして、Discuss Kitは以下の方向性に注力していきます。

ご利用中に何かご要望、ご提案、または問題がございましたら、ぜひArcBlockコミュニティにお越しいただきフィードバックをお寄せください。私たちは全力でサポートいたします。また、皆さんのフィードバックがBug Bounty Programに採用された場合、ABT報酬を受け取ることができます。

ArcBlockコミュニティ

Discuss Kit