週刊Webテク通信

2012年5月第5週号1位は、レスポンシブWebデザインに対応したCSSフレームワークのまとめ、気になるネタは、「iPhone」PCのスペースバーにぶつけて写真を転送--Bump、新サービスを発表

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

1. Using Responsive CSS Frameworks for Faster Development | Couchable.cohttp://couchable.co/blog/post/using-responsive-css-frameworks-for-faster-development

レスポンシブWebデザインに対応したCSSフレームワークを使うメリットなどの紹介と、実際のCSSフレームワーク、関連する情報やツールを紹介しています。

フレームワークを使う利点と欠点がまとめられているので、以下に意訳してまとめてみました。

利点
  • 早く作れる
  • 簡単に作れる
  • 無料で使える
  • 標準的なきまりごとが既に用意されている
  • バグやブラウザーの問題の多くを解決してある
  • テストが少なく済む
欠点
  • デザインの高度なカスタマイズが難しい
  • 技術を学んでいくことができない
  • バージョンアップするごとに問題が起きることがある
  • CMSによっては一緒に使うことが難しい
  • 余計、不要なマークアップがある
  • 追加ファイルの読み込み時間がかかる
  • そのフレームワークを知らない別の制作者に仕事を引き継ぐのが難しい
図1 レスポンシブWebデザインのためのCSSフレームワークまとめ
図1 レスポンシブWebデザインのためのCSSフレームワークまとめ

2. 10 Best Wireframe Tools for Creating Web Designhttp://smashinghub.com/best-wireframe-tools.htm

Webデザインのワイヤーフレームを作成するツールを10個紹介した記事です。

オンラインツールだけでなく、デスクトップアプリケーションも紹介されています。

パワーポイントのアドオン「PowerMockup」や、Microsoft Expression Studioに含まれるSketchFlowなど、普段この手の話題であまり紹介されないツールも取り上げられています。

Balsamiq Mockupsは、Google ドライブにいちはやく対応したことで話題になったツールです。保存先として、Google ドライブを選ぶことができます。

図2 ワイヤーフレーム作成ツールを各種紹介
図2 ワイヤーフレーム作成ツールを各種紹介

3. 「LESS&専用エディター」でCSSをシンプルに書こう - @IThttp://www.atmarkit.co.jp/fwcr/design/tool/html5app03/01.html

CSS拡張メタ言語、LESSの入門的な内容の記事です。変数、ミックスイン、入れ子ルール、関数と演算といったプログラム的な部分を中心に解説されています。

LESS専用エディターのCrunchというAIRアプリケーションも紹介されています。

図3 LESS入門的な記事
図3 LESS入門的な記事

4. Logo TUtorial in Illustrator and Photoshop | Designerhttp://www.ddesignerr.com/15-high-quality-logo-tutorial/

Illustrator/Phosothopを使ってのロゴデザイン作成のチュートリアル記事を15個紹介しています。

最近のはやりで、レトロやグランジのイメージのものが結構ありますね。

図4 ロゴデザインのチュートリアルいろいろ
図4 ロゴデザインのチュートリアルいろいろ

5. 35 Interesting Info graphics for Web Designers and Developershttp://www.webdesigndispatch.com/35-interesting-info-graphics-for-web-designers-and-developers/

Webデザイナーやデベロッパーが興味を持ちそうなインフォグラフィックスを、多数紹介した記事です。TwitterやFacebookがらみのネタが多いですね。

表現されている内容も興味深いですが、インフォグラフィックのデザインそのものにも興味が行ってしまいますよね。

図5 ネット関連の話題を題材にしたインフォグラフィックス
図5 ネット関連の話題を題材にしたインフォグラフィックス

そのほか、先週の記事の中から、Webサービス関連の話題を紹介します。

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

Stylohttp://styloapp.com/

Styloは、描いた図形のCSSコードを取得できるサービスです。

まだ開発中のもので、Webkit系のブラウザで動作します。

肝心の、図形を選んでコピーするとCSSコードがコピーされる機能は、最新バージョンのChromeでしか動作しないようです。

なお、わたしがMacのChromeで試してみたところ、右クリックで出てくるメニューからのコピーではうまくいかず、コマンド+Cではうまくいけました。テキストエディターなどにCSSコードとしてペーストできます。

Fireworks CS5では「Fireworks CSS3 Mobile Pack」という拡張機能を使うと、描いた図形のCSSコードを取得することができました。また、Fireworks CS6では、標準機能として描いた図形のCSSコードを取得できるようになっています。

そう考えると、Fireworksを使えばいいやという気もします。しかし、お手軽に使えるWebサービスで、角丸シャドウ付きの図形なんかをさっと描いてCSSコードを取得できるのは、使い勝手がよさそうです。

作者による解説はOpen-sourcing Stylo by Alex MacCawで読むことができます。

図6 図形を描くとCSSコードとしてコピーできるサービス
図6 図形を描くとCSSコードとしてコピーできるサービス

おすすめ記事

記事・ニュース一覧