Tag Archives: web

paper jsを触ってみた。

最近噂のpaper.jsを触ってみたら結構面白かったので、アップ。

paperjs.org

Paper.js Metaballs

サイトからダウンロードして色々遊んでみたら、結構サンプルがいっぱいあって面白かったので、自分で全部のサンプルをまとめてみました。

paper.jsサンプルまとめ

paperjs.orgに乗ってないサンプルとダウンロードの方になくて、サイトのほうにあるサンプルをすべてまとめてみました。基本すべて(IEはシカトw)ブラウザーで動きます。

なんか、ホントにもうFlashいらないね。jsやらないとなー。

特にFutureSplashっていうヤツは、昔のどっかで見た事あるなーとおもったら、ここだった。
paperjs.orgも許可とって、the389.comのコードを使ってるみたいね。

勉強になる。っていうかやらないとな。

Google Body が半端ない。

先日twitterでもつぶやいたのですが、このgoogle Bodyってマジで半端ない。

現在サポートするブラウザに限定があるらしいけど、FFはOKでChromeだとwebGLをenableにしないといけないっぽい。
(address barにabout:flagsといれて、webGLをenableに。)

体の表面から、皮下、筋肉構成、内蔵構成、血管構成、神経構成とすごく見た目に分かりやすく出来ています。

なにより3Dモデルなので、ズームして体内に入っていけるような感覚で色々な体の構造物を見ることができます。
こんな感じ。

心臓の心房拡大

 

 

 

最初は少し気持ち悪いと思ったけど、どんどん惹きこまれていった。
皆さんも時間があるときに是非。

ちなみにGoogleCow(牛バージョン)もあるw
http://goo.gl/E1F39

Web Font サイトまとめ

ウェブフォントのサイトのまとめ
まずはぼくが使ってるTypekitから。

1.Typekit
Typekit
一番ポピュラーかつ安定してる。
年間での使用料を支払いで1年更新。
クオリティ的にも一番早くバグにも対応してくれるし、今まで一度もトラブル無し。
最近はライブラリーもふえていい感じ。先週遂にFuturaが入ってったメールがきた。
http://typekit.com/libraries/full

 

2.typotheque.com

最近検索するまで知らなかった。
種類は少ないけど、品質はたかそう。
僕の好きなFedraがある。
http://www.typotheque.com/fonts

 

3.WebINK

一番新しいんじゃないかな。最近割と台頭してきてるサービス。
500以上のフォントファミリーが見れます。
フォント検索に”Width”があるのが嬉しい。
http://www.extensis.com/en/WebINK/fonts/index.jsp

 

3.kernest.com

一番の老舗。でも使い勝手が悪い。
確かにじぶんの好きなフォントを知ってて、それがKernestにあるって知ってるなら、
いいかもしれないけど、検索しづらいから、僕の場合は鬱陶しい。
http://kernest.com/

 

今回はウェブフォントのデリバリーサーバーがあるところに絞って紹介しました。
基本的にウェブライセンスがあれば、自分のサーバーにおいて@font-faceで出せるのだけど、上記のデリバリーサービスはフォントを一番いい形で出してくれるために彼らのサーバーでフォントを管理しています。

css3,HTML5等の新しいマークアップ(もう新しくないか。。)、ウェブブラウザの進化が過渡期の今、どれに合わせてウェブをつくるというのが難しいです。そこでこのようなデリバリーサービスは全てでベストパフォーマンスが出るように日夜チューンナップしてくれているのです。

なので、僕はデリバリーサービス以外は使えないというほど、ぞっこんです笑。

Tedx Tokyo 2011

先日、TEDx Tokyo がLiveで配信していました。
そのせいで全く仕事にならなかった(苦笑)

今年も面白く、深い内容でした。
なんか、見ると毎年世界の向かう方向が少し垣間見れるような気がして、ワクワクします。

特に今回はやはり震災関連が多かったです。

ぼくのおすすめはこの4人。
Garr Reynolds: プレゼンに関する多くの著作を持つ、プレゼンの神。

Dr. Naoto T. Ueno: 腫瘍科医、自らも癌からの生還者

Kathy Matsui: 株式アナリスト/ストラテジスト、女性権利運動家

Dr. Hiroshi Ishii: MIT 教授 兼 MIT Media Lab副所長 (最近所長に伊藤穰一氏が就任_)

