週刊Webテク通信

2011年10月第2週号1位は、テクスチャをWebデザインに使う理由と方法、気になるネタは、「iPod nano」発売—時計機能「クロックフェイス」魅力

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

1. The Whys And The Hows Of Textures In Web Design - Smashing Magazinehttp://www.smashingmagazine.com/2011/10/03/whys-hows-textures-web-design/

テクスチャをWebデザインに使う理由と方法についてまとめています。テクスチャは一時の流行ではなく、デザインに効果的な深みを与えるものとして、不可欠な存在となりつつあるとのことです。

テクスチャの役割として、以下のような解説がされています。

  • アイコンやボタンなどアクションをうながす要素に注目を集めさせる
    クリアな背景の上にテクスチャのエレメント、または逆にテクスチャの背景の上にクリアなエレメントがあると目立ちやすい。
  • ページの構成要素の差異を際立たせる
    テクスチャを使うことで、ラインやボックスやコントラストと同じように情報の区切りを付けることができる。
  • 雰囲気を作り個性を強調する
    テクスチャによりサイトの個性を強化することができる。

そのほか、テクスチャを使う上でのテクニックや気をつけること、作成の仕方などが説明されています。

図1 テクスチャをWebデザインに使う理由と方法について
図1 テクスチャをWebデザインに使う理由と方法について

2. Google+ Styled UI Buttons, Icon Buttons & Dropdown Menu Buttonshttp://code.shrapp.nl/google-plus-ui-buttons/demo.html

Google+で使われているようなスタイルのボタンを作るためのフレームワークです。アイコンを使ったボタンやドロップダウンメニューも作れます。

ドロップダウンメニューのためにjQueryを使っていますが、それ以外はCSS3のみで実現しています。

最近のGoogleのUIデザインやマイクロソフトがWindows Phone 7やWindows 8で採用しているMetro UIを見ると、フラットでシンプルなUIがトレンドとなってきているようです。

図2 Google+スタイルのボタンのフレームワーク
図2 Google+スタイルのボタンのフレームワーク

3. 10 Lessons on Design We Can Learn From Apple | CreativeFanhttp://creativefan.com/10-lessons-on-design-we-can-learn-from-apple/

アップルのデザインから学べることを10個挙げています。

  1. シンプルな方がいい
  2. 最良の商品写真を使う
  3. 対比を存分に利用する
  4. 「十分良い」ではなく「大変良い」を目指す
  5. 徐々にFlashを使うのをやめていく
  6. ハッピーな顔を
  7. 厳格にグリッドを適用する
  8. ユーザーへの指示はビジュアルで補足する
  9. 一貫性を与える
  10. ただのモール(オンラインショップ)にならない
図3 アップルのデザインから学べる10のこと
図3 アップルのデザインから学べる10のこと

4. 30 Catchy and Beautiful Slider Effects in Web Design | blueblots.comhttp://blueblots.com/web-design-2/slider-effects-in-web-design/

スライダーを使ったWebデザインのギャラリーです。TOPページのメイン部分にイメージスライダーを使ったサイトが数多く紹介されています。

スライダーのスクリプトについては、Useful jQuery Image Sliders and Galleries Tutorials - DesignModoという、jQueryを使ってのイメージスライダー/ギャラリー作成のチュートリアルをまとめた記事が参考になるでしょう。

図4 スライダーを使ったWebデザインのギャラリー
図4 スライダーを使ったWebデザインのギャラリー

5. Showcase of Websites with Mascots | Design Woop | The Web Design and Development Bloghttp://designwoop.com/2011/08/showcase-of-websites-with-mascots/

マスコットキャラクターを使ったWebデザインのギャラリーです。他社との差別化やブランディングのために、マスコットを使うという戦略は有効とのことです。

図5 マスコットを使ったWebデザインのギャラリー
図5 マスコットを使ったWebデザインのギャラリー

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

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

Ondango - Your online shop on Facebook | Sell your products directly on your Facebook pagehttp://www.ondango.com/

OndangoはFacebook上でオンラインショップを簡単に運営できるFacebookアプリケーションです。英語、ドイツ語、スペイン語、ポーランド語で使えるようです。

この手のサービスはほかにも色々あるようですが、Ondangoには以下のような特長があります。

  • 全ての購買のプロセスがFacebook上だけで行える
  • Facebook風のインターフェイス
  • 買い物をするユーザーがアプリを認証する必要がない

月額9.9ユーロ(およそ1000円)から利用でき、手数料も5%と安いですね。

「SHOWCASE」から実際に運営しているショップを見ることができます。シンプルながら必要十分な機能は揃っているように感じました。

図6 Facebook上でオンラインショップを簡単に運営できるサービス
図6 Facebook上でオンラインショップを簡単に運営できるサービス

おすすめ記事

記事・ニュース一覧