読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

スマホサイトのコメント投稿のUIについて考える

Webデザイン UI

あるスマホ向けのウェブサイトを作成する案件で、「コメント投稿」機能をつける必要がありました。UIを作成するは、コメント投稿欄のフォームをつければいいじゃないの?と簡単に考えてましたが、やはり簡単に考えてはいけないものでした。

コメント投稿のUIのパターンとしては、次の2つのパターンがあります。

  1. コメント投稿欄が別の画面で表示されるパターン
  2. コメント投稿欄が画面下部に設置されているパターン

1.コメント投稿欄が別の画面で表示されるパターン

f:id:takahironakamori:20160121185458p:plain

Facebook(スマホアプリ)その1

「近況」ボタンまたは「今なにしてる?」エリアをタップすると、投稿エリアが別の画面で表示されます。

f:id:takahironakamori:20160121185524p:plain

Twitter(スマホアプリ)

画面右上の新規投稿ボタンをタップすると、投稿エリアが別の画面で表示されます。

コメント(というか記事というかつぶやき)を投稿をしようとするとコメント入力欄が別画面で表示されます。コメント入力以外の要素は表示されませんので、コメントと他の要素との関連が薄いというか、コメントが単独して存在するようなときに使われるUIだと思います。このパターンは、コメント投稿エリアが広くとれるので、複数行の入力のことやソフトウェアキーボードのことをあまり考えなくてもいいかもしれません。

2.コメント投稿欄が画面の下にあるパターン

f:id:takahironakamori:20160121185157p:plain

Line(スマホアプリ)

コメント投稿エリアをタップすると、ソフトウェアキーボードと連動し場所が移動し、複数行入力すると入力フォームがある程度大きくなります。

f:id:takahironakamori:20160121185540p:plain

Youtube(スマホアプリ)

f:id:takahironakamori:20160121185557p:plain

Youtube(スマホアプリ)複数行入力した場合

YoutubeもLineのパターンとほぼ同じです。

f:id:takahironakamori:20160121195532p:plain

Facebook(スマホアプリ)その2

記事内の「コメントする」ボタンをタップすると、記事は表示されたまま、ソフトウェアキーボードと連動してコメント投稿エリアが表示されます。複数行入力した場合の動きはLine、Youtubeと同じです。

画面にあるコメント投稿エリアや「コメントする」ボタンをタップすると、ソフトウェアキーボードが表示され、それに合わせてコメント投稿エリアがあわせて移動、または表示します。複数行を入力した場合は、投稿エリアがある程度大きくなります。コメント投稿エリア以外にも他の要素が見えるため、投稿しようするコメントが何か他の要素との関連が強い(例えば、何かの返信であったり、何かの感想であったり…)ときに使われるUIだと思います。複数行の入力のことや、ウェブサイトの場合は、OSで異なるソフトウェアキーボードの高さにどう対応するのかを考える必要があります。

Facebookは場合に応じて、「コメント投稿欄が別の画面で表示されるパターン」と「コメント投稿欄が画面の下にあるパターン」を使い分けているように、要素の役割や使われ方を考えてUIを決めないと、作ったものが使いにくいものになってしまうので注意が必要です。