週刊Webテク通信

2010年3月第1週号1位は、ECサイトデザインの情報源いろいろ、気になるネタは、日経を丸ごと読める「Web刊」、単体月額4000円で

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

1. E-Commerce Design Resources: The Ultimate Round-Up | Graphicshttp://www.hongkiat.com/blog/e-commerce-design-resources-the-ultimate-round-up/

ECサイトをデザインするときに参考になる情報源を大量にまとめた記事です。

  1. インスピレーションを得られそうなECサイトのギャラリー
  2. ショッピングカートシステムやECサイト構築システム
  3. アイコンやデザイン素材、テンプレートなどの配布サイト
  4. チュートリアル記事

について、それぞれ多数のサイトが紹介されています。

特に3のアイコン素材は量が膨大です。いろんなテイストのショッピングカートアイコンやクレジットカードアイコン、国旗アイコンなどがあり、何かしら気に入るものがありそうですね。

図1 ECサイトデザインのための情報源いろいろ
図1 ECサイトデザインのための情報源いろいろ

2. HTML5 & The Web Platformhttp://www.slideshare.net/myakura/html5-web-platform

HTML5と関連する仕様についての解説スライドです。スライド共有サイトで公開されています。

便利なJavaScriptライブラリMJL(MITSUE-LINKS JavaScript Library)を配布していることでも知られるWeb制作会社、ミツエーリンクスの人が作った資料です。なお、MJLは大変便利なライブラリなので、知らなかったという人はぜひチェックしてみてください。

CSS3とともに語られることの多いHTML5ですが、CSS3に比べいまひとつピンと来ない人も多いと思います。そんなあなたもこのスライドを見れば、HTML5が何なのかをざっと説明できるようになるでしょう。

図2 HTML5と関連する仕様についてのスライド
図2 HTML5と関連する仕様についてのスライド

3. Best Practices for Hints and Validation in Web Formshttp://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/

フォームに関しての、入力の際のヒント表示と値チェックを中心としたまとめ記事です。

ヒント表示や値チェックに関するJavaScriptライブラリやテクニックの紹介ではありません。どういう見せ方がいいのかを考察した内容になっています。

  • 入力フィールドのラベルテキストの位置の例とそれぞれの良い点と悪い点
  • 値チェックをサーバー側/クライアント側/リアルタイムで行うことの良い点と悪い点

などについてまとめられています。

図3 フォームのヒント表示と値チェックのまとめ
図3 フォームのヒント表示と値チェックのまとめ

4. サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ - かちびと.nethttp://kachibito.net/web-service/free-web-check-tools.html

制作したサイトの最終チェックのためのツールやWebサービスをまとめた記事です。

  • 各種ブラウザでどう見えるかの表示チェック
  • モニタサイズの違いによる表示チェック
  • 表示スピードのチェック
  • 画像最適化
  • CSS最適化

などに使えるフリーのものが紹介されています。

図4 サイトの最終チェックのためのツールやサービスいろいろ
図4 サイトの最終チェックのためのツールやサービスいろいろ

5. 25 Examples of Convincing Call-To-Action Buttons | Design Shackhttp://designshack.co.uk/articles/inspiration/25-examples-of-convincing-call-to-action-buttons

ダウンロードボタンやサインアップボタンのような、次のステップに誘導するためのボタンの実例集です。

それぞれの実例は画面ダンプと解説文で紹介されています。

図5 アクションのきっかけとなるボタンの実例集
図5 アクションのきっかけとなるボタンの実例集

そのほか先週の記事から、jQueryプラグインを2つ紹介します。

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

ideary - place where ideas storedhttp://www.ideary.ru/login

idearyは、シンプルなオンラインのメモ帳です。アイデアノートとして使うことを想定されています。⁠idea」「diary」「ideary」のようです。

メモはタイトル、本文、タグの項目を埋めて登録します。

本文の入力欄はリッチテキストエディタになっています。Webページの内容を、リンクや画像もそのままにコピー&ペーストすることもできました。タグはもちろん自動補完されます。

書きためたメモは、検索/一覧表示/タグクラウドから探します。日本語もちゃんと検索されるようですが、検索ワードのハイライト表示などはありません。

シンプルで軽い操作感に好感が持てるので、このシンプルさを保ちつつ機能強化していくと、面白いサービスに育ちそうです。

ドメインが「ru」なので、ロシア発のサービスなのでしょう。

図6 オンラインアイデアメモ帳「ideary」
図6 オンラインアイデアメモ帳「ideary」

おすすめ記事

記事・ニュース一覧