まとめサイトのコメント欄デザインで工夫した点

① RedditやYouTubeを参考にしたツリー構造

コメントと返信の関係が分かりやすいように、RedditやYouTubeで採用されているツリー構造を参考にしました。

返信先が視覚的に分かるため、どのコメントに対する返信なのかを把握しやすくなっています。

② スマホ表示を考慮して階層の横移動を制限

ツリー構造は階層が深くなるほど右へずれていきますが、スマホでは表示領域が狭いため、一定階層以降は横方向へ移動しないようにしました。

これにより、深い返信でもコメントが小さく表示されず、読みやすさを維持できます。

③ 返信の開閉機能を実装

返信が多いコメントは初期状態で折りたたみ、「○件の返信を表示」ボタンで展開、「返信を非表示」ボタンで閉じられるようにしました。

必要な時だけ返信を表示・非表示にできるため、長いコメント欄でも見通しが良くなります。

④ 返信フォームをその場に移動

返信ボタンを押すと、返信フォームが対象コメントの直下へ移動するようにしました。

コメント内容を確認しながら入力できるため、どの投稿に返信しているのか分からなくなる問題を防げます。

⑤ 狭い表示領域でも見やすいツリー表示

RedditやYouTubeと比較すると、まとめサイトはコメント表示に使える横幅が限られています。

そのため、返信フォーム表示時にはコメント欄下部に余白を確保し、ツリー構造が重ならないよう調整しました。

限られた表示領域でも返信関係を分かりやすく表示できるよう工夫しています。