サイトランキングいろいろのまとめ

2009/09/24

「主要企業Webユーザビリティランキング2009 企業サイト編」というリリースがあったので、興味があってサイトランキングのいろいろをまとめてみた。

【全般】


【横幅調査】 (「日経パソコン」企業サイトランキングをもとにしている)

【ブランド】

【繊維業界】

【専門学校】

【採用サイト】

【自治体】

Logic Express9をつかってみた

2009/09/21

logic01現時点でAppleStoreでは出荷まで7-10日になってるけど、予約の出荷は始まってるみたいで、Logic Express9がウチにとどいてました。

さて、ミュージ郎”Ballade”から入ってMC-303505と長くパソコンのうちこみから離れてたわけです。
そのあいだもCubaseのcubasisだったりデモ版はちらほらさわっていたのだけど、難しすぎてぜんぜんついていけず。

で、また最近ガレバンとかをさわりはじめて、あれーわかりやすいじゃん、というわけでDAWを物色してました。Ableton Liveとかも勧められたんだけど、デモさわっていまいち直感的にわからなかった。最終的にマニュアルを読んで(cubaseLogicExpress)すんなりわかったのでLogic(の廉価版のExpress)にしました。

さてレビュー。

一画面完結4ペイン-タブUIがわかりやすい

logic02tUIは4ペイン-タブ型でメインのアレンジエリアを中心にエディットが下ペイン、音色選択・素材選択が右ペイン、プロパティ系・ミキシング/エフェクト系が左ペイン。それぞれのペインにコマンドとツールがぶらさがっている形。

DAWではないけれど、他のアプリのプロジェクトでいくつかのUIをペーパープロトで検討したことがあって、こういうペイン-タブ系も検討したんだけど、こんなにすんなりまとめてくれちゃってるといろいろな思いが去来します。。
けっこう多機能でヘビーなUIになりがちなのに、ほとんどのことを一画面完結でまとめていてわかりやすい。
実際、30分ほどつかってすぐにMIDI録音とエディット、音色加工までできました。
なんでこんな簡単なんだろう・・・


ソフトシンセの画面はごっちゃり

logic03t唯一フローティングウィンドウで展開するのはソフトシンセ・エフェクター類。反面、これはわかりにくいw
あと画面ちっちゃいのに大きくしたらモトがビットマップなのですこし大画像でモヤっとする。
えー・・ベクターでつくろうよ・・・

シンセそのものはは、オシレーターがあってADSRがあってフィルターがあって、、と構成はわかるんだけど、へんてこなレイアウトのやつがあったりしてちょっと慣れるのに時間かかりそう。


テイク録音がすごい

logic04tほかのDAWにあるのかどうかわからないけど、ガレバンにもあった「テイク録音」が、logicの使いやすさを際立たせています。
だいたい譜面よめんので、視覚的に音符の長さが理解できないため、打ち込みはリアルタイムなのですが、まあ一回でちゃんと弾けるのは稀なので何回もループして数テイク入れられるのがいい。
これはとってもMC-303でループしながら録音する時の感覚に近くて、とても入りやすかった一因です。

そんなふうに、数小節区間ごとにループを切って、テイク録音して完成させ、コピペしたり新しい区間でまた録音したりして作ってゆくのがやりやすかった。
でも、オーバーダブとテイクって切り替えて使うものだとおもうのだけど、設定画面の奥にはいっちゃってるのはちょっと残念かも。

あー、あと音源や素材の右ペインに「ビン」ってタブがあるんだけど「ビン」ってw
「ビン」ってなんですの・・・とよくよく読んだら外部素材の置き場所っぽくて、えーとそれは「bin」のことか・・・とようやく合点。

えー、binの訳がビンとかないわー。

ボカロ連携でつまづいた件

で、DAWDAW言いつつ波形加工は音源もないのでまだためしてません。
ボーカロイドから出したデータを持って来たら使うとおもうけど。

ガレバンで作った曲をSMFに出す手段がいまのところLogicを経由することくらいしか無いのだけど、書き出ししてボカロで読もうとインポートしたら空の状態できてしまった。
で、ボカロの開くメニューのほうから開いたらうまくいった。

制作上のいろいろ

