週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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 オンラインポートフォリオ・画像ホスティングのサービスいろいろ

今週の気になるWebネタ

iPhoneやAndroid端末で「tilt」とググると? Googleの“小ネタ” - はてなブックマークニュースhttp://b.hatena.ne.jp/articles/201104/3490

iPhoneやAndroid端末で,傾けるという意味の「tilt」でGoogle検索すると,検索結果が右に傾いて表示されるというのが話題になっていました。

CSS3の「transform: rotate」を使って回転させているようですが,iPhoneとAndroid端末にしか適用させていないようで,CSS3に対応しているPC用ブラウザでは傾きませんね。Safariの開発メニューからユーザエージェントをiPhoneにすれば,パソコンからでも傾きました。

スマートフォンだとPCのモニタと違って簡単に傾けて見ることができるからでしょうか? でも,iPadでは傾かないようです。

日本語で「斜め」と入力しても傾きます。⁠傾ける」では傾きませんでした。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入