Webサイト&サービス Archive

アップルのデザイン開発。デザインのこだわりはもちろん有名。資産そのものです。そんなアップルのデザインの現場を感じさせる記事の和訳があったためチェック。

アップルのデザインはこうやる・・・by maclalala
原文ビジネスウィーク: “Apple’s design process” by Helen Walters: 08 March 2008

■完璧なモックアップを作る（Pixel Perfect Mockups） 手間と時間はかかるが、早い段階で、「完璧なモックアップ」を作ることで、すべての曖昧さがなくなり、結果、あとで修正が必要なくなる。

※なるほど、最終イメージを早い段階から提示することで逆に手戻りがなくなるということですね。手間と時間がかかるのは否めないが、最終的には修正が少なくなるということか。

■10から3へ　3から1へ（10 to 3 to 1） アップルのデザイナーは、新しい機能についての10のまったく違うモックアップを作る。制限を設けずに10をデザインし、詳細に検討した後、それを3の候補に絞り込む。さらに数か月検討した後に、強固な最終案に行き着く。

※「３つがよく見えるようにあと７つ」をプランを作る訳ではなく、10個それぞれが満足のいく物をつくるということだそうだ。言葉では簡単だけど、自分が納得いく物を10個というのはとてつもなくパワーのいることだろう。

■2つの正反対のミーティング（Paired Design Meetings） 毎週、チームは2つのミーティングがあり、1つはブレインストーミングで、制約などを無視して自由に考える。Lopp氏の表現によると、「クレージーになる」場。一方で、もうひとつの会議は、プロダクション会議で、さきほどの会議の正反対なもの。 ここでは、デザイナーとエンジニアはすべての事柄の具現化について見極めることが要求される。クレージーなアイディアをどう実際に動くものにするのかが問われる。このやり方は、どんなアプリであっても、開発の期間を通して繰り返し行われる、という。

※拡散と集約。ブレストの中ではよくいわれることですが、前向きにクレージーになること。また実際に落とし込むこと。この二つは分けないといけないし、このギャップが大きいほどおもしろいものができるということですね。

「子馬がほしい！」を避けるために（Pony Meeting） シニアマネジメント層が加わる会議では、さまざまな要求がされ、WYSIWYGじゃなきゃイヤだとか、メジャーな ブラウザには対応してほしいとか、会社の精神を反映してほしいなどいろいろいわれる。 Lopp氏は、これは、会議で「オレは子馬がほしいな！　だろ？　子馬、サイコー」といわれようなものだ、という。問題は彼らがほしいものを単に挙げているだけで、間違っていたとしても、彼らが給与を支払っていることから、あまり無碍にできない点だ。

これを解決するために、Lopp氏は、前述の現場による2つの正反対の会議で出たアイディアを、シニアマネジメントにあらかじめ見せることだ、という。というのは、そのアイディアの中の1つは、彼らの夢にまで見た「子馬」かもしれないのだ。
2つの正反対の会議で出た「子馬」（アイディア）は、デザイナーとエンジニアが実現化について考えを巡らせているものであるため、後々に大きな問題に発展することは少ないという。

※この考えは非常に面白い。そうなんだよ。みんな0ベースで考えたいんだ。プレゼンテーションをきいたとき、評価する側もやはり一度自分の頭の中で反芻しないと理解ができない。そうして、自分の頭の中をを動かすと、別のアイディアが生まれて思わず押し付けたくなる。これは絶対に人の心理だし、悪気がないだけに会議を長引かせる要因にもなる。

こういったときのために、どういった議論がされてきたのか？
アイディアリストを事前に提示することは、その試行錯誤のプロセスを共有することになり、評価する側の納得感にもつながることだろう。

試行錯誤のプロセスを明示することは、デザイナー側→シニアマネジメントの流れだけでなく、逆にマネジメント→社員という流れの中でも同様のことがいえるのではないか、と感じる。

