• DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • CLOUD COMPUTING STAGE
gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2010年4月第1週号　1位は，バナー広告をデザインするためのヒントいろいろ，気になるネタは，渋谷駅にツイッター連動広告

週刊Webテク通信

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

2010年4月8日

, , , , , ,

この記事を読むのに必要な時間：およそ 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テク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/

コメント

コメントの記入