アコーディオン｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私が入社してから1年半。2人目プロダクトデザイナーのkassy、デザインエンジニアのナカシマ、マーケのゆにこがジョインし、一歩一歩、いっしょにデザイン組織体制の構築を進めています。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。その一環で、「UIデザインポリシー整理（仮）」というプロジェクトをはじめました。これは、MNTSQとしてのUIデザインの基準や方針を決めていくものです。
UIデザインには明確な正解がなく、アプローチによって見解が割れやすいものもたくさんあります。そこで、私たちはUIデザインのアレコレについてディスカッションを重ねて、UI の名称や利用するユースケースなどをまとめ、それをMNTSQらしいポリシーとして作り上げていこうと考えました。プロジェクト名は、まだ仮のものです。ぴったりハマるキャッチーな名前が見つかれば、変更するかもしれません（ネーミング大事）。
プロジェクトには、プロダクトデザイナーとデザインエンジニアが参加しています。週に1回、集まってディスカッションをしています。1回につき1つのトピックを取り上げて、意見交換や議論をします。
ディスカッションの時間は1回30分。もし話したいことが残っていたら、次回に持ち越したり、別途チャットでやりとりしたりしています。
プロジェクトを始めてから、まだ数回ですが、すでに手応えを感じています。
各人がこれまで積み重ねてきた見識や、UIデザインに対するアプローチの擦り合わせ
UIデザインに関する新しい発見や知識のアップデート
デザイン組織として目線がアラインできつつある
これらは、今後のプロダクト開発やデザイン品質の向上につながると期待しています。今後も継続してディスカッションを行い、UIデザインポリシーを整理していきます。
このnoteでは、そのディスカッションの様子や、導き出したポリシーについてご紹介していきたいと思います。
それでは、今回のトピックは「アコーディオン」です。
アコーディオン
アコーディオンとは、項目をクリック（タップ）すると、隠れていた詳細情報が表示されるUIです。再びクリックすると、詳細情報は隠れます。このようにして、同時に見える情報を減らし、画面をシンプルに保ちます。これにより、優先度が高く必要な情報を見つけやすくなります。また、スペースも節約できます。
アコーディオンの項目には、開閉の状態を示す記号としてシェブロンのアイコンを使います。閉じている時は下向きで、開いている時は上向きです。テキストは左端に寄せて、アイコンは右端に寄せて配置します。
アコーディオンは、ナビゲーションメニューのアイテムをネストする場合や、コンテンツを折りたたむ場合にも使用できます。コンテンツの場合は、折りたたまれた状態で見出しのテキストを表示します。見出しのテキストは長すぎないように最大でも3行程度に収めます。コンテンツ幅が大きくて左右に隙間ができる場合は、hover時のスタイルや区切り線などで、項目が一つの要素であることを分かりやすくします。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：アコーディオンを表す記号って結構揺れません？ シェブロン（⌃）だったりプラス（+）だったり。シェブロンも閉じている時、開いているときにどの向きなのかけっこうまちまち
ナカシマ：プラス（+）はアコーディオン以外でも使うから、避けたほうがよいかも。シェブロン上：開いた状態／シェブロン下：閉じた状態がしっくりくる
kassy：シェブロン右だと、リンクにみえる？ それにとくにアプリだとドリルダウンを掘っていくときに使うよね
ナカシマ：メニューアイテムを明示的にリンクだと示すのにシェブロン右を使うイメージかな…… シェブロン右はノブを倒すメタファーを感じる。シェブロン下はページ内でスクロールするアンカーリンクの意味合いもある
記号の位置って右？ それとも左？
kassy：フォルダツリーのUIでは左にあるのが自然ですよね。でもアコーディオンとは分けて考えたほうがよさそう？
クボスケ：記号もちっちゃい三角のキャレットだったりしますよね（MacのFinderはシェブロンだけど）
ナカシマ：幅が可変のレイアウトだったり、リキッドレイアウトでコンテンツ幅いっぱいになる場合だと、テキストが左で記号が右端にあると遠くて迷う場合も。アイテムごとに線で区切ったり、hover時にアイテムの地色を変えるなど、インタラクションでケアすることもできますね
他のUIパーツにも言えることだけど、左に置くか右に置くか情報の性質から考えるのもありそう。アイコンつきのボタンがリストのアイテムに入ってくる場合などもある
クボスケ：意外と広がりのあるトピックですね
kassy：場合わけをするのもありだし、左右どうするかは状況によって判断するという着地はどうだろうか
ナカシマ：ユースケースをある程度例示してはどうでしょうか
クボスケ：ナビゲーションの場合とコンテンツの場合で大別できそうですかね。とくにコンテンツについては折り畳んだ時の見出しテキストが長い場合の考慮も必要そう。
ナビゲーションのメニューアイテムとしては、テキストが左でアイコンが右端なのかな。幅はデスクトップのサイドバー、スマートフォンの全幅くらいをイメージ
kassy：ポリシーとしては、AmebaのSpindleくらい抽象度高めの示しかたでもいいのでは？
クボスケ：コンポーネントのつくりという粒度をイメージして話していましたが、たしかにアイコンとテキストの配置・関係性という視点で考えるのもありそうですね。アイコンつきボタン一般についてはまた別途話すとして、メニューアイテムのアコーディオンについてはだいたい整理できましたかね
ナカシマ：コンテンツ内のアコーディオンの場合も、配置はメニューアイテムと同じでよさそうだが、ボリュームによってはテキストと右端のアイコンの間の距離が開くため、認知的負荷を下げるための工夫が必要だと思う
クボスケ：アコーディオンの見出しテキスト自体が長い場合の省略表現は、状況に任せるでいい？
kassy：FAQ のようなものをイメージしました
クボスケ：FAQコンテンツにアコーディオンを使う場合の挙動は、notionとかどういうツールでつくるか、その仕様に依存する部分もありそう
折り畳まれた状態の見出しテキストを1行に制限して丸めてしまうと、実用性を損ないそう。たとえば見出しは3行以内に端的なテキストで収めようなど、複数行の場合についてはガイドラインで示すなどがいいのでは
アコーディオンがグループ化されている時に、ひとつを開いたら自動的にそれ以外を閉じるか、やコンテンツを印刷するケースへの配慮などの論点もありそうですね