SNSアプリの投稿画面のUIデザイン改善

この記事では、iOS 向け Mastodon クライアント DAWN が行った投稿画面の UI デザイン改善について解説します。
DAWNは、iOSのネイティブアプリとしての使いやすさと、Mastodonの分散型SNSとしての特性を両立させることを目指しています。
先日、App Storeで３つのフィーチャー掲載をいただき、ユーザーの皆様からも高い評価をいただいています。

今回の変更では、よりネイティブアプリらしいLiquid GlassのUIを追求しつつ、投稿画面の情報整理と機能拡張を実現しました。
アップデートを続けていると、つい機能が増えすぎて道具箱のようなUIになりがちですが、今回の改善ではその課題に対処し、ユーザーが直感的に操作できるデザインを目指しました。
この記事では、レガシー UI から現在のデザインに至るまでの試行錯誤と、その背景にある考え方をまとめます。

投稿画面のUI整理（2.0.33）

2.0.32	2.0.33

2.0.33 から、投稿画面の UI デザインを大きく見直しました。

• 公開範囲や引用範囲など、ポスト自体の設定が増えてきた
• 旧 UI では情報の置き場所が限界に近づいていた
• これからも機能追加が続く前提で、拡張しやすい構造にしたかった

---

動機

Mastodon 4.5.0 から「引用許可」の設定が追加されました。

一方で、旧 UI では公開範囲の領域を大きく取っており、これ以上ポスト設定を増やすとレイアウトが破綻する懸念がありました。

• 公開範囲などの重要な情報は、見やすく・変更しやすく保ちたい
• ただし、画面上部を設定 UI が占有しないようにしたい

このアンバランスさを解消するのが、今回の改修の出発点でした。

---

旧 UIの特徴

LiquidGlass の UI を踏襲し、キーボード上に大きめのツールバーを配置していました。

• 編集ツール部分は左右にスワイプ可能で、拡張性は高い
• 編集ツール以外（公開範囲など）は上の列にまとめて配置
• 一見リッチだが、情報の優先度がやや分かりにくい

---

プロトタイプ 1：ポスト設定をツールバー外へ

公開範囲・引用範囲・言語をツールバーの外に出した最初の案です。
情報としては整理されましたが、全体のバランスに違和感がありました。
また、スクロール時に本文と重なりやすい点も課題として残ります。
一人で考えていても進みが悪いため、このスクリーンショットをmatsujiさんに共有し、フィードバックをもらうことにしました。

---

フィードバック 1：情報の優先度を整理する

matsujiさんからは、次のようなフィードバックをもらいました。

• 警告文の表示は下のツール側にまとめる
• 文字数はより目立つ位置に出した方がよい

このフィードバックによって、客観的に見てもやはり上段のツールバーのバランスが悪いことが確証に変わりました。
そして、警告文ボタンが下のツールバーに移動しても違和感がないということは、「そもそもツールバーに入っている編集ツール群のカテゴライズが整理されていない」ということでもあります。

---

リファレンス 1：Ivoly との比較から見えた違和感

検討を進める中で、意図せず tapbotsのmastodonアプリ、Ivoly の設計思想に近づいていることに気付きました。

同時に、次のような違和感も見えてきます。

1. 言語ボタンが目立ちすぎるが、ポスト作成時にそこまで言語を意識したいはずがない。
2. 公開範囲を変更すると文字数が変わり、言語ボタンの横位置が動いてしまい気持ちが悪い。
3. ツールバーの外側に要素を置くと、スクロール時に本文と重なりやすく、背景付与などで視認性確保が必要になる。

これらは DAWN にも共通する課題だと感じ、解消すべきポイントとして整理しました。

---

フィードバック 2：@/# ボタンの「性質の違い」に気付く

しばらくして、matsuji さんが「自分が 1 から作るならこんな感じ」という案を共有してくれました。

この案の面白いところは、@ / # ボタンがキーボード上に独立して配置されている点です。
これを見て、これらのボタンは「編集ツール」ではなく、「キーボードの補助ツール」としての性質が強いことに気がつきました。

また、既存のUIと大きく異なる点として、送信ボタンが右上に配置されています。
iOS デザインの文脈では送信ボタンを右上に置くのが自然ですが、DAWN ではあえて下に残したいと感じました。

X でも送信ボタンは上にあるものの、サードパーティアプリとしては「送信までの手軽さ」がアイデンティティになり得ると考え、この方針を維持することにしました。

その他のツールを+ボタンにまとめるアイデアも、Messagesアプリで採用されているパターンであり、拡張性の観点からも合理的です。

正直同じようなUIを考えてはいたのですが、変更が大きくそこまでやらなくてもいいかなぁと思っていました。
が、第三者の視点からも同じような結論が出たことで、何か普遍的な真理があるのかもしれないと感じ、次のプロトタイプ作成に進むことにしました。

---

プロトタイプ 2：3 つのレイヤーに分解する

これまでのフィードバックやリファレンスを踏まえて、プロトタイプのUIを作成しました。
まずはツールのグルーピングを見直し、編集まわりの要素を次の 3 つにカテゴライズしました。

1. 公開範囲
2. 編集ツール
3. 擬似キーボード（絵文字・ハッシュタグ・メンション）

公開範囲

X のアプリを参考に、本文の上に控えめに配置しました。

すでに多くのユーザーが慣れているパターンなので、新たな学習コストを生みにくい形です。

