デザインシステムをアジャイルで。表記ルールを自社サービスのデザインに

以前、「 デザインシステムをアジャイルで構築する方法 」という記事の展開で、今回は表記ルールに関する部分をお送りしようと思っています。
とはいえ、デザインシステムの話で、表記ルール？と思われる方もいらっしゃるかもしれません。よくイメージされるのは出版社や大企業の印刷媒体を意識した言語表現に関するルールを記載したものというイメージでしょうか？
ですが、そう言った体系的にまとまっている例は少なくともUIにおいての表記はある種の不文律の様なものがあるかと思います。それがグレーゾーンのままであることでアクセシビリティ・ユーザビリティの観点でも問題が起きるケースがあると感じていたため、今回は同じサイト構築時に試しに言語化してみたものの一部をご紹介いたします。

　―　
デジタルメディアにおいて考えるべき表記ルールの意義

私は表記ルールがUIを通して体験に貢献するシーンは実はかなり多いと考えています。例えば、リンクの文言に関してはアクセシビリティでよく言及されていますし、ボタンなどの表記ゆれによる迷いは、避けて通りたいところです。また、サービス独特の言い回しなどがある場合、それがユーザーさんのリテラシーとあっているかも検討する必要があるでしょう。

例えば、サイト内に申込導線があったらどうでしょうか？フォームページの場合、ユーザーさんに行動を促すことも多いため、タイトルの表記自体に「〜の申し込み」などと記載されることもあるかもしれません。

一方で申込みに関するページ全般がカテゴライズされていたら、入り口のページタイトルは「〇〇申込み」となるかもしれません。そして、ボタンは動的な行為をイメージして「申し込み」と表現するかもしれない。さて、これは表記揺れなのでしょうか？それぞれに役割の違いがあるため間違いでは無いような気がしますね。ただ、表記揺れの残念なところは深く考えずにこの揺れをコピペしたメンバーが意味の違いに気づかずに間違った使い方・同じ目的の時に異なる使い方をしてしまうということです。

ニュアンスが伝わればいいじゃないかと思われることもあるかもしれません。ですが、タイトルの枠を出た時に同様の表現がユーザーさんに小さな迷いを、制作側には無駄な逡巡時間（どっちの表現を使ったらいいのだっけ）を毎回持たせることになります。

それを初期に考えて設計・記載しておけば、ルールの確認のみで済むようになるはずですが、実際は前回のタイポグラフィ同様に明確な意義を確認できていないという点と、スタッフが力尽きていてどうしてもそこまで及びにくいという点で、カタチにされることが少ないのだと思います。

その為、いくつかのポイントをここでお話しすることで、力尽きている皆さんにもこちらも叩きとして使っていただけたら嬉しいなと思います。

　―　
デジタルメディアにおける表記のポイント

表記ルールと言ってはみましたが、私自身がずっとデジタルにいる人間のため、きちんと整った表記ルールとそれが正確に履行された世界を知っているわけではありません。そのため、そう言った世界で得られるものがなんなのかはわかっていないのですが、デジタルメディアの表記ルールにおいてはいくつかのポイントを抑えるとすぐに効果を得られると考えられるポイントがあるため、ここでご紹介いたします。

私が考えるデジタルメディアで最初に抑えるべき表記ルールの対象コンテンツは以下の5つになります。それぞれの理由とポイントを次項からご説明していきます。

・タイトルの表記ルール
・グローバル（サイド）ナビゲーションの表記ルール
・リンク表記とページタイトル（h2）の相互表記に関するルール
・UI（インタラクティブコンテンツ）における表記ルール
・テキスト表記（説明テキスト・注記）における表記ルール

　―　
タイトルとグロナビの表記ルール

こちらはデジタルメディアでは一致することが多いため一緒にご説明いたします。まず、ページタイトルはコンテンツタイトルに当たります。そのため、固有名詞としての役割を担うことが多いかと思います。シンプルに商品名やカテゴリ名が入ることも多いかと思います。

※ナビゲーションの文言や立ち位置に関する見解は別のnote（ナビゲーションは左？右？WEB屋は何を考えているか）に書いてあるので、よかったらそちらもご参照ください。

