週刊Webテク通信

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

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

1. Separate Mobile Website Vs. Responsive Website | Smashing Mobilehttp://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

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

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

  • アクセシビリティ
  • 操作性(ナビゲーション、スクロール)
  • 読み込み速度
  • モバイルサイト独自の強化ポイント

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

図1 モバイル専用サイト VS レスポンシブサイト
図1 モバイル専用サイト VS レスポンシブサイト

2. CSSスプライトについてあれこれ。http://lopan.jp/css-sprites/

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

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

図2 CSSスプライトについて解説
図2 CSSスプライトについて解説

3. アイデアをどこでも形に!Dreamweaver+Proto連携 ~Adobe Creative Cloudの上手な活用法 (1/7):CodeZinehttp://codezine.jp/article/detail/6721

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

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

図3 タブレット端末向けワイヤーフレーム作成アプリを紹介
図3 タブレット端末向けワイヤーフレーム作成アプリを紹介

4. A New Showcase Of HTML5 And CSS3 Based Sites For Inspirationhttp://www.designyourway.net/blog/inspiration/a-new-showcase-of-html5-and-css3-based-sites-for-inspiration/

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

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

図4 インスピレーションを受けられるHTML5&CSS3サイトのショーケース
図4 インスピレーションを受けられるHTML5&CSS3サイトのショーケース

5. 「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた | TM Lifehttp://tmlife.net/web/less/css-decoration-table-less.html

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

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

図5 テーブルを装飾するCSSをLESSに対応
図5 テーブルを装飾するCSSをLESSに対応

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

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

SoundGeckohttp://soundgecko.com/

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

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

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

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

図5 英文の音声変換サービス
図5 英文の音声変換サービス

おすすめ記事

記事・ニュース一覧