週刊Webテク通信

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

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

ネットで見かけた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コードとしてコピーできるサービス

今週の気になるWebネタ

「iPhone」をPCのスペースバーにぶつけて写真を転送--Bump,新サービスを発表 - CNET Japanhttp://japan.cnet.com/news/service/35017458/

iPhone同士をぶつけて連絡先を交換するアプリと思っていたBumpですが,写真も送信できるんだと今さらながら知りました。それだけでも便利だと思ったのですが,バージョンアップでパソコンとの連携も可能になったとのことです。

パソコン側は,ブラウザでBumpのサイトを開いて待っておくだけ。iPhoneのBumpアプリで送りたい写真を選び,キーボードのスペースバーをiPhoneで叩けばあら不思議,パソコンのブラウザ上に写真が表示されます。これはスゴイ。

これってGPSの位置情報と,iPhoneとスペースバーをぶつけたタイミングとで2つの機器をカップリングしているわけですよね。ということは,偶然知らない人に画像を送ってしまうこともあるかも? なんて思う人もいるかもしれませんが,認証の画面が出てきてiPhone側でOKしないと送信されないので,誤って送信してしまう心配はないと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入