週刊Webテク通信

2011年4月第2週号1位は、ECサイトの決済画面のガイドライン、気になるネタは、iPhoneやAndroid端末で「tilt」ググると

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年4月4日~2011年4月10日の間に見つけた記事のベスト5です。

1. Fundamental Guidelines Of E-Commerce Checkout Design - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

ECサイトのチェックアウトのプロセスに関する基本的なガイドラインです。

  1. チェックアウトのプロセスは完全に一本道にする
  2. フォームのラベルには説明文を追加する
  3. 「続ける」のような文脈によって意味が変わる単語を使わない
  4. クレジットカード番号の入力などユーザーが不安を感じやすいフィールドには、カギのアイコンやSSL認証証明の画像などを入れて安全な印象が高まるようにする
  5. クーポンコードを入力するなどサブの操作に「適用」ボタンを使わない
  6. クレジットカードの有効期限を入れるフィールドをカードの記載と同じ並びにする
  7. フォームフィールドは1カラムでレイアウトする
  8. 請求先アドレスはデフォルトでは配送先アドレスを使うようにしておく
  9. 入力エラーを分かりやすく指摘する
  10. ユーザー登録はオプション扱いにしておく
  11. 不要と思われる情報を入力させるようにしない

といった内容について解説されています。

これらをまとめると、意味のある流れ、良いコピーライティング、シンプルなフォームデザイン、プライバシーの配慮に気をつけることが大事ということでした。

図1 ECサイトの決済画面デザインのガイドライン
図1 ECサイトの決済画面デザインのガイドライン

2. HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)http://techblog.yahoo.co.jp/cat207/web_1/html5/

HTML5にまだなじみのない人に対し、HTML5でコーディングすることの利点を解説した記事です。

具体的な記述例が載っていて、概要をつかむのに適した資料となっています。参考リンクも日本語のもの中心で充実しています。

図2 HTML5とは何かの解説記事
図2 HTML5とは何かの解説記事

3. The Before & After Series: Showcase of 28 Famous Re-designed Weblogs | Web Designer Aidhttp://webdesigneraid.com/the-before-after-series-showcase-of-28-famous-re-designed-weblogs/

Webデザイン・テクニック系有名ブログの、リニューアル前後のデザインを比較した記事です。

よりシンプルですっきりしたデザインになっているサイトが多いですね。ロゴ画像は大きくなったところ、小さくなったところとまちまちですが、画像は大きなサイズで扱うようになったサイトが主流のようです。

図3 有名ブログのリ・デザインのビフォー&アフター
図3 有名ブログのリ・デザインのビフォー&アフター

4. 25 Awesome Creative Website Design - Website Design Ideas | Code Fearhttp://www.codefear.com/inspiration/25-awesome-creative-website-design/

独創的なWebデザインのショーケースです。美しいサイトではなく、美しくてほかにない独自性を持ったサイトを目指すべきということで、その参考となるサイトを集めています。

かなり作り込まれた、凝った動きをするサイトが目立ちます。Flashを使わずに複雑なインタラクションやアニメーションを実現しているサイトばかりなのは、最近のトレンド通りですね。

図4 美しくかつ独創的なWebサイトいろいろ
図4 美しくかつ独創的なWebサイトいろいろ

5. 10 Inspirational Fixed Position Menus - webdesigncrowd.comhttp://webdesigncrowd.com/10-inspirational-fixed-position/

スクロールしても位置が固定されているメニューのショーケースです。

メニュー部分は常に決まった座標位置にあるわけでなく、最初はヘッダと一緒にスクロールしていき、途中からメニュー部分だけが画面に残るという挙動が主流です。

図5 参考になる固定位置メニューいろいろ
図5 参考になる固定位置メニューいろいろ

そのほか、先週の記事の中から、気になる記事を3つ紹介します。

先週の気になるWebサービス

Flickr Alternatives: 25 Best Online Portfolio and Image Hosting Sites | Glazemoo: The Creative Worldhttp://glazemoo.blogspot.com/2011/03/flickr-alternative-image-hosting-and.html

今回は、オンラインポートフォリオ・画像ホスティングのWebサービスをまとめた記事を紹介します。

有名なflickrとdeviantART以外で、代わりになるようなサービスのリストともいえます。

自分のポートフォリオサイトを作るのに特化したもの、オンラインアルバムサービス、コミュティ機能を持ったものなど、いろいろなサイトが紹介されていました。

図6 オンラインポートフォリオ・画像ホスティングのサービスいろいろ
図6 オンラインポートフォリオ・画像ホスティングのサービスいろいろ

おすすめ記事

記事・ニュース一覧