■ ページタイトル
・名詞表現で統一する
・ページが有する機能を端的に表せる表現を利用する
・ページ機能の定義が似ているものは以下の基準で表現する
　　設定：編集や変更、修正、管理など複数の機能を有する場合
 　　一覧：並列の情報をまとめて表示するページの場合
 　　登録：ページの主たる目的が新規登録や追加など既存のデータに対し更に新しく情報を追加することである場合
 　　編集：ページの主たる目的が既存のデータの編集である場合

・ナビゲーションとの連動とそれによる認知促進を考慮し助詞などの多用による冗長な表現を避ける

■ コンテンツタイトル（h3〜）
・名詞表現で統一する
・動的な処理に関してはタイトルではなくコンテンツの説明テキストに記載するようにするため名詞表現で統一する
・ナビゲーションとの連動を考慮しないためわかりやすさ親しみやすさを考慮し助詞の活用も可能とする

■ グローバルナビゲーションの表記ルール
・グローバルナビゲーションは一覧性を考慮し表記のトーンが揃うように調整する
・グローバルナビゲーションは一覧性を考慮し冗長な表現を避ける
・原則として助詞の仕様を避ける
・グローバルナビゲーションはコンテンツ名称の認知を優先し可能な限り名詞表現で統一する

この時はタイトルは固有名詞である。という方針で統一（可能な限り）しました。ページタイトルとナビゲーションの間で表記を統一すると決めていたため、よりコンパクトな表現に落としやすい名詞にしたという側面もあります。そのため、前述したような動的な行為を促すものとした表現はタイトルと切り分け、本文などでフォローする方針にしたということになります。

これはサイトの性質によって〇〇の場合はなどと決めてもいいかと思います。ただ、後述するようにボタンなどが絡むと一気に複雑になるため、その辺りも考慮した判断があるといいのでは無いかと思います。

また、「設定」「一覧」「登録」「編集」などのように、シーンによっては意味が重複するものが機能の特性上様々なところに存在していたのですが、出来るだけ数を減らしその役割を明確にしました。

ちなみに、社内用の資料にはもう少し細かくしたものを記載しています。

　―　
リンク表記とタイトルの相互表記に関するルール

こちらは、ページ遷移のリンク機能全般に関する記載で、前項の内容を一部含みますが、反対に、文中リンクやページタイトルを表記する場合のボタンなどの表記、「もっとみる」「詳しく見る」などの表記に関しても言及しています。特に、「もっとみる」「詳しく見る」に関しては、アクセシビリティ上、好ましいものでは無いのですが、いわゆる健常者にとっては使わないと視覚的にはとてもサイトが冗長となり見にくくなるという側面を考慮しどう言った時に使うべきものかを記載しました。

・原則サイドナビとページタイトルは表記を揃える
・例外として登録・変更・追加・削除などステータスによってページタイトルをシステム側で出し分けをしているものはその最適化を優先する
・システム側でページタイトルを出し分けをしているものは可能な限りそれらの意味を内包できる総合的な表記をナビゲーション側に付加する
・ヘッダー、フッターなどで省略表現が必要なエリアの表記は、（遷移先ページタイトルが省略表現ではコンテンツの補完が難しい場合に限り）ページタイトルの表示よりシンプルであることを前提に表記の変更を可能とする
topページ、下層index（リンク一覧：参照例）機能ページ、index（リンク一覧）機能パーツなどは各コンテンツの最適化を図るものとする
・ページ内リンクなどの文脈によって詳しい説明を必要とする場合は意味合いに迷いを生じさせない範囲でページタイトルとの表記の変更を可能とする
前後の文脈により遷移先が想像できるものは「もっとみる」などの汎用表現を利用しても良い

　―　
UI（インタラクティブコンテンツ）における表記ルール

こちらは以前紹介したnote（デザインシステムをアジャイルで構築する方法 ）で構築した基礎的なルールを元に記載しているためそこで決めた表現に対して説明をしていますが、コンバージョンボタン、フォームUI 、リンクの切り口で記載しています。

特に、この表記はシステムサイトであることを前提としていたため、初期に決めたUIを中心にわかりやすく設定するという思考を言葉の面で落とし込みやすくするように記載しました。

■ エリアプライマリボタン
・h2もしくはh3コンテンツのエリア最下部に配置された各コンテンツの選択、入力データを送信する機能のボタンは主語→述語という形でできることがわかるように表記する
EX：〇〇を登録する

