WordPress の素敵なコメントフォームデザイン15個

Category : WebDesignGallery, WordPress

コメントフォームを作るのがすごく苦手なので「これいいな」と思ったコメントフォームを集めていたんですが、せっかくなので紹介してみたいと思います。
紹介しているのは国内5サイト、海外10サイトで、全て WordPress で作られているものです。
自分好みのものばかりなのでその辺はご了承ください。
並び順はアルファベット順で、画像は Windows 版 Safari 5.0.3 でキャプチャしたものです。

国内サイト

Liner Note

Liner Note のコメントフォーム

大きなの文字が分かりやすい作りです。
ユーザビリティに配慮したサイト作りや記事もすごく勉強になります。

UMLAND

UMLAND のコメントフォーム

ピンクの背景とアイコンが何だかフレンドリーな感じでかわいいです。
入力欄はホバー・フォーカスで背景色が白に変わるので入力の邪魔になりません。
サイトもインパクトのあるデザインです。

Webクリエイターボックス

Webクリエイターボックス のコメントフォーム

手書き風のアイコンと水色のボタンがかわいいフォーム。
フォームのすぐ左には著者プロフィールと Twitter での最新ツイートが表示されていて、親しみやすさがアップしていると思います。
プロフィールとコメントフォームは角丸の太いボーダーで囲まれていて、かなり目立ちます。

Webデザインレシピ

Webデザインレシピ のコメントフォーム

サイトのロゴがとても素敵な Webデザインレシピ さん。
よく見かけるコメントフォームのレイアウトではありますが、入力欄の box-shadow と、ラベルテキストの text-shadow がいい感じになってます。
コメントフォームの右側には簡単な著者プロフィールがあります。

2011年1月10日でリニューアルされたそうで、現在はキャプチャ画像とは異なったデザインになっています。
新しいデザインでもかわいいコメントフォームになっていますよ。

ヨモツネット

ヨモツネット のコメントフォーム

和風なデザインのサイトにすごくマッチしているコメントフォーム。
文字は webfont が使用されています。
斜めのストライプとグラデーションが綺麗。

海外サイト

BubblesSOC

BubblesSOC のコメントフォーム

リボンがかわいいコメントフォーム。
優しい感じの緑がいいですね。
サイトもとってもかわいらしいデザインですよ。

Codrops

Codrops のコメントフォーム

毎回すごいクオリティのチュートリアルを公開している Codrops さん。
送信ボタンに text-shadow が使われています。
この位置に広告があるのはちょっと珍しいんじゃないかと思います。

CSSHunt

CSSHunt のコメントフォーム

シンプルな作りですが、上から下へしか視線が移動しないので使いやすいです。
サイト全体が紫色なので、それに合わせた色遣いになっています。
ただ、ちょっと字が見づらいかもしれませんね……。

CSS-Tricks

CSS-Tricks のコメントフォーム

HTML5 の placeholder 属性が使われていて、未対応ブラウザには JavaScript で対応しています。
テキストエリアにフォーカスすると、背景画像が右にスライドします。これは CSS3 のアニメーションを使っているようです。
「IT’S YOUR TURN」っていう書き方いいですねw

The KISSmetrics Marketing Blog

The KISSmetrics Marketing Blog のコメントフォーム

シンプルですが、とても分かりやすいと思います。
必須項目には赤いボタンの背景画像を使用して、送信ボタンも大きめです。
でも個人的には「required」ってテキストでも書いてあるほういいかなーとも思いますね。

Noupe Design Blog

Noupe Design Blog のコメントフォーム

入力欄のボーダーがかわいいなーと思って……それ以外は普通のコメントフォームです。

Nuemedia Web Design

Nuemedia Web Design のコメントフォーム

黒で統一されたデザインがクールな Nuemedia さん。
フォームも黒のグラデーションが綺麗です。
また、フォームの見出しやサイトのあちこちに Cufon が使われています。

セキュリティに問題のある可能性があるため、リンクを削除しました。

Smashing Magazine

Smashing Magazine のコメントフォーム

みんな大好き Smashing Magazine さん。
大きな入力欄と緑の送信ボタンが目立ちます。
超シンプルですが、それだけに使いやすいんじゃないかと思います。

Soh Tanaka

Soh Tanaka のコメントフォーム

個人的に一番素敵なコメントフォームだと思ってます(使いやすさは別として)。
デザインもそうですが、見出しの「SPEAK YOUR MIND」やテキストエリアの「Don’t be shy… Speak up!」がかっこよすぎです。
左側にテキストエリア、右側に名前やメールのインプット欄があるのも珍しいですね。

Web Designer Wall

Web Designer Wall のコメントフォーム

美しいデザインで有名な Web Designer Wall さんのコメントフォーム。
[Comment Guidelines] をクリックすると、その直下にコメントする際の注意事項がスライドダウンで表示されます。
また、テキストエリアにフォーカスすると、テキストエリアと送信ボタンの間にコメントのプレビューが表示されます。

色んなサイトを見てて思ったんですが、有名なデザインサイトとかでもコメントフォームはあまりいじっていないところが多かったように思います。
フォームのレイアウトは何種類かのパターンがありましたが、インプットエリアのボーダーや送信ボタンなど、ブラウザのデフォルトにまかせている印象を受けました。
フォームの見た目はそのままが一番使いやすいということなのかもしれません。

でもやっぱり素敵なコメントフォームを見つけると「おおっ」ってなっちゃいますw
使う人が不便にならない、それでいてちょっと目を引くコメントフォームを作りたいですね。

Comments

通りすがり

こちらの記事内のサイトの「Nuemedia Web Design」でトロイの木馬の反応があったのですが大丈夫でしょうか??

まとり

@通りすがりさん。

ご報告ありがとうございました。
問題のサイトを見にいったところ、攻撃サイトとして報告されているサイトを JavaScript で iframe を作って 1×1px で表示するコードがありました。
攻撃の危険性を考え、問題のサイトへのリンクを削除しました。

この度はご迷惑をおかけしまして申し訳ございません。

Leave a Reply