キテレツ荘

パソコンばっかりやってると、
たまに現実世界でも、とんでもない選択ミスしたときには
「アンドゥー！アンドゥー！（Mac：command+Z！）」って
叫んじゃうときがありますよね皆さん。
でも現実は非情で、逆立ちしたって土下座したって選択する前の時間に
戻ることはありません。
※でも土下座するとクライアントは許してくれるときもあるのでとりあえずは土下座。

今回紹介するサイト「+Life」でも「ある二択」を迫られます。
ですがこのサイトでは、一度ある選択すると、もう一方の選択は
日にちを替えてアクセスしようが、ブラウザを替えようが、見ることはできません。
現実の人生と同じように、二度目はありません。

年末、話題になった某会社のプロモーション
「Love Distance」でも、（おそらく）この手法が巧く使われています。
（最初に男女どちらかの目線を選ぶかを決めるところ）
なんどでもやり直せるってのがデジタルメディアのいいところなんだけど、逆に絶対やり直せないコンテンツってのも、なかなか斬新で、友達同士で選択結果を聞きあうバイラル効果を期待できるかもしれません。

これといったネタがないわけですが、ひとまずサイト紹介を。

おばんどす、出町柳しんごです。

今回、紹介するのは海外のTシャツのオンラインショップ。

Rumplo

Rumplo

直感的でありつつ使いやすい、良い感じで勉強になります。
それとなしに入っている広告とか、イカす。

個人的には日本のzozo townのサイトも好きだけど、
こちらのサイトはTシャツに特化したぶん、よりソリッドな仕上がりですね。

このサイトを見て、justiceのPVを思い出した。
Tシャツのデザインは楽しすぎる！！！

今年はオリジナルTシャツを３枚くらい制作してみたいもんです。

今週のおすすめサイトは色彩感覚をテストできるMunsell Hue Test（マンセルヒューテスト）というものです。

カラーコーディネーターや色彩検定を受けた人ならマンセル色相という言葉は聴いたことがあるでしょう。
その色相を使って自分の目がどれくらいしっかり色を見分けられているかが点数（スコア）で図れるサイトです。

続きを読む »

最近、某オンラインショップのお手伝いをさせていただきました。そこで、その完成品を僕の父親（50代）に見せたのですが、ショックなことに父親には一切、使い方が伝わらないようでした。
ターゲット層が全然違うショップではありましたが、僕の「当たり前」が全く通用しなかったことに衝撃を受けました。サイトにたどり着くことすら、彼にとっては難題なのです。
「僕の父親の機械音痴は想像を絶するよ！」と言ってしまうのは簡単ですが、逆に「僕の父親でも使えるオンラインショップ」を構築しようとしたらどうすればいいのかを仮説で考えてみることにしました。

仮定は以下の通りです。
オンラインショップは「お酒」を製造している「キテレツ蔵」とする。
サイトでは「簡単版ショップ」と「多機能版ショップ」を展開し
「簡単版」では「お届けは自宅のみ」「代金引換」「のし包装なし」とする。
ページのデザインはひたすらシンプルにして、一つ入力する度にページが切り替わる。

まず「ビック○ミックオリジナル」あたりの雑誌の中に1ページ、カラー広告を打つ。
以下、その広告内の文章と想定する。

キテレツ蔵のおすすめ大吟醸「韋駄天の華」がホームページから購入できます。
購入方法はとっても簡単！次の指示に従うだけ。
ぜひ一度「韋駄天の華」をお試しください。

1. ではまずパソコンのスイッチを入れてください。そして図のマークの「Internet Explorer」というソフトを起動してください。
2. 「Yahoo!Japan」などのホームページが表示されると思います。そこに図のような「検索窓」があります。そこに「キテレツ蔵」と入力してください。
3. すると上の方の項目に「キテレツ蔵 オンラインショップ」と表示されます。その項目を押してください。
4. 画面に「簡単版」「多機能版」の2つのボタンが表示されます。「簡単版」のボタンを押してください。
5. 「韋駄天の華を購入する」ボタンを押してください。
6. あなたのお名前を入力してください。
7. あなたのメールアドレスを入力してください。携帯のメールアドレスでもかまいません。
8. 電話番号を入力してください。
9. 郵便番号を入力してください。すると住所が表示されますので、番地やマンション名を追記してください。
10. お届けする日と時間帯を、次から選んでください。
    （商品は代金引換でお届けしますので、ご本人様以外が受け取る場合は、代金のお支払いがあることをご伝言ください）
11. お支払い金額（送料、代金引換手数料含む）と入力情報を確認し、間違いがなければ「購入する」ボタンを押してください。
12. これで購入手続きは終了です。お疲れさまでした。

う〜ん、読み返してみると無駄が多いな。まだ父親には難しいだろう。
全ての工程の度に実写の女性が案内するビデオのインターフェイスとかがいいかもしれない。
ほんと僕の父親の機械音痴は想像を絶するよ。

現在のロボット型検索エンジン（俗に言うクローラですね）は、1つのWEBページ内の要素を見て検索の順位を決めています。
実際はドメイン年数やディレクトリの構成などもありますが、今回は特に触れず。

今回はWEBページの中身について大きな変更になるかもという話です。

続きを読む »

サイト紹介以外のエントリーもしておかないと。
というわけで、今回はアクセシビリティのお話を簡単に。

