【42選】かっこ良くて面白い!参考になるコンタクトフォームデザイン – 42 Cool Contact Form Designs

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【【42選】かっこ良くて面白い!参考になるコンタクトフォームデザイン – 42 Cool Contact Form Designs】です。最近フォーム関連の記事を連続して書いていますが、その番外編になります。連続記事の方でユーザビリティの方を底上げし、かっこいいフォームを参考に仕上げをするのもよろしいのではないでしょうか。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

justdot


黒板の様な質感のある背景にフォームを配置しています。とても可愛くデザイン性が高いなと思います。

svn2ftp


メモ帳の上にフォームがあります。よく見るスタイルですがさりげないセンドボタン等、細部にこだわっています。

heartbreakerfashion


手紙の上にフォームがあるデザイン。フォームである事のサジェストが上手になされています。

ftdesigner


シンプルですが高級感のあるデザインです。

dragoninteractive


ダークでリッチな雰囲気のあるデザインです。

Saxum


ナビゲージョンにあるコンタクトをクリックするとサイト上部からフォームが出てくるデザイン。動きともに参考になります。

Tvsafety


空白を上手に使っているデザイン。フォームの上の文字が可愛いアクセントになっています。

Fivetailors


布地にうまく合わせたデザイン。

Family


シンプルですが、非常に入力しやすいフォーム。googleマップも同ページにあり良いバランス。

creuna


フッターにフォームを配置した例。コンパクトにうまく収まっています。

Graf Miville


右上、左下にアクセントがあるフォーム。

Ideematic


シンプルで個人的には一番サイズ感が好きなデザイン。

61Pixels


シックで質感のあるデザイン。サイトを選びそうです。

Historium


サイトの雰囲気が溢れ出すデザイン。

Donaflor


フォームが一コンテンツに見えるデザイン。

Matteocianfarani


先ほども出てきましたが、ナビゲーションクリックでフォームが上から出てくるデザイン。フォーム用のページが無い事がネックですが、使い勝手も動きもすごく参考になります。

Les Yeux Coquelicots


こんなのもありなのか!?とびっくりさせるフォーム。

Kaya


キャラクターが可愛いのはさることながら、入力欄のサイズが大きめに設定されていて使い勝手がとてもに良いです。

Studio Saus

Anne Braithwaite

Peterwesolowski

Diseb


変わり種と言えば変わり種。トランスフォームしたフォーム。これは入力したくなります。

Kashoo


アッシュな感じのデザイン。配色も参考になります。

Camper


ダイナミックなフォーム。お問い合わせは重要なフェーズですのでこのぐらいのサイズ感でも良いと思います。

Design Ddicted

Campbell Harrison


マップ等のコンテンツとうまく並べ、配置しているデザイン。サブミットボタンの質感もすごく良いです。

AARDVARK BRIGADE

HUGO SOCIE


フォコンテンツの一部にフォームを埋め込んだデザイン。

Milkable

PULP FINGERS


ちょっとレトロなデザイン。

solid studio

yoyodesign

DEUX HUIT HUIT


一風変わったコンタクトフォームです。キャプチャーにある「DEAR DEUX HUIT HUIT」という文字がタイピングしているように出てきてその後にメッセージを記入します。アイディアも斬新でデザインも素敵。ちょっと趣旨は変わりますが一番のお気に入りです。

Michela Chiucini web design


白を基調としたデザイン。目を見張るものがあります。

createdm

PARK LA FUN

cymetriq

Nerisson

adhesive studio

2mlab

GREBBAN

lubie

以上になります。補足が必要かな…と思ったものには一言添えてあります。日頃ちょくちょくフォームのデザインを収集している中で気に入っている42サイトでした。フォームに力を入れるとちょっとしたこだわりが見えて素敵だなぁと勉強させていただいております。また集まりましたら記事にしますね。

参照元:40 Cool And Creative Contact Form Designs
   :CSS Awards