■ ステータス変更UI
・チェックボックスやラジオボタンなどの選択させることを主体とするボタンに関しては目的に応じたステータスもしくは名詞を利用する

■ 遷移導線
ボタン
・登録ページへの遷移は登録フローの一部としてエリアプライマリに準じる
青テキストで表示するリンクは名詞表現で端的に表現する

テキストリンク
・コンテンツ、前後文脈に依存する
・サイドナビゲーション、文中リンク、ボタン形状を除く全ての遷移導線は>とセットで表記する

文中リンク
・文中リンクは文脈に依存する。ただし、遷移先をお店さんが想像しやすいものを前提とする
・原則としてデータ登録があるページからの遷移はデータ送信タイミング、入力データの保持などに対する認識にズレを生む可能性があるため多用しない。

　―　
テキスト表記（説明テキスト・注記）における表記ルール

対象となるサイトがシステムサイトだったため、操作によって何が起こるのかをできるだけわかりやすく伝えるために、UI以外のテキストに関しても基本的な方針を記載しました。
また、具体的にな事例集などを社内資料では添えています。ただ、これもまた、ごく一部を認識できる範囲で整えただけの形だったため、理想はこれを叩きに情報が充実していくことかと思います。

■ 全般
丁寧な言葉づかいを心がける
・ですますで文末をくくる
 親しみやすい表現にする
・くださいなど柔らかさをだすためにひらく
説明テキスト
・何をしなければならないのか理解できるように〜してくださいという形になるよう心がける
■ 注記
・状態や条件を説明することが多いため〜となりますなどの表現にする

　―　
まとめ

いかがでしょうか？事例の紹介なので、今回も駆け足になってしまいましたが、一部でも今後皆さんがサイトやサービスを作っていく流れで不明瞭な部分を洗い出す素材としてお役に立てることがあれば嬉しいです。

　―　
参考書籍・サイト

表記とUIの関係に積極的に言及している記事は見つけられなかったのですが、通常の本文などで参照すべき表記ルールに関する書籍、サイトでも勉強になるところがたくさんあるので、実際に参考にさせていただいたサイトや精度を上げる段階で今後見ていきたいサイトなどを以下に掲載させていただきました。

文字のひらきなどのあたりは参考にした上で検討をしたのですが、それだけでも色々不足はあると思うので、もし、この参照元と相反する間違いを私の方で記載しているようなことがあればいつでもご指摘ください。

■ 一般的な表記ルールに関して
□ 日本語表記ルールブック | 日本エディタースクール | 三秀舎
□ この漢字はひらく？サイトの表記ゆれを防ぐ、知っておきたい文章マナー。｜ビリオンプランのスタッフブログ
□ お問合せ？お問い合わせ？ -現在、ホームページの制作を依頼しています- ビジネスマナー・ビジネス文書 | 教えて!goo
□ 表記の揺れとは？その種類と、回避・修正するためのWordを使ったテクニック｜トイロハ
□ 送り仮名の付け方：文部科学省
□ 外来語の表記：文部科学省
□ web?Web？WEB？ホームページの表記ルールを統一するために気をつけたいポイントまとめ｜ferret [フェレット]
□ まだ「文字校正」で消耗してるの？ LIGブログの表記ルールについて整理してみた【2018年版】
□ 表記ゆれ - Wikipedia
□ Webサイトで注意したい記号・表記の種類とルール
□ W3C 第3章 行の組版処理

■ 言語化が間に合っていないけれど今後積極的に言語化するために参考にしたいフォーム周りのUXライティング
□ UIデザインをぐっと引き立てる！UXライティングの実践ポイント集

　―　
関連note

関連する私のnoteはこちらです。よかったらこちらもみてやってください☺️

□ デザインシステムをアジャイルで構築する方法
□ デザインシステムをアジャイルで。タイポグラフィックマトリックスをデジタルの世界に
□ デザインシステムをアジャイルで。カラーシステムは機能性から
□ CDO1年生のビジョン・ミッション・コアバリューからタグラインを作るまで

　―　
このnoteに関連する今後の掲載予定テーマ

タイポグラフィ同様に下記の展開をサクサク出つもりです。つもり。。

□ デザインシステムをアジャイルで。UIをブランドリソースのようにルール整理してみる