週刊Webテク通信
2010年1月第2週号 1位は,ブラウザ上でのモックアップ作成のススメ,気になるネタは,Google Nexus One(ネクサス・ワン)ついに発表
2010年1月14日
Webテク, Webデザイン, Web広告, HTML, CSS, アニメーション, ポートフォリオ, Twitter, Android
アニメーション, iPhone, クライアント, ショーケース, 2009, Nexus
ネットで見かけた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でした。
2. Showcase Of Modern Navigation Design Trends - Smashing Magazinehttp://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
最近はやっているタイプのナビゲーションメニューを集めて紹介しています。
- 3Dナビゲーション
- フキダシ型
- 角丸
- アイコン付きナビゲーション
- JavaScriptアニメーション
- 変わった形
- ページ移動をメインのナビゲーションとしたもの
といったカテゴリに分けて,豊富に実例を紹介しています。
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以上でしか使えないとのことです。
4. A Showcase of Clean White Web Designs | Web Design Ledgerhttp://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs
白ベースでクリーンなWebデザインのショーケースです。シンプルでミニマルなサイトが多数紹介されています。
5. 25 of the Best Portfolio Sites of 2009 | Folio Focushttp://foliofocus.com/best-of-2009/
2009年の優れたポートフォリオサイトのショーケースです。いろいろなタイプのサイトが25個紹介されています。
そのほか先週の記事から,Twitter関連の記事を紹介します。
- Twitter解析ツール15種比較レビュー - リアルアクセス解析
自分のアカウント情報を解析するツールの比較記事です。 - 意外と知られていない?Twitter公式の埋め込みガジェットがとっても素敵*二十歳街道まっしぐら
ツイートを自分のサイトに表示するガジェットなどを提供しているTwitter Goodiesコーナーの紹介記事です。 - Twitterをもっと便利に!オススメのクライアントはどれ?(PC編) - はてなブックマークニュース
Twitterのクライアント特集「PC編」です。 - Twitterをもっと便利に!オススメのクライアントはどれ?(iPhone/携帯編) - はてなブックマークニュース
Twitterのクライアント特集「iPhone/携帯編」です。
先週の気になるWebサービス
CSS3 Gradient Generatorhttp://gradients.glrzad.com/
CSS3でのグラデーションのコードを簡単に生成できるジェネレーターが登場しました。出来上がりのサンプルを見ながら,始点と終点や色を選べます。
今後こういったCSS3用ジェネレーターがいろいろ登場しそうですね。
WebオーサリングソフトやCSS編集ソフトにCSS3用の機能が付くまでは,こういったオンラインツールが重宝しそうです。
WebKit系(Safari,Chrome)と,Mozilla系(Firefox)両方に対応したコードを生成していますが,Firefoxでのグラデーションのサポートは3.6bからとのことでした。
今週の気になる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テク通信
- 2010年1月第4週号 1位は,CSSの総合的な情報サイト「CSS HappyLife ZERO」,気になるネタは,週刊ダイヤモンドでツイッター特集
- 2010年1月第3週号 1位は,うまくアクションをうながすための4つのデザイン要素,気になるネタは,声がバンド演奏になる神アプリ! Voice Band が凄い件
- 2010年1月第2週号 1位は,ブラウザ上でのモックアップ作成のススメ,気になるネタは,Google Nexus One(ネクサス・ワン)ついに発表
- 2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始
- 2010年3月第2週号 1位は,CSSだけで実現するフキダシ作成テクニック,気になるネタは,Evernoteの日本語化や今後の展望について聞いてきた
- 2010年2月第4週号 1位は,すばらしいCSS3のチュートリアル&テクニック集,気になるネタは,Google「リアルタイム検索」が日本語対応
- 2009年11月第1週号 1位は,今どきのCSSレイアウトの特徴,気になるネタは,日本版Twitter,「つぶやき」から「ツイート」に
- 2009年10月第2週号 1位は,さんざん乱用されたWebデザインのトレンド/気になるネタは,落書きから写真を合成!? PhotoSketch
- 2009年10月第1週号 1位は,検索結果ページのデザイン/気になるネタは,キー局がなぜ今,YouTubeに


