EC studio デザインブログ » グラフィックデザイン

【実例】デザイン初心者が学んだちょっとしたコツで変わる！バナーの小技

赤堀　巴絵 — Thu, 10 Feb 2011 06:23:39 +0000

普段はコーダー業務をおこなってるのですが、デザインの知識は…。
でも、やはりデザインのスキルも大事ですよね！
なので、今年からデザインの勉強のためにバナー作成などをおこなっています。

今回は先輩デザイナーさんに教えていただいた
バナー制作のちょっとしたコツを紹介していきたいと思います。

まずはバナーを作ってみよう

バナーはEC studioが出展している「モニプラ」の
アンケートバナーを作成してみました。
1つ目のお題は「パソコンソフトは店で買う？ネットで買う？」でした。

	→
before		after

ちょっとしたコツ！【その1】

文字は揃えたほうがきれいに見えるよ
注目させたい文字のフォントは大きくするとメリハリがつくよ
イラストはちゃんとなにかわかるようにバナーの中にいれてあげよう

修正箇所は、文字を中央揃えではなく左揃えに修正しました。
また、注目させたい「店」「ネット」のサイズを大きくしました。
またイメージで使ってる画像がわかりにくかったので、
もっとバナーの中にはいるよう位置を移動させました。

2つ目のお題は「パソコン何台持ってますか？」でした。

	→
before		after

ちょっとしたコツ！【その2】

文字間の隙間があきすぎてる文字はつめたほうがキレイにみえるよ
同じ行でフォントの大きさを変えすぎると読みにくくなるよ！
単色でのっぺりする場合はグラデーションをいれたらいいよ

修正箇所は、「何台」という文字の大きさを他のものと同じサイズに揃えました。
また、「amazonギフト券プレゼント」の文字間が開きすぎてるのでつめました。
背景のオレンジものっぺりしていたので、
オレンジから薄いオレンジのグラデーションを使ってみました。

3つ目のお題は「EC studio スタッフに一言メッセージを♪」でした。
今回はパソコンではなく、EC studio に関するテーマでした。

	→
before		after

ちょっとしたコツ！【その3】

人を使うときは顔を隠しちゃったら、もったいないよ！
問いかけるものは人一人を使ったほうがわかりやすいよ
場合によってはアイコンとかシルエットを使ってもあり

修正箇所は、引きの集合写真を一人のみの写真に変更して、
顔がちゃんと見えるように作成しなおしました。

作ってみて思ったこと

まずは、作業するときは画像を拡大して作成してしまうけど、
確認するときは100%にして引いて全体を確認するのが大事だと感じました。
やっぱり全体を見ると「あれ？バランスが…」と気づくことも多かったです。

最後は、やっぱり作ったものはレビューしてもらうのが大事。
自分が気づかない箇所のアドバイスをもらえるのですごく勉強なりました。
品質も一定に保てるので、大事なことだと実感しました。

今回紹介させていただいた「モニプラ」ではアンケートを募集中です！
ぜひ「モニプラ」でアンケートに答えて、
素敵なプレゼントをゲットしてみてはいかがでしょうか？

関連した記事：

2010年の海外のウェブデザイントレンド

谷拓樹 — Thu, 18 Feb 2010 10:19:57 +0000

WebDesignerWallより、2010年のデザイントレンド予測の記事がありましたので、その中身を見ていきたいとおもいます。

「2010年のウェブデザインはより面白く、実験的なものが増える」とのこと。
CSS3やHTML5への注目が集まり、新しいビジュアル・機能を持ったウェブデザインを試しているサイトが増えてきています。
ビジュアルの傾向でいいますと、手書きスケッチ、大きな背景のサイトというのは減少傾向にあり、一方でセリフ書体のフォントを使ったデザインや、テクスチャーを使ったサイトが人気のようです。

またCSS3（と、実装してくれているブラウザ）のおかげで、角丸やRGBAプロパティを使った半透明表現、ドロップシャドウ効果などもたくさん簡単に使えるようになってきています。
そして特に海外では顕著ですが、スマートフォン向けのデザインを提供するサイトも増えてきています。

実際にそれらのトレンドに当てはまるサイトを紹介していきます。（一部）

セリフ書体フォントのデザイン

2000年～はVersanaやArialなど、サンセリフ書体のフォントデザインが多かったのですが、2010年からはセリフ書体が注目を浴びるでしょう。

The New York Times - Breaking News, World News & Multimedia
http://www.nytimes.com/