スタートアップページは、googleのパーソナライズページを使って久しいですが、3/13にアーティストiGoogleというプロジェクトがはじまりました。（東京IT新聞）

アーティストiGoogle」は、“Internet Meets Art”をコンセプトに、世界各国（70カ国、42言語）で展開する海外発のグローバルプロジェクトだが、日本で先行スタートする。第1弾として、3月 13日より、プロジェクトサイトを開設し、9人のアーティストによるオリジナルのアーティストiGoogleを提供。アーティストオリジナルデザインの背景画像とガジェットが用意される。

参加アーティストは、ロンドンで活動するデザイナー集団Airside、リリー・フランキー、元祖アートディレクター、日比野克彦、ヒステリックグラマーのデザイナー北村信彦、ミッドタウンのサントリー美術館を手がけた建築家の隈研吾、A BATHING APEプロデューサーNigo、ハンパンダの生みの親である野田凪、手塚治虫の鉄腕アトム、イラストレーターユニットの山根yuriko茂樹と、多方面から面白いセレクトです。
さっそく、Nigoのガジェットとページを設定してみました。

パーソナライズドスタートページ（ホームページ・フェイスページともいう）は、ダイレクトにユーザーとネットを繋ぐ最初の入り口になるだけに、まさにユーザーの囲い込みが始まっていますね。

その他のサービスも検証してみました。
■ネットバイブス：http://www.netvibes.com/
フランス生まれのネットバイブス：150カ国以上で1000万人ものユーザーが利用。しかも日本語に対応していた。（mixiのモジュールもある。）
【Netvibesの主な機能】
・パーソナルポータル機能
　複数のコンテンツを画面上に並べて表示することができる
　ドラッグ＆ドロップで配置を変更することができる
　タブで複数のポータル画面を作成することができる
　ID登録をしなくても利用することができる
　ページのテーマを複数から選択することができる

・アプリケーション機能
　APIを活用して開発された複数のコンテンツを利用することができる

NetvibesのモジュールにはMeeboやMyspaceなど人気のウェブサービスと連携するものだけでなく、GoogleカレンダーやGoogle Notebookなど、Googleのサービスと連携するものもいくつかあるとのこと。これは、Google利用者でも魅力あるサービスですね。

　今後、モジュールをクロスプラットフォーム対応にすると確約しているそうで、ここでも新しいプラットホームが生まれそうな機運です。

■ページフレークス　http://www.pageflakes.com/
ドイツ生まれのスタートページ。個々のモジュールをフレーク（情報の断片）とよんでいる。
このサービスは最初の設定で、ユーザーの興味のある分野を設定してもらうことで、自動的に情報をくみあわせてくれるとのこと。確かに最初がめんどくさいんですよね。

■グローバルグリンド

http://globalgrind.com/discovered/
ニューヨークを拠点にするサービス。こちらは最初からHIPHOP世代にターゲットを絞りクールな情報やサイトのデザインを提供する。パーソナルページはオールクラスタのイメージから入っていくのが定石のようですが、あえて、最初からターゲット絞り、かつクールなサービスを提供するのはすばらしいことだ

囲い込まずに囲い込む。オープンにしながら、ユーザーをファンにしていく。公開できるところは公開し、逆に他社で使いやすそうな物はとりこんでいく。このバランス感覚がないと危険だなぁ。

プレゼン用アプリとはいえ、プロトタイピングをするのに便利な機能も既に幾つか揃っています。スライドからスライドへのリンクも可能ですし、グラデーションや光沢といったビジュアルエフェクトも PowerPoint 内で出来ます。すぐ始めたいという人のために、istartsomething のページから Microsoft でも利用している GUI ツールキットをダウンロードすることが出来ます（2007用）。

”could”yasuhisaさんのブログ：PowerPoint を使ったプロトタイピング　より

