週刊Webテク通信

2010年4月第2週号 1位は,新聞や雑誌のようなスタイルのWebデザインのトレンド,気になるネタは,何もしないiPadアプリ『ゲームテーブル』

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

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

1. Trends in News and Magazine-Style Web Design | Vandelay Design Bloghttp://vandelaydesign.com/blog/design/news-websites/

新聞や雑誌のようなスタイルのWebデザインのトレンドについての記事です。

トレンドとしては以下の項目が紹介されていました。

  • 白または明るい色の背景
  • グリッドベースのレイアウト
  • デザイン要素としてのタイポグラフィ
  • 画像のサムネイル
  • 目立つ検索フィールド
  • カテゴリによるナビゲーション
  • 水平方向のナビゲーションメニュー
  • ドロップダウンメニュー
  • ビデオコンテンツのコーナー
  • 人気のある記事のコーナー
  • ソーシャルメディアとの連携
  • 右側のサイドバー

ショーケースとして紹介されているサイトは,どれもステキなデザインで参考になりそうです。

図1 新聞&雑誌風Webデザインのトレンドと実例集

図1 新聞&雑誌風Webデザインのトレンドと実例集

2. Icon Library, the iconshock blog ≫ Useful Icon design lessons and tipshttp://iconlibrary.iconshock.com/tutorials/useful-icon-design-lessons-and-tips/

アイコンを作る際に気をつけることをまとめたレクチャー記事です。

シンプルでサイトに溶け込むような,汎用性の高いアイコンの作成を目的とした内容です。

ダメなアイコンの例を抜粋して以下に紹介します。

  • それぞれのアイコンに十分な違いが付いていないアイコンセットはダメ
  • 過度にオリジナリティのあるものはダメ
  • アイコンの中にテキストを入れてはダメ
  • 小さなアイコンにパースや影を付けてはダメ
  • ひとつのアイコンにたくさんの要素を入れてはダメ

ほかにも,してはダメなこと/するべきことが多数掲載されています。

図1 アイコンデザインのレッスンとTips

図1 アイコンデザインのレッスンとTips

3. モックアップ作成サービス&ソフトウェア 25選 at Cool Codinghttp://coolcoding.com/2010/04/mockups/

サイトのモックアップやワイヤーフレームを作るためのローカルアプリケーションとWebサービスを多数紹介しています。

この連載でも,モックアップやワイヤーフレームを作るためのWebサービスを何度も紹介していますが,まだこれが定番というものはないようです。

自分に適したサービスやアプリケーションを探すのに,この記事は大変参考になると思います。

図3 モックアップ作成のためのサービスとソフトウェア

図3 モックアップ作成のためのサービスとソフトウェア

4. CSS3 Glow Tabs | Impressive Webs Torontohttp://www.impressivewebs.com/css3-glow-tabs/

タブナビゲーションを,画像を使わずにCSS3だけでデザインしたサンプルです。

CSS3でおなじみの角丸,シャドウ,グラデーションを使えば,こういった図形は簡単に実現できますね。

タブにロールオーバーしたときのちょっとしたアニメーション効果も,JavaScriptではなくCSS3のTransition(変形)を使っています。

なお,この記事のサンプルでは,タブが切り替わる機能についてはjQueryを使っています。

図4 CSS3で実現したタブ

図4 CSS3で実現したタブ

5. 40 Inspirational Hand Drawn Web Designs.http://inspirationfeed.com/design/2010/03/40-inspirational-hand-drawn-web-designs/

手描き風の要素を使ったWebデザインのギャラリーです。

図5 手描き風のWebデザイン40選

図5 手描き風のWebデザイン40選

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

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

iPad Peekhttp://ipadpeek.com/

iPadのSafariであなたのサイトがどう見えるかを確認できるサービスです。とはいえ,レンダリングをエミュレーションしているわけじゃないですね。Flashもちゃんと表示されますし…。

iPad風の枠を付けて,iPadでサイトを見ている感じを味わえるジョークっぽいサービスなんでしょうか。

アドレスバーにURLを入力しようとするとキーボードが表示されたり(キーボードは使えません)⁠iPadを縦/横にできたりと,なかなか小技が効いています。

iPadやiPhoneのSafariのように,ページの横幅はフィットされて表示されます。横幅の大きなサイトは縮小されるわけですが,これはCSS3の変形機能を使って実現しているようです。

iPadでどの程度の範囲まで収まるかが分かるので,Webデザイナーにとって実用性もそれなりにありそうです。

図6 iPadでサイトを見た気分を味わえるサイト

図6 iPadでサイトを見た気分を味わえるサイト

今週の気になるWebネタ

何もしないiPadアプリ『ゲームテーブル』 | WIRED VISIONhttp://wiredvision.jp/news/201004/2010040919.html

iPadアプリ「ゲームテーブル」は,ただゲーム盤を提供するだけのアプリだそうです。チェッカーやチェス用のボードとコマ,トランプ一式などが用意されており,コンピューター制御の敵はいないとのこと。これはなかなかいいアイデアですね。囲碁や将棋,オセロなんかも出てきそうです。

モノポリーや人生ゲームなどの盤面だけというのも面白いかもしれません。サイコロ機能くらいはあった方がいいでしょうか。おカネの勘定はiPad上でやってもらえると楽ですが,おもちゃのお札を扱うからこそこの手のゲームは楽しいのかもしれません。

人生ゲームのサイトを見てみたら,お札がなくてキャッシュカードになっているという人生ゲームもあるようです。ルーレットもデジタル。すでに人生ゲームもハイテクになっていました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入