個人的にはKathy Matsuiさんのプレゼンがよかった。パワフルで、最後の一言に圧巻w。
あと、石井先生のは圧倒的な迫力と質量だった。スライドの使い方が上手い。ファンドレイジングもされているだけはある。心が動く感じ。

あと、内容は別として、響いたのはこれ。
Kyung Lah: CNNのジャーナリストで現在妊娠中。

彼女の最後の言葉”Are you listening? Can you hear them?”は鳥肌が立つ。

是非ここに貼った英語で見て欲しいけど、日本語もあります。
下記で英語の同時通訳も見れます。
http://www.tedxtokyo.com/ja/tedxtokyo-2011-enter-the-unknown/program/

お時間があれば全部とは言わないので、幾つか見てみてください。
世界のその道の最先端が垣間見れます。

RIM Playbook will launch on April 19th!!

Blackberryで有名なResearch In Motion(以下RIM)から新しいタブレットが発売されます。
その名も”Playbook

今回の7インチのディスプレイでiPadより小さい大きさです。

とりあえずYoutubeでデモがあったから、それを。

このデモで、今回のPlabookで使用されているBlackberryOSのUI感が何かに似てるなーと思ったら、思い出した!
今は亡き、PalmのWebOSです。

僕は昔はPalm一筋の人間だったので、ずっとPalmOS,そしてWebOSを使ってきました。
HPに買われてiPhoneに変えちゃいましたが笑。

で、このマルチタスク感や、MediaPlayerの感じ、Finger Actionの操作感は結構似ています。

あと、”RIM”の担当者らしき人がやっているiPadとのデモ。

FlashとHTML5のサポートはやっぱ嬉しいね。

僕は買わないけど、結構面白そうなガジェット。
前にブログで紹介したTATがUIのデザインしてるのかなー。
RIMに買収されて久しいから、今回のタブレットが彼らのRIMでの最初のしごとかな?

ユーザビリティテスト-メモ1

先週から始まったUsability Testingですが、初めてのことが多かったので、色々これからのためのメモ。

今回のユーザビリティテストは、全く新しいアプリケーションのファンクションとそれに伴うベーシックレイアウトの確認。

テストゴール
1. ユーザーがすべてのファンクションを理解し、それを利用できる。
2. サインアップからアプリケーション内のファンクションまでをシームレスにつなぐ。
3. アプリケーションがユーザーのビジネスにおける判断要素を与えることができる。

テスト日程 : 1週間

テストモニター :  6名
テスターは6-8名とする。最初の6名で全体の80%以上の問題点をカバーできる。残り2名最初の6名でニッチな思考、思想のテスターがいた場合のバックアップ。8名以上のテストは同じ問題点の繰り返し発見するという無意味と個別な趣向のランダムな問題点が多数検出され、全てをカバーできなくなってしまうというデメリットが存在する。

テストモニターは、ペルソナを元に選出、リクルーティングする。

テストシナリオ
テストは前提条件となるテストシナリオを決めてスタートする。今回の場合、テスター(ペルソナ)が日々直面する問題点を洗い出し、そこをテストシナリオとする。

テストタスク
テストゴールを元に、すべてのファンクションをユーザーが体験できるようにテストタスクを構成する。それはテストシナリオの前提条件に沿って製作される。

ユーザビリティテスト
ユーザビリティテストはテスター、ファシリテーター、オブザーバーによって成り立つ。

ファシリテーター
•テストの説明
•テストシナリオの説明
•テストタスクの説明
•テスト中はテスターに声を出して、思っていることを話すよう促す。そうすることでテスターの心の声を聞くことができ、テスターも声に出すことで自分の作業を確認しながらテストできる。もし、テスターがテスト自体に集中してしまい、声を出さなくなったら、声を出して今考えていること、していることを言うように促す。

オブザーバー(今回の僕の仕事)
オブザーバーは隣室にてテスターのスクリーン見ながら、タスクの達成率、問題点の洗い出し、表情やマウスモーションによる問題点をメモに取り、分析の参考資料を制作する。

テストメソッド
ワイヤーフレームをFlashでレイアウトしプロトタイプを制作する。この際、Flashではタスクリストに基づき必要な部分だけのアセットがあれば問題なし。

レコーディングして後の分析作業に使用する。

今日はこのへんまで。続きは次回に。

ユーザー視点

