コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
プロメテウス : could
映画 プロメテウス SFアクション映画のように見られてしまう映画ですが、人間性と破壊と創造いう大きなテーマと掲げています。不可解さを不可解と受け入れるか、それともひとつのテーマを伝えていると感じ取るかで評価が分かれる映画です。 このレビューは、映画の内容に触れている部分が幾つかあり、中には結末に関わる重要な要素も含まれています。未鑑賞の方は読まないでください。 映画「プロメテウス」を鑑賞して最初に感じたのが、マーケティングを誤ったようにみえた点です。Web を活用したバイラルキャンペーン自体は非常に面白かったですが、こうしたマーケティングを通して「面白そうなSFモンスター映画だ」と感じた方もいるはずです。初代「エイリアン」の直系の序章ではないとされているものの、同じ世界での物語であること、そして多彩な異型物が登場することから、ビジュアル的に楽しめるエンターテイメント映画と考えた方もいるでし
触れる・動くによって変わるデザインプロセス
5月26日、青森にて今後のWebサイト制作との向き合い方というイベントが開催されました。今回は これから求められるWebコミュニケーションスキルと題してプロトタイピングの基礎を解説しました。 CSS Nite in TAKAMATSU のとき「静的なカンプは過去の手法」と話しましたが、ではどうしたら良いのかを考えるキッカケとして本セミナーは参考になったかと思います。 「とりあえず見せて」の解釈について 人は誰しもアイデアをもっていると思います。 自分の頭の中ではハッキリしていたとしても、人に伝えることが出来なければアイデアは活かされることはありません。アイデアはどうすれば伝えることが出来るのでしょうか。 「話せば分かる」という言葉がありますが、そう簡単にはいかないのが現実。同業者で同じような知識を持っていたとしても、同じ言葉が違ったふうに解釈される場合があります。 Webサイトデザインのア
ニュースの理解が深まるタイムツリーコンセプト
リアルタイム時代に必要なニュースUI 新聞サイト・ニュースサイトは、基本的に「記事」という情報の単位をもつことを前提にしています。そして、記事という単位を時系列やテーマ（カテゴリ）別で表示できるように CMS でコントールしています。こうした見せ方は情報サイト全般で扱われていますが、今のニュースのスピードや Web 利用の変化と照らし合わせると、記事という情報単位があまりにも大きく柔軟性が乏しく感じることがあります。現在のニュースサイトのコンテンツに起こっている現象が幾つかあります。 速報ですら記事にしないといけないので、200文字程度のページが存在する 記事というタイトルとテキストを必要とする『入れ物』があるため、テキストだけ、ビデオだけ、写真だけといったコンテンツタイプの格納がしにくい ソーシャルメディアでブレイクしたニュースに追いつけない ニュースサイトのリアルタイムと、人が体感する
スライドにプレゼンをさせないようにしよう
John Bohannon & Black Label MovementDance Your PhD Use dancers instead of PowerPoint. That’s science writer John Bohannon’s “modest proposal.” In this spellbinding choreographed talk from TEDxBrussels he makes his case by example, aided by dancers from Black Label Movement. 生物学者の John Bohannon が、今年の TEDxBrussels で少し変わった講演をしました。TEDの講演は PowerPoint や Keynote をはじめとしたプレゼンテーションツールを活用して話さることが多いですが、彼の講演はス
WD101: モニターの外をデザインするのが大半である
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない Webサイトをデザインするといっても、スケッチブックに描いたワイヤーフレームを基にグラフィックツールで装飾をすれば完成するわけではありません。たとえ、見た目がよくても操作がしにくい、読み難い、何処になにがあるのか把握しにくいのであれば意味がありません。つまり外観を作るというのはデザインプロセスのほんの一部でしかなく、それ以外のことを考える必要があります。 見た目だけではデザインが完結しない・・・という意味では、Web デザインはグラフィックデザインというより、プロダクトデザインに近いでしょう。プロダクトデザインも単に絵が描けて、美しいフォルムを作れば良いというわけではありません。プ
未来の仕事はゲーム化する
以前から、人の「楽しむ」という感情を理解し、その感情を助長することができるゲーム的な要素をアプリやサイトに取り入れることは有効な手段であると解説しています。しかし、ゲームの要素は foursquare がバッジシステムを取り上げる前から様々な場所にありましたし、Web の世界だけでなく、私たちの仕事にしてもゲーム的な要素はあります。社内外であるコンペやチームになって仕事を完成させるというプロセスはゲームそのものといっても良いでしょう。 今後私たちの仕事スタイルはよりゲーム的になっていくのでしょうか。 例えばタスクに応じてポイント制にするとどうなるでしょう。今まで時給制といった時間で報酬金額を換算する方法から、ポイントから金額を換算するという考え方が出来るようになります。バッジのようなシステムを取り入れることで、その人が何に対して信用度が高いのかというのも視覚化され、コラボレーションの促進に
ソーシャル・ネットワーク : could
映画 ソーシャル・ネットワーク Facebook というデジタルの社会ネットワークを中心として、様々な社会ネットワークに住んでいる私たちの現在を登場人物と巧妙なシーン構成で見事に具現化した映画。2度3度見ると新たな発見や、象徴化されたシーンを見つけることが出来ると思います。 もしこの映画を Facebook が出来るまでの話、そして米国 IT 業界の裏側が知りたいと思って見たのであれば落胆してしまう映画かもしれません。映画『ソーシャル・ネットワーク』は Facebook や実在する方達の名前が登場するノンフィクションのようなフィクション（物語）を語っているだけのように見えると同時に、象徴的な設定やシーンが多い映画でした。 私たち人間は「地位を築きたい」「他人から認められたい」「誰かからの賛同・賞賛を聞きたい」という欲望をもっているかと思います。これらの欲望は Facebook という SN
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
様々な意味をもつWebサイトのスピード
「UXの測定要素」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。 例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる＝遅い」と感じるでしょう。「２つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか
bingのデザインアプローチについて
６月に公開された Microsoft の新しい検索サービスbing。先日 comScore が発表した検索エンジン市場の調査報告書によると、7月が公開月に比べてシェアが 5% 増だったそうです。公開されたばかりということもあり、試しに使っているという方も少なくないでしょう。今後どうなるか分かりませんし、吸収する形になるであろう様々な Yahoo! 検索の技術がどのように bing に影響を及ぼすかが注目です。特に自分の検索エンジンが作れるプラットフォーム BOSS や、セマンティック検索を可能にする SearchMonkey は何かしらの形で bing で移植してほしいところです。 技術的な面で今後の動向が気になる bing ですが、Google やYahoo! Search といった今までの検索サイトと異なるデザインアプローチをとっている点で私は注目しています。トップページを見るとわかり
デザインに関するよいお言葉 : could
デザイン言葉 デザインに関するよいお言葉 以前、UXに関するよいお言葉という記事で、様々なデザイナーが残した UX に関する言葉を引用しました。今回はネット上で見つけたデザインに関する様々なメッセージを紹介します。 Edwin H. Land クリエイティビティに必要な側面のひとつに「失敗を恐れない」がある。 Saul Bass デザインとは考えを視覚化することである。 MetaDesign 深みのない美しさは、単なるデコレーションである。 Josef Albers デザインでは、1+1=3 になることがある。 Paul Rand すべてがデザイン。すべてが！ Frank Lloyd Wright 形態は機能に従うとは誤解である。形態と機能は一心同体で密接に繋がっている。 Steve Jobs デザインは見た目や感覚的なものだけではない。デザインとはいかに機能するかである。 Joel Sp
Firebug用リファレンスツール「Firescope」
サイト構築の際、欠かせないツールのひとつといえば Firebug。JavaScript を使ったウェブアプリケーションのデバッグだけでなく、サイトデザインをしている方にとっても便利なツール。テストの際、レイアウトが崩れていたとしても Firebug で調べればだいたいのことは解決します。この Firebug のコンパニオンツールが Firescope です。 Firescope は、Firebug 内で CSS/HTML のタグの意味や使い方をチェック出来るツール。インストール後、Firebug のパネルに新たに「Reference」というタブが追加されます。HTMLビューや「調査」の際に選択したタグと下階層にあるタグの意味が Reference に表示されます。最新のブラウザだけですが、その場でサポート状況も見れるのは便利です。もっと詳しく知りたい方は提供元の Sitepoint のペー
Ask Twitter: 使っているサイト制作ソフトは何ですか？ : could
仕事意見 Ask Twitter: 使っているサイト制作ソフトは何ですか？ エディタは何度か放浪しながら、そのときのワークフローに合ったものを使っています。今でもメインは相変わらず skEdit ですが、サイト管理の機能がとても良い Coda も併用しています。Coda はまだまだエディタとしては物足りないですが、バージョンが上がる度に良くなってきていますし、1.6.1 に導入された プラグイン でどれだけ多くの開発者の協力を得ることが出来るのかが今後の鍵でしょう。 また、CSSEdit を開発している MacRabbit が Expresso という本格的なエディタを開発しているのも見逃せません。こちらも Sugars という拡張機能が備わっており、カスタマイズ性も高いです。 そんなにエディタ変えてコーディング面倒そうと感じる方もいるかもしれませんが、コードのスニペッツの多くは Text
何処で何を投稿していますか？
今年の4月で11年目になるこのサイト。昔は個人的な日記, リンク, 記事, 一言メモなど何でもこの場所に書いていたわけですが、ソーシャルメディアが普及したことによってその現状も変化してきています。2年くらい前までは個人的な日記を mixi や Vox で書く試みをしましたが、今は一言ちょっと書く程度ならすべて Twitter に移行しています。気になるリンクは delicious に保存していますし、興味深い画像が見つかったら Tumblr へ貼付けています。 記事を書く場所も分散してきています。もちろんメインでこちらで書くことは変わりませんが、このサイトにフィットしない内容もあるので、それらは別サイトで執筆しています。greenhug, builder.com, Web担, マイコミがその例になります。 気軽に書く場所も、真剣に書く場所もたくさんあるのは素晴らしいことであると同時に混乱も
Twitterを使った社会活動 : could
様々な使い方や機能をあらかじめ提供している他サービスとは異なり、Twitterは大変シンプルなサービス。こうした機能を最小限に削ぎ落としたサービスは「こういうことが出来る」という明確な使い方が提示しにくい故、使い始めに苦労する場合もあります。明確な使い方がないのは同時に、工夫次第で使い方はいろいろあるわけです。英語圏で利用している方は多いので、リーチ出来る数も多いですし、ほぼリアルタイムでの対応が出来ることから、口コミやサポートのツールとして Twitter アカウントを持っている方も少なくありません。 また Twitter API を利用することで、具体的な使い方を提示出来るサービスをつくることも可能です。先月の Web Directions East で講演した Dan Cederholm も Twitter API を使って Foamee というサービスを立ち上げています。サービスの
デザインが失敗してしまう理由 : could
「アート・オブ・プロジェクトマネジメント ―マイクロソフトで培われた実践手法」「イノベーションの神話」の作者として知られている Scott Berkun氏は、現在も執筆活動だけでなく講演やブログなど情報発信を絶え間なく行っている方です。そんな彼が先日「なぜデザイナーは失敗するのか」という刺激的なタイトルのレポートを掲載しました。詳しい内容は UIE13 で話されたそうで、スライドの PDF 版をダウンロードすることが出来ます。 デザイナー、プロジェクトマネージャ、プログラマーなど様々な役職の方300名を対象に調査 (そのうち 35.2% はデザイナーで、49% はチームを管理したりリードする方)。41の質問に対してデザイナーが失敗すると思うものを1〜5のスコアを付けるというアンケート。詳しくは記事を読んでいただきたいですが、平均スコアが高かったのは以下の10項目。 デザインをしない方がデザ
カテゴリとタグを上手に使い分ける : could
CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタ
体験そのものを製品として売る
今月初めに開催されたアップル開発者向けカンファレンス WWDC 2008 では、日本で 発売も決まった iPhone 3G の話題で持ち切りでしたが、個人的に気になったのが次期 Mac OSX にあたるコードネーム「Snow Leopard」。Mac OSX 10.6 という位置付けのようですが、今回は目に見えて分かるような新機能はなく、64-bit サポートや OpenCL のような開発者にとって嬉しい技術の実装が中心。開発者でなければ具体的にどういったメリットがあるのか現時点では分かり難いです。 もちろん、利用者にとっても快適で安定したパフォーマンスが約束されると思いますが、新機能がないのに次期 OS としてリリースするのは今までにないケース。MSっぽく「Leopard SP1」というわけにはいかないでしょうけど、スタンスとしては似ているような気がします。最も新しいバージョンである「L
最近使ったアプリを Stacks に置く方法
QuickSilver ユーザーにとって Dock にすべてのアプリケーションを放り込んでおく必要はないわけですが、時にはマウスで操作したほうが早い場合もあります。 最近使ったアプリケーションはまた立ち上げたいと思うことも少なくありません。[アップルメニュー > 最近使った項目] からアクセスすることが出来ますが、結構面倒だったりします。そこで最近使ったアプリケーションを自動的に保管してくれる Stacks を作っておくと便利です。 [アプリケーション > ユーティリティ] にあるターミナルとを立ち上げて以下のコマンドラインをコピー＆ペーストして [return] キーを押します。 defaults write com.apple.dock persistent-others -array-add '{ "tile-data" = { "list-type" = 1; }; "tile-t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