陳 Jon Tan
http://jontangerine.com/

Sushi & Robots, by Jina Bolton
http://sushiandrobots.com/

大きなヘッダー

大きなヘッダーを取り入れたサイトはここ数年増えてきていますが、さらに人気が出そうです。

N.Design Studio | Design Blog & Portfolio
http://www.ndesign-studio.com/

Carsonified presents The Future of Web Apps Conference Miami, Florida 2010
http://carsonified.com/

Web design and CSS training, workshops and DVDs for web designers | For A Beautiful Web
http://www.forabeautifulweb.com/

Webフォントを使用

CSS3のWebFont（@font-face ）を使うことで、閲覧環境のデバイスフォントではなく、サイト側で指定したフォントで文字を表現することができます。
Typekit、Font Squirrelなど無償・有償で提供するサイトも増えています。
ちなみに欧文フォントだけでなく、日本語フォントでもオープンソースで利用できるものが増えてきています。
自由に使えるオープンソースの日本語フォント - SourceForge.JP Magazine

Elliot Jay Stocks.
http://elliotjaystocks.com/

tap tap tap
http://www.taptaptap.com/

微妙なテクスチャの背景

大きな背景画像を使ったサイトは減少傾向にあり、それに変わって増えてきているのはあまり派手ではない、地味で微妙なテクスチャを背景画像に取り入れるサイトが増えました。模様は小さいノイズのようなものや、少しグランジっぽいもの（かすれたもの）が多いです。

iSaidWhat?!
http://www.tapparatus.com/isaidwhat/

Sibling Rivalry | A Speck Brothers Wine.
http://www.siblingrivalrywine.ca/

Analog
http://analog.coop/

ミニマル、グリッドなデザイン

ミニマル、というのが日本語的に表現が難しいですが、「小さな」デザインのサイトのことです。
この「小さい」というのは単純にサイト幅が狭いというだけでなく、色や過度な装飾は抑えたシンプルなデザインも含めるようです。
このミニマルと同様に、グリッドが計算されて整列されたデザイン、余白を生かしたデザインが増えています。
ミニマルとグリッドを合わせたデザインも多い傾向にあります。

FRKT
http://www.forrykt.com/

Heartworker
http://www.heartworker.com/

screen capture
http://www.wilsonminer.com/

CSS3を取り入れる

CSSはすべてのブラウザでサポートされていないですが、多くのウェブデザイナーが実験的に自分のサイトやクライアントのサイトに取り入れています。

CSS3 アニメーション

Google ChromeまたはSafari最新版で閲覧してください、右上の円形が動きます。
他のブラウザだと静止した丸というだけで、閲覧に支障はありません。
こうした遊びのような形で取り入れるのは面白いです。
http://neutroncreations.com/blog/

角丸とドロップシャドウ

テキスト表示

CSS:

.roundCorner {
-moz-border-radius: 10px; /* Firefox用 */
-webkit-border-radius: 10px; /* Webkit（Chrome,Safari用） */
border-radius: 10px; /* 半径10pxの角丸 */
}
.dropShadow {
-moz-box-shadow: 0 0 4px #999; /* Firefox用 */
-webkit-box-shadow: 0 0 4px #999; /* Webkit（Chrome,Safari用） */
-box-shadow: 0 0 4px #999; /* 横方向のオフセット縦方向のオフセットぼかしの半径影の色 */
}

角丸とドロップシャドウはCSS3の中でも頻用されるプロパティです。
Tap Tapas
http://www.taptapas.com/

CSS-Tricks
http://css-tricks.com/

テキストシャドウ

テキスト表示

CSS:

.textShadow {
-moz-text-shadow: 0 0 4px #999; /* Firefox用 */
-webkit-text-shadow: 0 0 4px #999; /* Webkit（Chrome,Safari用） */
-text-shadow: 0 0 4px #999; /* 横方向のオフセット縦方向のオフセットぼかしの半径影の色 */
}

テキストにドロップシャドウの効果を与えます。
使われ方としてはその言葉のとおりテキストに影を落として立体的に浮かせる効果もありますが
影の角度や色を調整すれば、文字部分がへこんでいるような効果を出すことができます。
グラデーションなどと組み合わせるとよりキレイに見えるようになります。

tweetCC | Publish & license tweets with Creative Commons
http://www.tweetcc.com/

Adii Rockstar | Creator of Rockstar Awesomeness
http://adiirockstar.com/

