週刊Webテク通信

2010年4月第1週号1位は、バナー広告をデザインするためのヒントいろいろ、気になるネタは、渋谷駅にツイッター連動広告

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

1. Getting Started with Banner Advertisements | Design Informerhttp://designinformer.com/getting-started-banner-advertisements/

バナー広告をデザインするためのレクチャー記事です。

サイズと位置について、バナー広告を作るヒント、広告配信サービスのリストがまとめられています。

効果的なバナー広告を作るヒントとしては、以下のようなことが紹介されていました。

  • 短く、魅惑的な見出しを付ける
  • 即座にメッセージを伝える独創的なコピー
  • ターゲットに合ったコンテンツとイメージ
  • 人を引きつけるサイズ・色・形のボタン
  • 1つのバナーには1つの話題に絞る
  • ファイルサイズを最適化する
  • アニメーションや動きをうまく使う
  • 掲載サイトと調和するデザインにする
  • 1つのキャンペーンに複数のバナーを用意する
  • 効果測定をする
図1 バナー広告作成の参考になる記事
図1 バナー広告作成の参考になる記事

2. HTML5×CSS3の実装で抑えておくべきこと - シャンディ・ガフを飲みながらhttp://shoonm.com/2010/03/html5css3.html

現時点でHTML5とCSS3を使ってサイトを作る際の、注意点や対処法についてまとめてあります。

古いブラウザのことも考えてどう実装していくのがいいのか、具体的な方法についての解説が役立ちそうです。

図2 HTML5とCSS3の実装についてのノウハウを紹介
図2 HTML5とCSS3の実装についてのノウハウを紹介

3. 28 Useful JQuery Sliders You Need To Download | Design your wayhttp://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/

スライダー/カルーセルを実現するjQueryプラグインを多数紹介した記事です。

図3 jQueryを使ったスライダー28種類
図3 jQueryを使ったスライダー28種類

4. 3D Text Tower | CSS-Trickshttp://css-tricks.com/3d-text-tower/

CSS3でのtext-shadowプロパティを使って、文字を立体的に見せるテクニックを紹介しています。

テキストへのドロップシャドウは複数設定できます。そこで、1ピクセルずつずらしたたくさんの影を付けることで、立体に見えるようにしています。

簡単なアイデアですが、ロールオーバーで文字が立体的に浮き出てくるような効果は、なかなかインパクトがありますね。

図4 立体的なテキストを作成するテクニック
図4 立体的なテキストを作成するテクニック

5. 50 Retro and Vintage Web Designs to Inspire You | Inspirationhttp://webdesignledger.com/inspiration/50-retro-and-vintage-web-designs-to-inspire-you

レトロ&ビンテージなテイストのWebデザインのギャラリーです。

かなりビジュアルを作り込んだ凝ったサイトが多いですね。日本ではあまり流行らないデザインのような気もしますが、細部まで作り込む姿勢は参考になると思います。

図5 レトロ&ビンテージなWebデザインのギャラリー
図5 レトロ&ビンテージなWebデザインのギャラリー

そのほか先週の記事から、気になるまとめ記事を3つ紹介します。

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

Dropico :: Just Drag n' Drop ithttp://www.dropico.com/

Dropicoは、各種写真共有サービスに登録した写真を1画面でまとめて管理できるサービスです。Flickr、Picasa、Facebookなどの自分の写真アルバムに同時にアクセスが可能です。

その名の通りドラッグ&ドロップの操作で各サービス間で写真をコピーできます。写真のタイトルやタグなどを変更したり、オンラインの画像編集アプリと連携して写真の加工も行えます。

Flickrの画像をTwitPicを使ってTwitterに投稿するといったことも、Dropico上で完結します。

iPhoneや携帯電話で撮った写真をメールでDropicoに送り、パソコンでDropicoにログインして必要な写真を写真共有サービスに登録するといった使い方もできるようです。

図6 各種写真共有サービスの写真をまとめて管理できるサービス
図6 各種写真共有サービスの写真をまとめて管理できるサービス

おすすめ記事

記事・ニュース一覧