週刊Webテク通信

2010年1月第2週号1位は、ブラウザ上でのモックアップ作成のススメ、気になるネタは、Google Nexus One(ネクサス・ワン)ついに発表

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

1. 12 Killer Tips for Designing in the Browser | Design Shackhttp://designshack.co.uk/articles/css/12-killer-tips-for-designing-in-the-browser

Photoshopなどを使って画像でWebページのラフを作るのではなく、最初のモックアップの段階からHTMLとCSSで作ることを推奨した記事です。

  • 画像ではサイトの感じが正確に伝わらない
  • ブラウザ上でラフを作ることでコンテンツの構成に集中できる

といった理由があるようです。

CSS3でドロップシャドウや角丸、透明度を使う方法がTipsとして紹介されていますが、CSS3での表現力があってこそHTMLとCSSでラフデザインを行えるようになったと言えるでしょう。英文だと、CSS3のWebフォントでいろんな書体も使えるので、文字を画像化する必要もなさそうです。

この記事の作者が推奨しているツールは、エディタはMacRabbitのEspressoカラースキーム作成はAdobe KulerブラウザテストツールはAdobe Browserlabでした。

図1 ブラウザ上でのモックアップ作成のススメ
図1 ブラウザ上でのモックアップ作成のススメ

2. Showcase Of Modern Navigation Design Trends - Smashing Magazinehttp://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/

最近はやっているタイプのナビゲーションメニューを集めて紹介しています。

  • 3Dナビゲーション
  • フキダシ型
  • 角丸
  • アイコン付きナビゲーション
  • JavaScriptアニメーション
  • 変わった形
  • ページ移動をメインのナビゲーションとしたもの

といったカテゴリに分けて、豊富に実例を紹介しています。

図2 最近トレンドのナビゲーションデザインのショーケース
図2 最近トレンドのナビゲーションデザインのショーケース

3. CSS 3のアニメーション機能を使ったロールオーバーやフェードインの設定 - builder by ZDNet Japanhttp://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20406086,00.htm

ロールオーバーボタンの作成やフェードインの設定など、CSS3のアニメーション関連のプロパティを詳しく説明しています。

ページ全体をフェードインで表示したりできるんですね。毎回だと鬱陶しいと思いますが。JavaScriptやFlashが登場してすぐの頃もそうでしたが、機能に引っ張られて無意味に効果を入れまくったサイトが増えるかもしれませんね。

このアニメーション機能ですが、現状Safari 4とGoogle Chrome 2以上でしか使えないとのことです。

図3 CSS3のアニメーション機能の解説
図3 CSS3のアニメーション機能の解説

4. A Showcase of Clean White Web Designs | Web Design Ledgerhttp://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs

白ベースでクリーンなWebデザインのショーケースです。シンプルでミニマルなサイトが多数紹介されています。

図4 白ベースでクリーンなWebデザインのショーケース
図4 白ベースでクリーンなWebデザインのショーケース

5. 25 of the Best Portfolio Sites of 2009 | Folio Focushttp://foliofocus.com/best-of-2009/

2009年の優れたポートフォリオサイトのショーケースです。いろいろなタイプのサイトが25個紹介されています。

図5 2009年のベストなポートフォリオサイトを紹介
図5 2009年のベストなポートフォリオサイトを紹介

そのほか先週の記事から、Twitter関連の記事を紹介します。

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

CSS3 Gradient Generatorhttp://gradients.glrzad.com/

CSS3でのグラデーションのコードを簡単に生成できるジェネレーターが登場しました。出来上がりのサンプルを見ながら、始点と終点や色を選べます。

今後こういったCSS3用ジェネレーターがいろいろ登場しそうですね。

WebオーサリングソフトやCSS編集ソフトにCSS3用の機能が付くまでは、こういったオンラインツールが重宝しそうです。

WebKit系(Safari、Chrome)と、Mozilla系(Firefox)両方に対応したコードを生成していますが、Firefoxでのグラデーションのサポートは3.6bからとのことでした。

図6 CSS3用グラデーションジェネレーター
図6 CSS3用グラデーションジェネレーター

おすすめ記事

記事・ニュース一覧