週刊Webテク通信

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

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

ネットで見かけた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用グラデーションジェネレーター

今週の気になるWebネタ

Google Nexus One(ネクサス・ワン)ついに発表―TechCrunchが詳細レビューをお届けするhttp://jp.techcrunch.com/archives/20100105google-nexus-one-the-techcrunch-review/

話題のGoogleケータイ「Nexus One」が発表されましたね。

いままでAndroid搭載の携帯電話をGoogleケータイと読んだりしていましたが,これからはこのNexus OneだけをGoogleケータイと呼ぶことになるんでしょうか。

このNexus One,3~4年前のノートPCと同等の性能を持つスーパーフォンなんだそうです。

iPhoneよりわずかに薄くて軽いのに,画面は480×800ピクセルとiPhoneの320×480より解像度が高いんですね。このタッチパネル有機ELディスプレイは明るく反応も速いと評判がいいようです。

日本語表示には対応しているけれど,キーボードは日本語対応ではないとのこと。日本での発売も未定だそうです。

なお,イラストのウルトラマンネクサスですが,興味のある方は「ウルトラマンネクサス 暗い」で検索してみてください。暗いながらも,わたしは結構好きでした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入