かっこいいWebサイトなんだけれど、なんだか使いづらい。何をクリックしてよいのかわからない。

といったサイトを見かける事は無いでしょうか？

意外と素人の人にサイトを見てもらって、感想を聞くと、結構、参考になる意見をもらえる事もよくあります。結果、簡単にウェブサイトの使いづらさを解消できたり、ユーザーに伝えたいメッセージを明確にすることができるようになるかもしれません。

今回は、Webユーザービリティを簡単にチェックできるリストをご紹介。

Web ユーザビリティ5秒テスト

5秒間でテストできるとってもシンプルなWebユーザービリティをチェックできるテストです。

1. クラシックテスト
クラシック5秒テストとは、そのWebサイトをはじめて見るユーザーに5秒間だけインターフェイスを見てもらって、そのあとに思い出せるものを書き出してもらうテストです。

もともと何も知らないユーザーがたった５秒間だけサイトを見て印象に残ったものを書き出してもらう事で、重要なメッセージがユーザーにしっかりと伝わっているのかがわかります。

2. 比較テスト
２つのインターフェイスを2秒半ずつ見てもらい、より気に入ったインターフェイスを選んでもらうテストです。

二つのデザインを瞬間に比較して気に入ったものを挙げてもらう事で、潜在的に気に入ったものがわかります。

3. 感情テスト
ユーザーに5秒間だけインターフェイスを見てもらって、デザインの中で気に入ったもの、嫌いなものを5つずつ挙げてもらうテストです。

このテストはどちらかと言うと、デザイナー同士で行うとより効果的なテストかも知れません。そのデザインの長所・短所がわかるのではないでしょうか。

fivesecondtest

上記にあげたクラシックテストを簡単に行えるツールです。サイトのスクリーンショットをアップすると他のユーザーがデザインを5秒間だけ見て、何が印象に残ったのかをリストアップしてくれるツール。他にも5秒間で目に飛び込んできたものをクリックして、なぜそこをクリックしたのかを書いてもらうテストも行う事ができます。ユーザビリティをアップさせるにはとっても役に立つツールですね。

Feng-GUI – Feng Shui for Graphic User Interfaces

サイトのスクリーンショットや写真などの画像をアップすると瞬時にユーザーの目線をヒートマップで表示してくれるツールです。どうやってヒートマップを作り出しているのか、不思議です…。

Silverback — guerrilla usability testing

MacのiShightと一緒に利用するユーザーテスト用のツールです。テストユーザーを集めて、ユーザーテストを行う際にとても役立ちそう。有料のツールですがとっても良くできています。ユーザーがサイトを利用しているところを動画で記録することができます。ユーザーがサイトを利用している時の表情や発言、サイトのどこでつまずいてしまうのか？などユーザーの顔をそのまま見ることができるので、ユーザビリティテストを行うには、とっても便利なツールですね。

Usabilla – Transparent Usability – Visual Feedback

まだβ版のサイトですが、こちらもユーザーテストに使えそうなサービスです。このサイトにテストケースとしてサイトとタスクを登録しておくと、テストユーザーがテストしてフィードバックを返してくれるウェブサイトです。

Primary & Secondary Actions in Web Forms

フォームを利用する際のユーザーの目線の動きをわかりやすく解説してくれている記事です。

Color Scheme Designer 3

いろいろとカラースキームのツールが公開されていますが、こちらのColor Scheme Designerは、とってもシンプルで使いやすいツールです。

先日、バランスのよさ気なグラデーションの比率を考えていたところ、以前このブログでご紹介しました、『身近にちらばる黄金比のデザイン』を思い出しました・・・

グラデーションの比率を黄金比（1：1.618…）に設定してみたら、しっくりくるかな？っと思いまして。。。

実際に試してみたところ、結構いい感じだったのでご紹介。。

上部から中央に、中央から下部に垂直にグラデーションを2段階に分けてかけてみました。で、上部と下部のグラデーションの比率を黄金比に設定してみました。。（といっても、38%と62%と大雑把ですが・・・）

こんな感じ↓

いろんな色で作ってみました。。。

っちゅうわけで、同じように日本で古くから使われている白銀比でも試してみました。。