半透明効果を使う

CSSにより対象の要素の透過度を調整できます。
RGBAプロパティまたはOpacityプロパティを使うとこの効果が表現できますが、OpacityよりもRGBAにより透明表現をするケースが多いです。
理由はOpacityの場合だと、指定した要素だけでなく、包括する子要素にも影響してしまうので、背景色だけを透過したい！という場合はRGBAを使うのが好ましいです。

テキスト表示

CSS:

.alpha {
background: rgba(255,255,255,0.75); /* 白色,75% */
}

モバイル向けデザイン

2007年にiPhoneが世の中に出てから、多くの人がモバイル向けデザインについての話題を取り上げました。現在ではiPhoneなどのスマートフォンはCSSやJavaScriptをサポートしているので、PC向けのデザインよりも未来のデザインを作ることができます。多くのサイトがこうしたスマートフォン向けのデザインを提供し始めています。
※iPhoneをお持ちの方は実際にiPhoneでアクセスすると良いでしょう。

Social Media News and Web Tips – Mashable – The Social Media Guide
http://mashable.com/

Hello | Erskine Design（モバイル版URL）
http://m.erskinedesign.com/

Nike Lab
http://www.nike.com/nikelab/

まとめ

2010年はCSS3やHTML5といった新技術を取り入れて新しい表現を追求していくWebデザイナーが多くいるようです。
CSS3を活用すれば、それ以前よりもHTMLのコード量も減ったり、効率的にコードもかけます。装飾表現の多くもCSSで済みますから、わざわざPhotoshopなどを立ち上げる必要などもなく、ワークフロー全体でみても効率が上がるのではと思います。
対応していないブラウザがあるから仕事でできない！という人は個人ブログなどででも、こうしたデザイントレンドや技術を取り入れていきましょう。

参照元記事：
Design Trends (Predictions) in 2010
http://www.webdesignerwall.com/trends/design-trends-predictions-in-2010/

関連した記事：

フォロワー同士で使うTwitterアイコン！無料配布

yoshue — Wed, 03 Feb 2010 13:00:40 +0000

全社導入しているTwitterで、なにか面白いことできないかなぁ
と考えたのが、こちらのTwitterアイコン。

１つ１つをみると、普通の動物アイコン。

これをフォロワー同士でTwitterアイコンに設定し、
タイムラインがうまくつながると・・・

こんな風に絵がつながるという仕組み。

普通のアイコンにあきてしまった方や、
お友達同士の目印にいかがでしょう？

今回は、このオリジナルアイコンを無料配布いたします。
お気軽にお使いいただければ幸いです！

【5個セット：一括ダウンロード（約14 KB）】

フォロワーが多くて5つ揃えるのは難しい・・！
という方は2つでつながるこちらをどうぞ。

【2個セット：一括ダウンロード（約11 KB）】

関連した記事：

2009年デザイントレンド総括！CSS Nite in Ginza, Vol.43に行ってきました

新免孝紀 — Mon, 25 Jan 2010 11:43:01 +0000

2010年1月21日に開催されました、
CSS Nite in Ginza, Vol.43に行ってきました。

今回のテーマは
「2009年のデザイントレンド総括?トレンドをチェックして
2010年のデザイン業務に取り込め！」というテーマで、
原一浩（karadesign/fxb）さん、矢野りんさんによるトークセッションでした。

セッションの内容は、下記のような感じです。
・2009年のデザイントレンドを実際のサイトを用いて紹介
・矢野りんさんによる、デザイン解説を交えての紹介
・2010年のデザイントレンド大予想！

まず、お二人の自己紹介から始まり、「トレンドとはどういうことか？」という
話になったのですが、ここで原さんが考える「トレンド」という言葉の意味が
紹介されました。

“トレンドとは最先端ではない時代に最適化されつつある現象である”

この言葉はすごく納得の行く言葉で、確かにトレンドと言うのは、
最先端を追いかけるということではなく、その時代にあったデザインを
みんなが選択して使うことで発生する現象のことなんだ。
というのがすっと頭の中に入ってきました。

前置きが長くなりましたが、ここから本題の紹介に入りたいと思います。

2009年のデザイントレンド（海外）

■アイコンのシンプル化

今まではMac OS のアイコンのようなリアルなものが主流だったが、
最近は、ピクトグラム化し、単一色の物が増えてきている。

[参考サイト]
MUTANT LABS
Eastern Ranges
Mochimedia

