Discordコミュニティの運用・代行なら「ギルドロケット」

• ギルドロケットの概要・効果などについて知りたい方はこちら

見やすくて使いやすいデザインを考えよう！

今回紹介するのは、コミュニティの見た目のデザインを良くする方法について！

「チャンネルをいかに綺麗に見せるか。」に着目して、パッと見の印象を良くするためにできることを紹介していこうと思います。

■目次

・チャンネルの並びを綺麗に見せるテクニック
　└「┣」や「┗」などの罫線で項目を分類
　└「―」を付けてカテゴリを目立たせる
　└Unicode絵文字で豪華に装飾
　└おすすめのUnicode絵文字一覧

・チャット画面を綺麗に見せるテクニック
　└チャット内の項目を見出し画像で分ける
　└太字や赤文字を使って目立たせる
　└絵文字で横線や点、各種アイコンを作る

・Discordコミュニティの運用をご検討中の企業様へ

チャンネルの並びを綺麗に見せるテクニック

Discordの入り口とも言える、チャンネル一覧。ここの見やすさ、使いやすさって、ユーザーからすると結構重要なポイントだと思います。

特に普段からよく使うコミュニティであればあるほど、基本的なところの使いやすさは気になるはず。

では、具体的には何をすればいいのか？ 例えば、こんなやり方があります。

• 「┣」や「┗」などの「罫線」で項目を分類
• 「―」や「▬」でカテゴリを目立たせる
• Unicode絵文字で豪華に装飾

これら3つの方法には、それぞれメリットもあれば、ちょっとしたデメリットもあります。

どれも絶対にこれをやるほうがいい！というものではありませんが、使い方の例を簡単に紹介するので、参考にしてみてください！

シンプルなのもいいけど、オシャレに見せるコツだって、知っておいて損はないはず。こだわりが参加者にも伝わるかも？

「┣」や「┗」などの罫線で項目を分類

チャンネル名の左側などに「┣」のような罫線を入れる方法。何をしたいかと言うと、つまりはこういうことです。

上の画像のように線を綺麗につなげることはできませんが、

何もないときに比べると、ちょっと見やすくなったような気もしますね。

「┣」や「┗」などの線は、「けいせん」と打って変換すると出てきます。線が太いものと細いものの2種類がありますが、基本的には太いほうが使いやすいでしょうか。

罫線を使うメリットとデメリットはこんな感じです。

メリット	カテゴリ分けが多いときに見やすくなる
デメリット	横幅を取られやすい チャンネルリンクが読みづらくなる

チャンネル名が長すぎると、一覧での表示名の後ろが「┣みんなで雑談しま……」みたいな感じで切れちゃうので、名前を付けるときは注意しましょう。

あとは、チャンネルリンクが「#┣自己紹介」のように読みづらくなります。チャンネル一覧の見栄えはいいけど、それ以外の部分での使い勝手がやや悪いのが残念ポイントですね。

「―」を付けてカテゴリを目立たせる

カテゴリ名の前後に「―」「━」「▬」といった横線を入れる方法。どれも見た目は似てますが、表示される線の太さや長さに違いがあります。

「―」は「ダッシュ」や「ー（伸ばし棒）」の変換で、「━」は「けいせん」の変換で出てきます。

「▬」は特殊なUnicode記号で、変換で出す場合は「U+25AC」と、正確なコード名を入れないと出てこないので、使うなら辞書登録などをしておくのがいいですね。

カテゴリ名に横線を入れるメリットとデメリットはこんな感じです。

メリット	カテゴリ部分がすごく強調される
デメリット	特になし

いじるのはカテゴリ名だけなので、チャンネルリンクにも影響はなく、大きなデメリットはありません。

PCやスマホ端末によって横線の見え方が変わるものの、そこまで変なことにはならないので、とりあえず使ってみてもOKといった安定した見せ方ですね。

端末ごとの見え方は、以下のとおり。

「―」（ダッシュ）を使ったときの見た目

PC	iPhone	Android
見やすい	ちょっと離れる	見やすい

いちばん細い線。iPhoneのみ、横線の間が離れるので、少し見栄えが悪くなります。

「━」（罫線）を使ったときの見た目

PC	iPhone	Android
見やすい	見やすい	見やすい

線の太さは中間。端末による差がほとんどなく、使いやすさはNo.1。

「▬」（U+25AC）を使ったときの見た目

PC	iPhone	Android
長方形っぽくなる	見やすい	見やすい

いちばん太い線。PCのみ、長方形が並んだ感じになってしまいますが、これはこれで悪くないと思います。

Unicode絵文字で豪華に装飾

カテゴリやチャンネル名の前に、絵文字を入れる方法。チャンネル名がテキストのみで並んでいるときに比べて、見やすくなります。

絵文字の前に「｜」（縦ライン）を入れて、「?｜お知らせ」といった見せ方にするのもおすすめです。

カテゴリやチャンネル名で使える絵文字は、Unicodeの絵文字のみですが、種類がものすごいたくさんあるので、チャンネルの内容に合ったものはだいたい見つかるはず。

Unicodeの絵文字を入れるメリットとデメリットはこんな感じです。

メリット	どんなチャンネルか分かりやすくなる ちょっとリッチに見える
デメリット	機種によっては絵文字が表示されないことがある

これらはすべて【機種依存文字】なので、端末によって絵文字が表示されない可能性があります。とはいえ、PCとスマホならほぼ表示されるので、気にするほどではないです。

あと、デメリットではないですが、たくさんある種類の中からチャンネル名に合った絵文字を探さないといけないので、ちょっとだけ面倒ですね。

おすすめのUnicode絵文字一覧