こんな感じ↓。。

せっかく作ったのでPhotoshopのグラデーションファイルをアップしておきました。。ダウンロードして試してみてくださいねぇ～。

そろそろ、新しいデジカメを買おうか迷っております。。

最近では、高画質、高倍率ズーム、広角レンズ搭載。それでいてコンパクトなデジカメが、ある程度お手軽なお値段でそろってきて、そろそろ買いどきかなぁ。。なんて思っておりまして。。。

っといって高性能なデジカメを買っても、カメラの腕前が上達するわけではないのですが…

どうしても、きれいな写真が撮れないのをカメラのせいにしてしまう今日この頃。。。

っちゅうわけで、本日は人物写真をもっと上手に撮るアイデアをプロのフォトグラファーが撮られた写真とともに、いくつかご紹介。

1. 三分の一の法則
以前にもご紹介しました、三分の一の法則。画面の上下左右を三分割して四つの交点を作って、その交点に主要な要素を置くとバランスのいい写真が撮れます。。これは、最近意識して撮ってますが、一番手軽にバランスの良い写真が取れます。。デジカメによっては、画面にこの三分割のラインを表示する設定もありますね。。一度お試しあれ。

2. 思い切り寄ってみる
人物写真を撮る時って、結構全体を撮ってしまいがちですよね。。思い切って、枠からはみ出すくらい寄ってみてもなかなか良い写真が撮れそう。

3. 日の出、日の入り時に撮影する
写真を撮る時は、光が必ず必要のですが、ストロボを使うよりも自然の光が一番きれいに写ります。。特に、日の出、日の入り時が、ねらい目だそうです。。。↓のような幻想的な写真が撮れるかも？

4. 逆光にストロボ
太陽の光で逆光になってしまった時は、ストロボを強制的に発光させて撮ってみましょう。。

5. 絞りを開いて、背景をぼかす
マニュアルモードで、絞りを開いた（F/4とか…）設定にすると、シャタースピードは速く撮影できますね。。絞りを開くとピントの合っている範囲がせまくなるので、人物にピントを合わせると、背景がぼけた感じになります。。背景がそれほど、重要じゃない場合は、このように撮影すると人物が浮き出てきれいですね。。

6. 角度を変えてみる
下から、上から、斜めから、いろんな角度で撮ってみると、また違った雰囲気になりますね。。とくに、斜めに撮るとダイナミックに動きのある写真が撮れますね。。。

なんだか、写真が撮りたくなってきました。。。さらに、あたらしいデジカメも欲しくなってきました。。

みなさん、おすすめのデジカメあったら、教えてください！

最近では、アイコンや写真など、ものすごくクオリティの高いものが、無料でダウンロードできますね。。

もちろん、そのまま使ってもいいのですが、せっかくなので少し手を加えてみてはいかがでしょう？

っちゅうわけで、本日は影のつけ方をいろいろご紹介。。。

今回は、↓のようなRSSアイコンを元に影をつけてみました。

1. デフォルトのドロップシャドウ

Photoshopのデフォルトで設定されているドロップシャドウをつけてみました。。ちょっと重たい感じ？

2. シャドウの位置を変えてみる

シャドウの位置を真ん中に持ってきました。

3. エンボスを下に敷いてみる

同じシェイプで一回り大きな画像にエンボス加工して、凹ませてみました。。埋め込まれたボタンっぽくなったかな。。

4. 斜めにシャドウをつけてみる

斜めにシャドウをつけてみるとアイコンが立ってる感じに見えますね。。

5. 下にシャドウをつけてみる
真下にシャドウをつけてみるとアイコンが浮いた感じに見えますね。。

6. 反射させてみる
映りこんだように、アイコンを反射させてみてもいいかも。。

7. 反射＋背景をつけてみる
背景をつけると映りこみがはっきりしますね。。

いろいろ試してみると楽しいですね。。

参考までに、今回作成したPSDファイル↓をアップしておいたので、ご自由にどうぞ～。

先日、7月4日はアメリカの独立記念日で、いたるところで花火大会が催されておりました。。

