Category Archives: Web

paper jsを触ってみた。

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

paperjs.org

Paper.js Metaballs

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

paper.jsサンプルまとめ

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

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

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

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

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/

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

ユーザビリティテスト-メモ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選びが必要なのです。

 

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

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

今日僕の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…彼らもブラウジングの仕掛けはもちろんあるけど、サーチ後の導線設計に一番気を配っている感じ。

 

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