カテゴリ・チャンネル名に使えそうな絵文字をまとめてみました。基本チャンネルはだいたい網羅できると思うので、ぜひ活用してみてください。

■お知らせ・アナウンス関連

絵文字	変換ワード	こんな場所で使おう
✅	チェック	必読してほしいもの
?	初心者	はじめに、サーバーガイドなどのマニュアル関連
?	本	はじめに、サーバーガイドなどのマニュアル関連（???別カラー有り）
?	ベル	お知らせ
?	メガホン	お知らせ
?	スクロール	ロール関連
?	ピン	上記以外で、お知らせ系に載せたいときなどに（公式Twitter、更新履歴など）

「?ピン」はどこにでも使いやすい便利な絵文字。同じサーバー内で複数個使ってるところも多いので、困ったらこれを使っておけばOK！

■コミュニティ関連

絵文字	変換ワード	こんな場所で使おう
?	–	自己紹介（人間アイコンはたくさんあります）
?	吹き出し	雑談
❔	はてな	質問
?	–	フレンド募集
?	お城	ギルメン募集

■ボイスチャンネル関連

絵文字	変換ワード	こんな場所で使おう
?	耳	聞き専ルーム
?	ヘッドホン	聞き専ルーム
?	マイク	一般VC
?	–	PT専用VC
?	–	AFK（寝落ち）
?	寝る	AFK（寝落ち）

チャット画面を綺麗に見せるテクニック

Discordに入ったときに最初に見るであろう、「ガイドライン」や「サーバールール」などの必読チャンネル。

テキストのみでぱぱっと作ってもいいですが、こだわってかっこいいレイアウトにできれば「なんかこのコミュニティすごそう！」といった印象を残せるはず。

やり方は人それぞれで、結構いろんなパターンはありますが、私がよく使うのはこの3つ！

• チャット内の項目を見出し画像で分ける
• 太字や赤文字を使って目立たせる
• 絵文字で点や線、各種アイコンを作る

どれも簡単にできて、見栄えのアップ度は結構高いです。では、それぞれのやり方を詳しく紹介していきましょう。

チャット内の項目を見出し画像で分ける

見出し部分を画像で作っちゃう方法。Discordをよく使っている人は見たことがあるのではないでしょうか。

「?サーバーガイド」なんかは、ひとつのチャンネルで「サーバールール」「チャンネル紹介」「公式関連リンク」といった感じで、複数の項目を書くことが多いので、そんなときには画像見出しで分けるのがおすすめです。

サーバールールの画像を、それっぽい感じで作ってみました

画像を使ったときのイメージは、こんな感じ。

元画像はかなり大きくしたのですが、PCだとちょっと小さめに表示されてしまいます。スマホで見たときは、横いっぱいに綺麗に表示されるので、より見栄えが良くなりますね。

素材として使う画像は、ゲームの公式サイトから持ってきて加工するのが早いと思います。

太字や赤文字を使って目立たせる

文字の前後に記号を入れたり、なんだか特殊なコマンドを入れて、文字をカスタムする方法。以前、こちらのマニュアルでも紹介したテクニックですね。

たくさんコマンドがありますが、その中でもぜひ覚えておいてほしいのが、「太字」「下線」「赤文字」の3種類です。

それぞれのやり方は、以下のとおり。

■太字：テキストを「**」（アスタリスク2個）で挟む

■下線：テキストを「__」（アンダーバー2個）で挟む

太字と下線を同時に使いたいときは、「__** テキスト **__」と打てばOKです。

■赤文字：テキストを「“`」で挟んで「diff」と「-」（マイナス）のコマンドを入れる

シンタックスハイライトという、プログラミング言語を使った文字入力テクニック。以下のように入力すると、テキスト全体が四角で囲まれて、中の文字が赤色になります。

• 1行目：“`diff
• 2行目：– テキスト（⇦この部分が赤文字になる）
• 3行目：“`

基本テクニックである「“`テキスト“`」を使った囲みをベースにしつつ、「1行目の“`の後ろにdiff」「2行目の最初に–（マイナス）」と覚えておきましょう。

ただし、文字色が変わるのはPC版のみ。スマホで見たときは「“`」で挟んだだけの通常の囲みと同じ表示になるので注意してくださいね！

絵文字で横線や点、各種アイコンを作る

横線や点などの簡単な図形や、TwitterやYouTubeなどの各種アイコンを自作して、絵文字として登録してしまおうというもの。

デフォルトの絵文字や、テキストで打ったものに比べて、見栄えがグッと良くなるので、「ちょっと手間をかけてもっとオシャレにしたい！」という人にはおすすめです。

ということで、試しに作ってみた絵文字を使って、チャットを打ってみました。

ここで使った絵文字は、画像編集ソフトで簡単に作れます。パワーポイントなどでもOK！Twitterのアイコンなどは、拾った画像をPhotoshopなどで色を変えるのが良いと思います。

• Discordの導入方法や基本的な使い方が知りたい人はこちらもチェック

Discordコミュニティ運用をご検討中の方へ

弊社では「ギルドロケット」という、Discordを活用したゲームをより楽しく・長く遊んでもらうためのコミュニティ運用サービスを展開しています。

熱量の高いユーザーをクローズドコミュニティに囲い込み、仲間との盛り上がりを最大化させ、ゲームのリテンションを向上させることが期待できます。

「ゲームの継続率を高めたい」「リリース時のユーザー離脱を少なくしたい」「コミュニティを作ったけどイマイチ盛り上がっていない」といった方はぜひご確認ください。

ギルドロケットに関するお問い合わせ・資料請求

• ギルドロケットの概要・効果などについて知りたい方はこちら