Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「メタファー」と呼びます。 メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。フロッピーディスクアイコン (保存)のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。 メタファーが作り出す

アプリケーションに必ずあるコマンドのひとつに「保存」があります。このメタファーとしてフロッピーディスクが長く採用されています。採用された当時は「フロッピーディスクのアイコンがあるから何かを記録するものだろう。よってこれは保存するという意味だ」と関連づけすることが出来たと思いますが今はその逆で「保存をするには、このアイコンをクリック」という認識になっているかと思います。 フロッピーディスクが姿を消してしばらく経ち、知らない人も多いのにも関わらず、このメタファが使われ続けられているのも、ひとつの理由として、アイコンが意味を示すものではなく、意味を示すためのアイコンになり、広く認知されているからかもしれません。Office 2007やGoogle Docsのような比較的新しいアプリケーションでもフロッピーディスクでも採用されているのも、そのひとつの表れでしょう。 Apple製のアプリケーションだ

昨日から始まった Mac のシェアウェアキャンペーン MacHeist 3。今回も魅力的なソフトが幾つかありますが、購入を迷っている方のためにお勧めのソフトを幾つか紹介していきます。1,2つくらい欲しいのがあれば十分元はとれるので購入を検討してみてはいかがでしょう。 Webデザインをしている方なら LittleSnapper は入手しておきたいソフトのひとつです。スクリーンキャプチャが出来るソフトですが、特にウェブサイトのキャプチャするのに特化しています。私も今年のはじめから使い始めているのですが、今までコレクションする場所に困っていたスクリーンショットの数々が一カ所にまとまっていい感じです。 今見ているサイトをショートカットキーで撮ることが出来、ビューエリアだけでなくページ全体をキャプチャすることが出来るようになっています。キャプチャした際に自動的に URL を保管してくれるだけでなく、

MacHeist 3にはウェブサイト制作にや役立ちそうなアプリケーションが幾つかありますが、違う系統で興味をひいたのが SousChef というレシピ向けのアプリ。単にレシピを書き込んで整理するだけでなく、材料を買ったり作るときに便利な工夫が幾つかなされています。 レシピに書き込まれた材料の分量は人数分 (yield) を変更することで自動的に変化するようになっています。アメリカ製のアプリなので用意されている単位が oz や gallon と分かり難いですが、こうした単位も自分で加えたり、自分のオリジナルの単位も作ることが出来ます。ひとつの材料がなくても、他の材料でどうにかなる場合がありますが、代わりになる材料のリストもあらかじめ作っておくことが出来、料理の際はあるもの材料で作ることも簡単に出来そうです。 買い物の際は、作るレシピを「Grocery Lists」へドラッグ＆ドロップすると、

Office Labsでは、Microsoft Officeの使い方を変えるかもしれない興味深いプロトタイプを幾つか公開しています。映像や画像だけのコンセプトもありますが、実際ダウンロードして使うことが出来るのもあります。情報の見せ方でありそうでなかったものが、OneNote用のアドオンソフト「Canvas for OneNote」です。OneNoteで作成したすべての文書を一望することが出来ます。 漠然な全体像を把握することが出来るズームインターフェイスは、他のアプリケーションにも採用されているので、それ事体は珍しくないのですが、何を強調したいのかを自分で決めることが出来るという点が今までにあまり見かけなかった形でしょうか。情報を好きな場所に置くという観点では付箋ソフトがその代表ですが、それともまた少し違いますね。 情報の探し方も利用した日付から探し出すのみに絞られており、キーワードや文

ウェブサイト制作でもプロトタイプを作成する機会が増えてきたと思います。しかし、プロトタイプ一言でいっても様々な方法で作ることが出来ます。今まで様々な種類のプロトタイピングを紹介したことがありますが、どの方法を使った方が良いか迷うところです。短時間で作れるかどうかだけでなく、誰と共有するのか、変更がしやすいか、完成品とどれくらい近づけるのかなど考慮したい項目は幾つかあります。Adobe Dev Center の「Industry trends in prototyping」という記事では、プロトタイプのメリットだけでなく、よく使われているプロトタイピングも紹介しています。この記事も参考にして、幾つかあるプロトタイピングの長所・短所を考えてみました。 紙のプロトタイプ すぐに作れるメリットはあるが、完成品と使い勝手が異なるだけでなく、再利用も難しい クリック可能なスクリーンショット PDFなど

