コメント入力の順番がフォームの一番上に移動した理由とその解消法 WordPress

WordPress バージョン4.4から、記事詳細ページにある、コメント入力フォームの中身の順番に変更がありました。

 

最初見つけたときは、かなり違和感を感じたので「前の状態に戻そう」と、対応方法について調べてすぐに直しました。ですが、修正した後に「それにしてもなんでWordPressはコメントフォームの並び順番を変更したんだ？」という疑問が湧いてきました。

 

ところが、解決方法についてはいろんなサイトで紹介されていたのですが、なぜこのように変更したのかについてをまとめているサイトは無かったので、本日は、解決方法と合わせてWordPressがコメントフォームの順番を変更した理由について言及したいと思います。

 

事象の確認

ちなみに僕が違和感を感じた、コメントフォームの順番変更前と後の画面キャプチャを貼っておきます。

 

コメントがあまりつかないブログはそもそも気にならないかと思いますが、自分でUI設計をしたり、テンプレートのコーディングを行っている方は、自分の意図した表示と異なるので、違和感を感じるのではないかと思います。

 

解決方法

「理由は別にいいので早く解決したい」という方もいると思うので、最初に解決方法について紹介します。

この問題を解決する方法は3つあります。

• アクションフックを利用する
• プラグイン「Reverse Comment Textarea」を利用する
• CSSのFlexboxで順番を並び替える

 

それぞれ紹介しますので、自分のサイトに合わせて選択してください。

 

アクションフックを利用する

これが一番メジャーで、WordPressのフォーラムで紹介されている方法となります。

以下のソースをfunction.phpに追記すれば、解決します。

 

function wp34731_move_comment_field_to_bottom( $fields ) {
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;

    return $fields;
}
add_filter( 'comment_form_fields', 'wp34731_move_comment_field_to_bottom' );

 

このサイトもこの方法で対応しましたが、今のところ問題なく動作しています。

 

プラグイン「Reverse Comment Textarea」を利用する

実は、この問題を解決するためだけのプラグインが存在します。（作者に感謝ですね）

「Reverse Comment Textarea」というもので、プラグイン新規追加で検索すれば一発で表示されます。

 

さらに、インストール後は特に設定の必要がないのでかなりお手軽です。

 

function.phpの編集などやったこと無い、といった方にはこの方法で対処できます。

 

ただ、アドホックに発生した問題を解決するためのプラグインのため、今後メンテナンスされるかわかりません。そのときは、新しいプラグインが出るのを待つか、別の方法で対処しましょう。

 

CSSのFlexboxで順番を並び替える

これは、CSS3のflexbox(※)というスタイルを利用する方法です。

※Flexbox（Flexible Box Layout Module）は、フレキシブルで簡単にレイアウトが組めてしまうスタイルです。

 

詳しくは、以下のサイトで紹介していますのでリンクを張っておきます。

WordPressのコメントフォームの順番をCSSで入れ替える方法

 

実はこの記事を読むまでは、「jQueryで順番指定すればいけるだろうな～」と思っていたのですが、CSSだけでできることがわかってかなり衝撃を受けました。最近、HTMLコーディングをしてなかったので、思いつきもしませんでした。。。

やはり、コーディングしないとダメですね（笑）

 

個人的には「お見事！」なのですが、ブラウザによっては対応しないこと、またcomment_form関数が表示処理（htmlソースを含めている）ため、WordPressのバージョンアップなどでソースに変更があると動かなくなる可能性があるので、この方法を選択する場合は注意が必要です。

 

なぜ、WordPressはコメントフォームの本文を一番上に変更したのか

さて、ようやく今回の記事の本題です（笑）

 

早速、本文のテキストフィールドを、コメントフォーム内の一番上に移動する対応を行った担当者の報告ページを見つけました（コチラを参考ください）

英語なので、僕の拙い英語力で翻訳すると、

 

キーボードでの操作におけるフィールドへのフォーカスを改善し、結果、コメント入力者がコメントを残しやすくする

 

という目的を持って実施したとのことです。

 

ただ、先に紹介した英語のページには、開発者とWordPress利用者との質疑応答も公開されており、「本文が一番上にあることが本当に最適なのでなのかユーザ調査したんですか？」という利用者の問いに対して「もちろんこれが最適であるとは思っていないが、いい案があればアイデアを述べてくれ」という回答のやり取りが行われていました。

このやり取りからは、「理屈上、コメントが一番上にあるのが最適だ」と言っているだけだとわかります。

 

ただ、お互いのコメントを読んだだけでは腹落ちはしなかったので、僕の仮説と合わせて、最適解を考えてみたいと思います。

 

フォームのコメント入力欄はどこが最適なのか

まず、先に紹介した報告ページにある、開発担当者であるAaron Jorbin氏の主張と、WordPress利用者の主張のそれぞれの視点から考えを深掘りしてみます。

 

開発担当者Aaron Jorbin氏の主張

Aaron Jorbin氏は、訪問者に対して「コメント入力へのフォーカスとコメントを残しやすくする」ことの具体的な対応として、「コメント入力欄をフォーム内の一番上に移動した」ということになります。

 

重要な情報を一番上に持ってくるというのは、情報設計の考えではセオリーです。

 

訪問したユーザに「必要な情報がこのページに存在する」と認識してもらえないと離脱の要因となるため、画面上部で、注意・興味の喚起を与える必要があります。

（このあたりに興味がある方は、Webサイトの消費者購買プロセスAISASについて調べてみてください）

 

