週刊Webテク通信

2010年5月第4週号 1位は,iPhoneやiPad用のWebアプリケーション制作のスタートガイド,気になるネタは,TVでiPadを紹介してる人がうまく操作できてなかったシーンを考察

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

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

1. Web Development For The iPhone And iPad: Getting Started - Smashing Magazinehttp://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/

iPhoneやiPad用のWebアプリケーション制作を始める人のための記事です。デザイン/コーディング/テストの3つの章に分けて,素材,ツール,テクニック記事などへリンクしています。

ネイティブなアプリではなく,HTML/JavaScript/CSSで制作しようというコンセプトです。

iPhoneアプリ向けのユーザーインターフェイスやアイコン用素材は,Designing for iPhone: The Ultimate Roundup of Resources | Graphic and Web Design Blogという記事にも大量に紹介されていました。

Awesome Mobile Image Gallery Web App | Codropsという,iPhone用のイメージギャラリーを作るための記事も参考になりそうです。

図1 iPhone/iPadのためのWeb制作スタートガイド

図1 iPhone/iPadのためのWeb制作スタートガイド

2. 20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazinehttp://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

jQueryを使って効果を加えたCSSボタンのテクニック集です。

角丸やグラデーション,ちょっとしたアニメーションはCSS3でもできますが,JavaScriptで実装するのが今のところは現実的なのでしょう。

オンマウスで説明がスライドして現れるボタンや,iPhoneのインターフェイスのようなラジオボタンとチェックボックスも紹介されています。

図2 jQueryとCSSによるボタンテクニック集

図2 jQueryとCSSによるボタンテクニック集

3. 透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.nethttp://kachibito.net/web-design/ie-fix-js.html

古いバージョンのIEでも透過PNG画像や角丸,ドロップシャドウなどを実現するためのJavaScriptフレームワークをまとめた記事です。

フレームワークそのものの配布先ではなく,日本語で書かれた記事にリンクしているのでわかりやすいですね。

図3 透過PNGや角丸をIE6,7で実装するためのフレームワークの紹介

図3 透過PNGや角丸をIE6,7で実装するためのフレームワークの紹介

4. Creative Footer Design: 60+ Excellent Examples | Inspiration | instantShifthttp://www.instantshift.com/2010/05/27/creative-footer-design-60-excellent-examples/

クリエイティブなフッタデザインのショーケースです。イラストを使ったものが目立ちます。

図4 フッタデザインのショーケース

図4 フッタデザインのショーケース

5. 18 Fresh Google Chrome Extensions for Web Developershttp://technologytosoftware.com/18-fresh-google-chrome-extensions-for-web-developers.html

Webデザイナーや開発者のためのGoogle Chromeの拡張機能をまとめた記事です。

Firefoxのアドオンで有名なWeb DeveloperのChrome版もありますね。閲覧中のページでどんなフレームワークやCMSを使っているのかが見られるChrome Snifferも面白そうです。

Mac版/Linux版からベータが外れたChromeですが,最近Chromeの拡張機能に関する記事をよく目にします。

先週では,迷った時に!Google Chromeが便利になる5つの⁠定番⁠拡張機能という,はてなブックマークニュースの記事もありました。

図5 Chromeの新しい拡張機能を18個紹介

図5 Chromeの新しい拡張機能を18個紹介

そのほか先週の記事から,気になるニュース記事を3つ紹介します。

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

The Big Picturehttp://www.thebigpic.org/

The Big Pictureはタスク管理のWebサービスです。

プロジェクトごとに円が描かれ,その大きさで重要度を表せるのが特徴のひとつです。この円は,色,大きさ,位置を自由に変えることができます。

プロジェクトの円をクリックするとタスクの画面に切り替わり,タスクの追加/編集作業を行います。

タスクは円ではなくリスト表示なのですが,個々のタスクは移動させて自由な位置に置けるようになっています。タスクはカレンダーとも連携できます。

画面の右下に瓶があって,これがゴミ箱の役割をしています。タスクやプロジェクトを瓶にドラッグすると,瓶の中にあめ玉のように丸い玉が入るのがシャレています。OSのゴミ箱と同様に,中身を確認したり元に戻すこともできます。

ToDoリストのひとつひとつの項目を円に入れて,重要なものは大きな円で書くことをすすめた記事バブルマップのすすめ ~ストレスすっきり解消型ToDo管理手法~を思い出しました。本来の使い方とは違いますが,このサービスをバブルマップとして使うこともできそうですね。

図6 The Big Pictureトップページでは動画で操作法を紹介

図6 The Big Pictureトップページでは動画で操作法を紹介

今週の気になるWebネタ

TVでiPadを紹介してる人がうまく操作できてなかったシーンを考察

iPadの発売が開始され,テレビのニュースやワイドショーではやたらにiPadが登場していました。

番組キャスターの人や芸能人が実際にiPadを触ってみているシーンを見ることも多かったのですが,おそるおそる触っている感じで,うまく扱えていない人ばかりでした。iPhoneを使ったことがあればすんなり扱えると思うのですが,iPhoneを触ったことのない人の方が圧倒的多数なんでしょうね。

気になったのは,イラストで書いた二つのうまく操作できてなかったシーンです。

①は,iBooks上では二本指での拡大(ピンチアウト)ができないことから,⁠あれっ?」と思わせてしまっていたケースです。

iPhone/iPadの二本指で拡大という操作法はかなり浸透しているようなので,できないアプリでは期待を裏切ってしまうんですね。さらに文字の選択状態になってしまって,余計混乱させてしまっていました。

②は,写真アプリでは二本指での操作は拡大縮小と認識されるので,スワイプにはならないというケースです。次の写真に行きたくても行けずに「あれっ?」となってしまいます。

どちらも分かってしまえば何でもないことかもしれませんが,こういったちょっとした「あれっ?」が重なると初心者にはストレスがたまるかもしれません。

操作してる人のせいじゃないのになぁとテレビで見ていて気になったシーンでした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入