編集ツール

メディア挿入などの編集系機能は、すべて左下の + ボタンに集約しました。

擬似キーボード

絵文字・ハッシュタグ・メンションを分離し、キーボードのキーと同列のアクセシビリティを与えました。

この時点では文字数カウントの置き場所がなくなったため、一旦「文字数表示なし」で試してみることにしました。

Mastodon は 500 文字など比較的余裕のある上限が多く、常時文字数を表示しなくても困りにくいことにも気付きます。

---

リファレンス 2：公開範囲ボタン

公開範囲ボタンの表現は、X をリファレンスにしました。

• X では下向きシェブロン付きのボタンが採用されている
• ただし、シェブロンがなくても意味は十分伝わる

そのため DAWN では、シェブロンなしのシンプルなスタイルを選択しています。

---

ブラッシュアップ 1：標準アプリの文脈に寄せる

プロトタイプで方向性が固まったので、細部のブラッシュアップに入ります。

ボタンサイズと余白

キーボード上のボタンサイズや余白を、Safari など iOS の標準アプリに揃えました。

送信ボタン

横長だったボタンを円形に変更。これも Apple 純正アプリに合わせています。

擬似キーボード

ボタン群を左寄せに調整しました。

@ ボタンが送信ボタンに近すぎると、誤タップへの不安があったためです。

公開範囲ボタン

ラベルを「公開」から「全員」に変更しました。

X と同じく、より具体的に公開範囲をイメージできる表現にしています。

また、「公」という字が与えるプレッシャーを和らげる狙いもあります。

---

ブラッシュアップ 2：ラベル化と懸念点

編集ツールをラベル付きにしたことで、機能の意味が伝わりやすくなりました。

メディア挿入や Now Playing は、メッセージアプリに倣ってアプリアイコンを表示しています。

一方で、次のような懸念も出てきます。

1. メニュー全体がやや大きく、よく使うツールが遠い
2. 警告文ボタンの存在感が強すぎる
3. Image Playground や作文ツールは、ここから呼び出す必然性が薄いのに、広い面積を占有している

---

ブラッシュアップ 3：メニュー構造の整理

懸念を踏まえて、メニュー構造を整理しました。

1. Image Playground と作文ツールをサブメニュー側に移動
2. 警告文はメインメニューから外し、後述する「ポスト設定」メニューへ移動
3. 投票と #きつねかわいい の SFSymbols を自作
4. 絵文字アイコンが Messages のステッカーと同じだったため、少し崩したデザインに変更

---

ブラッシュアップ 4：ポストメニューと文字数表示

ここからは、ポスト作成画面の設定まわりを整理していきます。

1. 右上にポストメニューを追加し、いくつかの機能をそこへ移動
2. 文字数表示は「現在の文字数／残り可能文字数」を切り替えて表示できる機能として実装
3. 「コメント追加」は、従来の警告文機能のリネーム。メニュー上での印象をやわらげる狙いがあります。

---

リファレンス 3：Pages の文字数表示

文字数表示の考え方は、Pages アプリの単語数表示を参考にしています。

• 常時表示ではなく、必要なときに参照できる
• 画面上の情報量を増やしすぎない

---

ブラッシュアップ 5：初心者と上級者の両立

文字数は、デフォルトでは非表示としました。

そのうえで、文字数表示部分をタップすることで、表示方法をユーザーが選べるようにしています。

• 通常は文字数を気にせず書ける
• 文字数が少なくなってきたときだけ、自動的に表示される

これにより、初心者と上級ユーザーのどちらにとってもストレスの少ない UI になったと考えています。

---

ブラッシュアップ 6：投稿オプション画面の拡張

公開範囲ボタンを押したときに開いていた「公開範囲の設定」は、ポストのメタデータ全般を扱う「投稿オプション」画面に拡張しました。

• 言語設定もこの画面に集約
• 今後追加される引用範囲の設定もここで扱えるように設計

---

SFSymbols：絵文字アイコンのデザイン

標準のSFSymbolsでは不足していたので、いくつか自作しました。

絵文字アイコンは、Messages のステッカー表現を踏襲しつつ、意味の違いを出すために「下向きに折り目」をつけたデザインにしました。

大きなステッカーは体重をかけて押し付けるイメージ、小さな絵文字は軽く貼り付けるイメージと差別化できたと思います。

絵文字ということで、目の付いているバージョンも作成しましたが、ポスト作成画面でのプレッシャーが増したため採用を見送りました。

また、コミュニティタグの「きつねかわいい」のアイコンも足跡を２つに増やし、「コミュニティに足跡を残す」「ナワバリ感」を強調しました。

投票ボタンはMessageを参考に太めのスタイルを採用しました。

---

Recap：今回の UI 改修で得られたもの

2.0.32	2.0.33

今回の UI 調整を通じて、投稿作成画面は次のような状態になりました。

• 投稿エリアをより広く使えるようになった
• 機能の拡張性を確保しつつ、新しい機能も無理なく盛り込めた
• 各ツールの配置がカテゴライズされ、ユーザーが挙動を予測しやすくなった

ツール群をすべて直置きする構成に比べると、特定の機能へのアクセスは最大 2 タップ分だけ増えました。

しかし、一般的なアプリケーションが提供するアクセシビリティの範囲には収まっており、カテゴライズによる分かりやすさや画面の見通しのよさを含めて考えると、十分バランスの取れた落としどころになっていると感じています。