Wikiはポテンシャルがあるシステムではありますが、あまり好例がないのが現状です。様々な情報をインプット出来るという意味で、特にニュースサイトで使える可能性があると思います。以前「使えそうなニュース特集ページを考えてみました」で、ニュース記事に Wiki を付随することで、専門用語の解説や他のイベントとの関連性を読み取ることが出来るのではと提案したことがあります。Wiki とジャーナリズムが組合わさっている例としてウィキニュースがありますが、最近見つけた GiantBomb はひとつおもしろい試みを行っています。 最近日本でも発売された Fallout 3 に関する紹介ページをご覧になると他のゲームニュースサイトと少し違うのが分かります。ゲームのレビューは GameBomb 編集者によって書かれた記事が大きく掲載されていますが、ゲームの概要はすべて Wiki ベースになっています。ユーザー

イノベーションプレゼン講演 Shift2で不況とイノベーションについて話しました 撮影: 飯田昌之 先日 CSS Nite のスペシャルイベント Shift2 が、デジタルハリウッド東京本校で開催されました。CSS Nite にはよく講演させていただいているイメージがありますが、実は今回のが今年で最初で最後でした。当初はスピーカーとして参加する予定ではなかったのですが、20分の講演をさせていただきました。今回は「reset.css: 不況が生み出す新たなウェブの可能性」で不況とイノベーションの関係について話をしました。 元々コードを表記するなど、今すぐ使える Tips について語ることが少ないですが、今回が今までの中で最もウェブデザインから遠ざかったところからウェブデザインの仕事について語ったプレゼンだったと思います。実践的な話が多い CSS Nite で、実践的ではない話をするのはチャレ

UIワイヤーフレーム サイト制作に便利なOmniGraffleステンシル 制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で

iPhoneは、今までとは少し違った使い方や考え方を必要とするデバイスです。Appleらしい使いやすくするための工夫が随所見られますが、だからと言って万人受けするわけでもありませんし、僕のような Mac 使いとそうでない方とでは iPhone の捉え方は随分違います。Create with Contextはデザインリサーチを行っている会社で、iPhone 3G が発売された夏頃に iPhone のユーザーテストを行ったそうです。その結果は SlideShare に掲載されている「How people really use the iPhone」で読むことが出来ます。 iPhoneを聞いたことあるけどほとんど触ったことない方や、聞いたことなくて初めて使う方など、僕のようなヘビーユーザー以外を対象に行われたこの調査。タスク別に調査やインタビューも行われており、iPhoneのインターフェイスで具

