週刊Webテク通信

2011年4月第1週号 1位は,色に関するユーザーエクスペリエンスと心理学,気になるネタは,アマゾンにも独自の「いいね」ボタンが導入

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2011年3月28日~2011年4月3日の間に見つけた記事のベスト5です。

1. The User Experience And Psycholgy Of Colour | SpyreStudioshttp://spyrestudios.com/the-user-experience-and-psychology-of-colour/

色に関するユーザーエクスペリエンスと心理学についての記事です。

実際のサイトの例を挙げて,色とユーザーエクスペリエンスとの関わりについて説明しています。

フォームの入力漏れなどのエラーの場合は,赤色の文字で警告するというのが一般的です。問題ない場合は青色のケースもありますが,緑色が多いようです。

この色の関係は信号と同じですね。信号機の「青」は緑色ですし,Webページの場合青はリンク色なので青より緑の方がいいのでしょう。

「うまくいったときの色と思うのはどれ?」⁠エラーが出たときの色と思うのは?」といったアンケートを行っていて,その結果も紹介されていました。このアンケートは,この記事の冒頭のリンクから受けられるようになっています。

図1 色に関するユーザーエクスペリエンスと心理学

図1 色に関するユーザーエクスペリエンスと心理学

2. 商用利用可,クレジット表記・バックリンク不要のフリー素材を紹介するサイト | 9searchhttp://takashi178.me/9search/

商用利用が可能で,クレジットやリンクの義務がないフリー素材を紹介しているサイトです。

まだそれほど点数は少なくありませんが,アイコン,テクスチャー,パターンやWebページのナビゲーション用素材,Photoshopブラシなどが登録されています。

利用規約の原文と「それっぽい訳」が載っているのが,このサイトのポイントですね。各素材の利用規約のピックアップもそうですが,Wordpressで作られているというサイトの作りも手間暇かかっていることが感じられます。

図2 商用利用可能なフリー素材を紹介するサイト

図2 商用利用可能なフリー素材を紹介するサイト

3. Gain More Traffic: Useful Sites For Web Design Tutorial Submissionhttp://www.1stwebdesigner.com/design/submit-design-tutorials/

Webデザインに役立つチュートリアルサイトが数多く紹介されています。

この記事の主旨としては,自分の書いたチュートリアルをこれらのサイトに掲載すれば,自分が運営するサイトへの誘導にもなりますよということのようです。

Webデザイン関連の有名ブログを紹介したDesign All-Stars ~ 46 Design Blogs You Should Follow. Period | CrazyLeaf Design Blogという記事もありました。

図3 Webデザインに役立つチュートリアルサイトいろいろ

図3 Webデザインに役立つチュートリアルサイトいろいろ

4. February’s Fresh Photoshop Web Layout Tutorialshttp://www.net-kit.com/februarys-fresh-photoshop-web-layout-tutorials/

WebページデザインのためのPhotoshopチュートリアルを集めて紹介しています。

Photoshopのチュートリアル記事はよく見かけますが,Webレイアウトに限定してのリストは久しぶりに見ました。

図4 WebページレイアウトのためのPhotoshopチュートリアルいろいろ

図4 WebページレイアウトのためのPhotoshopチュートリアルいろいろ

5. 25 Awesome Examples of Event Invitation Websites For Your Inspiration | Web Designer Aidhttp://webdesigneraid.com/25-awesome-examples-of-event-invitation-websites-for-your-inspiration/

イベントでの集客のためのWebサイトのデザインギャラリーです。今までにあまりなかった切り口でのギャラリーなので,取り上げてみました。

イラスト,タイポグラフィで目を引くものが多いですね。

図5 イベント招待のWebデザインのギャラリー

図5 イベント招待のWebデザインのギャラリー

そのほか,先週の記事の中から,気になるWebサービスを3つ紹介します。

先週の気になるWebサービス

Griddle.it - Web page alignment made easyhttp://griddle.it/

Griddle.itは,任意のサイズでのグリッド画像を生成するWebサービスです。

「background: url(http://griddle.it/[total width]-[number of columns]-[gutter size]) repeat-y center top;」

のようにCSSで背景画像にすれば,生成されたグリッド画像をアタリとして使えるというわけです。

パラメーターを変えることで,縦方向のグリッドを作ったり,色を変えることもできます。

図6 グリッド画像を生成するWebサービス

図6 グリッド画像を生成するWebサービス

今週の気になるWebネタ

アマゾンにも独自の「いいね」ボタンが導入:Garbagenews.comhttp://www.garbagenews.net/archives/1722617.html

いつの間にかアマゾンの各商品ページに「いいね」ボタンが付いていました。⁠いいね」というラベルと親指を上げたアイコンからFacebookのボタンかとも思ったのですが,何か違う気もします。カーソルを合わせて出てくるツールチップから詳細ページに行ってみると,やはりアマゾン独自の機能でした。

自分の好みをアマゾンに教えていくと「おすすめ商品」の精度が上がること,⁠ほしい物リスト」とは別に「いいね」と言った商品のリストができることがメリットのようです。

この「いいね」はアマゾン内ではソーシャルな機能を持っていませんが,⁠いいね」をするときにFacebook,mixi,Twitterに商品情報をシェアすることが可能となっています。

昨年の流行語大賞では「~なう」がランクインしましたが,今年は「いいね」がいけるでしょうか? Facebook,アマゾンのほかにもmixi「イイネ!」⁠GREE「いいね!」もあります。ネット用語としてはかなり広まっていますね。

ちなみに,Amazon.comに付いたボタンは,やはりFacebook英語版と同じ「Like」でした。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入