メニュー画面・要素の命名規則
前提：Discordサポートに従う
注意：規則性を見つけるのが目的ではなく他のページでメニューの名前がバラバラだったら検索しにくい気がしたのでとりあえず名前付けよう、となっただけwogikaze.icon
原則
アイコンとして表示するのが主な目的なので、リンクを入力する際に迷わないような命名であれば問題ありません。coolwind0202.icon
現在はスラッシュで区切って階層化するだけの、ゆるい運用になっています。
アクション名
右クリック
左クリック
クリック
右クリックにしかイベントハンドラが設定されていない場合
右クリックと左クリックで同じ内容が表示される場合
ホバー
要素をホバーした際に表示される要素
例
サーバー名/クリック/レイドを通報.icon
この要素は「サーバー名/右クリック/レイドを通報」と名付けました。
以下の理由で名付けました。
サーバー名を右クリック（アクション）して表示される
テキストは「レイドを通報」
すべてがこのように名付けられるわけではありません。
ただし、アクション名は統一します。
要素の種別やアクションは、人によって定義がバラバラだからです。
リンクを入力する際に混乱します。
例外
特定の画面に属さないが、それ自体は意味を持たない汎用的なコンポーネント
「UI/」というプレフィックスを付けて管理することがあります。
例
UI/トグルボタン.icon
「〇〇エリア」
コンテナ要素によってまとめられた（矩形）領域を便宜上、エリアと呼んでいます。
ボタン要素は、記法が実装されています。
もし迷ったら相談することにしましょうcoolwind0202.icon
すでに命名されている場合は、基本的にはそれに追従します。
（参考）命名NG集
「チャンネルリストコンテキストメニュー」
理由
「コンテキストメニュー」の意味が人によってバラバラだった
変更例
チャンネルリスト/右クリック
「サーバー名プルダウンメニュー」
理由
「プルダウンメニュー」の意味が人によってバラバラだった
変更例
サーバー名/左クリック
/icons/hr.icon
以下は過去のルール（案出し）です。
coolwind0202.icon
メニューの各要素にも名前を付けたい
UI要素のスクリーンショットをチャンネルを作成/チャンネルを作成ボタン.iconのように使えたら便利だと思うので
同じテキストで、はたらきが違うものがある
サーバー名/クリック/チャンネルを作成.icon
モーダルへ遷移ボタン
このボタンは重要
チャンネルを作成/チャンネルを作成ボタン.icon
実際にチャンネル作成するボタン
ページは操作説明にしか使わないかも
操作説明のためのスクリーンショットは、アイコン記法が見やすい
いちいち名前書くよりもそっちの方が絶対見やすいwogikaze.icon
初めて見てうれしかった(そんな方法が！と)
操作説明用のページに共通する命名規則が必要？
チャンネルを作成.icon
モーダル
種別
タイトル、命名規則の方がすっきりする？
そうですね。気づいたときに適当に変えてもらってok_hand.iconですwogikaze.icon
叩き台
Discord内にタイトルがあり、重複もない場合
タイトルをそのままページ名にします。
タイトルがない場合
独自にタイトルを決め、その命名を一箇所に記録します。
画面・要素のタイトルからはじめる
画面・要素種別を後ろに付ける
モーダル
レイドを通報.icon
ボタン
チャンネルを作成/チャンネルを作成ボタン.icon
セレクトメニュー
いくつかの選択肢から一つ選ぶもの
ページ
プロフィール設定ページなどはこれ
コンテキストメニュー
サーバー名/右クリック.icon
プルダウンメニュー
サーバー名/クリック.icon
エリア
ペイン？
パネル？
ポップアップメニュー
モーダルとの区別
モーダルは元画面から制御を奪い、操作が完了するまで返さない
オプション(トグルボタン)
https://gyazo.com/75016b8fcf88acab8865eaaabda9bcb9
サイドバー
<-> ペイン
タブバー
名前衝突の解消
操作説明のアイコン用ページの場合
末尾に通し番号振るだけでも問題ない？
そうでない場合
はたらきで区別するcoolwind0202.icon
1. テキストをそのままページ名にしたページを作る
2. 同じテキストの要素は、はたらきで区別してそれぞれ別のページに説明を書く
3. 1.のページに、2.へのリンクを置く
e.g.
チャンネルを作成
このページに↓のリンクを置く
要素のアイコンも添える
チャンネルを作成するボタン
チャンネルを作成ポップアップメニュー
チャンネルを作成ポップアップメニューを開くボタン
はたらきの例
〇〇を開く（〇〇は主に他の要素）
〇〇を移動する
問題点
基準とするコンポーネントから階層が深くなるほど名前が長くなる
区別するためには仕方ない
名前置き場
サーバー設定へ移動するボタン
サーバー設定
サーバー設定サイドバー
サーバー設定ロールペイン
サーバー設定連携サービスペイン
サーバー名
サーバー名コンテキストメニュー
サーバー名左クリックコンテキストメニュー
サーバー名右クリックコンテキストメニュー
未定
サーバー通知ペイン
サーバー名の下に置かれる汎用的な領域
UI/サーバー/サイドバー/サーバー名/左クリック
サーバー設定
※ ここでは省略しているが、実際には「UI/サーバー/サーバー名/左クリック/サーバー設定」
UI/サーバー/サイドバー/サーバー名/右クリック
サーバー設定
UI/サーバー設定/ロール
モーダルはルートの要素
サイドバー
概要
ロール
概要
ロール
ロールを作成
UI/フレンドをサーバーに招待する
モーダルはルートの要素
レイドを通報
UI/レイドを通報
モーダルはルートの要素
UI/メッセージを削除
モーダルはルートの要素
UI/テキストチャンネル
ルートとして指定されている要素
メッセージ
メッセージを削除
ピン留め
メッセージ
ジャンプ
ルール
すべてのUI要素のページには「UI/」と振る
モーダルは原則としてルートの要素とする
ページ名が長くなりすぎないように、一部のオブジェクトは別途ルートとする
ルートとして指定した要素は、UI/要素名というページにする
例
テキストチャンネルはサーバー内のモデルだが、
階層の規定
名前募集中（特に「メイン」）
https://gyazo.com/8a7632e12e4bc8e6bbe570aba8e03184
赤線で囲った部分
UI/サイドバー
UI/アカウント
UI/サーバー（青線で囲った部分）
UI/サーバー/サイドバー
UI/サーバー/サイドバー/サーバー名
UI/サーバー/サイドバー/チャンネルリスト
UI/チャンネル（緑線で囲った部分、後述）
UI/サーバー/検索ボックス（検索対象がサーバーのため、チャンネル/ヘッダーに入れるのは不適切）
ルートとして指定する要素1
UI: チャンネル
チャンネル/ヘッダー
メンバーリスト
UI: チャンネル/メッセージ入力欄
UI: チャンネル/入力欄/GIF
UI: チャンネル/入力欄/スタンプ
UI: チャンネル/入力欄/絵文字
ヘルプ
受信ボックス
まとめ（清書）
原則
ページ名から要素を特定可能
【親要素のページ名】/【テキスト】【要素種別】
解説
その要素は何に属しているか？
親にあたるページのページ名を頭に付ける
コンテキストによって要素の意味が変わるため
例
サーバー設定/ロールタブ.icon
サーバー設定モーダル/サイドバー/ロールタブ
この要素は
サーバー設定モーダル
サイドバー
ロール（タブ）
直接の親はサーバー設定モーダル/サイドバー
サーバー名/クリック/チャンネルを作成.icon
サーバー名プルダウンメニュー/チャンネルを作成ボタン
この要素は
サーバー名プルダウンメニュー
チャンネルを作成（ボタン）
要素の種別は何か？
画面
その画面を開くと後ろの画面が操作できない？
できない
モーダル
レイドを通報.icon
できる
ポップアップメニュー
単なる領域の場合はペイン
インタラクション
ボタン
ロールを作成.icon
テキストボックス
セレクトメニュー
トグルボタン
ナビゲーション
サイドバー
メニュー
プルダウンメニュー
サーバー名/クリック.icon
親要素をクリックすると下に選択肢が並ぶ。
コンテキストメニュー
サーバー名/右クリック.icon
親要素を右クリックすると表示される。
例外
タイトルにあたるテキストがない場合
親のページが既にあり、かつ「プルダウンメニュー」「コンテキストメニュー」の場合
例
サーバー名/クリック.icon
サーバー名プルダウンメニュー
【親要素のページ名】【要素種別】とする。
そのメニューは親要素の一部と考えるのが自然なため。
テキストだけで要素が特定可能な場合
この例外に該当するケースがほとんど
どの要素なのか自明なら、テキストをそのままページ名にする
要素種別も不要
長すぎる場合
特定可能な範囲で親要素のページ名を省略してもよい
例
サーバー名/クリック.icon
サーバー名プルダウンメニュー
例外：タイトルにあたるテキストがない
サーバー名/クリック/サーバー設定.icon
サーバー名プルダウンメニュー/サーバー設定ボタン
サーバー名/クリック/レイドを通報.icon
サーバー名プルダウンメニュー/レイドを通報ボタン
ロールを作成.icon
ロールを作成
例外：テキストだけで要素を特定可能
そのまま書き下すと「サーバー設定モーダル/ロールペイン/ロールを作成ボタン」になる
チャンネルを作成.iconアイコンを画像みたいに表示できるUserCSSもあります(一応)