歌ものって作ったこと無かったんですが、思いついた歌メロをiphoneの録音アプリで鼻歌で録って、耳コピで打ち込み、メロディだけはできました。
メロディのコードさがすのってけっこうたいへん。
エレクトロでリズム→コード→主旋律でつくる時とは違って、いつもならキーをとりあえずCでつくって適当にトランスポーズするのだけど、鼻歌だとあたまからGとかでつくることになったりして、うわ、黒鍵がある>< とか・・・(ヘタレ)

ソフトは簡単でも、頭にあるのをつくるまでにいくつか障壁がありますねー。
フォーク/ポップっぽいのにしようと思ったのだけど、ギターのジャカジャカひいてる音ほしいなーと構想するも・・・あ・・・ギターひけねえじゃん俺。
打ち込みの難易度と天秤にかけると、、ギター・・・もっかいやるか・・・・みたいな、、

Logic、ギター用のエフェクタやアンプもたくさん入っててそれも面白そうです。

wordpressをはじめて1日目にいれたプラグイン

2009/09/16

wordpressをいれてみて、インストールの簡単さからとてもいい印象だったのだけど、
エディタから投稿して、ぎゃふん。
なんですかー このPタグの多さはー。

どうも調べるとビジュアルエディタとHTMLエディタのいったりきたりでソースが思うようにならない件が取りだたされているので、デフォかこれ・・・と。
そんなわけで、やったこと、入れたプラグインもろもろについて。


Pタグ回避など


flash関連

あと、iphoneから見た時にiphoneテンプレあてるやついれた。

SyntaxHighlighterが思いのほか場所とるので、非同期で開閉するjsっぽい何か探し中・・・

FLiNTのチュートリアルをやってみた

2009/09/16

AS3のパーティクルライブラリFLiNTチュートリアルをコメントつけながらやってみた。

「Emitter」というパーティクルを放出してくれる人を作って、「DisplayObjectRenderer」でレンダリング、あとは数、形、位置、速度なんかを初期化して「Move」して「start()」という流れみたい。

→sample

package 
{
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.geom.Point;
  import org.flintparticles.common.counters.*;
  import org.flintparticles.common.displayObjects.RadialDot;
  import org.flintparticles.common.emitters.Emitter;
  import org.flintparticles.common.initializers.*;
  import org.flintparticles.twoD.actions.*;
  import org.flintparticles.twoD.emitters.Emitter2D;
  import org.flintparticles.twoD.initializers.*;
  import org.flintparticles.twoD.renderers.*;
  import org.flintparticles.twoD.zones.*;
  
  /**
  * Flintのテスト
  */
  public class Main extends Sprite 
  {
    
    public function Main():void 
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }
    
    private function init(e:Event = null):void 
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
      
      //放出するひと
      var emitter:Emitter = new Emitter2D();
      
      //レンダリングするひと
      var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
      
      addChild(renderer);
      
      renderer.addEmitter(emitter);
      
      
      /********セットアップ********/
      
      //1秒で生成するパーティクル数
      emitter.counter = new Steady( 100 );
      
      //イメージ 
      var imgClass:ImageClass = new ImageClass( RadialDot, 3 );
      emitter.addInitializer(imgClass);
      
      //位置の初期化
      var zone:LineZone = new LineZone(new Point(5,5),new Point(395,5));
      var position:Position = new Position(zone);
      emitter.addInitializer(position);
      
      //制限領域
      emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 395, 395 ), true ) );
      
      //速度
      var zone2:PointZone = new PointZone( new Point( 0, 100 ) );
      var velocity:Velocity = new Velocity( zone2 );
      emitter.addInitializer( velocity );
      
      //出現ばらつき
      emitter.runAhead( 10 );
      //ゆれ
      emitter.addAction( new RandomDrift( 100, 100 ) );
      
      //うごけ
      var move:Move = new Move();
      emitter.addAction( move );
      
      //スタート
      emitter.start();
      
    }
    
  }
  
}

CSSNiteLP7IAスペシャルにいってきた4

2009/09/14

4.「IAワークショップ」坂本貴史さん

→スライド
これいちばんおもしろかった。

「飛島建設site」を例に、事前課題(PDF)がでていて、ハイレベルサイトマップとグローバルメニューをつくってみようというもの。

参加された方の課題が提出されていて非常に興味深い。

ワークショップ形式だと濃密に体験できていいです。