一方で、EFO(※)の観点で考えると、自由度の高い入力欄を一番目に配置するのは良くないそうです。

※Entry Form Optimizationの略でフォームの完了率を上げるための施策のこと

 

自由度の高い入力項目は、いきなり何を入力するかで頭を使うことになるので「めんどくさい」という印象を与え離脱の要因になること、また、入力を進めていくほどこれまで入力した情報を無駄にしたくないという気持ちが働くため、自由度の高い項目は後にしたほうが離脱されにくくなる傾向にあるためです。（以下参考サイトを引用します）

 

フォームに訪問した直後が、ユーザーの心理的には、最も離脱しやすい。1つも入力していなければ、失うものは何もないからだ。これがいわゆる直帰である。一方、入力が進めば進むほど、ユーザーの心理には、離脱へのブレーキがかかるようになる。せっかく入力してきた作業が離脱によってムダになるのは嫌だからだ。つまり、1つ目の入力項目を迷いなく開始してもらうことは後々「ここで離脱してはもったいない」と思ってもらうための、大事な一歩なのだ。入力をスムーズに開始するかどうかを決める要素はいくつかあるが、そのうちの1つが「1つ目の入力項目を何にするか」だ。1つ目の入力項目は、どのユーザーにとっても入力しやすいものにすべきだ。

• ユーザーにとって入力内容の自由度が高いもの
• 使えない文字があるなど、入力にあたって注意が必要なもの
• エラーが出やすいもの

これらをフォームの最初の項目にすべきではない。引用元：Web担当者Forum EFO

 

Aaron Jorbin氏の主張は理解できるけど、フォーム最適化の観点からだとよろしくないことがわかります。

 

続いて、WordPressのサービス開発者について見ていきます。

 

WordPress利用者の主張

WordPress利用者の意見としては、「コメント入力欄が名前やメールアドレスより上にある並びは、一般的ではない」と言っていますが、これは「他サイトでは見かけない」、つまり、閲覧者は以下の画面のとおり、

• 名前
• メールアドレス
• ウェブサイト
• コメント

 

という順番が当たり前だと認識しているという、「ユーザの学習性」という視点から今回の対応はすべきではなかったと主張しています。

 

確かに、入力フォームの中で、名前やメールアドレスの項目を差し置いて、コメント入力が一番上にあるケースは日本ではあまり見かけません。

探してみましたが、有名なところとしてアメーバブログのコメント入力は、コメントは一番上になっていることが確認できました。

 

また、海外のブログサイトでは割と多いように感じました。参考までに海外の有名ブログをキャプチャを貼っておきます。

 

Darren Rowse氏のhttp://problogger.com/

 

John Chow dot氏のhttp://www.johnchow.com/

左はPCで、右はスマホです。

 

よって、日本人をターゲットとしたサイトであれば、たとえ、重要であっても最初に名前・メールアドレスを入力させるような流れのほうが自然といえると思います。

 

結論

話をまとめるために、WordPressがブログ機能に強いCMSであることを鑑み「ブログサイトにおけるコメント入力」について考えてみます。

 

先に挙げたEFOの観点は、例えば保険の資料請求など、Webサイトを営業ツールとして利用している場合、入力時のハードルについては死活問題となります。

 

一方で、ブログサイトは会員制（はてなブログ、MIXI、など）を除けば、匿名での投稿が一般的かと思います。

 

つまり、名前やメールアドレスは必須だとしても、適当な情報で投稿することができます。

 

そのような匿名でのやり取りが当たり前のコミュニケーションであれば、EFOのように入力のハードルを軽減させるような施策に重きを置く必要はなく、むしろ名前も「ニックネーム」というラベルにし、メールアドレスなども入力フィールドを削除してしまう方が良いと思われます。

 

よって、「ブログサイトのコメント入力」であれば、コメント入力を一番上にしても投稿完了までの阻害要因にはならないため、今回の改修は効果があると言えるのではないかと思います。

 

ここでは「ブログサイト」という縛りを入れた上で「最適である」と述べましたが、WordPressは今やブログの域を超えて、コーポレートサイト・ECなど様々なWebサイトで利用されています。

 

そのため、本対応を行ったWordPressの担当者の気持ちもわかりますが、必ずしも本文が一番上にあるようがいいケースばかりではないので、項目の表示順番を指定できるようなオプションがあれば、より多くの人に満足してもらえたのではないかと思います。

 

今後のWordPressのバージョンで機能追加されることに期待しましょう。

 

最後に

ちなみに、本サイトは本日現在WordPress4.5.1なのでコメント入力欄が一番上に来るようになっていますが、先に説明した解決方法で、従来の順番にしてあります。

 

今までの説明は何だったんだ！？というツッコミもあるかと思いますが、実は、本サイトはコメントをさほど重要視していないためです。

 

実は、misleadブログは課題解決サイトのため、記事の感想を残してくれてもお礼や「自分の場合はこうだった」といったような返信を求めているコメントは少ないです。

よって、コメントを残してもそのコメントに返信がついたかどうかはあまり興味が無いユーザが多いと考えているためです。

 

もちろん、芸能人ブログのように、コメントを利用したコミュニケーションが活発なケースもあるので、そういった場合は、今回の「コメント入力の順番を一番上にする」という対応は効果を発揮すると思います。

 

また、記事に対するフィードバックは、TwitterなどのSNSでコメントされるケースがありますので、もしかしたら、mislead.jpのような課題解決ブログは、コメント入力よりSNSでコメント付きでシェアされることに重きを置いたほうがいいかもしれません。