gihyo.jpサイトのロゴ

週刊Webテク通信

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

2011-03-17

ネットで見かけた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で実現した曲線に沿ったテキストのジェネレーター

おすすめ記事

記事・ニュース一覧