きれいな、花火写真を撮ろうとがんばってみたのですが、なかなかきれいな花火写真を撮るのは、カメラ初心者のわたくしには難しいですね・・・

事前に、もっと下調べしておけば良かったと、ちょっぴり後悔。。。

アメリカでは、それほど花火大会が頻繁にあるわけではないので、次は年越し花火になりそうなのですが。。。

っちゅうわけで、本日は打ち上げ花火写真をきれいに撮る方法を、わたくしなりにまとめてみました。。

1. やっぱり三脚は必要
花火の写真は、火の粉が広がっていくのを撮影するものなので、ある程度シャッタースピードを遅くする（1～2秒、場合によってはそれ以上）必要があるみたいですね。。それだけシャッタースピードを遅くするということは、手持ちで撮影すると、手ぶれします。。。やっぱり三脚は必要みたい…

2. 花火撮影モード
最近のデジカメには花火撮影モードっちゅうモードがあるものもあるので、そんなオシャレな機能が付いてるデジカメをお持ちの方はそのモードで。。。そんな機能が無い場合は、マニュアルモードにして、シャッタースピードを1～2秒程度、絞り値をF8程度、ISO感度を100、フラッシュOFFに設定すると大体いい感じのようです…

3. リモコンかタイマーでシャッターを
三脚を使っても、シャッターボタンを押す瞬間にカメラがぶれてしまうこともあるということなので、リモコンを使って撮影したり、タイマーを設定して、撮影する方が良いみたいです。。

わたくしも、↓こんな写真が撮れるように練習しよっと。。。

数年ほど前の記事ですが、ITmediaで紹介されていた

『今日から始めるデジカメ撮影術――第1回　打ち上げ花火と線香花火の関係』

とか

All Aboutで紹介されていた、
『デジカメ撮影テクニック講座(2)　花火をキレイに撮るのなら』

は、とても分かりやすかったです。。。ご参考までに…

日本では、これから花火大会の季節ですね。。。がんばってきれいな打ち上げ花火写真を撮ってみてくださいね。

最近よく見かける、↓のようなグラデーションのかかったグラフィック。このブログでも、右上のほうについてるやつです。。

本日は、こんなグラフィックを簡単に３分で作る方法をご紹介じゃ。。

それでは、Illustratorのご用意を！（わたくし英語版のIllustratorCS2を使っております。。日本語版でも、多少バージョン古くても、ほぼ同じのはずです。。）

1. スターツールで輪郭を描く
ツールボックスから、スターツールを選択します。

2. 輪郭を設定する
スターツールを選択して、キャンバスをクリックすると設定画面がポップアップします。輪郭の設定はお好みでどうぞ。。

3. グラデーションツールを選択する
描いた輪郭にグラデーションをかけます。

4. グラデーションの色を設定する
グラデーションの色はお好みでどうぞ。。グラデーション形式は円形にしてみました。

5. グラデーションをかける
お好みの色が設定できたら、2で描いた輪郭にグラデーションをかけます。↓みたいに左斜め上から、右斜め下にドラッグすると下のようにグラデーションがかかります。

6. 一回り小さい輪郭を作成
作成した輪郭を選択したまま、Illustratorメニューのオブジェクト>パス>パスのオフセット（実際何て書いてるか分かりませんでした。。）を選択。

7. オフセット設定
一回り小さい輪郭を作りたいので、-5pxとか設定してみました。設定はお好みでどうぞ。。

「OK」ボタンをクリックすると、↓みたいに、一回り小さい画像ができます。

8. ペンツールを選択
ペンツールを選択します。

9. 曲線を描く
下のような曲線を描きます。

10. パスファインダで分割
9で描いた曲線と、7で描いたオフセット画像を同時に選択して、パスファインダで分割します。

11. ダイレクト選択ツールを選択
ダイレクト選択ツールを選択します。

12. 画像の下半分を削除
分割した画像の下半分をダイレクト選択ツールで選択して削除キーで削除します。

13. 画像の上半分を選択

14. グラデーションをかける
残った、画像の上半分にグラデーションをかけます。グラデーション形式は線形にしてみました。色の設定はお好みでどうぞ。

