週刊Webテク通信

2010年10月第2週号1位は、最近よく見かけるWebデザインテクニックとコーディング方法、気になるネタは、画像検索のGoogle GogglesがAndroidから1年遅れでとうとうiPhoneにやって来た

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

1. Five Useful Design Techniques and Coding Solutions For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2010/10/07/5-useful-coding-solutions-for-web-designers/

最近よく見かけるWebデザインテクニック5つと、そのコーディング方法を解説しています。

ユーザーインターフェイスやインタラクションに影響を与えるような、デザインテクニックとのことです。

  1. 棒グラフ効果
    タグやコメント数などを表示する際、その項目の幅を数値に比例して可変させるテクニック。たとえばブログの記事タイトルをコメント数の順に並べる場合、コメント数の多いものほど横幅も広く表示する
  2. ロールオーバーでのアニメーション
    ロールオーバーした際に、通常隠れているその記事の投稿日、コメント数などを表示するテクニック
  3. カテゴリごとの色分け
    たとえば記事の一覧表示で、カテゴリごとに色帯を付ける
  4. 凝った画像のキャプション
    きちんとスタイリングとポジショニングされた画像のキャプション
  5. 印刷物のようなレイアウト
    印刷物に影響を受けた凝ったレイアウト

ツイッターで発言にロールオーバーしたときにリツイートや返信のボタンが出現するのも2の仲間ですね。この感じのインタラクションは確かに流行っています。

1はあまり見たことありませんが、簡単で面白い効果が得られるので使ってみたいですね。

図1 5つの便利なWebデザインテクニックとコーディング方法
図1 5つの便利なWebデザインテクニックとコーディング方法

2. Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックスhttp://www.webcreatorbox.com/tech/css-heading-list-blockquote/

見出し、リスト、引用文をCSSでデザインするテクニック集です。

CSS3のグラデーション/角丸やWebフォントを使った箇所もあり、簡単に凝った効果が適用できます。

グラデーション/角丸については、CSS3 PIEを利用してIE6~8にも対応させる方法を解説しています。

図2 見出し、リスト、引用文をスタイリングするテクニックいろいろ
図2 見出し、リスト、引用文をスタイリングするテクニックいろいろ

3. The Science Behind a Single Page Websitehttp://sixrevisions.com/web_design/the-science-behind-a-single-page-website/

1ページ完結型Webサイトのまとめ記事です。利点や欠点、よく使われるテクニックの解説と、実際のサイトのギャラリーが紹介されています。

1ページ完結型のWebサイトの利点としては、以下のようなことが挙げられていました。

  • ナビゲーションの際にページのリフレッシュがない(すでに読み込まれているか、非同期で読み込まれる)
  • コンテンツ間の移動が素早く反応がいい
  • メンテナンスしやすい
  • デザインのクオリティを追求しやすい
  • Googleページランクが1つのページに集約できる
  • サーチエンジンに密度の濃いコンテンツを提供できる
  • 訪問者に強い印象を与えることができる
  • 1つの商品や1つの目的を紹介するカタログページとして形にしやすい
  • モバイル向けのWebアプリとして好まれる見せ方である
図3 1ページ完結型Webサイトのまとめ
図3 1ページ完結型Webサイトのまとめ

4. Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.comhttp://www.djavupixel.com/design/icons/free-clean-gloassy-psd-buttons-ready-for-web20/

ボタンを作るためのPhotoshopファイルの素材集です。シンプルで使いやすそうなデザインのものが中心となっています。

図4 ボタンデザインのためのフリーのPSDファイルいろいろ
図4 ボタンデザインのためのフリーのPSDファイルいろいろ

5. 30 Examples of Mega Menus in Web Design | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/mega-menus/

メガメニューのデザインギャラリーです。ドロップダウンで巨大なメニューが出てくる、いわゆるメガメニューと呼ばれるもので、アメリカではかなり流行っているようです。

コーナーの多いサイトにこそ使われるからか、有名企業のサイトが多いですね。

図5 メガメニューの実例30選
図5 メガメニューの実例30選

そのほか先週の記事から、役立ちそうなまとめ記事を紹介します。

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

Five Best Invitation Serviceshttp://lifehacker.com/5654337/five-best-invitation-services

今回は、オンラインでパーティなどの招待状を出せるサービスをまとめた記事を紹介します。

絵ハガキのようなキレイな招待状を作れるサービスは面白いですね。PinggとPaperless PostはFlashベース、EviteはHTMLベースでした。

FacebookやGoogle Calenderを使うというシンプルな方法も紹介されています。

取り上げたサービスの中で、どれががいいと思うかのアンケートをやっているのですが、Facebookが1位になっていますね。上位のものはすべて無料のサービスでした。

図6 オンラインの招待状サービス5つ
図6 オンラインの招待状サービス5つ

おすすめ記事

記事・ニュース一覧