そして昨今の考え方として、検索エンジンから直接ページにくるので、サイト全体のストラクチャに加え、ランディングページでの導線誘導の重要性、全体リニューアルよりも個別最適化という傾向の話など、身になる部分が多かった。

自分の手でやってみて、あながち間違ってないアプローチでできてるな、と感じて多少自身がつきました(笑)

あと、サイトはユーザーのアクションのほんの一部でしかない、とカタチとして言い表せなかったことを「AISASのI-Sの間にだけ介在するAID(M)A」という図で(p59)見せてもらって、すげー納得。

5.「実装視点からのボトムアップIA」小久保浩太郎さん

おもしろいこと言ってるんだけど、全体として何が言いたいのかよくわからない講演・・・
  • ユーザーが見るのはサイトではなくページにある情報(フロントエンド)である
  • ページはインタフェースだ
  • インタフェースから得られるインタラクションの積み上げがUXになってゆく
  • HTMLは文書メタファーによるインタフェース
  • だがHTMLは現実のニーズとマッチしていない
  • HTMLでは足りないが「文書モデル」をWFでつくってるよね
  • WFはHTMLをベースに拡張してつくればいいのでは
で、それ結局どうやるの?というところが曖昧。

デザインパターンもそうだけど、ある程度モジュールとしてパターン化できる状況なので、「HTMLの拡張としてのワイヤーフレーム」というコンセプトなのであれば、むしろモジュールに固有のidをふっておいてWFでつかいまわし、それでできたページ仕様書をベースとしてHTMLの拡張であるid名に適用してIAとHTMLとCSSを一直線につなげる、みたいなのが良いんじゃないかな?って思った。

コードにしろデザインにしろ、せっかくの設計と分断されてしまうのが問題だと思うのです。

分断されると合意事項もなにもなくなっちゃうし、非常に設計がムダになってる。そういう意味でIAはチーム全体のタスク、というところは実現したいところ。

5.「IAからWebサイトデザインへの突破口」長谷川泰久さん

→スライド
  • IAで重要なのはコンテキスト
  • 体験の具現化、パターン、オープンスタンダード
ジョブスばりのプレゼン、マジパネェっす。

CSSNiteLP7IAスペシャルにいってきた3

2009/09/14

3.「IAの欠点」佐藤伸哉さん

  • IAは全体プロセスの一部分
  • IAだけでは完結しない
  • IAには前後工程がある→IAの結果がわからない、デザインでかわってしまうことが多い
  • なぜか→作業目的が、チームで共有できているか?
ということで、各フェーズの目的の洗い出しとおさらいの話。以下メモ。

ユーザー調査
  • 本当のユーザーを知ることが目的
  • 解らないことをクリアにする
  • ユーザーを仮説できめないため
既存のサイトマップ調査
  • 現状の把握、説明できること
  • 問題になりそうな部分を理解する
  • ボリューム感を把握するため
サイトマップ
  • 把握と俯瞰
  • 将来的拡張性を検討できるようにするため
  • 全体方針・戦略立案 会社としての長期スパンの戦略
  • フェーズわけができる、現実を提示できる
詳細サイトマップ
  • 全体の設計
  • 共通のコンテンツの整理
  • 中小規模のサイト制作の管理
  • 制作チームの確認用
ワイヤーフレーム
  • 要素・共通要素
  • リンク構成・ナビゲーションの整理
  • 矛盾を把握するため
  • クライアントとのコミュニケーションのため
IAの全ての作業の目的を明確にして、必要ないことはやらない(サイトマップやWFさえも)。また、なぜ必要かを共有すべき。

ワイヤーフレームと画面仕様書のちがいについて質問がでていましたが、
  • ワイヤーフレーム →どこに何が入るくらいのやつ
  • 画面仕様書 →文言ベースの詳細なもの
というきりわけらしい。

ワイヤーフレームも悩ましいところで、一番あいまいなんじゃないかなー。

ヤスヒサさんの講演でもあったけど、タイプとしては、
  • コンテンツブロック型
  • ディティール型
  • ストーリー型
  • コラボレーション型
  • 半プロトタイプ型
分類があったりして、これみんな目的がちがうけど、WFふだん作ってる人も混乱してそう。

混乱してるので、デザイナーがひっぱられたり(プロトだと思ったり)するみたいな話がでてくるのでは。

そういう意味で目的を意識しようぜ、ただのツールなんだし、というところに言及したいい講演だった。

