綺麗なデザインで使い勝手の良いフォームを作るチュートリアル

Web活用備忘録

こんにちは！　新人？　制作Tです。

やっとiPhoneを契約しました！　上掲の写真はiPhoneで撮ったものです。コントラストはやや強めですね。シャッターのレスポンスも使いやすいと思います。

買った初日は、カメラ機能がシンプルすぎて思わず笑ってしまいました。

もっとも「カメラ機能単体」では勝負していないのが、iPhoneのカメラ機能の凄みでもあるようです。このあたりはもっと調べていこうと思います。

綺麗なデザインで使い勝手の良いフォームを作る

綺麗で、なおかつ入力項目にエラーがあったときなどに修正がしやすいフォームは、どのようなサイトであってもコンバージョン率（サイト訪問者が実際にフォームを使って資料請求や問い合わせを行うこと）をアップさせるたいへん大きな要素のひとつです。

今回ご紹介するエントリ『Beautiful Forms – Design, Style, & make it work with PHP & Ajax』は、JavascriptとPHPを使用して綺麗で動作の速いフォームを作るチュートリアルの、まとめエントリです。

英文のページになりますので、英語の苦手な方はExcite翻訳などをご利用ください。

エントリの内容は以下の通りです。各項目見出しは意訳いたしました。

1.フォームのデザイン＆プランニング

美しく使い勝手のよいフォームを作るための考えかたについて。

2.スタイリングの美しいフォーム

フォームをより簡単に、より美しく作るためのチュートリアルです。

3.あなたのフォームにスパイスを

より判りやすい・使い勝手のよいフォームを作るためのヒントとチュートリアルです。

4.確認画面の工夫

入力内容の確認を簡単にするJavaScriptの紹介です。

いずれも入力項目についての内容のチェックと指摘を、画面を移動することなくおこなってくれるものです。

5.作例：Ajax & PHPフォーム

上記を踏まえたうえで、すぐに利用できるフォームのサンプルです。商用利用が可能かどうかは、個々のページからご確認ください。

考えかたや制作実務の復習として、大変参考になるエントリでした。

特にAjax（Javascript）によって「現在どこを入力しているかわかりやすくする」という部分は、弊社のフォームのようにPerl CGIを用いたフォームでも採用できるところですね。

＜制作＠アイタス＞

このエントリのキーワード:Webデザイナー, 社内勉強会