次のエントリー（今時のプロトタイピング）を含めて、多くのプロトタイプを行うためのツールが紹介されている。確かにPowerpointで作るべきか、Excelで作るべきか、もしくはVisio?などの議論はありますが、上記のようなツールキットがダウンロードできるとなると、Powerpointも魅力的に思えてきました。チームやプロジェクトを円滑にするためにも、このようにショートカットして効率的にできる方法は模索していきたいですね。

カンプデザインなんだけど、かっこ良く見せたい。
まずはアテで作る、社内資料なんだけど。
こういうケースでも、さっといい素材は使いたいもの。参考になるサイトを3つ紹介。

■ロゴ作成の参考になるサイト
【logotwo】
http://www.logotwo.com/
* Audio * Blog * Blogging * Bookmarking　などカテゴリーにあわせて海外のロゴが見れるのは面白い。

■CSSのデザインを集めたサイト
【CSSclip】
http://www.cssclip.com/
日本の方が運営しているのですが、海外のサイトの投稿がほとんど。こちらも色の系統でソートできるのがいいですね。

■優秀なフォトグラファーを集めたサイト
【The Photography Showcase】
http://www.thephotographyshowcase.com/
イメージにあった写真を見つけるにはいいかもしれません。ショーケースしてもかなり楽しめます。

ふじようちえんのサイト

電車の中で、ipodtouchで多摩美術大学がやっているポッドキャストでダウンロードしてきた講義の映像を見ている。tamabi.tv　今見ているのは、佐藤可士和さんの講義（2007）。佐藤可士和さんの作品は町中、雑誌やテレビでもみることが多いですが、やはり母校での講義ということもあって、非常にリラックスして話しているように見える。その中で、「ふじようちえん」の紹介があって、その建築と全体のアートディレクションに、すごくほっこりした気持ちになった。もともと古かった校舎を円形の斬新な形にリノベーション。ビジュアル面も含め、トータルで考えられている姿は全体で一つの作品になっていてストーリーになっている。

（円形の校舎）

立川じゃなければ、ぜひ自分の子供をいれたい。むしろ自分が遊びたい！
ぜひ、このサイトと、映像をみてください。
ふじようちえんの講義部分ダウンロード
【Windows】 右クリック→対象をファイルに保存
【Mac】 ［control］キーを押しながらクリック→リンク先のファイルをダウンロード

多摩美術大学　tamabi.tv
グラフィックデザイン学科特別講義「アートディレクターの新領域」（全10回）
講師：佐藤可士和（アートディレクター）
担当教授：中島祥文（グラフィックデザイン学科教授）
日時：2007年7月21日（土）13:30〜

Leopardに変えて、さんざんな目にあった（データがぶっとび、再構築ソフトで復活させた）が、さらに、最近、Safariの遅さが気になっていた。このごろ。
Macのウェブブラウズ環境を高速化する「dolipo」というソフトをいれてみました。
http://drikin.com/dolipo/
インストール後は、システム環境設定→ネットワーク→詳細→プロキシでウェブブラウズをする際に「dolipo」というプロキシサーバー経由を使うという形に変更するのですが、かなり劇的にかわりました。これはいいです！

フリーでMercedes Benzがセレクトした楽曲がダウンロードできます。
全10曲。どれも結構、いい感じ！

MixedTapeというMercedes Benzのコンテンツ。

mercedes-benz.tvの一つのチャンネルです。
http://www.mercedes-benz.tv/

今日は、しょうだいが風邪をひいていた。熱があったので病院にいってきたそうだが、大丈夫との事。
昼間、暑いところに出歩くと熱を出す事が多いので気をつけないといけません。自分も早く寝るべきなのだが、風邪を吹き飛ばすということで、面白いスクリーンセーバーを発見。吹き飛ぶデスクトップ「風とデスクトップ」ダウンロード

吹き飛ぶ光景「風とデスクトップ 」

ソーシャルブックマークでの「あとで読む」タグはあまり使わないですが、更新性が高いという、この「あとで読む」タグの集約サイト「あとで新聞」。