CSSNiteLP7IAスペシャルにいってきた2

2009/09/14

長くなったので記事わけます。

2.「プロジェクトマネジメントから見たIAの大切さ」林千晶さん

→スライド

で、実務的な困難はいろいろあれど、方針として固まった前提事項の詳細さとその共有って大事だよね、という話。

プロジェクトマネジメント計画書に書かれるプロジェクトの目的は、設計がみえてくる程度に具体性がないとダメ。

プロジェクトの背景や理由、どんな課題があって何を見せて何が重要なのかというのをクライアントと共有し、サイトストラクチャやページの骨格としてゆこう。
また、品質基準として他のプロジェクトをベンチマークとして利用する。
優秀なサイトのリストがあるとそれも納品物としてクライアントの説得材料に。

ベンチマークというところでは、外部的にはそういうリスト、内部的にはモジュールやパーツごとのパターンをベストプラクティスとして持っておくべきだなーと思った。

CSSNiteLP7IAスペシャルにいってきた1

2009/09/14

9/12の、IAのCSSNiteにいってきましたのでまとめと感想などを。

1.「情報アーキテクチャの全体像」長谷川敦士さん

→スライド

最初にIAの全体像についてのレクチャー。

シロクマ本にもある、ユーザー・コンテンツ・コンテキストから、UX方針を導き、サイトストラクチャとナビゲーション、ラベリングに落とし込んでゆく。

ユーザーの動き・タスク・ゴールと、ビジネス的にもっていきたいゴールとが最終的に導線設計やページ内IAに落ちてくると思うんですが、「コンテンツモデル」というダイアグラム(p68)はそれを端的にまとめていて非常に使えるんじゃないかと思った。
あとはタスクフローやシーケンス図で表現されるユーザーの動きを、サイトの全体を見た時にどう取り込んでサイトストラクチャと結合してゆくか、というのが個人的な課題かな。コンテンツにおとしちゃうと、想定してる動きがみえにくくなっちゃうのが難点だと思うのです。
それからやっぱり、ユーザーやコンテンツ要件を決める前提部分はちょー重要だということ。
当たり前なのですが、そこずれるとクリエイティブがすごくてもあさっての方向に話しているようなものなので。

とはいえ、HCDでも思うんですけど、実務的にユーザー調査ってすごい敷居が高い。

いままでの商業案件でそんなことができる仕事って一度もお目にかかったことが無い。

もう結構、IAの提唱するフレームワークは浸透してきているし、業務の一部や全体(あるいはかいつまんだ形で)行われているのだから、そのへんの「スケジュールや予算で失われるもの」にどう対応していくのか、というのを共有していくのが重要なんじゃないかと思った。
とはいえ、テストって全然出来ないわけじゃなくて、ラベル定義(p64)で述べられているように、グローバルのラベル候補をいくつかならべてみて、妥当性をその場でチェックするみたいなライトなやつはすぐにでもできるんじゃないかなー。
UXのコンセプト定義のところは、非常にあいまいなところだったので収穫があった。
特にwebサービスの立ち上げとかだと、Flickrのコンセプトダイアグラムのようなものがとても有効だなー。やればよかった。
通常案件だとここは、ストーリー的なものがコンセプトになると思うのだけど、たぶん実務では「クリエイティブ実装」に寄ったかんじのいわゆるコンセプトワークになっていると思う。ここのところで抜け落ちている、設計のほうや、開発のほうの指針にもなるかんじの共有が重要。シナリオ/ゴールが、ユースケースやフロー・ストラクチャにおちていくイメージかな。

それから「エンタープライズIA」という概念は初めて知りました。

コーポレート、コンシューマー、ブランド、ECといった企業が持っているサイトを全体としてどうやって構成していくのか。

コンセントさんの例では、カネボウ
  • コーポレートとコンシューマーの完全分離
  • コンシューマーサイトをハブとして、ブランドサイトのレギュレーションを独立して訴求
という方針でつくっていた。

旧来だとなんとなくグローバルのはじっこに会社情報とかがあったりしたけど、全体の企業戦略上、どう特化させるのかみたいな話。ここでもやっぱり、全体の方針、上流が大切なんだよなあ、って思う。そこにリーチできないと、デザインもへったくれもあったもんじゃない。

そこに手が出せないのがいつもとてもはがゆいです。