15. ドロップシャドウをかける
一番最初に描いた、下の画像を選択して、ドロップシャドウを選択します。

16. ドロップシャドウを設定する
ドロップシャドウの設定をします。設定はお好みでどうぞ。。

こんな↓感じでできました？

デザインblogランキング

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

margin:0; padding:0;

margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最初に0にしてます。。（デザインにもよりますが。。）

line-height:1.4;

これは、行間設定ですわ。1.4はモニタで文章を読むときに、人間が一番読みやすいと言われている行間設定です。。

color:#333;

文字の色ですね。これも、デザインによりけりですが。。真っ黒な文字色よりも、濃いグレーくらいのほうが目にやさしい？（好みの問題ですが。。。）

font-family:Arial, sans-serif;

フォントの設定ですね。こちらはお好みのフォントで良いかと思われますが。。

font-size:0.9em;

フォントサイズは、わたくし最近は、0.9emに設定するようにしてます。12pxとか14pxとかpxで指定される方も多いかと思われますが。。。1emに設定しておくと、ブラウザの標準設定では、実際には16pxで表示されるようです。

日本語のような2バイト文字では、16pxちょっと大きすぎるかなぁ。。って感じなので、0.9emに設定。16×0.9=14.4なので、ブラウザの設定を変更していないユーザーさんには、実際には14.4pxで表示されてるはず。ちなみに0.875emって設定すると14pxで表示されます。

ブラウザの設定でフォントのサイズを大きめに変更してるユーザーさんには大きく表示されるので、pxで設定するよりも、親切設定って事ですね。。

っちゅうわけで、まとめてみると。。

body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}

これは、あくまでも参考ということで。。デザインによっても設定は微妙に変わってくると思いますが。。一般的にはこの辺の設定は使いまわせるのではないでしょうか？？

デザインblogランキング

「言及リンクのないトラックバックはお断りします。」的なブログが多いような気がする。

まぁ、大半がSEOを目的として、関連性のない記事に一方的にトラックバックを送信してくるような、ブログが多くなってきたための対処ということなのでしょう。。。

しかし。。。なかなか言及リンクって言われてもねぇ。。

要は、トラックバック元の記事にトラックバック送信先のリンクがあればいいわけですが・・・
それだけじゃぁ味気ないので・・・

どうせなら、大々的に引用したろう。っちゅう結論に達しました。。

例えば→のように書いてしまえば、このブログの文章ではなく、リンク先の文章っちゅうことが一目で分かりますよねぇ。。

しかし、すごいですなぁ。。。長島氏。。。神いわゆるゴッドですな。。←（あ。。これも引用せなあかん？）

とにかく・・・こんな風に書いておけば、読者にも、引用された文章を書いた筆者にも印象がよさげ？

っちゅうわけで、今回使用しましたCSS（スタイルシート）、html、イメージファイルをご紹介。

CSS（スタイルシート）

.quote_block {
float: right;
margin: 10px;
padding: 10px;
width: 250px;
font-size: 12px;
background: #F9FFEE;
border: 1px dotted #99CC33;
}

.bqstart {
float: left;
margin: 0 10px 5px 0;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqstart.gif) no-repeat;
}

.bqend {
float: right;
margin: 0 0 5px 10px;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqend.gif) no-repeat;
}

.quote_block blockquote {
margin: 0;
padding: 0;
}

.quote_block p {
margin: 0;
padding: 5px 0 10px 5px;
}

.quote_block cite {
float: right;
margin: 0;
padding: 0;
font-size: 10px;
font-style: normal;
}

ｈｔｍｌ

<div class="quote_block">
<div class="bqstart"></div>
<blockquote cite="引用先URL" title="引用タイトル">
<p>引用文</p>
</blockquote>
<div class="bqend"></div>
<cite class="cite">
<a href="引用先URL" target="_blank">
引用タイトル
</a>
</cite>
</div>

イメージファイル（↓のイメージを保存してくださいな。）

デザインblogランキング

普段はそれほど気にならないのですが、リンク集のようにテキストリンクがリストのように羅列されているサイトでは、
CSSで訪問済み(visited)リンクを設定されていると、ユーザーにとっては一目でそのリンクをクリックしたかどうか分かるので、便利かも。