あとで新聞　http://news.atode.cc/

日にちごと時系列で読めるので、ネットでどんな事が話題だったのか？おって見ていけるのが面白い。こうして見ると、「お役立ちTips系」「ネタ系」というのが多いですね。

世界のクラブミュージックをブログパーツにできるという、「WASAPLAYER」。オンラインクラブミュージックストア「WASABEAT」からの提供。お気に入りをプレイリストにしたり、ジャンルやアーティストから選べる。サイトは少々フルフラッシュで重たいのは難点ですが、この自由度の高いブログパーツは秀逸。自分のレコメンドコメントも入れる事ができます。

gooラボで新しいサービスが展開。
ウォークスルービデオシステムとのこと。ただいま帰省中ですが、とはいえ、なかなか全ての思い出の場所は行けないもの。そんな時、このウォークスルーでちょっとした郷愁を感じることができました。個人的には、昔、京都の御茶屋でバイトしていたころを思い出す、先斗町のウォークスルーがあったのは結構うれしかった。「この公園にバイクを置いていつも、この細い道歩いて、この喫茶店でお茶してからバイトいってたなぁ」とか、なかなか楽しかった。あと、四条通もいいですね。

「Amaznode」
http://amaznode.fladdict.net/

アマゾンの商品をノード的に表示していくというサービス。
アマゾン内で商品を探すと「この商品を買った人はこんな商品も買っています」「この商品を見た人はこんな商品も見ています」というような、関連性のある他の商品との結びつきを、実際にリンクしてビジュアル的に見せようという仕組み

最近気になっているキーワードでいろいろ試してみました。
ぼこぼこ出てくる感じと、大きくジャンルや関係性が分かれるのが、抽象的にものを探したいときによいですね。
ユーザビリティ
LIFEHACK
柳宗理

有名人身長推定サイト「SETAKE」

インターネットに散らばる情報からあの有名人の身長を推定します。 あくまで推定値なので、正確さを保障するものではありません。 なお有名人でない場合は推定精度がいちじるしく低下します。

やっぱり、ドラえもんの身長は有名なんだな。
これ「Yahoo! JAPAN Webサービス」を利用しているようです。

アメリカの代表的なWeb2.0系の企業である37signalsの「シンプルな人気サービスをつくるためのテキスト　Getting Realが日本語訳されてWEB上で読めるようになりました。
Getting Real by 37signals日本語版
”Getting Realは、決してIT分野の一部にのみ適応されるものでなく、一度理解すれば、人生の様々な場面でそのコンセプトを応用することができます。”とあるように、クリエイティブな仕事。プロジェクト。モノ作りをするにあたっての様々な示唆が含まれています。
基本的にはGTDの考え方を踏襲するものですが、その考え方の鮮やかな切り口に、その通りだよな。とか、そういう考え方をすればショートカットだなといちいち感心させられます。
※プロジェクト・タスク管理（GTD）とは？［ITmedia］
心に留まったキーワードをメモしておこう。

・より小さな規模で
・競争相手よりもシンプルに
・大きな部分から小さな部分へ。
・皆を喜ばせようとすると、誰も喜ばない
・いきなり大きな規模を考えない
・あなたが費やしたほとんどの時間は
　重要でないことに費やされています。
・『僕たちには1000のアイディアはいらない』
　スティーヴ・ジョブス
・イノベーションはノーと言うことから生まれる
・リアルが合意を導く
・ひらめきをスケッチに、そしてHTMLコードに
・素早く実行
・より小さなタスクとスケジュール
・コピーライターとデザイナーを一緒に仕事させましょう。
・サポートへの問い合わせが開発者に見えるようにしましょう
・１人の時間を作りましょう。
　そして、仕事を妨げることを避けましょう。
・ミーティングをしない
・チームを小さく分ける
・雇用は慎重に。実行は迅速に。
・熱意を持った人間を見つけましょう。
・プログラミングを始める前にインターフェースをデザインしよう。
・ページの中心部分から始め、外側へ組み立てよう
・一貫性よりもその場の雰囲気
・一貫性があることよりも真っ当であることのほうが良い。
・決定は一時的。ユーザーの反応と修正が大切
・幸せが一番。不満だらけの優等生よりフツーを。
・応募者がプロジェクトにどれだけの多くの質問をするか
・RSSやAPIなどで、データを世界へ
・机上の空論よりも現実を見据えたスケッチを
・不要なペーパーワークをにサヨナラを
・詳細な説明でなく、ストーリーを書く
・ダミーでなく実際の言葉を入れる

