投稿画面のUI整理（2.0.33）
投稿画面のUI整理（2.0.33）
2.0.33 から、投稿画面の UI デザインを大きく見直しました。
- 公開範囲や引用範囲など、ポスト自体の設定が増えてきた
- 旧 UI では情報の置き場所が限界に近づいていた
- これからも機能追加が続く前提で、拡張しやすい構造にしたかった
この記事では、レガシー UI から現在のデザインに至るまでの試行錯誤と、その背景にある考え方をまとめます。
動機
Mastodon 4.5.0 から「引用許可」の設定が追加されました。
一方で、旧 UI では公開範囲の領域を大きく取っており、
これ以上ポスト設定を増やすとレイアウトが破綻する懸念がありました。
- 公開範囲などの重要な情報は、見やすく・変更しやすく保ちたい
- ただし、画面上部を設定 UI が占有しないようにしたい
このアンバランスさを解消するのが、今回の改修の出発点でした。
旧 UI
特徴
LiquidGlass の UI を踏襲し、キーボード上に大きめのツールバーを配置していました。
- 編集ツール部分は左右にスワイプ可能で、拡張性は高い
- 編集ツール以外（公開範囲など）は上の列にまとめて配置
- 一見リッチだが、情報の優先度がやや分かりにくい
プロトタイプ 1：ポスト設定をツールバー外へ
公開範囲・引用範囲・言語をツールバーの外に出した最初の案です。
- 情報としては整理されたが、全体のバランスに違和感があった
- matsuji さんにデザインレビューを依頼
フィードバック 1：情報の優先度を整理する
matsuji さんからは、次のようなフィードバックをもらいました。
- 警告文の表示は下のツール側にまとめる
- 文字数はより目立つ位置に出した方がよい
このタイミングで、
「編集ツール群そのもののカテゴライズが整理されていない」
という問題に気付きます。
リファレンス 1：Ivoly との比較から見えた違和感
検討を進める中で、意図せず Ivoly の設計思想に近づいていることに気付きました。
同時に、次のような違和感も見えてきます。
- 言語ボタンが目立ちすぎるが、ポスト作成時にそこまで言語を意識したいだろうか？
- 公開範囲を変更すると、言語ボタンの横位置が動いてしまう
- ツールバーの外側に要素を置くと、スクロール時に本文と重なりやすく、背景付与などで視認性確保が必要になる
これらは DAWN にも共通する課題だと感じ、解消すべきポイントとして整理しました。
フィードバック 2：@/# ボタンの「性質の違い」に気付く
matsuji さんが「自分が 1 から作るならこんな感じ」という案を共有してくれました。
- ここで、@ / # ボタンが他の編集ツールと性質が違うことに気付く
- iOS デザインの文脈では送信ボタンを右上に置くのが自然だが、DAWN ではあえて下に残したいと感じた
X でも送信ボタンは上にあるものの、
サードパーティアプリとしては「送信までの手軽さ」がアイデンティティになり得ると考え、
この方針を維持することにしました。
プロトタイプ 2：3 つのレイヤーに分解する
編集まわりの要素を、次の 3 つにカテゴライズしました。
- 公開範囲
- 編集ツール
- 擬似キーボード（絵文字・ハッシュタグ・メンション）
公開範囲
X のアプリを参考に、本文の上に控えめに配置しました。
すでに多くのユーザーが慣れているパターンなので、
新たな学習コストを生みにくい形です。
編集ツール
メディア挿入などの編集系機能は、すべて左下の + ボタンに集約しました。
擬似キーボード
絵文字・ハッシュタグ・メンションを分離し、
キーボードのキーと同列のアクセシビリティを与えました。
この時点では文字数カウントの置き場所がなくなったため、
一旦「文字数表示なし」で試してみることにしました。
Mastodon は 500 文字など比較的余裕のある上限が多く、
常時文字数を表示しなくても困りにくいことにも気付きます。
リファレンス 2：公開範囲ボタン
公開範囲ボタンの表現は、X をリファレンスにしました。
- X では下向きシェブロン付きのボタンが採用されている
- ただし、シェブロンがなくても意味は十分伝わる
そのため DAWN では、シェブロンなしのシンプルなスタイルを選択しています。
ブラッシュアップ 1：標準アプリの文脈に寄せる
プロトタイプで方向性が固まったので、細部のブラッシュアップに入ります。
ボタンサイズと余白
キーボード上のボタンサイズや余白を、Safari など iOS の標準アプリに揃えました。
送信ボタン
横長だったボタンを円形に変更。これも Apple 純正アプリに合わせています。
擬似キーボード
ボタン群を左寄せに調整しました。
@ ボタンが送信ボタンに近すぎると、誤タップへの不安があったためです。
公開範囲ボタン
ラベルを「公開」から「全員」に変更しました。
X と同じく、より具体的に公開範囲をイメージできる表現にしています。
また、「公」という字が与えるプレッシャーを和らげる狙いもあります。
ブラッシュアップ 2：ラベル化と懸念点
編集ツールをラベル付きにしたことで、機能の意味が伝わりやすくなりました。
メディア挿入や Now Playing は、メッセージアプリに倣ってアプリアイコンを表示しています。
一方で、次のような懸念も出てきます。
- メニュー全体がやや大きく感じられる
- 警告文ボタンの存在感が強すぎる
- Image Playground や作文ツールは、ここから呼び出す必然性が薄いのに、広い面積を占有している
ブラッシュアップ 3：メニュー構造の整理
懸念を踏まえて、メニュー構造を整理しました。
- Image Playground と作文ツールをサブメニュー側に移動
- 警告文はメインメニューから外し、後述する「ポスト設定」メニューへ移動
- 投票と #きつねかわいい の SFSymbols を自作
- 絵文字アイコンが Messages のステッカーと同じだったため、少し崩したデザインに変更
ブラッシュアップ 4：ポストメニューと文字数表示
ここからは、ポストのメタ情報まわりを整理していきます。
- 右上にポストメニューを追加し、いくつかの機能をそこへ移動
- 文字数表示は「現在の文字数／残り可能文字数」を切り替えて表示できる機能として実装
- 「コメント追加」は、従来の警告文機能のリネーム。メニュー上での印象をやわらげる狙いがあります。
リファレンス 3：Pages の文字数表示
文字数表示の考え方は、Pages アプリの単語数表示を参考にしています。
- 常時表示ではなく、必要なときに参照できる
- 画面上の情報量を増やしすぎない
ブラッシュアップ 5：初心者と上級者の両立
文字数は、デフォルトでは非表示としました。
そのうえで、文字数表示部分をタップすることで、
表示方法をユーザーが選べるようにしています。
- 通常は文字数を気にせず書ける
- 文字数が少なくなってきたときだけ、自動的に表示される
これにより、初心者と上級ユーザーのどちらにとっても
ストレスの少ない UI になったと考えています。
ブラッシュアップ 6：投稿オプション画面の拡張
公開範囲ボタンを押したときに開いていた「公開範囲の設定」は、
ポストのメタデータ全般を扱う「投稿オプション」画面に拡張しました。
- 言語設定もこの画面に集約
- 今後追加される引用範囲の設定もここで扱えるように設計
SFSymbols：絵文字アイコンのデザイン
絵文字アイコンは、Messages のステッカー表現を踏襲しつつ、
意味の違いを出すために「下向きに折り目」をつけたデザインにしました。
絵文字ということで、目の付いているバージョンも作成しましたが、ポスト作成画面でのプレッシャーが増したため採用を見送りました。
また、コミュニティタグの「きつねかわいい」のアイコンも足跡を２つに増やし、「コミュニティに足跡を残す」「ナワバリ感」を強調しました。
投票ボタンはMessageを参考に太めのスタイルを採用しました。
Recap：今回の UI 改修で得られたもの
今回の UI 調整を通じて、投稿作成画面は次のような状態になりました。
- 投稿エリアをより広く使えるようになった
- 機能の拡張性を確保しつつ、新しい機能も無理なく盛り込めた
- 各ツールの配置がカテゴライズされ、ユーザーが挙動を予測しやすくなった
ツール群をすべて直置きする構成に比べると、
特定の機能へのアクセスは最大 2 タップ分だけ増えました。
しかし、一般的なアプリケーションが提供するアクセシビリティの範囲には収まっており、
カテゴライズによる分かりやすさや画面の見通しのよさを含めて考えると、
十分バランスの取れた落としどころになっていると感じています。