っちゅうわけで、CSSで訪問済み(visited)リンクをデザインしてみた。

1. 色を変えてみる
一番一般的な方法。多くのブラウザでは、リンクは、青の下線で表示されて、訪問済みリンクは、紫の下線で表示されてるのが一般的な感じ。

a:visited {color: #551A8B;}

サンプル↓（劇場映画[日本]･週間ランキング TOP5 2007年1月22日付）

1. 愛の流刑地
2. モンスター・ハウス
3. 硫黄島からの手紙
4. 武士の一分
5. 大奥

2. 打ち消し線を入れてみる
訪問済み(visited)リンクに打ち消し線を入れてみた。たまにこんなサイトを見るが。。。なんだか、リンクが無くなった感じがしないでもない。。。このまえ、他人のブログで、このブログが紹介されてたのですが…こんな感じ⇒「デザインウォーカー」になってて、ちょっぴり悲しい時だった。。。

a:visited {text-decoration: line-through;}

サンプル↓（劇場映画[アメリカ]･週間ランキング TOP5 2007年1月15日～17日）

1. Stomp the Yard
2. Night at the museum
3. The Pursuit of Happyness
4. Dreamgirls
5. Freedom Writers

3. 画像を入れてみる。
画像を使って訪問済みをデザインしてみる。リンク前は、普通のテキストリンクで、クリック後にテキストリンクの右側に、マークが現れる仕組み。なかなか、いい感じかも。。

ただ訪問済みリンクサンプル←が訪問済みリンクだと、ユーザーに理解されるのか？。。

a:visited {
margin: 0 3px 0 0;
padding: 0 13px 0 0;
background: right url(images/visited.gif) no-repeat #FFF;
}

サンプル↓（Billboard 週間ランキング TOP5 2007年1月27日付）

1. Irreplaceable – Beyonce
2. I Wanna Love You – Akon Featuring Snoop Dogg
3. Fergalicious – Fergie
4. Say It Right – Nelly Furtado
5. Smack That – Akon Featuring Eminem

おまけ. テキストを入れてみる。
インターネットエクスプローラー(IE)では、サポートされて無いようで。。FireFox,Opera,Safariで確認済みの方法をご紹介。。

CSSに書き込まれた文字列を表示することができる模様。CSSで、a:visitedの後ろに:afterって書くと、「訪問済みリンクの後に」とか、:beforeって書くと「訪問済みリンクの前に」といった感じになるようです。でもって、CSSの中身にcontent: “表示したい文字“;って書くと、”"で囲まれた部分に入力された文字列を表示できるようです。

a:visited:after {
content: " (←それもう見たよ) " ;
font-size: 75%;
color: #CC0000;
}

サンプル↓（オリコン･シングル年間ランキング･トップ10 2006年度）

1. Real Face – KAT-TUN
2. 粉雪 – レミオロメン
3. 青春アミーゴ – 修二と彰
4. 抱いてセニョリータ – 山下智久
5. SIGNAL – KAT-TUN
6. ただ…逢いたくて – EXILE
7. しるし – Mr. Children
8. 純恋歌 – 湘南乃風
9. supernova／カルマ – BUMP OF CHICKEN
10. タイヨウのうた – Kaoru Amane

デザインblogランキング

先日2xup.orgさんの「一行あたりの文字数を制限するリキッドレイアウト」を読ませていただき、わたくしも実際にサンプルレイアウトを作ってみました～。

このブログで先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」とあわせて、このリキッドレイアウトを使えば、デザインの幅も広がりそうですねぇ。。

っちゅうわけで、さっそく、サンプルレイアウトを。。。

1. 左サイドバーのリキッドレイアウト
左サイドバーのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。

2. 右サイドバーのリキッドレイアウト
右サイドバーのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。

3. ３カラムのリキッドレイアウト
３カラムのサンプルレイアウトですわ。
横幅はブラウザのサイズ80%に設定しております。
ブラウザの横幅を伸縮させればデザインもブラウザにあわせて伸縮するように設定。
←画像クリックでサンプル開きます。

デザインblogランキング