非常にためになる文章ですし、「自分の考え方のOSも刷新できる」そんな気分がしました。

結びつくサービス

• GAZZ!
  http://gazz.221616.com/
• 音ログ.jp
  http://otolog.jp/
• Socialtunes
  http://socialtunes.net/
• ダイエット☆マメグラフ
  http://www.mamegra.com/
• XSHIBUYA
  http://sns.xshibuya.jp/
• ブクログ
  http://booklog.jp/
• プロフィ
  http://prfy.jp/
• ゲームリクレ
  http://www.gamerecre.com/
• Dogster
  http://www.dogster.com/

共有するサービス

• 読者コミュニティたなぞう
  http://review.webdokusho.com/
• オッズパークジェーピー
  http://www.oddspark.jp/
• 外為羅針盤
  http://fx-rashinban.com/
• みんなでつくろうYahoo!地図情報
  http://realtime.alpsmap.co.jp/
• デート通.jp
  http://www.date2.jp/
• veena!
  http://www.veena.jp/
• コトノハ
  http://kotonoha.cc/
• ベビカム
  http://www.babycome.ne.jp/
• Instructables
  http://www.instructables.com/
• 老人ホームマップ
  http://www.roumap.com/

発表するサービス

• おとなのコラム
  http://www.otona-column.com/
• 小説家になろう
  http://syosetu.com/
• Catalo-g（語ログ）
  http://catalo-g.jp/
• Choix
  http://www.choix.jp/
• Mojizu
  http://www.mojizu.com/
• みんなの就職活動日記
  http://www.nikki.ne.jp/
• クックパッド
  http://cookpad.com/
• キミスタ！
  http://kimisuta.com/

インタビュー系サービス

• けんてーごっこ
  http://www.kentei.cc/
• jonkenpon
  http://www.jonkenpon.com/
• 8apps
  http://www.8apps.com/
• pikki.jp
  http://www.pikki.jp/
• haikuplanet.jp
  http://www.haikuplanet.jp/
• Sketchplanet
  http://www.sketchplanet.com/

評価するサービス

• もぐナビ
  http://mognavi.jp/
• 禁煙スタイル
  http://www.kinen-style.com/
• 4surf.jp Buzz
  http://buzz.4surf.jp/
• おとりよせネット
  http://www.otoriyose.net/
• デンターネット
  http://www.denternet.jp/
• QLife
  http://www.qlife.jp/
• 私のオススメ生協商品 クチコミ広場
  http://www.kuchikomi.ein-g.co.jp/
• 漫画レビュードットコム
  http://www.manngareview.com/
• ウエディングパーク
  http://www.weddingpark.net/

その他のサービス

• リアヨロ！
  http://www.yoronchousa.net/
• スマッチ 住まいの相談室
  http://soudan.smatch.jp/
• stmx
  http://www.store-mix.com/
• @nifty TimeLineβ
  http://timeline.nifty.com/
• ATOK & 一太郎 presents 全国一斉日本語テスト
  http://www.atok.com/test/

Apolloは米アドビ システムズが開発中のミニアプリケーション実行環境です。
VISTAの登場で、Gadgetやウィジェットの注目をあつめる中、Flashにも大きな役割をあたえる、adobeがその開発環境を提供するのが興味深いです。
ebayに活用されているデモをみました。ピンときてなかったんですが、こんな感じなんやね。