仕事がら公共性の高い案件を多くやっており、アクセシビリティは常につきまとう。
ただ、社内でアクセシビリティのガイドラインがきちっとあるかというと、そういうわけでもないのですが・・・
（ほんと、ここはもっと整備しなきゃいかんのだが）

最近読んだ記事でこんなのがありました。

普通の企業がWebアクセシビリティをコストからチャンスにするには（Web担当者Forum）

ごもっとも。
大企業や自治体サイトでは自らのガイドラインをきっちりサイトで明示しています。

三井住友銀行　アクセシビリティガイドライン

富士通　アクセシビリティ指針

ここまでやらずとて、アクシビリティも言わばユーザビリティのひとつ。
少し配慮してあげることからコツコツと、って感じでしょうね。
ただ、「このサイトは公共性が高い」からアクセシビリティを気にする、ではなく
サイトを制作する上で、基本的なことって意識付けがもっと高まれば良いです。

高齢者や障害者だけでなく、万人が使いやすいサイト作り。
これ目指したいね。

そんなこんな、とりあえずアクセシビリティチェックツールとしては、
富士通のウェブインスペクター（基本やね）を使ってます。
あと、色弱のシュミレーションツールなんかもあるけど、どうしてもwin(ウィンドウズ)有利。

少し前にまた違う記事で読んだ新しいgoogle（グーグル）のfavicon（ファビコン）がアクセシビリティへの配慮が足りないんじゃないか疑惑。
とりあえずテストしてみたら、こんな感じ。

googleのfaviconを「Vischeck」でチェック

赤と緑のコントラストが、たしかにヤバい。

参考リンク

• 富士通 WebInspector
• Vischeck

おばんどす、出町柳しんごです。
最近、風邪にやられてしまいました・・・

それもあるけど、始まって早々、火曜日のみのエントリーになってしまって申し訳ない。
まま、さっそくサイト紹介いきましょうか。

今週の紹介サイトは、

SONY  “Cam with me　デジタルビデオカメラ Handycam”

cam with me（カムウィズミー）

ビデオカメラのスペシャルサイト。
女の子の成長を追いながら、その思い出をカメラで録画できる、
言わばパパになった気持ちで愛する娘の成長を記録に残していく疑似体験ができます。

自分にはまだ子どももいませんが、娘のいる父親ならかなりグッとくるはず。
いや、今回疑似体験をした自分もかなりグッときてしまった、ヤラれました。

このストーリー展開とかリズムとか、うまく演出がされてます。
ブログパーツも提供していて、バイラル的な展開にも期待できそう。
いやー素敵やわ。

ブログパーツ貼っておきます。

どうも、韋駄天でごわす。
本日紹介のサイトはかなり粋なキューブ型検索エンジンでやんす。

サイト内の写真を拾ってきて3D的なキューブ型になってるようでして、十字キーなどで動かせるのが特徴でやんす。
こやつ、複雑そうなことやってるわりにはシームレスに動く、結構な優れものでごわす。

文章で説明するより実際に見てくだせぃ。

「Search Cube」
http://www.search-cube.com/

なにより最近やりたいざますとおもってたことのさらに上をいっておったので、かなり気持ち萎え気味でやんす。。

you tubeにもあがってるみたいなので貼り付けておきますずらw

「ラストガイ」ってゲームのプロモーションがかなりやばい。

本来のゲームの内容自体は、PS3のゲームで
フィールドに散らばっている人々をラストガイってヒーローが
敵に阻まれながらも救助していく、って分かりやすいもの。

そのプロモーションとして、好きなサイトをゲームステージにして
そのゲーム自身が遊べちゃう、という末恐ろしい企画。
公式ページへ行って
好きなサイトを指定してあげるとゲーム開始。
またブログパーツやブックマークレットなんかからでもゲームできる。

どんなサイトでもゲームのステージになるから、ホンマにステージは無限大。
個人的にはYahoo!あたりが面白いです。
Googleは鬼簡単です。
ウチのブログでテストしたら、移動範囲がほとんどなくて
死ぬほど面白くありませんでした。

ステージを構成する方法として、サイト画面をキャプチャをとって、
その画面の明度差を利用してステージ障害物を
構成してるんじゃないかな、って感じ。
ワリオランドシェイクのように
javascriptでimg要素をFLASHに渡してあげるとかではないから
画像の色の形状のよってかなり複雑なステージ構成もできちゃう。
これは技術的にヤバい。超応用可能。
久しぶりに興奮しました。

ただ、本体のゲームいらんやん、って思った。

よくFlashで文字がカチャカチャカチャってずれて、だんだんあってくるみたいな表現があるんですが、それのチップス。
中村勇吾氏がよく使うアレです。

要はテキストフィールドの文字の
文字コード（アスキーコード）を1個ずつずらしてやればええんですね。

MC.ascii += 1; //MovieClipにあらかじめ「ascii」とかの変数を持たしてやって常にプラスする
if ( this.ascii > 90 ) {
this.ascii -= 26;　//90（Z）を超えたら（A）に戻す
}
MC.txt.text = chr(this.ascii);

みたいな感じで。（このサンプルだと止まらないけど）
ちなみに大文字アルファベットが10進法で指定する場合は65から90です。詳細は以下。
アスキーコード：http://www.cppll.jp/cppreference/ascii.html

で、マトリックスごっこみたいにもできます。