週刊Webテク通信

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

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

ネットで見かけた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上でオンラインショップを簡単に運営できるサービス

今週の気になるWebネタ

「iPod nano」発売?時計機能「クロックフェイス」が魅力http://ascii.jp/elem/000/000/640/640083/

先週は,⁠AdobeがAdobe MAX 2011でいろいろ発表」⁠⁠AppleがiPhone 4S発表」⁠⁠スティーブ・ジョブズ死去」と慌ただしい一週間でした。今でもネットの話題の中心はスティーブ・ジョブズで,それに続いてiPhone 4Sといったところです。

スティーブ・ジョブズについてうまくネタにする自信がないので,今回はiPod nanoの新モデルについて取り上げます。

iPod nanoは今回のモデルから純正のウォッチバンドが登場し,時計のデザインも18種類に増えています。Appleもついに腕時計として利用できることもウリにしてきたようです。前モデルからサイズといい時計機能といい腕時計を意識していたと思われますが,そのことをプッシュしてはいませんでした。

前モデルを腕時計として使っている人からの情報をネットで調べてみたのですが,スリープしないようにはできないけれど,スリープから復帰したときに時計を表示するようにはできるそうです。新モデルでもっと時計として使いやすくなっているのかどうかは分かりませんが,常時時計ON機能や,腕を振ったらスリープから復帰機能があったら便利なんじゃないかと思いました。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入