デモ映像：Apollo demo at DEMO 07 conference
サイトと連動するローカルツールとしてはFlickr Uploadrなどを使っていますが、もっとリッチにローカルアプリケーションを作れるようになるわけですね。
eコマース系のサイトはこういった、サイト連動のローカルアプリもつくるのが「当然」の状況がくるかもしれません。

Apollo
Webのスピード感で開発——「Apollo」が注目集める理由
アルファ公開したアドビ「Apollo」を早速使ってみた

2006 YouTube Video Awardが発表されました。数多くのアーカイブにある、オリジナルビデオからの選定です。どの作品も非常に完成度が高いです
やっぱり、Most Creativeに選ばれたこれが一番好きだな。すげぇ練習したんだろうなぁ。
にしても、ピングのシャツの坊主頭の動きにキレがあって笑える。リーダーなんだろうか。

windows live Messenger のプロモサイト。
ゴールデンメッセ劇場
監督名や予告編の中に入る文字。作品名もすべて編集できます。ちょっと試してみた。
制作はバスキュールさんとのことです。

「Julian Red　2006年秋冬コレクション」
9編の映像とBGMの組み合わせですが、同じPVを逆走させたり、非常に自然にクールにみせています。

ブログのデザインを変えて、モブログツールも変更しました。
MTmailというものにしました。
MTでの設定は別途、投稿用アカウントを発行し投稿の認証を行うなど、少々設定がややこしかったのですが、マニュアルは丁寧です。モブログから動画を送ることができますし、レイアウトも工夫できるなど、なかなか高機能のツールです。前エントリーの動画はMTmailでアップしました。

Wiiを買った目的にOperaブラウザがついている事が大きな要素だったのですが、現状お試し版のOperaが4月に正式版として出るとの事。正式版では、

検索機能が追加
2台目以降のWiiリモコンのカーソルも表示される
ツールバーを消去できる機能を追加
動作速度の改善を施し起動時間を5秒以上短縮できる
ズーム機能とスクロール機能の強化
アウトラインフォント機能
スクロール機能では、Bボタンを押下した後にWiiリモコンを動かした向きと距離に応じてスクロールを行なう機能を実装。また、十時キーによるスクロールも可能となる。
ソフトウェアキーボードでは全角/半角の違いを分かりやすく表示する
「www.」や「.co.jp」といった定型入力の動作も改善するという。

今のお試し版でも、うちの奥さんが子供にミルクをやりながら、見るのに活躍しているようですが、機能改善でさらによくなりそうです。
なお現在無料で提供されているベータ版のOperaは、2007年6月末まで利用可能とのこと。
また金額は5ドル（約600円程度）のようです。
【参考】
Wii's Opera Browser Final Version Delayed to April
【関連ページ】
開発スタッフが語る「インターネットチャンネル」の話
Wiiチャンネル

しばらく、忙しかったのでクローズ状態になっていたブログをようやく復旧させました。
サーバーがどうも不安定でしたので、サーバーも移転！（チカッパにしました）これで安心です。
チカッパはブラウザ上からFTPも出来るのでかなり便利ですね。

MTもバージョンをアップし、ver3.34に変更。
今回はwuさんの「mt.Vicuna」のテンプレートを使用し、スキンはVegaを活用。特徴としては下記になります。
CSSだけでなく、テンプレートファイルも差し替えし、心なしか再構築も早く感じられます。

【mt.Vicunaの特徴】

* XHTML1.0 Strict DTD準拠
* シンプルなXHTML構造
* 表示・再構築が軽い
* SEOを高めるサイト内リンク構造
* 簡単にカスタマイズ可能な専用スキン
* 個人・商用利用可能

過去のアーカイブを上げたり、ブログパーツ関連も追加していこうかと思います。