■見立てのデザイン

見立てのデザインとは、背景を風景などに見立てたデザインのこと。
現在は増加傾向にあるので、見立てのデザインにチャレンジするのであれば
今後1～2年くらいは大丈夫だろうということです。

このデザインが流行った背景には、ディスプレイが大きくなり、
背景として見せる領域が大きくなったことも関係しているのではないか、
ということでした。

[参考サイト]
BLOSSOMES VILLAGE RESORT
Hull Digital Live hd
Blue Acorn

■流行りの色は青

様々なサイトを見ていると、青を基調色としたサイトが多く、
TwitterやFacebookといったサイトの影響も大きいのでは
というお話が出ていました。

[参考サイト]
Mobile My Site
Oyster
Unuidesign

■テクスチャ

テクスチャに使用する素材は、ステッチ、皮、紙などを
使用したサイトが多く見られるようです。

[参考サイト]
Mark Hadley
Ulredesign
Daniel Marino

■巻き込みリボン

見出しのデザインなど、背景に巻き込み立体的に見せているサイトが多く
「W3C」のサイトもこのデザインを採用しており、
「今後のデザインの標準になっていくのでは！？」との
大胆予想も飛び出しました（笑）

[参考サイト]
CuisineSaine
Open Source Design Network
World Wide Web Consortium

■テキストはシステムのアンチエイリアス前提

海外のサイトはテキストはより大きくなり、
システムフォントを使用し、アンチエイリアスをかけた
サイトが多くなっているとのことでした。

ただし、アンチエイリアスで表示可能な
OSのシェアの普及が少ないのと、
日本語のシステムフォントで表示した場合も、
見栄えがあまり良くないので、日本での実用は
まだ難しそうとのことです。

[参考サイト]
BIG SPACESHIP
Boag World
Pw Studio

■フォームは大きく、見やすく、美しく

フォームのインプット部分は、大きくすることで、
ユーザーは使いやすく、見やすくなり、
またデザインする側も、フォームが大きくなったことで、
アイコンを表示させるなどより多彩なデザインが
出来るようになりました。

[参考サイト]
Tea Round
CULINAR
Google

■メインイメージはインタラクティブに

ペラペラとページがめくれるような動きのものが多くなっています。
また、これらはFlashで開発されているのではなく、jQueryのライブラリを
使って開発されています。

[参考サイト]
THINGS THAT ARE BROWN
Point Zero
ROBERT ALAN

■吹き出し表現

ビジュアルの要素として、吹き出しを使用しているサイトも
多く見られます。こちらもTwitterの影響もあるのではないかという
お話をされていました。

[参考サイト]
Catholic Chaplaincy
Evan Bowers Design
F91W

■小さな段組

小さなボックスで区切られたレイアウトです。
ボックスで区切られているので、意外と入る情報は少なく
コピー量を極力減らすなどバランスも必要になります。

[参考サイト]
D&DEPARTMENT PROJECT
CreativeDepart
Reform&Revolution

その他、グローバル企業や、上場企業のサイトデザイン（国内）の
傾向などの紹介も有りましたが、今回はデザイントレンドの紹介ということで、
あえてここでの紹介はやめておきます。

また、このようにデザインを分析するために原さんは
独自で開発した「Vaqum」というツールを使いサイトの
キャプチャを取り分析しているようです。

昨年キャプチャしたサイトの数は約19,000サイト！
サイトを見て、分析している量が全然違います。

改めて、いろんなサイトを見て分析することは
重要なことだなと思いました。

2010年のデザイントレンド大予想

■原さん予想
・アイコン付きフォームの普及
・グレーアウトにより操作対象の明確化
・リキッド型（100%幅）のセパレートを超える何か
・アプリケーション化したデザイン
・クリック領域の拡大、文字のノングラフィック化

■矢野さん予想
・微調整しやすいデザイン
・ABテストなど、運用しながら微調整を繰り返す公開方法
・ボックスを並べたレイアウト
・ボックスを並べたレイアウトは文字情報が削られ、文章が減少する
・スマートフォンなどの小さいサイズのディスプレーに最適化されたレイアウト

以上が、お二人の2010年のデザイントレンド予想になります。
曖昧なものもありますが、今年はどのようなトレンドが生まれるのか楽しみですね。

今回のセッションのスライドと音声は下記よりダウンロード出来ます。
CSS Nite in Ginza, Vol.43フォローアップ&メッセージ

関連した記事：