最近、当ブログでは「うごく人」をリリースした所でおなじみのUser Localからリリースされたユーザーヒートを導入しました。
無料かつ、導入が簡単でとても素晴らしいツールです。ユーザーのマウスの動きやクリックした箇所などを計測できるので、ボタンの配置やレイアウトの再設計などでとても参考になります。
しかし、このユーザーヒート、実は自分のサイトのヒートマップ解析データではなく、他のサイトのヒートマップデータもトップページの出力結果のサンプルから見る事ができるのです。これをずっと眺めていると業種ごとのサイトの法則や気付きなど勉強になることが数多くあるんですよ。では一例をご紹介しようと思います。
フォームのユーザービリティーの改善がコンバージョンレートの向上に一役買っているようです。
WEBサイトの最終的な受け皿であるお問い合わせフォームやショッピングカートといったフォームは他のコンテンツに比べて制作の際にないがしろにされがちですが、アクセス解析を見るとサイト内でもかなり上位の閲覧数のあるページとなります。
コンテンツできっちり情報を伝えて、アクションをおこしてもらってもフォームの操作性ひとつで機会損失につながることだってあります。
そこで最近ではEFO(エントリーフォームの最適化)としてフォームの改善対策が注目をあびています。
Google Japan Blogの記事を見て余白の使い方による効果についての記事です。
WEBレイアウトにおいての余白をうまく使うことで、視覚的にユーザーにアピールできることが色々あるのだなと勉強になったので、ご紹介いたします。
最近アローズとかアーバンリサーチなどの有名セレクトショップのレコメンドエリアでもよく見かけるタータンチェックのシャツがアパレル・ファッション業界で再度トレンドになってきているのかなと思っていたら、タータンチェクの良い感じのパターン素材集を見つけたのでご紹介したいと思います。使い方によってはWEBデザインにも取り入れられるのではないかと。
イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリであるs3Sliderが便利そうなのでご紹介しようと思います。
チラシのデザインの作成を印刷会社ではなく個人に発注すると非常にコストを抑えることができます。最近ではWEB上でチラシをアップロードするのが流行っているようです。
最近このようなロゴにマウスポインタを合わせると”トップに戻る”といったナビゲーションが表示されるサイトをたまにみかけます。当たり前のことだけも、ユーザーへの配慮が行き届いてて良いなと思いました。
HTML5のプレビューがA List Apartで紹介されていました。その他、videoタグとaudioタグとスクリプタビリティーについてなど、HTML5について紹介したいと思います。
WEBサイトって結構お決まりの部品であったり、お決まりのレイアウトで構成される事が多いと思うけど、それらをパターン化するとWEBサイトの構成を考えるときであったり、デザインを考える時に色々とこういったパターンが手助けになってくれたりするんじゃないかなと感じます。
つい先日参加したイベントでビジネスアーキテクツの森田雄さんもおっしゃってもいたんですが、WEBデザインって企業が発信したいメッセージと、それを受け取ったエンドユーザーが抱く企業のイメージとのギャップであったり、溝を埋めるようなコミュニケーションをデザインする役目がWEBデザインにおいて大事なんだなと感じます。
企業が発信したいメッセージは色々な利害関係によって角が尖ってしまい、エンドユーザーにはチクチクと刺さる。だからその角を丸める作業が必要になる。企業の理念であったり、事業が目指すゴールなどを考慮した情報を発信をするのはもちろん必要。でもそれをエンドユーザーのニーズに合うメッセージとして受け取ってもらわなければいけない。WEBデザインってそういうフィルターのような役割なんだと思います。
ちまたではユーザー中心デザインが何かと流行ってはいるけれど、かならずしもユーザー中心デザインで利益を上げられる企業が多いとは思わない所もあります。根本的には企業の問題解決はユーザー中心のデザインなんだとは思うんですけれど、商売ってそうも単純ではないと思うんですよね。
SEOで上位表示するだけで物が売れたり、サービスを提供できたりっていうのはもう難しいんじゃないかとも思うし、WEBマーケティングにおいてSEOを度外視することはできない。
企業中心デザインなのかユーザー中心デザインなのか、SEOなのかコンテンツなのか、これからはどこに力を入れたらいいのかっていう優先順位が重要になるんではないかと思います。
一つのマシンでWindowsとMacのブラウザチェックをしようと思えばMacのParallelsを利用して仮想マシンとしてWindowsを起動してチェックする方法が有名ですが、WindowsでもソフトなしでWindowsとMacのブラウザチェックをできるサイトがあったのでご紹介します。
browsershots以下の主要なブラウザチェックに対応可です。
| Windows | Mac | Linux |
|---|---|---|
| Firefox 1.5 | Firefox 2.0 | Iceweasel 2.0 |
| Firefox 2.0 | Safari 2.0 | Konqueror 3.5 |
| IE 5.0 | ||
| IE 5.5 | ||
| IE 6.0 | ||
| IE 7.0 |
ちなみに非常に重たくて、表示されるまでに時間がかかるので、チェックを入れてSubmit Jobを押した後のページをブックマークしておき、後でチェックして確認をするという形になるようです。
ちょっとしたアイコンが必要なとき、アイコン素材のダウンロードサイトで探す方も多いかと思います。アイコンの素材を提供しているサイトはデザインが結構統一されていて、デザインのテイストが違ったら他のサイトを探したりと素材サイトめぐりで結構時間を使うってことも良くあることかと思います。そんなとき、アイコンだけの検索エンジンがあればな～って思うときもありませんか？
そんな時に便利なアイコンのダウンロードができる検索エンジンiconletをご紹介します。インターフェイスはどことなくGoogleを意識したデザインになってますね。
かなりバラエティー豊富なデータがそろっているので非常に便利です。海外サイトなので、アイコンを探す際は英語で探すことをお勧めします。
（例）home,mail,sitemap,download
日曜日の休みを利用してサイトのデザインを少し変えてみました。今回はPNGを利用して画像を重ねるデザインに挑戦してみました。せっかくなので少し解説してみます。
上部背景の青い空はbodyの背景で幅1ｐｘの画像で横方向にリピートしています。その上にヘッダー部にbottom付け、右寄せに背景を指定しエラスティックレイアウトにも対応しています。画像はPNGを利用してbodyの背景画像と重なってもグラデーションがきっちり表現できるようにしています。オブジェクトは盛り上がりのある丘と、月か太陽かわからない球体。奥行き感を出すために丘を登るビジネスマンのシルエットを配置しました。
一応IE6でもPNGがきっちり表示される仕掛けはしているのですが、僕のPCはIE6をIE7にアップデートしちゃったので確認してません。上からおりてくるメニューもPNGなんですが、IE6でPNGを表示する仕掛けを使ったら画像がめちゃくちゃになったのでそのまんまです。これPNGがきっちり表示されなかったらかなりぐちゃぐちゃなんだろうな...
デザインコンセプトは僕自身が最近デザイナーからスーツを着るディレクターというポジションに移動したということもあり、自分自身の気持ちを投影したような感じにしてみました。なんというか、先も見えずにどこに向かっているかもわからないけども、上ってみなければわからない道を突き進むといったような感じです。
デザインは結構気分ですぐ変えるので、また数ヵ月後には変わっていると思いますが、デザインをコロコロ変えるのっておもしろいですね。やっぱりデザインは仕事じゃなくプライベートでするのが一番やってて楽しいと思いました。日曜デザインおすすめです！フッターのデザインっていつも同じ感じに落ち着いてないでしょうか？なかなかサイトのイメージがわかない時や、何かが足りないなぁなんて思っているときにフッターのデザインを楽しい物にすると意外とイメージが変わったりします。
フッターのギャラリーサイトを見つけましたのでご紹介します。ただのナビゲーションにも花を添えてあげましょう。
デザインで行き詰ったときの8つの戦略というタイトルの記事を見つけました。デザイナーは人それぞれ違った対処法でスランプを脱出するかと思いますが、個人的にも共感する部分が多かったので以下の原文を翻訳し要約したものをご紹介したいと思います。
尚、多少の翻訳のミスがある場合があるかもしれませんがご了承ください。
英語の原文はこちら
http://www.seomoz.org/blog/web-design-tactics通常はheader部から作っていくというのが一般的かと思いますが、内部のコンテンツから作っていくことで新たな発見が生まれるかもしれない。
ソフトを使用せずアナログなツールを使ってイマジネーションをスケッチすることによって新たなアイデアが生まれることもある。
CSSギャラリーやデザイン書などから積極的にインスピレーションを得る事によって新たなアイデアを発見することもある。
作りこんだボタンや素材だけど、いまいちだなと思うような素材は、とりあえず放置する。次回で再利用できるかもしれないので、放置するファイルのフォルダなどを作って保存しておく。そして一から作成にとりかかる。
何をやってもうまくいかない時など、パソコンの前から離れてみる。外の空気を吸ったり、人と会話をすることによって、落ち着きを取り戻し、あたらしいアイデアが生まれることもある。
アートは無から作りだすものではなく何かと何かを組み合わせてクリエイトしていくもの。好きなデザインや綺麗なアイコンなどからアイデアを盗むのではなく、インスピレーションを自分なりに解釈し、リミックスすることによって新たなクリエイティブが生まれる。
得意なデザインのフォーマットを選んだり、同じテキスチャなどを繰り返し使うのではなく、色々なフォーマットのデザインを追及していこう。
様々な人の意見を求めてインプットしていく。それによって改善点がわかり、より良い物を作る手助けとなる。しかし、明らかにセンスの悪い人の意見は鵜呑みしないこと。
ブログのレイアウトをエラスティックレイアウトにしてみましたので、やり方を簡単にまとめて紹介しようと思います。
まずエラスティックレイアウトとは何かということからご説明します。
エラスティックレイアウトとは幅は固定ながらウィンドウサイズや文字サイズを変更することで固定幅が変化するレイアウトのことを指します。
参考にした2つのサイトをご紹介します。
2xupで実装されているエラステックレイアウトを調べてみた。をご参照ください。
一行あたりの文字数を制限する elastic layout （エラステックレイアウト）
<div id="container"> <div id="main"></div> <div id="sidebar"></div> </div>
これは文字サイズ変更でレイアウトが変わるようにするためです。IE6はmin-width、max-widthが効かないのでIE独自の指定した数値の幅まではフレキシブルに変動する機能を持つプロパティを指定します。
*html div#container{ /* IE6ハック */
width:expression(document.body.clientWidth > 960? "960px" : "auto");
}
div#container {
min-width:40em;
max-width:60em;
}
これはdiv#containerの幅によってdiv#mainとdiv#sidebarのwidthを変動するようにさせるためです。div#containerの内部はリキッドレイアウトということですね。
div#main {
float:left;
width:59%;
margin:0 0 0 4%;
}
div#sidebar {
float:right;
width:29%;
margin:0 2% 0 0;
}
エラスティックレイアウトを実践するためにはプロパティの指定でem、%、 pxなどを併用して使用するため、これらの数字が一体どのくらいの幅なのか直感的にわかりにくいと思うので、近似値表を見つけたので、これを参考にしてください。
Approximate Conversion from Points to Pixels
imgも文字サイズによって拡大したい場合はFLASHとJavascriptを組み合わせたライブラリを使うことで実現します。エラスティックレイアウトでイメージを自動で拡大する方法
結構ひさしぶりにWEBデザインのエントリーを書いてみました。最近はユーザーの操作によって変化できる、ユーザー視点でのデザインが重要視されていますね。
それらに対応していくためにも、近い将来(たぶん1.2年？)100％そうなりそうな、これからのWEBデザインをもうそろそろ実践していき、過去の効率の悪い手法(CSSハックなどの類)を捨てていこうってわけ。
まずは最近流行のエラスティックレイアウトから。
エラスティックレイアウトっていうのはウィンドウズの幅に合わせてwidthやheightが変動するリキッドレイアウト+固定レイアウトって感じ。
もうひとつはpng画像の使用。グラデーションが効いたPNG画像をリピートさせることによってレイヤー感覚でウィンドウサイズやコンテンツの量によっても柔軟に対応できる綺麗なデザインを実現することができます。
業務の効率化を図ることで1時間、2時間でも早く帰り、僕を含め日本中のWEBデザイナーが家族や恋人と幸せな時間を過ごす事ができるよう心から願います。
Dream weaverのテンプレートを使用するとテンプレートの編集可能領域に含まれない部分にidをふれなくなるため全ページ同じレイアウトになってしまう。
効率よくかつページレイアウトを変えるためにTIPSをご紹介。
編集したいタグのカーソルであわせてから
修正→テンプレート→属性を編集可能にする
そのつど変更を加えたいページの属性を変更したらテンプレートの更新を行うことをお忘れなく。
僕が使ってる画像処理ソフトは主にフォトショップで、地図とかちょっとこったイラストを描きたいときはイラストレーターを使っています。バージョンはフォトショップが7でイラストレーターが9。
なぜCS2じゃないかというと、外注さんやクライアントでも作ったファイルが編集できるからっていうことと、PCのCPUをあまり食わないってのが理由。
しかしなんだか最近WEBならFireWorksのほうが絶対使えるんじゃねーかとしか思えないんですよね～。だってドリームウィーバーからもすぐ立ち上げれるしFLASHとの連動もスムーズ。簡単なアニメーションGIFだって作れちゃう。そしてCPUもフォトショップ+イラストレーターほど食わない。
長年フォトショップ+イラストレーターを使ってDTPやってきたプロの人でもWEBに転身してからFireWorksに切り替えてる人も多いみたいだ。
てことはきっとWEBをやるならFireworks!
でも実際どうなんやろ～。出来ることの幅はフォトショップ+イラストレーターのほうが多いかもしれないし。。。
う～ん。グラフィックデザイナーと絡む機会があれば話を聞いてみたい所です。
ある程度本数を作っていると( といってもそんなに多くないけども... )何が良いデザインでどうすれば良いデザインになるかという事を考える時間が、作業をする時間の中でも割合が大きくなってきてしまいます。
商用デザインならまず
最近、昼休みにデザイン書とかクリエーター向けの雑誌とかを読んでいます。 なんだかかんだ言ってデザインしてる時が一番楽しいと感じるし、デザインで悩んだときに理論が助けになってくれたらいいなぁって思うしね。
とりあえず読みかけなんだけど、いいなぁって思ったのが、WEBデザイン業界で結構有名らしい矢野りんさんという人の書いた『デザインする技術』っていう本。ビギナー向けのWEBだけに限らない一般的なデザイン理論書って感じかな。黄金律だとか、メタファーだとかをわかりやすい感じに書いていました。たぶんずっとデザインしている人や芸大に行っていた人なんかは"そんなん基本ちゅーの基本やん”って感じなのかな～って思うけど、デザイン暦の浅い自分には読みやすくて、お昼休みに飯を食いながら読むのに超最適！って感じでした。
僕は雑誌とかをほとんど読まないし、オシャレ雑誌とかにはあまり興味がないんですけど、お隣さんが愛読している『pen』っていう広告業界のクリエーターの特集やコラムなどの内容の雑誌がありまして、読んでみるとこれが結構おもしろいんです。 特に市バスや電車などの駅や繁華街の支柱とかにあるようなユーモアがあったり意図的にこちら側の感情に訴えてくるような情報を含んでいる広告デザインの特集があるんですけど、それがすごく面白いんです。
ユーモアを含んだデザインとか、人の感情に訴えるようなデザインっていいですよね。
今日は制作実績のポートフォリオを作ってみました。
WEBデザイナーに転職して半年でポートフォリオ？って感じなのですが、制作実績のほうも個人サイトも含めて13サイトほどになってきたので、ここらへんでいっちょかっちょいいポートフォリオでも！!
っとは気合は入らずに、登録も管理も楽ちんにできるシステムを使いたかったのでPhpSpotさんの所のWebshotというアプリケーションを使って作りました。
Webshotは便利で多機能！!なんたってRSS付いてるし、ブログなんかのサイドバーにも貼り付けちゃったりできる機能もあります。使うときにデータベースを作らないといけないので初心者があまりお手軽にはできないっつー難点もありますが。。まぁでも、ロリポップとかだったらMySQLの知識がなくても管理画面でphpMyadminを使ってサクっとデータベースも作れるので簡単っちゃー簡単です。
そこで自分の制作実績のポートフォリオもブログで公開！！っといきたいところですが、全部会社のクライアントのWEBサイトだし公開は控えて転職するとき等にこっそり活用しちゃおうかと思います。
制作実績のポートフォリオを作ることはWEBデザイナーとしては大事なことなんじゃないかと思いますね。
今日はAdobeと東京のRokunanaの企画のFlashのイベント
Flash® 8 INSPIRATION SCENE Summer Jamに行ってきました。
講演されてたのはタナカミノル氏とトザキケイイチ氏。
内容は御ふた方の仕事紹介だったり、ワークフローについてだったり、PIP(WEBサイトなどで人物による背景を抜いた映像によるナビゲーションとかのやつね)についてだったりでかなり面白かった。
僕はあまりFlashには興味ないほうなんだけど、御ふた方のワークスタイルにはほんま尊敬できるって感じ。特にトザキケイイチ氏の作品のクオリティーはめちゃくちゃ高くて日本でもきっと有数のFlashクリエーターなんやなって感じがした。トザキケイイチ氏の作品はホンダの博物館のキヨスクのシステムだとかDocomoのブランディングサイトなどがある。
PIPの話なんか特におもしろくて背景の色抜きのやり方だったり、撮影のコツだとかAdobeの映像編集ソフトのアフターエフェクトの操作方法や機能紹介など、今後もしPIPをするんであれば勉強になることだらけだった。
帰りにはAdobeのTシャツも頂けた。
こんな良いWEB系のイベントは大阪ではそうやらないだろうなって感じ。
本当に勉強になりました。
XML、HTMLやプログラム言語にはメタという情報を定義する物がある。
HTMLで例えると、”＜meta discription="～のことなら○○株式会社"＞ ”とかがそれにあたる。
＜meta discription=""＞はそのサイトがどういうサイトかをまとめた概要ですよっていうメタ情報。
そのメタ情報っていう概念は結構面白くてプログラム以外にも色んな事に当てはまる。
たとえば、仕事の出来る人から何かを学ぼうとするとき。そのノウハウだけを吸収するんじ
ゃなくて、なぜそれがベストな方法なのかという体系立てたメタ情報を意識することで、ノ
ウハウを吸収する効率が上がるし、自分が実践する時にも色んなパターンをそのメタ情報に当
てはめて実行することができ、なおかつアレンジが効く。
そもそもノウハウつーもんは無数にあるし、人それぞれに合う合わないがあるから、多くを覚
えて、実践するなんてそっちのほうが無理がある。
それ以外の例だと、情報を人に伝えるとき、例えばメールを送る際に、見出しにメタ
情報をつけてやると、相手がその情報を見たときに伝わる速度もグッと上がる。
例をだすと。”＜重要！＞○○のお知らせ ”みたいな感じ。
XMLを書くときにもこのメタを考えながらマークアップしていくわけなんやけど、
情報を体系立てて定義する”情報 ”を考えるってなかなか難しいんよね。
デザインってほどでもないけどブログのデザインを少しだけいじってみた。
ＭｏｂａｂｌｅｔｙｐｅのＣＳＳは結構複雑で最初戸惑った。
ていうのも全体的なＤＩＶのサイズ設計とテキストの装飾設定と各部分のページレイアウト装飾とか構造的にばらばらになっててそれがひとつのＣＳＳにまとめられている。
しかも編集画面がブラウザなんで超やりにくい。iframeかなんかで外部テキスト読み込みになってるからＣｔｒｌ+Ｆで文字検索できないのが辛い。
日ごろ手打ちでマークアップとＣＳＳ打ってるから打つのは問題ないんだけど確認画面ないし、反映されるのに時間がかかるときがあるから手の込んだデザインをしようとなるときつい。(うちの回線が遅いのが原因かもしんないけど。)
スタジオ８でＭｏｂａｂｌｅｔｙｐｅのタグ使えるプラグインあるらしいけど、うちのはＭＸのエデュケーションモデルだから使えない。
まぁでも不便なりにも夜の数時間を利用しての日曜大工しかり日曜デザインもおもしろいな～。
角丸テーブルを作るとき
1.テーブルを組んで端に画像を配置する。
2.CSSのバックグラウンドで画像をdivの背景に指定する。
3.ニフティーコーナーのjavascriptとCSSで作る。
※参照URLhttp://www.html.it/articoli/nifty/index.html
4.CSSの-moz-border-radiusを使う。
※参照URLhttp://allabout.co.jp/internet/hpcreate/closeup/CU20060515A/index2.htm
1.のテーブルはスマートでないのでBAD
4はFirefoxがNGなので今のところBAD
3.はJavascriptが使えない環境では無理なのでSOSO
2は今のところほとんどの環境で使用できるのでGOOD
個人的には3.で丸角テーブルを作りたいところ。
Javascriptを使わない設定のやつは除外してでも、この方法は結構スマートでシステマチックだ。
WEBデザイナーになってまずは文章のライティングは大事だなって思うようになり、WEBの文章ライティングを勉強してみました。以下にテキストを綺麗に見せるTIPSを少しご紹介します。
1：行間を120％に指定する。
2：英数字は半角にする。
3：日本語と英語が混ざっている文章の場合は英単語と日本語の
間に半角スペースを入れる。
4：短い文章の場合はテキストインデントで文頭にスペースを入れ
ないほうがバランスよく見える。