週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入