週刊Webテク通信

2011年5月第3週号 1位は,CSS3&HTML5のフレームワークとツール,テンプレート,気になるネタは,iKeyboard - iPadでブラインドタッチができてしまうかも

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

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

1. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templateshttp://www.1stwebdesigner.com/design/20-css3-html5-frameworks-tools-templates/

CSS3&HTML5のフレームワークとツール,テンプレートを紹介しています。

960 Grid Systemをはじめとした,グリッドレイアウトを実現するためのCSSフレームワークが以前は流行していました。最近では,グリッドレイアウトだけでなく,スマートフォンにも対応していたり,ブラウザサイズに合わせてレイアウトや画像サイズが変化するなど,多機能なフレームワークやテンプレートが増えているようです。

角丸やドロップシャドウをクロスブラウザで利用するには,CSS3で複数ブラウザ分の記述が必要だったり,対応していないブラウザでの代替手段を考えるなど面倒です。たとえば,G3 Frameworkというフレームワークでは,JavaScriptフレームワークなどを組み合わせて,クロスブラウザ対応の角丸やドロップシャドウを実現しています。

全てを自分でコントロールした方が自由度は高いですが,こういったフレームワークをうまく使ってサイト構築を効率化できる選択肢もあることはうれしいですね。

図1 CSS3&HTML5のフレームワーク,ツール,テンプレート

図1 CSS3&HTML5のフレームワーク,ツール,テンプレート

2. 30 Awesome Web Designs That Create an Illusion of Depthhttp://sixrevisions.com/design-showcase-inspiration/30-awesome-web-designs-that-create-an-illusion-of-depth/

奥行きを活かしたWebデザインのショーケースです。

奥行き/立体感は,ここ1,2年のWebデザインのトレンドともいえます。Tips and Trends on Creating Depth in Web Designという,奥行きのあるWebデザインのTipsとトレンドをまとめた記事を以前紹介したこともありました

図2 奥行きを活かしたWebデザインのショーケース

図2 奥行きを活かしたWebデザインのショーケース

3. 30 webdesign tendances pour Mai 2011 - webdesign-inspirationhttp://www.blogduwebdesign.com/webdesign-inspiration/30-webdesign-tendances-pour-mai-2011/429

2011年5月のWebデザインのトレンドと題したギャラリーです。フランス語のブログですね。

紹介されているサイトは英語のものが中心なのですが,これまでこの手のギャラリー記事で見かけたことのないサイトばかりで新鮮です。

図3 ステキなWebデザインのギャラリー

図3 ステキなWebデザインのギャラリー

4. 15 fresh Photoshop & Illustrator Tutorials to kick-off this week | hangaroundthewebhttp://hangaroundtheweb.com/2011/05/15-fresh-photoshop-illustrator-tutorials-to-kick-off-this-week/

最近公開された,PhotoshopとIllustratorのチュートリアル記事をまとめています。

チュートリアル集のサイトからピックアップされていて,キャプチャー画像に赤い帯でどのサイトに掲載されたコンテンツかが書いてあります。

図4 フレッシュなPhotoshopとIllustratorのチュートリアル記事

図4 フレッシュなPhotoshopとIllustratorのチュートリアル記事

5. すべて無料!Chromeにインストールしたいウェブアプリ21選! | gadget or gimmickhttp://gadget-or-gimmick.com/archives/2011-05-19/115739.html

Chromeウェブストアからインストールできるアプリを紹介した記事です。定番のものが中心ですが,おすすめのもの21個が掲載されています。

ここで紹介されている「はてなブックマーク」は,通常のWeb版とは違ったインターフェイスとなっています。⁠TweetDeck」もデスクトップ版とは違います。

なお,Chromeウェブストアにあるアプリの中には,普通にURLからアクセスして使うときと動作が変わらないランチャー代わりのようなものもあります。とはいえ,iPhoneのようにWebサービスのアイコンが並んでいて,そこから起動できるのは新鮮な感じがしますよね。

図5 Chromeウェブストアのアプリ21選

図5 Chromeウェブストアのアプリ21選

そのほか,先週の記事の中から,ソーシャルメディアに関する記事を3つ紹介します。

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

mokk.mehttp://mokk.me/

スマートフォン向けWebアプリのモックアップを作れるWebサービスです。

iPhoneを模した画面の中に,テキストやフォーム,ボタンなどをドラッグ&ドロップで配置していきます。

テキストは日本語でも問題ありません。写真も入れることができ,URLを指定することで任意の画像に変更することもできました。

作ったモックアップは「Save」して「Test」ボタンを押すと,スマートフォンから確認するためのURL&QRコードと,ほかの人とシェアするためのURLが生成されます。しかし,ベータ版だからか,このURLにアクセスしてみても作ったページは表示されませんでした。

ほかにも,ここで作ったモックアップのHTMLやCSSのコードを取得できるように書いてあるのに,どこにも見当たらなかったりと,まだまだ開発途中のようです。今後の機能アップに期待しましょう。

図6 スマートフォン向けのモックアップ作成サービス

図6 スマートフォン向けのモックアップ作成サービス

今週の気になるWebネタ

apptoi: iKeyboard - iPadでブラインドタッチができてしまうかもhttp://www.apptoiphone.com/2011/05/ikeyboard-ipad.html

iPad上にかぶせることで,バーチャルキーボードの使い勝手を向上させようというアクセサリーが開発中のようです。

iKeyboardというこのプロダクトは,Kickstarterという資金調達を支援するサービスで目標資金を達成しています。今後商品化されていくのでしょう。

写真を見た限り,キーボードの部分に穴があいただけのシートかと思ったのですが,そうではないようです。キーの部分も覆われていて,物理的キーボードをタイプするくらいの力が加わったときに入力されるとのこと。それならホームポジションに指を置いておけますね。

なかなか興味深いものであることは確かです。iPad 2のスマートカバーのように,磁石でくっつけられるようにしてもいいかも。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入