ウェブサイト上にある、どんなお支払フォームや単なるお問い合わせフォームであっても、ある種の形式が必要です。
独自のフォームを作ることは使いやすさの面からも、非常に大事です。しかし、価値あるデザインの多くがそうであるように、同時に美しさも大切な要素になります。
もしデザインのストックをお持ちであれば、このコレクションは役に立つでしょう。ここでご紹介するフォームのフリーソースコードには、様々なカラースキームや入力フィールドスタイル、印刷スタイルなどがあります。
さらにすべて無料で利用することができるので、コピーしてお好きなようにアレンジすることもできます。
1 マテリアルデザイン
See the Pen
Form fields with material design and video background, in pure CSS by Jon Uhlmann (@jonnitto)
on CodePen.
ここ数年で、Googleのマテリアルデザイン言語は、世界中で使われるようになりました。当初のマテリアルデザインコンセプトは、アンドロイドアプリに向けて開発されましたが、今では急速に他のウェブにも広がっています。
もし、GoogleマテリアルのUI上で使えるミニマリストスタイルがお好みであれば、ジョン・ウールマン氏の作ったマテリアルフォームをチェックしてみてください。
SassやCSS/HTML用のPugでプリプロセスを実行します。非常に容量が軽く、マテリアルデザインの要素は、すべてのブラウザで表示することが可能です。
すべてのマテリアルデザイナーのためになる、真のインスピレーションはこちらです。
2 アンダー ザ シー
See the Pen
Under the sea contact form by Geert-Jan Hendriks (@geertjanhendriks)
on CodePen.
水中を表現したユニークな問い合わせフォームで、海の中へご案内します。
全体の背景は海の波を表現するために、繰り返しのパターンを使っています。小さな魚のアニメーションは、全体にもう一つの世界観を付加しています。
さらに、入力フォームのいずれかを選ぶと、かわいらしいタコがあらわれます。とてもかわいいですよね！
3 ブートストラップ 3フォーム
See the Pen
Contact Form Bootstrap 3 by Shuvo (@ShuvoHabib)
on CodePen.
デフォルトのブートストラップスタイルはとても退屈なデザインで、これまでに多くの人に使われすぎてきました。同じようなスタイルのブートストラップサイトを見ていると、デザイナーがカスタマイズするのをさぼっているか、集中するあまり慎重にデザインしすぎてかえって平凡なデザインになってしまったのかと思ってしまいます。
このBS3フォームは、ブートストラップフレームワークの上部に、正しく表示することができます。入力フォームと送信ボタンのスタイルをいくつか変更することによって、今まで知らなかった愛すべきブートストラップフォームを作ることができます。
もしBS3のレイアウトで実行しているなら、このようにフォームを再構築できます。また、ブートストラップを使ってよりカスタマイズしたフォームを作成する場合は、第三のフレームワークを試してみるのもよいでしょう。
4 エレガントな問い合わせフォーム
See the Pen
Elegant Contact Form by Grandvincent Marion (@GrandvincentMarion)
on CodePen.
素敵なアイコンと基本的な応答スタイルを使ったこの問い合わせフォームは、独特のデザインです。
とくに大きいデザインの時には、フォームにアイコンを付け加えることをいつもお勧めしています。しかしユーザーは、より多くのフィールドではあまりアイコンを使わずに、フォームをスムーズに作動させることに重点を置いています。
これらのシンプルなアイコンをそれぞれのフィールドに加えることで、どんな情報が必要なのかが一目でわかるようになります。
もし何かユニークなデザインをお探しでしたら、様々なアイコンの種類を見てみるのもよいでしょう。
5 小さなログインフォーム
See the Pen
form ui by Ricardo (@RicardoTormo)
on CodePen.
時には、本当に小さいフォームがとても使いやすこともあります。このUIのフォームは、縮小されたログイン画面を作ることで、使いやすさを表現しています。
印刷ページは、フォームのデザインによってはとても大きくなることがあり、私はログイン画面の印刷面に関しては、小さいほうが良いと思っています。しかし実際は、どのくらい小さい文字や画像の情報がきれいにレイアウトされて印刷できるかは、ウェブサイトによるところが大きいようです。
このフォームでは、プロセスの説明等は表示せずに段階的な進行について最小限の情報にとどめています。見た目には頼りなさそうなたった二つの入力フォームがあるだけですが、より多くの情報を登録するためのプログレスバーを使って、ユーザーの貴重な経験を証明することができます。
6 ログインとサインアップのコンボ
See the Pen
Login Signup form by shubham chaudhari (@shubhamc_007)
on CodePen.
もしログインの時間を削減したい場合、ログイン画面と登録画面を一つのページに合体させることができます。少し難しそうですが、やってみると案外簡単です。
ログインか登録へのリンクのどちらかをクリックすると、きれいなカスタムメイドのアニメーションによって画面が回転します。フォーム全体はjQueryで実行されますが、アニメーションはCSSも使っています。
しかしこのレイアウトの中で一つバグがあります。クリックした後に、本来隠れているボタンが見えてしまっています。このような場合はCSSヴィジビリティプロパティを使うか、ボタンの位置を少しずらすなどして、解決できます。
7 黒板型問い合わせフォーム
See the Pen
Blackboard/Chalkboard Contact Form by Greg Sweet (@ControlledChaos)
on CodePen.
ページのジャンプオフとしてはとてもユニークなスタイルです。この黒板型問い合わせフォームは、背景にグラデーションを使っていて、黒板が浮き出て見えるような効果が出ています。
また、木の枠が本物の黒板のように見せています。
作者のグレッグ・スウィート氏は、人間の手で書いたようなカスタムフォントを使っています。問い合わせフォームを使うときに、あたかも学生時代を思い出させるような、素敵なデザインです。
8 クレジットカード型支払い画面
See the Pen
Daily UI #002: Credit Card Checkout by Kay (@opensoorce)
on CodePen.
たくさんの支払い画面を見てきましたが、ここに紹介するファビオ・オッタビアーニ氏によるデザインは、今までに出会ったデザインの中でも特に優れています。
確認フィールドに入力するために、JavaScriptを使っていますが、クレジットカードはすべてCSSです。数字をフォームに入力すると、カードの中に数字が同時に反映されます。そして数に基づいて動きます。CVVナンバーを入力する際は、クレジットカードが裏側に回転します。
9 サインアップ画面
See the Pen
Sign Up Form by José Carneiro (@josemc)
on CodePen.
CSSのためのサインアップフォームであるこのスニペットは、他にはないデザインです。一つの入れ物に小さい影を落としただけの、シンプルなフォームに感じられます。
しかしながら入力フィールドは、それぞれにアイコンを置くスペースがあり、多様にカスタマイズされています。
入力したいフィールドをクリックするとモスグリーンに縁が強調されます。アイコンの色も変わっていることにお気づきでしょうか？クレジットカードのメニューもカスタマイズされたスタイルになっています。
CSSだけでこのフォームを作成するのは多少複雑ですが、開発者のホセ・カネイロ氏はそれを実現させました。
10 浮くラベル
See the Pen
Forms – Floated Labels by Asim (@asimanov)
on CodePen.
フォームのラベルが浮いて見えるデザインは、私のお気に入りの一つです。使いやすさを改善し、一度入力したフィールドであっても明確な説明をユーザーに提供しています。
CSS3とCompassを使った浮いてみえるラベルフォームをのぞいてみましょう。
作成者のアントン・シマノフ氏は、ラベル作成にはjQueryを使いましたが、どんなプラグインも使わずにすべてカスタマイズされたコードを使用しました。言うまでもなく、彼の使った方法は、文字入力にもメニューを選択するときにも機能します。
どんなフォームのスタイルであっても、このギャラリーを見てなんらかのアイデアやスニペットのヒントになることを祈っています。
さらにデザインパターンを研究して、あなた独自のプロジェクトのためにアイデアを練ってください。CodePenにも、アイデアを集めるのにとても良いサイトがたくさんあります。
おすすめ新着記事
おすすめタグ