Tagged

デザイン

A collection of 255 posts

ソーシャルメディア

キーワード2011: Analyze(分析 / 観察)

キーワード2011 * Empower(元気づける) [http://www.yasuhisa.com/could/article/2011-empower/] * Analyze(分析 / 観察) [http://www.yasuhisa.com/could/article/2001-analyze/] * Talk Now(今すぐ対話) [http://www.yasuhisa.com/could/article/2011-talk-now/] * Fun(楽しむ) [http://www.yasuhisa.com/could/article/2011-fun] 2010 年のキーワードを事例と共に紹介するミニシリーズ。今回は「Analyze」です。Google Analytics のようなツールがあるので、Webサイト制作をしている方であれば馴染みのあるフレーズ。データという単なる数字から意味を見出すのが分析になります。 従来の分析の対象はユーザーを獲得する(

Year in Review 2010
コンテンツ

Year in Review 2010

#a01Webデザインがつまらなく見えてしまう理由 [http://www.yasuhisa.com/could/article/why-webdesign-is-so-boring/] よくも悪くも話題になった記事。批判というより、見た目、機能、効率化の間で悩み苦しむ Web デザインの葛藤のようなものを記事にしました。 記事を読む#a02組み立てるだけのサイト制作プロセスを変えるヒント [http://www.yasuhisa.com/could/article/change-to-publishing-process/] コンテンツがより重要になってくるからこそ、コンテンツからスタート出来るデザインプロセスにしていきたいですし、少しでもそうなるよう努力したいです。 記事を読む [http://www.yasuhisa.com/could/article/change-to-publishing-process/]#a03 私が LOST を愛した理由 [http://www.yasuhisa.com/could/article/why-i-love-lost/] シリーズのエ

UX

インタラクションから生まれる3種類の体験

以前「ところで体験ってなんですか? [http://www.yasuhisa.com/could/article/what-is-experience/] 」という記事で、体験は2つの自己によって形成されていると解説しました。行動経済学者ダニエル・カーネマンによると、今この瞬間を経験する「Experience Self」、記憶を辿る「Remembering Self」という2つの自己が密接に繋がりあい、それが幸せかどうかの尺度にも影響するとしています。つまり、よい体験があったかどうかの判断は、どのようにその出来事を記憶しているかに大きく左右していることになります。 体験の善し悪しを考える上で、ダニエル・カーネマンの提唱する2つの自己は大変参考になります。では、体験をもう少し分かりやすく分類するとどうなるでしょうか。ヒト・モノ・コトと関わり方の違いでも体験の仕方が変わってくるはずですが、どのように分類できるでしょうか。Jodi Forlizzi と Katja Battarbee が共著した文献「Understanding experience in interactive syste

コンテンツ

伝えるための情報デザイン、文章デザイン

私たちは人に何かを伝えたいときに、言葉・絵・音・映像などを駆使して表現します。標識のようにひとつの形式でユニバーサルに伝わることもありますが、そうはいかないことがしばしばあります。このサイトでよく取り上げている「 デザイン [http://www.yasuhisa.com/could/tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/]」「 マーケティング [http://www.yasuhisa.com/could/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%

UI

インターフェイスとしてテキストをみたときに考慮すること

サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter [http://twitter.com/yhassy] をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。 インターフェイスをデザインする際に、考えなければならないことは幾つかあ

UI

メタファーが作り出す期待値と使いやすさの関係

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

デザイン

Q&A: ユーザー側面の変化をどのように促しますか?

> ユーザーを利用者や閲覧者などに分類するのをx軸と考えると、各タイプの成長、もしくは分類の変化をy軸と考えられるのではと思いました。最終的に獲得したいターゲットユーザーにもよりますが、例えば、ECサイトでの観覧者から消費者への変化という風に、各タイプの学びによるステップアップ、もしくは他タイプへの変化は、どういう道程・要因が考えられるかをお聞きしたいです from: CalmTech [http://twitter.com/calmtech] この質問に応えるには、まず全体像を視覚化してみたほうがよさそうですね。X軸のユーザ分類にはユーザーという言葉に潜む5つの側面 [http://www.yasuhisa.com/could/article/five-sides-of-the-word-user/] で紹介したものを活用します。左から右へ向かうにつれてユーザーがより能動的なアクションをとると見なして並べてみました。Y軸には「ECサイト」や「Webアプリ」など幾つかサイトの種類を配置。各種Webサイトがどういった側面をもったユーザに響くのか考えてみました。 例えば EC サイトだ

UX

使いやすいさと認知負荷のバランス感覚

私たちが「使いやすい、直感的」だといっている機器やソフトウェアでも、脳や身体は何かしらの処理を行っています。自分が使いやすいと思っていることも、人にとってはそうではない場合があります。これはリテラシーの高い/低いということで片付けることが出来ることでしょうか。デザインを考えるにおいて「簡単に(気軽に)使ってもらう」ということはひとつの課題であると同時に目標です。 インストラクショナルデザイン [http://ja.wikipedia.org/wiki/インストラクショナルデザイン] は、人がいかに学習するのかを研究しデザインする分野です。Wikipedia では「より良い学習の環境を総合的にデザイン」と書かれているので、教育分野のデザインと考える方も少なくありません。20世紀後半から今世紀になると人の学習の仕方だけでなく、脳がどのように情報を処理するのかにも注目が集まりはじめます。こうした背景から 認知負荷理論 [http://en.wikipedia.org/wiki/Cognitive_load_theory] (Cognitive Load Theory) が登場します。 人

google

Google Font API で手軽に始めるフォント遊び

Say Hello to Google Font API昨日開催された WDE ex -vol9 [http://atnd.org/events/3819] (Twitter TL [http://twitter.com/#search?q=%23wdx]) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API [https://developers.google.com/fonts/] として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API

UX

デザインを知るきっかけを作る Design with Intent

イギリスのデザイナー Dab Lockton [http://architectures.danlockton.co.uk/] 氏が中心になって開発された Design with Intent [http://www.danlockton.com/dwi/Main_Page] は、デザインをより深く考えるのに便利なツールキットです。カードがリリースされたのは今月ですが、プロジェクト自体は 2008 年 [http://architectures.danlockton.co.uk/2008/01/05/towards-a-design-with-intent-method-v01/] から続いている長いプロジェクト。何度か形を変えたり、コンテンツが加わって現在の形になりました。 このツールキットはブレインストーミングやアイデアをつくるための材料として作られたそうですが、ひとつひとつ読むだけでも勉強になります。カードサイズであることから文字数も限られているので、英語でもさらっと読める感じ。101枚あるカードは8つのカテゴリ (視点) に分類されています。ダウンロードページ [http:

デザイン

Webデザインがつまらなく見えてしまう理由

魅力が伝え難いWebデザイン Webデザインを説明するのは非常にやっかいです。このサイトでも何度も取り上げては書き続けていることですが、上手く説明しきれていない部分は少なくありません。 最近よく感じることが Web サイトの魅力を伝えるのは難しいということと、そもそも「魅力・良さ」という部分も人それぞれであるという点です。いろいろな意味が含まれていると思いますが、Web における「魅力・良さ」は、見た目や動きに集約されることが多いです。 ときどき、Webデザイン専門学校の先生とお話をすることがありますが、HTML の勉強をずっとしてても、最終的に出て来る作品がフルFlashということがあるそうです。当然 Flash サイトが魅力的ではないわけはありません。良い Flash サイトもたくさんあります。学生さんが Flash を選んだ気持ちも分かります。パッと見たときの魅力やインパクトは Flash サイトのほうが感じやすいのは事実です。勉強のきっかけは誰か目指したいと思えるロールモデルがいるという場合もありますし、「こんなサイト作りたい」と思える単純な思いからです。見た目がいいものが

UI

ブラウジング型インターフェイスの長所・短所

検索は Web が使われるようになってから続く永遠の課題。技術だけでなく検索結果の見せ方も年々進化してきています。近年、セマンティック Web [http://www.yasuhisa.com/could/diary/cybergarden-semanticweb/] への注目が一層高まっていることから、また検索がおもしろくなりそうな気配です。検索の精度、そして結果を利用者に示すためのインターフェイスへの探求はこれからも続きますし、デザイナーとして興味深い話題のひとつ。 検索(特に検索結果)と少し関係があるデザインパターンのひとつにブラウジング(Browsing)があります。多くの情報を次々を観覧するのに長けているわけですが、最近ブラウジングを採用したサービスや Web サイトをよく見かけるようになりました。 Google Fast Flip [http://fastflip.googlelabs.com/] ニュースサイトをページをめくるような感覚で次々と見ることが出来ます。キーボード操作で次々とページを移動。ローディング時間も含めサクサクCooliris [http://ww

IA

様々な意味をもつWebサイトのスピード

「UXの測定要素 [http://www.yasuhisa.com/could/article/ux-metrics/] 」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。 例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる=遅い」と感じるでしょう。「2つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか。一見、きれいに情報が整理されているページだったとしても目的を達成するために複数のページを横

UX

UXの測定項目を考えてみた

日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビューが上がる、売上が上がるという部分は重要ですが、それだけ体験を測定することが出来るのでしょうか。 UX が重要と分かっていても、言葉に「体験」と付いているが故に、見え難いあやふやな領域のように見え

IA

関係作りとしての IA の役割

IA (Information Architecture) において「関係」は重要なキーワードです。ページを構成する情報と情報との関係、サイト内のページとページとの関係。コーポレイトサイトであれば、メインサイトとサテライトサイトというサイトとサイトの関係も考慮します。これに加え、利用者という別の軸の関係も考慮して情報を組み立てて行きます。こうしたことから、IA の専門家達は、建築、情報科学、インダストリアルデザイン、認知学など様々な分野の知識に長けている方が少なくありません。彼等はその広い知識を活用することで様々な情報と コンテキスト [http://www.yasuhisa.com/could/diary/css-nite-lp7/] を繋ぎ合わせている(関係を作り上げている)といえるでしょう。 近年、情報とコンテキストが多様化し初めています。 情報の種類はテキストから動画まで様々ですし、サイズや扱われ方もたくさん出てきました。また、利用者が情報にアクセスする背景を考えてみると、自社の Web サイトという小さな存在だけでは語り尽くせない状態です。Web がパソコンからの情報だけの

コンテンツ

Year in Review 2009

Twitter [http://twitter.com/yhassy] をはじめたことにより、ブログが減ったという話をよく耳にします。私の場合も記事を書く数は去年より減りましたが、個々の記事のボリュームが増えた印象があります。これは、Twitter をはじめとした他の場で軽めのメッセージや記事が書けるようになったことで、この場所がより明確になったからかもしれません。2010年も引き続き、他ではあまり読めない情報を盛り込みながら「有名ではないけど知る人ぞ知るWebデザイナーのサイト」を目指して行きたいですね。 単純にアクセス数だと「UIデザインガイドラインのまとめ [http://www.yasuhisa.com/could/roundup/ui-design-guidelines/]」や「 今のデザイナーに必要な10のスキル [http://www.yasuhisa.com/could/article/10-skills-designers-need/] 」のようなキャッチーで分かりやすいタイトルの記事が人気ですが、アクセス数が個人的にお気に入りの記事というわけではありません。今年

シンプル

複雑をシンプルにしても駄目な場合

「シンプルがベスト」という言葉はデザイナーでなくてもよく使う言葉です。しかし、すべてをシンプルにしてしまえば良いというわけではありません。シンプルの反意語で「複雑」という言葉があります。しかし、英語の「Simple」の反意語には「Complicate」と「Complex」という2つの言葉があります。いずれの単語も日本語にしてしまうと「複雑」になってしまいますが、使い方が違います。そして、「Complicate」をシンプルにするのと、「Complex」をシンプルにするのは意味が異なります。 「Complicate」は込み入ったものや困難という意味がありますが、「Complex」は幾つかの部品からなる複合体、入り組んだという意味が含まれています。共に複雑に構成されている可能性がありますが、必要なもので作られた複合体(Complex)だとしたら、シンプルにするのは難しいです。つまり、「Complicate」はシンプルにすると良いですが、「Complex」は一概にそうとは言えないということになります。複雑だからシンプルにしたほうが良いというわけではなく、その複雑さがどういった性質のものか判断

デザイン

2009年ベストイントラネットサイト

オーストラリアのコンサルティング企業 Step Two Designs [http://www.steptwo.com.au/] は、2007年から企業のイントラネットサイトで優れたデザインを紹介・分析したレポートを公開しています。詳細な情報を知りたい場合はレポートを購入する必要がありますが、概要であればオンラインで観覧することが出来ます。イントラネットサイトに関する情報はなかなか表に出ることがないので、貴重な情報です。しかも、公開されているスクリーンショットはぼかしがかかっているものではなく、実際動作しているサイトのイメージで掲載されているのも嬉しいです。 優秀サイト一覧はこちらのページ [http://www.steptwo.com.au/products/iia2009/winners-iia2009] にリストされています。CRS Australia のようなオーストラリア国内のものだけでなく、IDEO や IBM のような有名企業もリストされています。オリジナリティ、スタッフへのインパクト、企業利益という3項目を審査対象とし、優秀サイトが選出されたそうです。レポートにはな

デザイン

U2 360° 関連情報まとめ

96,000人を動員した 10月25日の U2 コンサート [http://360.u2.com/]は YouTube でライブ中継 [http://www.youtube.com/u2official] されました。U2好きでなかったとしても一見の価値があったイベントだったと思います。音楽を楽しむだけでもよかったのですが、仕事柄どうやってこのコンサートを実現したのか気になってしまいますね。コンサート中に Twitter [http://twitter.com/yhassy] でも幾つか情報発信していましたが、そこで公開しなかった情報も含めてこちらに一挙公開。いろいろな意味ですごいコンサートでした。 YouTubeでコンサート映像今日の中継を逃した方は別の日の映像なら見れます 1 [http://www.youtube.com/watch?v=FLaLeUaAh-M] 2 [http://www.youtube.com/watch?v=I3Sng0Bl69o] 3 [http://www.

google

Google Waveがもたらす心理の変化

数日前に Google Wave [http://wave.google.com/] の招待状をいただき、いろいろ使ってみました。従来からあるメール、IM、Wiki そして WebEx [http://www.webex.co.jp/]のような Web 会議システムが混ざり合った独特の形といえます。具体的に何が出来るのか知りたい方は、動画 [http://www.youtube.com/watch?v=v_UyVmITiYQ]や記事 [http://www.atmarkit.co.jp/news/200905/29/wave.html] を確認してください。ブレインストーム、レビュー、共同で文書作成などコラボレーションをする際に使えそうな印象があります。 多くのサイトで既に語られている Google Wave

デザイン

知識ではなく知恵を養おう

先日開催された3.4.U [http://www.yasuhisa.com/could/diary/3-4-u/]で、サイバーガーデンの益子さん [http://www.cybergarden.net/] にお会いしました。イベントが始まる前に少し話をすることが出来たのですが、そのとき「知識ではなく知恵を大事にしないとね」という話をされていました。サラッと名言を残し姿を消した益子氏でしたが、よくよく考えてみると仕事においてとても重要な考え方だなと思いました。Webデザインという狭い範囲で考えても当てはまることですね。 他の分野と同様、Webデザインにも幾つかのルールが存在します。検索をすると「すぐ出来る」「知っておきたい」「鉄則」「ルール」あたりの言葉が添えられたノウハウがたくさん出てきますし、書籍も似たような感じです。こうしたルールを示す情報があること自体は重要ですが、これによって本当に「正しいこと」が出来ない場合があると思います。 ルールがある以上、例外は存在します。大まかに「Webサイト」とひと囲みしてもそれぞれ目的や作り方が違うので、ルールに当てはまらない場合は出てきます。

openwebdesign

404ページのデザイン提案【後編】

このエントリーは「404ページのデザイン提案」の続きにあたります (前編 [http://www.yasuhisa.com/could/article/designing-404-1/]) (中編 [http://www.yasuhisa.com/could/article/designing-404-2/])スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。 すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く

openwebdesign

404ページのデザイン提案【中編】

このエントリーは「404ページのデザイン提案【前編】 [http://www.yasuhisa.com/could/article/designing-404-1/]」の続きにあたります。なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。 通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは、読みたい

openwebdesign

404ページのデザイン提案【前編】

Twitter [http://twitter.com/yhassy/status/4492566304]のほうでひっそりと告知しましたが、404ページ [http://bit.ly/z8X7x] のデザインを変更してみました。なぜこんなところから始めたのかというと、サイト制作でいつも後回しになってしまう部分なので考えてみたかったですし、1ページ完結型なので早く形に出来るというのが理由です。いわゆるエラーページなわけですが、「見つかりませんでした」という結果表示ではなく何か補助出来ないかというのがテーマでした。 機械的なエラーの表示の仕方はケアが必要です。多くの利用者はエラーをみると、たとえシステムエラーでそうなったとしても、自分のせいにしてしまう場合があります。メッセージの出し方によっては「何か誤操作をしてしまったか」「そもそも何が起こったの?」「もしかして壊した?」といった感情を引き出してしまう可能性があります。利用者が悪くないのに、悪いと突き出してしまうような見せ方だけは避けなくてはいけません。 専門用語を使ったり、簡略化過ぎるエラーの説明もよくありません(説明抜きにしておも