週刊Webテク通信

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

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

ネットで見かけた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 各種写真共有サービスの写真をまとめて管理できるサービス

今週の気になるWebネタ

渋谷駅にツイッター連動広告-ベネッセ「こどもちゃれんじ」が出稿 - シブヤ経済新聞http://www.shibukei.com/headline/6796/

ベネッセが行った,渋谷駅の駅貼りポスターとツイッターとを連動させた広告は,面白い試みだったと思います。

ツイッターで「こどもがいて,よかった。」という気持ちやエピソードを投稿してもらい,選ばれた作品をシールにプリントしてポスターに貼っていくという企画でした。

ツイッターのつぶやきを手で貼っていくというアナログ感がいいですね。

渋谷駅まで見に行けないよという人のために,つぶやきで埋められていくポスターは,YouTubeにアップされた動画で見られるようになっています。

こどもちゃれんじ編集部のアカウントは,@kodomo_happyです。この企画は期間限定ですが,アカウントは継続して利用していくとのことです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入