いろいろなブラウザのデザイン
あなたが今お使いのブラウザは何でしょうか？
やはり、シェアNo.1のInternet Explorer？
Firefox、Safari、Opera、Google Chrome、、、
「ブラウザ」と呼ばれるインターネットを見る「窓」は、
今も着々と進化し続けているようです。
今回はそんなブラウザの「デザイン」に着目して、
各ブラウザを調べてみました。
今回調査したブラウザは以下の通りです。
【WIN】
・Internet Explorer 6.0
・Firefox 3.0
・Opera 9.6
・Google Chrome
・Lunascape
・Slepinir
【Mac】
・Internet Explorer 5.2
・Firefox 3.0.5
・Opera 9.6
・Safari
ーーーーーーーーーーーーーーーーーーーーーーー
＜WIN＞
・Internet Explorer 6.0
・Firefox 3.0
・Opera 9.6
・Google Chrome
・Lunascape
・Slepinir
【Mac】
・Internet Explorer 5.2
・Firefox 3.0.5
・Opera 9.6
・Safari
●オマケ●
「戻る／進む」を比較してみました。
斜線入りのボタンをつくろう！
ただのベタ塗りやグラデーションのボタンには飽きたなぁという方にオススメ。
ひと手間かけて、WEB2.0風（？）なボタンを作ってみましょう。
完成のイメージは↓です。斜線が入ってるのわかりますか？
では、ボタン作りの準備からご説明します。
（１）グリッドを表示する（コマンド＋＠）
ビュー＞表示＞グリッド
※このときの注意点はグリッドが1px単位になっているか？
グリッド線が10pixel、分割数が10になっているか、設定を確かめましょう。
環境設定＞ガイド・グリッド・スライス
（２）サイズを決めて、ガイドを引く
今回はW：150、H：30にしました。
（３）シェイプをガイドに合わせる
角丸にしたかったので、シェイプを利用。
（４）文字を入れて、取りあえず形をつくります。
（５）完成イメージと今の状態を比べて、足りないものを確認
●グラデーション
●斜線
●境界線
●文字のメリハリ…
斜線の場合は、レイヤースタイルのパターンオーバーレイに
パターンを追加する必要があるので、次はその説明です。
（６）パターンの追加
3×3pxサイズを新規作成。背景を削除して、透明の状態します。
線の色は、メインの色（今回は緑）に合わせましょう。
編集＞パターンを定義 で追加完了です！
（７）レイヤー効果をつけていきましょう。
レイヤー＞レイヤースタイル
《ボタン》
●グラデーション
グラデーションオーバーレイを使用。
●斜線
パターンオーバーレイを使用。
さっき作ったパターンがありました！
●境界線
境界線を使用。
・サイズ：1px
・位置 ：外側
色は、緑の濃い色にしてみました。
《文字》
●文字のメリハリ…
ドロップシャドウを使用。
・不透明度：75％
・角度120°
・距離：1px
・スプレッド：0％
・サイズ：0％
これで完成です！！！
パターンは登録さえしておけば後からずっと使えるので、
オリジナルのパターン作成をしておくと、作業効率がUPしますよ！
ブランディングサイトって？
どうも、こんにちはタロウです。
自分でお題目を立てたのがいいんですが
実の所、むずかしいお題目だったかもしれません、、、。
まぁ、いつも社内やお客様から制作物に対して
「クオリティー高く」という言葉をお聞きする機会が多いのですが
制作人な私は「高いクオリティーって、そもそも何じゃろ？？」と
物思いにふける機会がしばしばあります。
簡単に考えると
■高いクオリティー ＝ とりあえずパッと見がよろし
かな？とは思いますが、販売サイトなんかをやっていると
先の「見た目から考えるＷＥＢ導線」でもグチったように
美しいデザインが必ずとも成果が上がり結果に繋がるってワケでもなく
結果が出たら、それは高いクオリティー、、、だったのかもしれません。
でも今回のお話しである「ブランディングサイト」は、
その考えとは別次元のお話しかな？と思っております。
とはいえ「ブランディング」って言葉から随分遠ざかったお仕事を
現実的にさばいている今日このごろですが、
ブランディングサイトの考え方は「単純に上記販売サイトの考え方と逆」ではなく
今、ぼんやり考えているのは
■ブランディング ＝ 企業や商品に人格（気配？）をもたせ、人々に存在を感覚としてすり込ませる。
的な感じで思っております。
私は、頭はあまり上等では無く、長い文章や文字を読むのが苦手なんですが
それゆえに、逆に短いパンチのある文章（コピーかな？）や
あんまり枝葉にこだわらないストレートなデザインや絵が大変好きですので
もしブランディングに関わるお仕事に巡り会う機会があったら
「この人（商品）は、何者だろう？どんな性格？ニオイ？？？」と
わかりやすく要点しぼって観察していきたいと思います。
、、、、。「わかりやすい人」も「目立たない人」も、それぞれ難しそうだ。
、、、。と以上、壮大な独り言でした。
見た目から考えるＷＥＢ導線
はじめまして、タロウといいます。
私は１０年ほどデザイン制作中心に、やってきてましたので
あんまりロジカルな話でないかもしれませんが
読み物として楽しんでいただけたらと思います。
で、今回は導線のお話しということで
以前私がチョットだけ関わった案件を例にお話ししようかな？と思います。
とあるサイトで、サイトの見た目をザックリ眺めてみると、、
■ 各パーツが規則正しく「違和感なく」レイアウトされたサイト
で、無難に構成されたサイトだったのですが、
どうやら流入率が芳しくないということで、、、、、、実験的に
■各パーツが規則正しくなく「違和感バリバリ」レイアウトされたサイト
を制作した所、、、、、、。
なんともまぁ、、
「流入率アップ」という結果になりました。
もう１０年近くデザインの美しさや調和感を大切に制作していた
私にとって、なんだか納得できない結果が出てきてしまいました。
もちろんビックリ箱のようなものが突然でてきたら
誰でも、それに目が行くとは思いますが
なんだか「ビックリ箱」は美しいモノと作る人間にとって
「最終手段」として私的には考えております。（気軽で便利なんですけどね、、）
とはいえ、なんだか悔しいので、日々ビックリ箱のような飛び道具ではなく
ストレートに居心地よく「人に振り向いてもらうモノ」を
作っていけるように感性やネタを育てていきたいなぁと思っております。
クリックされるバナーを検証してみよう！！
バナー広告などを作るときに、デザインやキャッチコピーなんかいろいろと考えて作るんですが、クリックされるのはどういったものがよいのか？！なんて、迷宮入りしちゃいそうなことを考えちゃいますよね。
そうはいっても、ある程度、理論にそった制作をしていかないと、研究開発の意味がない訳です。
そこで、今回はクリックされやすいバナーとは？！という検証を行ってみました。
今回も実験サイトとして使用したのは「ケセラスタイル♪」です。
ケセラスタイルで、時期にちなんだエコキャンペーンを実施してみました。
そこで、トップページにランダムにバナーを設置して、どういった効果があったのか？を検証しました。検証期間は２週間。
６種のバナーを設置しました。
（１）微動だにせず、動かずバージョン
（２）文字浮き出しバージョン（普通）
（３）文字浮き出しバージョン（ゆっくり）
（４）文字がぱっと出るバージョン（点滅なし）
（５）文字がピカピカでるバージョン（点滅）
（６）たまに、プルっするバージョン
さぁ、皆さんの予想はどうでしょうか？！
発表します！！！！クリック率王者決定戦！！！
ＮＯ、１ ＞ 文字浮き出しバージョン（ゆっくり） 0.64％
ＮＯ、２ ＞ たまに、プルっするバージョン 0.55％
ＮＯ、２ ＞ 文字がぱっと出るバージョン（点滅なし） 0.55％
↑上記２つは同率でした。
ＮＯ、４ ＞ 文字浮き出しバージョン（普通） 0.47％
ＮＯ、５ ＞ 文字がピカピカでるバージョン（点滅） 0.35％
ＮＯ、６ ＞ 微動だにせず、動かずバージョン 0.26％
上記の結果から推測するに、、、
●派手なバナー（ピカピカしたり、うるさい印象のもの）は、避けられがち
●かといって、目立たないものは気づかれない。。。
※動かないバージョンは、設置した当初はよいクリックだったのですが、フリークエンシーが高まるとどんどん効果が薄くなりました。
●イヤミではなく、おとなしく主張するものがよいみたい。
という感じでしょうかね？
最近のトレンドを見たような気がします。
