週刊Webテク通信

2011年8月第1週号 1位は,レスポンシブWebデザインが抱える問題点,気になるネタは,Adobe,HTML5アニメーションツール「Edge」公開

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

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

1. I Love Responsive Design, But… :: Echo Enduring Blog - A Web and Graphic Design Bloghttp://blog.echoenduring.com/2011/08/06/i-love-responsive-design-but/

現在のレスポンシブWebデザインが抱える問題について指摘しています。

以下の三点について解説しています。

  • 制作に時間がかかる(コストもかかる)
  • 広告の位置などを考え直す必要がある
  • PCサイトと操作や見た目の一貫性を保っていないサイトが見受けられる

パソコン向けでは2カラムのレイアウトを,スマートフォン向けでは1カラムにする場合,広告をどう配置するのかというのは確かに悩みどころかもしれません。

せっかく使い慣れていたサイトが,スマートフォンで見ると別モノのようで戸惑ってしまうというのも,実際に起こっている問題ですね。

レスポンシブWebデザインが好きだという前提で語っていますし,これから考えていくべき問題提起と受け取っていいのでしょう。

レスポンシブWebデザインについての日本語の記事としては,iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.netがとても参考になりそうです。

図1 レスポンシブWebデザインが抱える問題点

図1 レスポンシブWebデザインが抱える問題点

2. 少しの手間で大きく変わる,細部にこだわったWebデザインを | Webクリエイターボックスhttp://www.webcreatorbox.com/tech/subtle-design-details/

細部にちょっとした効果を加えることで,デザインの質感をアップするテクニックを紹介しています。

グラデーションやノイズ,シャドウをわずかに加えることや,1ピクセルのラインを追加するなど,ほんのちょっとの違いがデザインに大きな変化を与えることが確認できます。これらは,今のWebデザインのトレンドでもありますね。

Enhancing Design Through Details | Onextrapixel - Showcasing Web Treats Without A Hitchという,同じようなコンセプトの記事が同時期に公開されていました。こちらはサンプルが豊富です。

図2 ひと手間追加することでデザインの質感をアップする方法

図2 ひと手間追加することでデザインの質感をアップする方法

3. 5 Big Usability Mistakes Designers Make on Carousels - UX Movementhttp://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/

カルーセルにおいてのユーザビリティの失敗例を紹介しています。

  • ユーザーがすでに操作をした後なのに自動でスライドする
  • 一行に複数要素がある場合,新しい要素が1つずつ出現する
  • 複数枚中の何枚目が現在出現しているのかの表示がまぎらわしい
  • 永久にスライドする
  • 前後に移動させるボタンが小さすぎる

二つ目ですが,たとえば同時に1,2,3の三枚の写真が表示されている場合,スライドさせると次は4,5,6の3枚が表示される方がよいそうです。個人的には2,3,4の三枚が表示される方が自然な感じがするのですが,慣れもあるのかもしれません。

図3 カルーセルにおいてのユーザビリティの失敗例

図3 カルーセルにおいてのユーザビリティの失敗例

4. Top 35 Best iPhone Apps Web Designer Should Know | ZoomZumhttp://zoomzum.com/best-iphone-apps-web-designer/

WebデザイナーのためのiPhoneアプリを35個紹介しています。

CSS,jQueryなどのリファレンス系のもの,カラーパレット系のものが多いですね。

図4 WebデザイナーのためのiPhoneアプリ35選

図4 WebデザイナーのためのiPhoneアプリ35選

5. Apple OS X Lion Buttons in CSS | Improve your UI | Pixifyhttp://pixify.com/blog/use-os-x-lion-to-improve-your-ui/

Mac OS X Lion風のボタンをCSSで実現したフレームワークです。

横につながった状態の複数のボタンを作ることもできます。

図5 Mac OS X Lion風ボタンのフレームワーク

図5 Mac OS X Lion風ボタンのフレームワーク

そのほか,先週の記事の中から,スマートフォン向けサイト関連の話題を紹介します。

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

boxify.mehttp://boxify.me/

Boxify.meはシンプルなファイル共有サービスです。

ファイル共有のページに移動すると,すぐに個別のURLが割り振られます。URLの末尾は自分の好きな名前に変更することも可能です。

あとはファイルをアップロードするだけです。複数ファイルをまとめてアップロードすることもできます。

アップロードが終わったら,URLを人に教えてダウンロードしてもらえます。

ファイルをブラウザ上でプレビューしたりはできませんが,ファイルの種類によって表示されるアイコンが変わります。

ユーザー登録不要で簡単に使えるので,第三者に見られても問題ないようなファイルの共有には便利に利用できそうです。

図6 シンプルなファイル共有サービス

図6 シンプルなファイル共有サービス

今週の気になるWebネタ

Adobe,HTML5アニメーションツール「Edge」公開 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1108/01/news102.html

Adobeから,HTML5対応のアニメーション作成ツール「Adobe Edge」のパブリックプレビュー版が公開されました。HTML,JavaScript,CSSなどの標準規格を使用して,Webサイト上でアニメーションやインタラクションを動作させることができます。

インターフェイスや操作法は,Flashというより動画編集ソフトのAfterEffectsに近いようです。FlashはもともとAdobeが開発したものではないので,その辺も関係あるのかもしれませんね。

「jQueryへの貢献,WebKitへのコードの提供,Creative Suite 5.5でのHTML5出力の強化など,アドビ システムズ社はこの1年間,HTML5関連でさまざまな画期的な取り組みをしてきました」とのことで,HTML5でのアニメーション制作ツールでも,Flashのようにシェアを取りたいという考えなのでしょう。

同時に公開されたHTML5とCSS3によるデモサイト「the expressive web」もなかなか楽しいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入