【42選】かっこ良くて面白い!参考になるコンタクトフォームデザイン – 42 Cool Contact Form Designs
どうもこんばんは。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サイトでした。フォームに力を入れるとちょっとしたこだわりが見えて素敵だなぁと勉強させていただいております。また集まりましたら記事にしますね。