会社では、User-Centered Design Teamという正式名称の部署に所属しています。

で、最近「ユーザビリティーだけでなく、コピーやワーディングと「ユーザー視点」に立ち戻って考えなおそうというふうになりました。

多くの会社がユーザビリティのテストに時間を割き、ワーディングを気にするのはランディングページくらい。

実際のアプリ自体の細かい部分でのワーディングもちゃんとしてあげると、レイアウトやグラフィックではどうにもならないところを補ってくれます。

僕は英語が第二言語ですが、そのほうが逆に少しの違いが分かりやすいので、結構色々注文しています。

よく、アイコンとファンクションだけで理解、操作できるものがEase of Useの代表例みたいに言われていますが、複雑なアプリこそユーザー視点でのワーディング、特別なLanguage選びが必要なのです。

 

きょうは短いけど簡単に。

手書きレターが流行ってる?ハイなエンゲージメント。

最近、手書きのお手紙をもらうことが多いです。

普通に利用している企業からです。

先週はJimdoというドイツに本社のあるウェブログサービスの会社から。昨日はMont Blancから手書きのお手紙が来ました。

ちなみにJimdoからはこんな感じ。グミ付き笑。

Jimdoはプロサービスをフリーランスのクライアントで使っていたので、「ありがとう!」という内容が、MontBlancは、先日友達に少しいいボールペンをプレゼントした時に色々お話しした人から。

一昔前なら、タイプされたの手紙を。今ならEmailでのお礼。これからは手書きの手紙になるということかな。

確かにあまりペンで手紙を書かなくなった昨今。特に欧米はemailが普及しすぎて手紙という存在価値があるのかなと思うくらいですが、だからこそ「今」手書きの手紙をもらうことに意味があるのです。

数年前に人材業界でengagementという言葉が流行りました。これは単なる「忠誠心」ではなくて、自分でメリットを見つけて、そこにいる(ポジションや会社)ことを誇りに思うようなメンタリティです。これをCRMに利用するのはつい最近(1-2年前くらい)からソーシャルネットワーク上で流行りはじめました。Starbacksがその先駆者でしょう。顧客が実際に「Starbucks」に参加しているような気持ちにさせるのです。Twitter, Facebookのように既存のマスへの投資から、すでに好きな人(Follower, Fan)をもっと好きにさせる投資に向かいました。これがHi Engagementを産んでいきました。

今回の手書きの手紙ですが、このHi Engagementと産むための画期的な方法です。今の時代ならではですが。

時代と共に淘汰されていくものは数多くありますが、温もりを伝えるという人と人の根本でのコミュニケーションはなくならないでしょう。

アメリカのウェブと業界の特徴

今日僕のTLに”海外Webサイト•海外Web屋の特徴”っていうブログの記事が流れてきました。

http://www.webcreatorbox.com/webinfo/website-overseas アルファブロガーの方でクリエーターManaさんがオーストラリアで体験してることでしょうか。

いくつかは、確かに!とおもいました。ほんと「そう言われてみれば」的な。例えば、”URL直接入力”、”Facebookウェブ戦略”、メルマガマーケティング”。この3つはアメリカにもすごく当てはまる。PMのアプリは割と会社の規模や会社の業務内容によってマチマチかなと。確かにbasecampは一つのオプションだけど、そこまで人気って言うほどじゃないと思う。あと、フリーランサーの時給だけど、100ドル以上はザラな気がする。安定しないし、ベネフィットがない分、もらう傾向にありますね。よくお願いしているFlash Developerは時給150ドルだし。。。

あと、一つ付け足したいのが、日本のウェブと海外のウェブの大きな違いはブラウジングサーチのバランス。

日本はブラウジングに重きを置いたインターフェイスにします。なので、所謂「導線設計」というのがすごく大事になってきます。いい例はYahoo! JAPAN. クリックしたあとに、また見たいものが用意されている感があります。

でも、アメリカはサーチに重点を置いています。絶対にサーチボックスを入れて、サーチ後にユーザーをナビる仕掛けを入れておきます。アメリカの最近の主要サービスはサーチに始まり、サーチに終わる感じ。Amazon, Google, Twitter, Youtube etc…彼らもブラウジングの仕掛けはもちろんあるけど、サーチ後の導線設計に一番気を配っている感じ。

 

ビジュアルの作り方や色の使い方も結構違いますね。それはまた今度。