Comment column design memo of summary site
Regarding the article comment section of the summary site to be operated in the future, we designed it while referring to large-scale community sites such as YouTube and Reddit.
✔️ Currently adopted specifications
Comments are tree structure
Up to 3000 comments
Maximum reply level: 20 levels
Initial response: 9
Good / Bad display
Maximum number of comment characters: 800
✔️ YouTube comments section features
Substantially two-layered structure
Reply initial display is only a few
Show Number of Likes
The maximum number of comment characters is about 10,000 characters
If the number of replies is large, fold display
YouTube has a structure that makes it easy to maintain display speed even with a large number of replies.
✔️ Reddit comment section features
Reply by tree structure
Upvote / Downvote
Deep reply chain is possible
The maximum number of comment characters is about 10,000 characters
Maximum post length is 40,000 characters
Reddit is designed as a commenting system for discussion.
✔️ Community Site Information
Girls Channel
No actual limit on the number of comments
Page every 50 items
Live Door Blog
Up to 15,000 comments per article
Up to 800 characters per comment
✅ comment structure
In the live door system summary site,
> > 123
It is common to specify the reply destination in an anchor format like this.
But when you actually use it,
We need to go back to the original comment.
The flow of conversation is difficult to follow
It is difficult to understand the relationship between comments
I felt the problem.
Especially in PC display, since the reply destination and the reply comment are displayed separately, there is an impression that it is hard to read in the long comment section.
Therefore, on this site,
"Tree structure that displays the reply directly under the replied comment"
We have adopted.
With this,
Easy to understand who you are replying to
Easy to follow the flow of conversation
Easy to see the exchange between comments
There is a benefit that.
✅ Maximum number of comments
Initially, we also considered allowing up to about 10,000 cases like Girls Channel.
But in that case,
Page split
Display speed measures
Measures against server load
You will need.
Split pages may limit the range of comments that users can view, making it difficult to understand the overall flow of comments and the opinions of the majority and minority.
So this time,
Up to 3000 comments
Reply Hierarchy 20 Hierarchy
We adopted the configuration.
If it is 3000, it is large enough for a general summary site, and I think that it is within the range where the entire comment can be viewed without page division.
✅ about the future
Currently, we are implementing the comment function and reply function, but we plan to do the following work in the future.
Site Renovation
Adjusting CSS for Smartphones
Tuning CSS for tablets
Correction of the design of the inquiry page
Improvement of comment section and reply function
Content creation
While posting the illustrations drawn as articles, we plan to proceed with the development of the painting bulletin board under production in parallel.
Site management
First of all, we will prepare the management base while increasing the number of accesses on the summary site side, and then we would like to look for people who can cooperate with article publication by RSS.
Although it is still under development,
Summary site
Painting Bulletin Board
We plan to operate while improving both little by little.
まとめサイトのコメント欄設計では、ユーザー体験を最大限に高めることが重要だと感じています。私も以前、アンカー形式の返信方式を採用したまとめサイトを利用していましたが、返信がどのコメントに対するものかわかりづらく、会話の流れを追うのに苦労した経験があります。その結果、議論が断片化し、コミュニティの活性化を阻んでいるケースが多いことに気づきました。 ツリー構造は、この問題を解決する有効な手段です。返信コメントを直接親コメントの下に表示することで、誰に返信しているのかが直感的にわかり、会話の連続性も保たれます。特にPC版表示においては、視線の移動が少なくなり読みやすさが向上すると感じました。 一方で、コメント数が多くなるとページの表示速度やサーバー負荷も懸念されます。そのため、本記事で述べられている通り、3000件の上限設定は妥当な線だと思います。過去に数万件のコメントがある記事を閲覧した際、ページ読み込みが非常に遅く、途中で止まってしまった経験もあり、快適な閲覧環境のためには数千件規模で制限を設けることが現実的と考えます。 また、コメント文字数上限を800文字に設定することも適切です。長すぎるコメントは読み手の負担になるだけでなく、荒らしや無意味な長文の防止にもつながります。YouTubeやRedditのように1万文字を超える長文を許容するケースもありますが、まとめサイトの性質上、簡潔かつ明確なやり取りがユーザーに支持されやすいと感じます。 さらに、Good / Bad評価やUpvote / Downvoteの導入は、コミュニティの活性化に寄与する機能でしょう。コメントの質を可視化できるため、有益な議論を促進する効果が期待できます。 私自身、これらの要素を考慮したコメント欄を提供するサイトを運営したいと考えており、本記事で紹介された設計案は非常に参考になります。今後のスマートフォンやタブレット向けのUI改善、返信表示の工夫によって、さらに使い勝手が良くなることを楽しみにしています。