週刊Webテク通信

2011年3月第2週号　1位は，iPadの登場で変わったWebデザインのトレンド，気になるネタは，アドビ，FlashをHTML5に変換するツール「Wallaby」発表

Webテク, Webデザイン, Web広告, iPad, Facebook, iFrame, CSS, Flash, HTML

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

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

1. How Web Design Trends Change With the Advent Of iPad? - Web Design Firmhttp://www.cyberdesignz.com/blog/website-design/how-web-design-trends-change-with-the-advent-of-ipad/

iPadの登場により，Webデザインのトレンドがどう変わったかを解説した記事です。

「iPad化（iPadfication⁠）⁠」したWebデザインとして，リニューアルされたTwitterのサイトや，Apple MobileMeのメール／カレンダー，New York Timesを紹介しています。

MobileMeのインターフェイスがリニューアルしていたのは知らなかったのですが，確かにiPadっぽい感じになっていますね。

iPadでも見られることを考慮したWebデザインのヒントとして，以下の項目について解説されています。

  • JavaScriptとCSSを組み合わせて使う
  • 複雑なデザインより，インタラクティブで直感的なデザイン
  • いろいろなプラットフォームに対応した柔軟性のあるWebサイト

図1　iPadの登場で変わったWebデザインのトレンド

図1　iPadの登場で変わったWebデザインのトレンド

2. The Ultimate 20 Usability Tips for Your Website | SpyreStudioshttp://spyrestudios.com/the-ultimate-20-usability-tips-for-your-website/

Webサイトのユーザビリティについての20のヒントです。

以下に一部の見出しを抜粋して紹介します。

  • 頻繁に更新できるような構造にする
  • ロゴは左上，メニューはその右か下
  • 検索ボックスは上部の左か右
  • メニューの項目数はできるだけ少なく
  • 名称，ロゴ，タグラインを常に上部に
  • ページのURLを短く分かりやすいものに

図2　Webサイトのユーザビリティのヒント

図2　Webサイトのユーザビリティのヒント

3. 待望のfacebookアプリ，StaticHTMLの使い方 | facebookApps JAPANhttp://facebookapps.jp/statichtml/

Facebookページをカスタマイズするための定番アプリケーションStaticFBMLが廃止されるそうで，代わりにiFrameを使う方法が推奨されています。

（※3月11日以降追加できなくなるとされていたStaticFBMLですが，その期限が3月18日に延期されたようです）

StaticFBMLを使うとHTMLタグがほぼ使えるようになるので，Facebookページで最初に表示されるタブを独自デザインにするのに使われてきました。

iFrameを使っても同様のことができるのですが，読み込まれるコンテンツを別サーバーに置かなくてはならないですし，サーバーによってはうまくいかないケースもあるそうで，StaticFBMLよりも敷居が高くなってしまったようです。

そこで登場したのが，この記事で紹介されている「StaticHTML」です。HTML＆CSSをペーストするか，画像を一枚貼り付けるかで，独自のタブ（ページ）を作ることが可能になります。

図3　FacebookアプリStaticHTMLの解説

図3　FacebookアプリStaticHTMLの解説

4. 35 Websites with Outstanding Use of Textures | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/texture-websites/

テクスチャーを使ったすばらしいWebサイトのギャラリーです。テクスチャーが目立つように一部が拡大されて掲載されていますが，気になるデザインがあったらぜひ実際のサイトを訪れてみてください。

薄く使ったテクスチャーでも，大きな効果を与えると解説されています。

図4　テクスチャーを使ったWebサイトいろいろ

図4　テクスチャーを使ったWebサイトいろいろ

5. 30 Examples of Big Backgrounds in Web Design - Round 2 | Inspirationhttp://webdesignledger.com/inspiration/30-examples-of-big-backgrounds-in-web-design-round-2

大きな背景のWebデザインのギャラリーです。

この手のサイトは，ウィンドウサイズに合わせて表示が変わる可変レイアウトを採用しているケースが多いですね。実際のサイトを表示して，ウィンドウサイズを変えてみると参考になります。

図5　大きな背景のWebデザインのギャラリー

図5　大きな背景のWebデザインのギャラリー

そのほか，先週の記事の中から，日本語による解説記事を3つ紹介します。

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

CSSWARP - CSS Text to Path Generatorhttp://csswarp.eleqtriq.com/

CSS3を使った曲線状のテキストを作成できるWebサービスです。

Illustratorのようなインターフェイスで曲線に沿ったテキストを作成し，完成したら「GENERATE HTML」ボタンを押すとCSSを含んだHTMLが生成されます。

CSSでの実現方法は単純で，一文字ずつを絶対配置で位置指定し，rotateプロパティを使って回転させているだけです。

これを手作業で指定するのは大変なので，そのためのジェネレーターを作るという発想が面白いですね。

現実的には画像にしたほうがいいのでしょうが，見るブラウザの環境が決まっているのなら実用性もあるでしょう。

Googleの提供しているWebフォントも使えるようになっているので，英文ならロゴっぽいものも作れそうです。

図6　CSSで実現した曲線に沿ったテキストのジェネレーター

図6　CSSで実現した曲線に沿ったテキストのジェネレーター

今週の気になるWebネタ

アドビ，FlashをHTML5に変換するツール「Wallaby」発表 - CNET Japanhttp://japan.cnet.com/news/service/20427139/

FlashのアニメーションをHTML5に変換するツール「Wallaby」のテクノロジープレビュー版が登場したそうです。もちろん，iPhone，iPadでFlashがサポートされていないことへの対策のひとつですね。

複雑なインタラクションがあるムービーを変換できるわけではなく，単純なアニメーションを含んだFlash広告向けのものという位置づけです。

描画要素，塗りつぶし，シェイプトゥイーン，モーショントゥイーン，シンボル名，インスタンス名などがHTML5，JavaScript，CSSに変換されるそうです。変換されたものをベースに，JavaScriptやjQueryでインタラクションを与えればいいというAdobeの説明は強引な気もしますが，それをワークフローとして考えれば意外と使えるのかもしれません。

Webテク, Webデザイン, Web広告, iPad, Facebook, iFrame, CSS, Flash, HTML

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote