コメントデザインの考慮事項、ベストプラクティス、および例
コメントスタイルはブログデザインの中で見落とされがちな部分です. 結局のところ、それらはページの一番下にあり、訪問者がすでにあなたのサイトの印象を持つまで見られず、そして何よりも機能のために実際にそこにいます。スタイルを整え、目立たせるために多くの時間を費やすのはなぜですか?
しかし、優れたコメントスタイルはあなたのデザインをあなたの競争とは一線を画すことができます。あなたのコメント、そしてあなたのコメントフォームをデザインするために時間をかけることはあなたの通常の訪問者に大きな印象を与えることができます。それは潜在的にあなたが彼らの意見を気にかけていて彼らにあなたのサイトでの議論に参加してほしいことを暗示しています.
あなたの次のブログデザインに美しいコメントシステムを作成するためのベストプラクティスと例を以下に示します。.
スタイリング コメント閲覧
コメントのスタイルをどのように設定するかは、訪問者のブログに対する全体的な認識に大きな影響を与えます。それはあなたがスタイリッシュでユーザーフレンドリーな方法で彼らの発言を披露するために時間をかけるためにあなたの読者が言わなければならないことにあなたが十分気にかけていることを示します.
ねじ付きビューまたはフラットビュー?
スレッド化されたコメントを持つのか、単に年代順にコメントを並べるのかは常に難しい質問です。決定しようとするときに考慮すべきことがいくつかあります.
まず、あなたの訪問者が積極的にあなたの投稿について互いに議論したいのであれば、そして特にあなたが大量のコメントを持っているならば、スレッド化されたコメントはそれを促進することへの長い道を行きます.
一方、スレッド化されたコメントは悪用されることがあります。コメントをコメントの先頭に近づけるために、コメント投稿者はスレッドの最初のコメントに完全に無関係なもので応答する可能性があります(もちろん、これを防ぐためにこれらを緩和することができますが、これは追加の作業です管理者).
あなたがコメンターにお互いにではなく直接記事に返信させることに興味があるなら、平らなコメントを持つことはより理にかなっています.
どちらの選択肢にも、それぞれ長所と短所があります。したがって、決定を下す前にそれぞれの長所と短所を比較検討する必要があります。.
ベストプラクティス
より効果的なコメントデザインを作成するためのヒントは次のとおりです。.
著者のコメントを強調する
あなたのコメントをデザインするとき、あなたは作者や管理者のコメントがページ上の他のものから目立つようにするために何かをするべきです。これは、コメントにアイコンを追加するか、背景色を変更することによって可能性があります。.
このタイプのスタイリングは、コメント投稿者が作成者からの返信を直接見るのを容易にし、ディスカッションを増やすのに役立ちます。.
グラバターを含める
人々は議論をしているとき他の人々の顔を見るのが好きです。 Gravatarsを有効にすることで、あなたはこのプロセスを自動化し、議論を促します。.
ボーナスポイント: 標準の幾何学的画像やモンスターではなく、自分のものを持っていない人のためにカスタムGravatar画像を使う.
トラックバックとは別にコメント
トラックバックは、実際にはディスカッションの一部ではなく(少なくともブログで行われている部分ではありません)、他のコメントとインラインで含めないでください。.
トラックバックの上に(通常はトラックバックよりも多くのコメントがある場合)、または他のすべてのコメントの下にある場合(通常はコメントよりも多くのトラックバックがある場合)、トラックバックに独自の特別な領域を設定します。.
意味のあるデザイン要素を使用する
コメントをスタイリングするときは、コンテンツの種類に関して意味のあるデザイン要素を検討してください。吹き出し、引用符、単純な枠線、および背景色の変更は、すべてコメントを強化し、読みやすさを向上させます。.
あなたのコメントをページ付けする
ブログに定期的に20件または30件以上のコメントがある場合は、ページの読み込み時間を短縮するためにそれらのコメントにページ番号を付けることを検討してください。.
新しいページに移動すると、ほとんどの場合、より多くのコンテンツがあるように感じるため、ページ区切り付きのコメントでは、自分よりも多くのコメントがあるように見えます。.
個々のコメントに直接リンクできるようにする
各コメントへのアンカーリンクを含めることで、訪問者は自分のコメントを他の人と共有しやすくなります。.
誰かがあなたのブログのコメントで特に良い議論をしているならば、彼らは他の人に参加するように招待し、彼らの最後のコメント、または彼らがコメントしているスレッドへの直接リンクを持つことを容易にします。.
例:きちんとしたコメントの表示
ロックビーツペーパー
Baekdal.com
Subtraction.com
GoodBytes.be
二乗
BlogLESS
スヌーク
パーティクルツリー
Hickensian、ヒックスデザイン
Dezinerfolio
デザイン コメントフォーム
あなたのコメントフォームはユーザーフレンドリーでなければならず、あなたのブログで起こっている議論に参加するように訪問者を奨励しなければなりません。優れたコメントフォームのデザインだけでは一晩であなたにコメントを寄せ付けることはないでしょうが、デザインが不適切なフォームは読者がコメントするのを確実に妨げることがあります。.
考慮事項とベストプラクティス
コメントフォームを設計するときには、スパムに対する特別な注意を含めるかどうかから、返信の処理方法まで、考慮すべきことがたくさんあります。以下は、これらの決定を下すためのいくつかのヒント、およびその他のいくつかのヒントです。.
コメントフォームを配置する
あなたの全体的なコメントシステムを設計するときこれは非常に重要な考慮事項です。あなたのコメントフォームを投稿自体のすぐ下に配置しますか、それともコメントの最後に配置しますか。?
決定する最良の方法は、あなたがコメンターに積極的に意見を交換してもらいたいのか、単にコメントを投稿自体に集中させたいのかを自分自身に尋ねることです。.
それが最初の選択肢である場合は、それからコメントの末尾にコメントフォームを配置してください。後者の場合は、投稿のすぐ下、コメントの上に配置します。.
スパム防止
Akismetのようなスパム防止ユーティリティを使用している場合でも、フォームに直接スパム対策を少し追加すると、受信するスパムの量をさらに減らすことができます。.
一般的な選択肢は2つあります。1つはキャプチャです。これは、多くのユーザーにとって解読が困難な場合があります(ただし、一部のキャプチャシステムは他のものよりもはるかに優れています)。もう1つは質問ベースのシステムです。多くの場合、単純な数学の方程式を使用して、コメントを送信する前にコメント投稿者が回答する必要があります。.
アカウントの要求または代替ログインの許可
特に大量のスパムコメントがある場合、または悪用コメントに関する問題がある場合は、コメント投稿者にアカウントの作成を要求すると効果的です。他のオプションには、Twitter、Facebook Connect、OpenIDなど、自分が持っている別のアカウントでユーザーにログインを許可することが含まれます。.
ログインを要求すると、離れたコメントに対する責任感が増します。これにより、悪用やスパムのコメントが少なくなります。もちろん、ログインを要求することはあなたが得るコメントの数を減らすこともできます。.
返信の処理
訪問者が他のコメント投稿者に直接返信できるようにする場合は、コメント投稿者が返信したときにインラインコメントフォームを表示するか、または既にコメントフォームに表示するかを決定することが重要です。ページ.
どちらかといえば大丈夫ですが、最初のオプションの方が混乱が少ない場合があります(一般的にコメントするのではなく、特定の投稿に確実に返信していることがわかっているため)。.
配置フォームフィールド
コメントフォーム内でフィールドをどのように配置してラベルを付けるかは、そのフォームの使いやすさに大きな影響を与える可能性があります。 Usability Postには、これをさらに詳しく説明した素晴らしい記事があります。.
フォーム指示
あなたのコメント投稿者があなたのコメントフォームのどのフィールドに記入する必要があるのかを見やすくします。また、自分の電子メールアドレスなどが公開されないことを明確にします。.
検証
あなたのコメントフォームは、あなたがモデレートのために全部または一部のコメントを持っていたとしても、あなたのコメンターに彼らのコメントがうまく投稿されたことを示す必要があります。.
あなたが中程度のコメントをする場合は、コメントがモデレートを通過した後に表示されることを示すようにしてください。そうすればあなたの訪問者は複数のコメントを投稿することになりません。.
プレビューを提供する
投稿する前にあなたのコメント投稿者が投稿をプレビューできるようにすることは、多くのブログが見落としがちな使い勝手の良い機能です。投稿者は投稿する前にコメントを読み、編集する可能性が高いため、これはブログがより質の高いコメントを取得することも意味します。.
例:コメントフォーム
インターネットジリオネア
本物の退屈
フリーランススイッチ
オークツリークリエイティブ
BrianYerkes.com
誘拐
WPDesigner.com
デザインワークプラン
Doc4広告代理店
Mac Appstorm
Productivedreams.com
情報源とリソース
- 77感動的なブログコメントフォームデザイン - 第1回Webデザイナー
- デザイン分析:コメント - Snook.ca
- インターフェースデザインのインスピレーション:36きれいなコメントフォームデザイン - Dzineブログ
- WordPressのコメントを扱うためのトップ10のチュートリアル - DesignM.ag
- コメントからトラックバックを分離する - Pro Blog Design
- デザインの要素 - SmileyCat、特にブログコメントとブログコメントフォームのセクション