2012年8月第4週号 1位は、モバイル専用サイト VS レスポンシブサイト、気になるネタは、FacebookのiOSアプリが2倍も高速化

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

モバイル向けサイトを別途制作するか、レスポンシブなサイトにするかについて、大統領候補2人のサイトを例に解説しています。

オバマ大統領のサイトはレスポンシブWebデザインのサイトで、大統領候補のロムニー氏のサイトはパソコン向けとは別にモバイル向けサイトがあります。この2人の候補の対決と、モバイル専用サイトとレスポンシブサイトとの対決とを絡めたアイデアが面白いですね。

といった項目について、それぞれの問題点などを指摘しています。

CSSスプライトについて、メリット/デメリットや実装方法についてまとめた記事です。CSSスプライトを利用する際に役立つ、画像置換の方法についてかなり細かく解説しています。

ナビゲーションメニューの画像置換の話が延々と続き、本来アイコンなど小さなイメージに使うCSSスプライトの話題としてはちょっと違和感を感じたのですが、最後の結論への前振りだったんだと思って納得しました。

iPadやAndroidタブレットでワイヤーフレームが作れるアプリ「Adobe Proto」を紹介しています。ラフに描いた図形がきちっとしたエレメントに変換される、ストロークジェスチャーによる描画スタイルは楽しそうです。

Protoで作成したワイヤーフレームは、Adobe Creative Cloudを経由してDreamweaverで開くことができます。

HTML5＆CSS3を利用したサイトのショーケースです。

デザインに力を入れてあり、ナビゲーションに工夫を凝らしたサイトばかりです。

「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」をLESSに対応させたコードの紹介と、LESSを使った部分の解説です。

LESSを使うことで、ベースとなるカラーの変更や、幅や高さの調整が簡単にできるようになっています。

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

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

SoundGeckoは、URLを入力するとそのページの英文をMP3ファイルに変換してくれるWebサービスです。本当に誰かが喋っているような自然な音声になっていて驚かされます。

英語圏の人にとっては、サイトの記事を耳で聞けるようになって便利というサービスですが、われわれにとっては英語の勉強にも使える魅力的なサービスですね。

そのページの本文部分を認識して、そこだけを音声化するような仕組みになっているようです。Chromeのエクステンションで変換させることも可能です。

ユーザー登録すると、変換した音声ファイルを管理することができるようになります。iPhoneアプリで聞いたり、自動的にDropboxかGoogle Driveに保存するように設定したり、ポッドキャストとして聞くことができるなど、いろいろなオプションが用意されています。

FacebookのiOSアプリがバージョンアップして格段に高速化しました。公式ながらイマイチという声の多かったFacebookアプリですが、確かにストレス無く動くようになったように感じます。

これまでのアプリはHTML5ベースだったのに対し、今回のバージョンはObjective-Cで書いたために高速化されたということです。Android版も近いうちに、同様に高速化したバージョンがリリースされる予定とのこと。

遅いと評判だった外部リンクを開く処理も、速くなったようです。画像のアップロードに失敗したときに、ちゃんとメッセージが出て再度アップロードできるようになったところが、個人的にはうれしいところ。

メッセンジャーが統合されたということですが、単体のメッセンジャーアプリはそれはそれで便利だと思うので、残して欲しいと思うのですがどうなんでしょう。