週刊Webテク通信

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

ネットで見かけた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 スマートフォン向けのモックアップ作成サービス

おすすめ記事

記事・ニュース一覧