7月は青森でセミナーをした思い出に残る月ですが、同時に岩手・宮城内陸地震に遭遇した月でもあります。地震が大嫌いな私にとっては地上14階の地震エクスペリエンスはかなり恐ろしかったわけですが、同時に気付きがある瞬間でもありました。地震が発生した数分後、母からメールが来ました。青森にいることを知っていたので心配してメールをしてくれたわけですが、書き出しが「電話が繋がらないのでメールしました」になっていました。 恐らく携帯電話のネットワークが災害時はパンク状態になって繋がらなかったのでしょう。しかし、ネットではあっさりコンタクトがとれたわけです。メールだけではなく、ウェブサイトへのアクセスも同様です。地震が発生するとネットユーザーは真っ先にウェブに情報をアップしています。例えば「揺れた」「地震」と書き込む人は Twitter だけでも結構います (プライベートモードにしている人も含めたらもっといる

プレゼン講演 10月は3カ所で講演します 特定のトピックに縛られることなく、いろいろな形でプレゼンが出来るのは嬉しいですが、気付いたら 10月は三カ所で話すという忙しい月になってしまいました。ワークショップ後のはじめてのプレゼンになるので、成果を発揮出来たら良いのですが・・・。 WDEとのジョイントイベント 10月１日 19:00 @アップルストア銀座 11月に開催される Web Directions East の協力で「Webデザイナーが知っておきたい情報ワークフロー」というタイトルで話をします。Macに特化したものが多くなりますが、それ以外を使っている方も参考になる話も盛り込んであります パソナテックカンファレンス 2008 10月11日 16:00 @秋葉原UDXギャラリー 「Webに携わるみんなの未来を考える」という壮大なトピックでえふしんさんと対談します。少々大げさではありますが

毎日 35億の口コミ会話がアメリカで行われていると言われています。Keller Fay Group の調査によると、そのうちオンラインで行われている口コミはわずか 7%。実際会って行われる口コミが圧倒的に多く (75%)、次に多いのは電話 (17%) だそうです。SNS やブログなどオンラインにおけるコミュニケーションは多様なものになってきてはいるものの、オフラインの口コミは依然最も強いわけです。 上記と似たような結果は BIGresearch が、15,727人を対象にしたアンケート結果にも表れています。 インターネットを利用して製品やサービスのリサーチをする方はいると思いますが、そういったネットを利活用している方でも、オンラインツールを使うより実際人と会ったときに話したり (72.7%) 電話 (55.0%) やメール (63.2%) で伝える場合のほうが多いそうです。「これが良い！」

プレゼン仕事 改訂版・ヤスヒサ的プレゼン8項目 Designer meets Designers は、久々のプレゼンでしたが、ほぼ合格点の出来だったと思います（来ていただいた方に満足していただいたかどうかは別評価ですが）。今までの反省点を活かして話し方を模索したり、Keynote 4 に登場した新しいアクションを追加するなど、今までと少し違った雰囲気になるように心がけました。もう２年くらい前に「ヤスヒサ的プレゼン」と題して自分が考えるプレゼンのコツを紹介しましたが、今回はその改訂版という位置付けで8項目紹介します。 専用アプリケーションを使う 今は SlideShare のようなサービスもあるので、Web上に公開するために HTML でなくてはならないわけではありません。Keynote や PowerPoint は、プレゼンテーション専用といっているだけあり、プレゼンに特化した便利な機能が

IT (Information Technology) はみなさんにとってどういった意味をもつ言葉でしょうか。効率的に情報を行き来させる技術の総称と説明することが出来ます。「IT革命」という言葉のようにバズワード化してしまった部分もあるので、逆に意味が分からない怪しい領域に見られている可能性もなくはないでしょう。未だに IT 業界と呼ばれるところはどうも別世界に見られているような印象もあります。 技術を見えなくする 技術という言葉があるので確かに技術的なことではありますが、人に使ってもらうものを作るために技術だけで簡潔した例は今までありません。今のケータイ・インターネットの火付け役になった i-mode にせよ、新しいゲームプレーを提案した Wii にせよ、最新の技術を使ったわけでもなければ、ほとんどの方が技術をきちんと理解して利用しているわけではないです。技術中心ではなく、人を注意深く観

従来オンライン上の会話は一元化されていました。例えばフォーラムや掲示板で会話を始めるためのネタが挙り、それに対しての反応がその場に連なっていました。ブログが使われるようになると、フォーラムでの会話だけでなくブログを中心とした会話もスタートしました。簡単にブログを設置することが出来るので会話が一カ所ではなく数多くの場所で発生するようになったものの、ブログにあるコメントやトラックバックによってなんとなく繋がり合っていました。また、TechnoratiやGoogleブログ検索を利用してある程度、会話を追うことも可能です。しかし、現在はさらに会話を追うのが難しくなってきています。 今はブログより気軽に自分の意見を書き込む場所が数多くあります。Livedoor クリップをはじめとしたソーシャルブックマークサービスのメモ機能。Tumblrのようなスクラップサービス。Newsingのようなソーシャルニュ

サイドバーはブログが広まる前から存在していたコンポーネント。メインコンテンツ以外の情報を上部に載せることが出来るので、多くのサイトでサイドバーが採用されています。実装も簡単に出来ますし、３カラム、４カラムと増やすことも出来るわけですが、実装の敷居も低いのでただの賑やかしになってしまいがちの部分でもあります。情報の配置の仕方によって、情報が活かされるときもあれば、そうでないときもあります。サイドバーもメインコンテンツ以外の情報を放り込む場所ではなく、的確な情報が載る場所として扱わなくてはいけません。 ブログのサイドバーで必要なもの サイドバーによくある情報は 最近のエントリーリスト 最近のコメントリスト アーカイブリスト カテゴリリスト タグクラウド Feed をはじめとした購読ボタン ウィジェット諸々 アクセス解析やサイトコンセプトによってサイドバーの使い方も変わってきます。このサイトは

プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex

カテゴリをエントリーのタイプと見なし、それぞれのエントリーに関するキーワードをタグとして書き込むという分類方法は多くの方にとってもしっくり来たといえるかもしれません。しかし、まだ考える余地が幾つかあるといえます。その代表格にあたるのが「タグの役割を考えた見せ方」でも話題になった「Follow-up」という分類。 Follow Up はサブタイプ Toruさん ArticleのFollow Upならば、ArticleとFollow Up。AnnoucementsのFollow Upならば、AnnouncementsとFollow Up。と言う具合に、両方にタイプ付けはどうでしょうか？個人的にはFollow Upは必要無いのでは？ Toruさんが提案しているように、２つのタイプをチェックしておいたほうが良さそうです。また、「Follow Up」のリンクをクリックして、そのタイプのみを読むという

CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタ