Flashじゃないのにぬるぬる動くサイト7つ

別にアンチFlashというわけではないのですが、最近見かけるサイトがやたらとJavaScriptでぬるぬる動いてるのでちょっとまとめてみました。７つ。 株式会社マーナ

キッチン用品やお掃除用品の140年の老舗メーカー。サイトのデザインもすっきりしてますが、製品のデザインもかなり良いです。世界三大デザイン賞の一つ、ドイツのRedDotを取ったピーラーとか。

Air Jordan2012

スクロールに応じてソールや中敷が兵器をモチーフにアニメーション。ナビゲーションのロールも芸が細かい。スマートフォンにも対応してますね。

三村仁司(みむらひとし)

元アシックス、現アディダス専属アドバイザーのシューズ職人のサイト。コンテンツ全てを１ページに詰め込まれてます。サイドナビが上手く構成されてる。

東京タワーズ

朝、宵、赤、青といったテーマごとに撮られた東京タワーの写真と、テーマに沿ったTwitterのメッセージが流れる。心地いい。スマートフォンにも対応。

ippo(イッポ)｜トンボ鉛筆

トンボ鉛筆の学童用ブランド「ippo[イッポ]」のサイト。手書き絵のアニメーションが楽しい。
最初のローディングから登場までのイントロはjpeg120枚のパラパラアニメーションになってる。まさに鉛筆が成す技。

IKIJI

アパレルブランドのサイト。色使いやレイアウトが潔いというか、スクロールでチラ見えするブランドマークがまさに粋。

doppo

デザイン会社のポートフォリオサイト。マガジンスタイルのレイアウト。
ウィンドウサイズでレイアウトが変化。写真、動画などがたくさん配置されてる。

まだまだ処理の重さとかはあるけど、まぁこの辺もマシンスペックとかが解決して行くでしょうね。
スマートフォンとかタブレットでも見れたりするし、ユーザーもすごい勢いで増えてるので今後こういったサイトが増えて行くのは確実かと思います。ただ、色々動くサイトが全てJavaScriptになってFlashが無くなる・・・とかではなく、もっとダイナミックに動いたりするリッチコンテンツの場合はまだまだFlashが強いので、その辺は使い分けなのかなと思います。

チラ見せインターフェイス

商品情報を見せるサイトでのユーザーインターフェイスについての雑感。
前回のエントリーは「検索」についてまとめまして、今回は「チラ見せインターフェイス」について。

まぁ、一言で言うと一覧ページの商品サムネイルにマウス乗せたときに出てくるアレですわ。

ZOZOTOWNアレその1。マウスオーバーするとカラーバリエーションを表示。ってどんだけZOZO好きやねん。

ART-Meter：絵画の測り売りサイトその2。マウスオーバーすると絵の説明が表示されます。

スリング専門店 pu-piこれもチラ見せの一つ。マウスオーバーすると生地の拡大が見れます。今はほとんどCSS組みになったけど、JavaScriptのロールオーバーが何気に活躍。今はｊQueryとかのライブラリ。ほかにも取扱サイズも付箋っぽく出てるのがニクい。個人的にこのサイトのデザイン好きです。全体の遷移で若干わかりにくい所はあるけど。

こんな感じで、商品の詳細ページへいかずとも、詳細情報の一部を「チラっと」見せるのを「チラ見せインターフェイス」と言います。すんません勝手に名づけただけです。
ここで表示させるべき情報はできる限り少なくてユーザーが求めているピンポイントな情報である必要があります。でないとウザいだけで。きちっとそれを検証した上で設計しないといけません。ペルソナ設定とか？よくわからんけど。
詳細ページへ遷移せずとも、ある程度の詳細情報が見られると、クリックした後のガッカリ感がなくなります。ユーザーの「無駄クリック」を無くして使い心地を良くするいい方法です。気をつけないといけないのは、そこで見せる「チラリ」はユーザーが求めていた「チラリ」であるのが前提で、運営側の「詳細ページへの遷移を増やす為に！」という名目になると、ユーザーの為であった「チラリ」が悪い印象に変わってしまう可能性もあるということ。例えると、背表紙見てレンタルしたのに中見てガックリみたいな。そーゆーのも含めて「チラ見せインターフェイス」と名づけたっていうわけではないですから。

「検索行為」と「行為検索」

最近データベースの案件がちょろちょろと。ウェブディレクターという立場上、クライアントとのやりとりも発生するので、毎度ながらユーザー側のインターフェイスだけでなく管理側の操作感、データ更新の方法がクライアント社内の業務に沿っているかを検証しながら組み立てるんだけど、毎度ながら難しい。まぁパズル的で面白いんですが。

今回はそんなウェブサイトで商品情報を見せるためのデータベースを組む上で考えなければいけないユーザーインターフェイスについて、最近見たりするウェブサイトで「おっ、これは使いやすい」と思ったところからまずは「検索」についてまとめようかなと。

「検索」と「検索性」(あくまで自論ね)
データベースを使った商品情報の閲覧で必須なのは、「探しやすさ」とか「検索性」とか、求められる商品情報に対して、いかに素早く迷い無くたどり着くことができるか、というのはユーザーと企業の相互利益にも繋がる重要なポイントですね。
その時に出てくる「検索」というものを「行動(機能)」としてだけ捉えると、使いやすいインターフェイスにならない。あくまで「検索」は概念であるという意識を持ち、それを「検索性」と置き換えると、インターフェイスのレベルはぐっと上がると思うのだ。って「それじゃ意味わからんわ」という事で。

例のサイト
ZOZOTOWN
この前ほくほく顔で仕事用の鞄も買った、毎日よくやるなぁと思う大量の新商品が追加されるファッションサイトとしておなじみっすね。このサイトの「検索」は、詳細検索と左ナビから該当のリンクをクリックするとその項目で絞り込まれる検索の2種類が用意されています。(ほかにもあったらすみません。。)

検索とは
取扱商品に関する色んな項目があって、それを選択しながら絞り込んで「検索ボタン」で検索！といういわゆる詳細検索。


検索性とは
ナビをクリックしていくことで絞り込み検索をしてくれます。こういうのは「検索」という行為じゃなくて、ナビゲーションに「検索性」を持たせたインターフェイス。

まとめると、「検索」と「検索性」の違いは、それが「検索行為」なのか「行為による検索」か、という文脈の違いと考えると良いのかな(今腹に落ちた)。個人的には、この「検索性」という考え方でインターフェイスを設計する事が、より自然な形でユーザーが商品を検索できるヒントになるのかなと。
あと個人的に思うのは、「検索行為」は検索対象がある程度明確でないとあんまり使う気ならなくて、「行為検索」だとなんとなくで探していけるから、検索対象があいまいな時に実力を発揮できるような。

ウェブデザインのまとめのまとめ

先日ご飯一緒に行った方に言われた言葉。
「インプットを増やすにはアウトプットを増やさないといけないよ。」と。
忙しいのもあったんですが、忙しい中でアウトプット(このブログ)の更新が完全にストップして、それに伴ってインプットの時間も減りました。アウトプットを行うには、情報の収集とか裏づけとかをしなくちゃいけなくて、そのために必然とインプットの量が増えるという事ですよね。多分。というわけでリハビリ的に更新しますよってはてブに入れたやつですが。ウェブサイトのデザインの参考で色々探している中でブクマした、ウェブデザインのまとめのまとめ。

グリッドにおさまらないデザインのまとめ。
何かしらはみだしてるサイト集 | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）

手書き風ウェブデザインのまとめ
26 Hand Drawn Websites | Inspiredology

ハイクオリティなEコマースサイトデザインのまとめ
20 well designed E-commerce websites

余白の使い方が上手いウェブデザインのまとめ
32 Wicked White Websites | Inspiredology

タグを使ったウェブデザインいろいろ - DesignWalkerタグを使ったデザインのまとめ。

カラフルで美しいウェブデザインのまとめ
25 Beautifully Colorful Websites - Part 2 | Vandelay Website Design

背景が美しいウェブデザインのまとめ
Web Design Inspiration - 25 Websites With Beautiful Background

404のまとめ。
49のクリエイティブな404 Not Foundのページ集 | コリス

木目を使ったウェブデザインのまとめ
33 Wooden Websites | Inspiredology

花模様を使ったウェブデザインのまとめ
25 Flourish Designs | Inspiredology

紙をモチーフ。素材感のあるウェブデザインって好きです。
紙をモチーフにデザインしたウェブサイト25選 | コリス