週刊Webテク通信

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

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

ネットで見かけた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」

今週の気になるWebネタ

日経を丸ごと読める「Web刊」,単体月額4000円で 「良質な情報はタダではない」 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/1002/24/news073.html

日本経済新聞社が「日本経済新聞 電子版」⁠愛称:Web刊)を3月23日に創刊すると発表しました。

「無料非会員」⁠無料会員」⁠有料会員」で利用できる部分が違うというサービスなのですが,有料会員が月額4000円という価格に,ネットでは「高い」という声が圧倒的なようです。

日経新聞本紙を購読している人には月額1000円だそうで,⁠紙の新聞の部数に影響を与えないことを前提にした価格設定」となっているんだとか。

これまでのNIKKEI NETは本紙記事の一部配信だったのが,Web刊では本紙記事すべてを掲載するそうです。ただし,全部の記事を読めるのは,有料会員だけということですね。

新聞の紙面デザインのまま閲覧できる「紙面ビューワー」は,どうやらFlashベースのようです。iPhoneやiPadでは見られないのですね。新聞レイアウトのままiPadで読めると,⁠iPad+日経新聞」の組み合わせが年配サラリーマンに受けると思ったんですけどね。残念。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入