カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
言葉はグラフィックより大事なインターフェイス
2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操
ポストPC時代のWebで注目している2014年のキーワード
タブレットの販売台数が PC を超えた 2013年第四半期。（スマートフォンは 2011 年で超えています）。スマートフォンやタブレットはもちろん、情報へアクセスするための『ガラス』は、今後ますます増えていきます。2014年は、Web へアクセスするための手段が文字通り多様になるといっても過言ではありません。iPhone をはじめとするマルチタッチのスマートフォンが出回りはじめた頃は『モバイル Web』という言葉が用いられていましたが、これからは『The Web（これが Web）』と言い換えたほうが良いでしょう。PC がなくなることはありませんが、「まずはパソコン版を前提」という考え方はいちはやく拭い去らないといけなくなります。 いつでも、どこでも自分の好きなデバイスから、サービスを受けることが出来るようになった現在。消費者はどこへ向かうのでしょうか。そして、Web を利活用するためのお手
CMS導入前にしておきたい質問
今注目されている Micro CMS 従来は Joomla, WordPress, Drupal, Movable Type 辺りから制作者の肌に合うツールを選ぶ場合がありました。これらは今でも十分に使える高機能 CMS ですが、機能が多過ぎることから、メンテナンス、運営、ワークフローをしっかり設計していないと、複雑で扱い難いものになることがあります。無料から使える小中規模 CMS は出そろった感がありますが、ここ 1, 2 年ほど新しい CMS を幾つか見かけるようになりました。 Pico : 静的ファイルを管理する CMS Dunked : ポートフォリオに特化した CMS Koken : こちらもクリエイティブ向け CMS Leeflets : 1ページサイトを手軽につくる CMS Ghost : Markdown で書けるブログツール Dropplets : こちらも Markdo
Webコンテンツをもう一度考える
MdNが刊行していた雑誌「Web Strategy」第一号に掲載されていた記事を若干調整したものです。2005年の記事ですが、2011年現在にも通じる部分があるので掲載することにしました。 文字数が多いので ePub 版と PDF 版を別途用意してあります。あとでじっくり読みたい方はそちらをご利用ください。 ePub (504k)PDF (655k) 変わったもの変わらないもの インターネットが一般ユーザーにも利用されるようになってはや10年以上になる。10年の間にデータ転送速度は動画を気軽にダウンロードできるほどのスピードになり、有線のパソコンだけでなく携帯電話をはじめとした様々なネットデバイスからワイヤレスでアクセスすることも容易になった。こうしたユーザー側のネットとのつながり方の変化だけでなく、企業側（コンテンツプロバイダー側）のネットの関わり方も変化してきている。ひと昔は名刺に U
複雑をシンプルにしても駄目な場合
「シンプルがベスト」という言葉はデザイナーでなくてもよく使う言葉です。しかし、すべてをシンプルにしてしまえば良いというわけではありません。シンプルの反意語で「複雑」という言葉があります。しかし、英語の「Simple」の反意語には「Complicate」と「Complex」という２つの言葉があります。いずれの単語も日本語にしてしまうと「複雑」になってしまいますが、使い方が違います。そして、「Complicate」をシンプルにするのと、「Complex」をシンプルにするのは意味が異なります。 「Complicate」は込み入ったものや困難という意味がありますが、「Complex」は幾つかの部品からなる複合体、入り組んだという意味が含まれています。共に複雑に構成されている可能性がありますが、必要なもので作られた複合体（Complex）だとしたら、シンプルにするのは難しいです。つまり、「Compl
情報の流れの変化を意識したウェブ戦略
左にあるスライドは、私がよく講演で使う図です。１つ目のスライドが今まで利用者が Web サイトへアクセスしてたのが、Web サイトの情報が直接利用者のほうに届けられるようになったということを示しています。例えば RSS のような情報をポータブル化出来る技術がそうですし、Netvibes のようなマイページと呼ばれる種類のサイトもそうです。 ２つ目のスライドは、Web サイトへアクセスしなくても人が集まるところに情報が届けられていることを示しています。そして、その情報が多くの人々によって共有されたり、コミュニケーションのきっかけにもなっています。Facebookで企業が情報配信しているのがひとつの例でしょう。Compete Inc の調査によれば、Web サイトへのトラフィックは Google より Facebook からのほうが多いそうです。Pew Internet Research のレ
Webデザインがつまらなく見えてしまう理由
魅力が伝え難いWebデザイン Webデザインを説明するのは非常にやっかいです。このサイトでも何度も取り上げては書き続けていることですが、上手く説明しきれていない部分は少なくありません。 最近よく感じることが Web サイトの魅力を伝えるのは難しいということと、そもそも「魅力・良さ」という部分も人それぞれであるという点です。いろいろな意味が含まれていると思いますが、Web における「魅力・良さ」は、見た目や動きに集約されることが多いです。 ときどき、Webデザイン専門学校の先生とお話をすることがありますが、HTML の勉強をずっとしてても、最終的に出て来る作品がフルFlashということがあるそうです。当然 Flash サイトが魅力的ではないわけはありません。良い Flash サイトもたくさんあります。学生さんが Flash を選んだ気持ちも分かります。パッと見たときの魅力やインパクトは Fl
WCAN 2009 Winter で紹介したサイト一覧 : could
インターネットテクノロジー WCAN 2009 Winter で紹介したサイト一覧 12月19日、名古屋で開催された WCAN 2009 Winter では、今年を象徴するサイト、制作においてインスピレーションになるサイト、そして来年の行方を想像させてくれるようなサイトを紹介しました。合計70サイトを駆け足で紹介したので、会場にいる方は少々混乱してしまったかもしれません。以下のリストを参考に今後の勉強に役立ててください。 Windows 7 UX Guideline Introduction to Apple Human Interface Guidelines 日本語版 OS X Reference Library iPhones Human Interface Guidelines Android UI Guidelines Chrome OS UX Guidelines One La
今のデザイナーに必要な10のスキル
見た目だけを考える仕事をしているわけではないという意味も含めて、「デザインする人」という肩書きのようなものを名刺に入れています。デザイナーと書くと、『外側』を作るというイメージのほうが強いかもしれないので、わざとそう書いています。両方とも意味は同じのはずですが、日本語で書くとちょっと印象が違うような気がします。どちらでも良いと思いますが、こう書くことで私自身は意味を重く受け止め、足りないことが多いですが、日々精進するきっかけになります。 最近デザインという言葉は考え方や仕事の仕方などあらゆるシーンで使われるようになってきました。ではデザイナーはどうでしょう。デザインと同じように意味が広がってきているのでしょうか。 Fast Company の「Beyond Design, 10 Skills Designers Need to Succeed Now」という記事でこれからのデザイナーに必要
UXに関するよいお言葉 : could
UCD言葉 UXに関するよいお言葉 最近見つけたおすすめブログは、inspireUX というユーザー・エクスペリエンスやデザインに関する言葉を引用されているシンプルなサイト。まだ始まって２ヶ月くらいしか経っていないですが、様々な職種の方がそれぞれ独自の視点と言葉でデザインについて語っています。引用をインデックスカードに印刷出来そうな小さめの画像も用意してある気前の良さ。Webデザイン関連の言葉も多く、短い言葉ですがインスピレーションになるものも多いです。今回はその inspireUX で見つけた印象のある引用を幾つか紹介します。 Dan Saffer (Adaptive Path): インタラクションデザインは単に問題解決のためだけではなく、より良い人々の関係を促進するためにも存在する。人と人を繋げるための良い方法をつけることが世界をもっと良い場所にすることにも繋がる Aaron Gust
デザインに関するよいお言葉 : could
デザイン言葉 デザインに関するよいお言葉 以前、UXに関するよいお言葉という記事で、様々なデザイナーが残した UX に関する言葉を引用しました。今回はネット上で見つけたデザインに関する様々なメッセージを紹介します。 Edwin H. Land クリエイティビティに必要な側面のひとつに「失敗を恐れない」がある。 Saul Bass デザインとは考えを視覚化することである。 MetaDesign 深みのない美しさは、単なるデコレーションである。 Josef Albers デザインでは、1+1=3 になることがある。 Paul Rand すべてがデザイン。すべてが！ Frank Lloyd Wright 形態は機能に従うとは誤解である。形態と機能は一心同体で密接に繋がっている。 Steve Jobs デザインは見た目や感覚的なものだけではない。デザインとはいかに機能するかである。 Joel Sp
サイト制作に便利なOmniGraffleステンシル : could
UIワイヤーフレーム サイト制作に便利なOmniGraffleステンシル 制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で
デザインが失敗してしまう理由 : could
「アート・オブ・プロジェクトマネジメント ―マイクロソフトで培われた実践手法」「イノベーションの神話」の作者として知られている Scott Berkun氏は、現在も執筆活動だけでなく講演やブログなど情報発信を絶え間なく行っている方です。そんな彼が先日「なぜデザイナーは失敗するのか」という刺激的なタイトルのレポートを掲載しました。詳しい内容は UIE13 で話されたそうで、スライドの PDF 版をダウンロードすることが出来ます。 デザイナー、プロジェクトマネージャ、プログラマーなど様々な役職の方300名を対象に調査 (そのうち 35.2% はデザイナーで、49% はチームを管理したりリードする方)。41の質問に対してデザイナーが失敗すると思うものを1〜5のスコアを付けるというアンケート。詳しくは記事を読んでいただきたいですが、平均スコアが高かったのは以下の10項目。 デザインをしない方がデザ
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
サイドバーの行方 : could
サイドバーはブログが広まる前から存在していたコンポーネント。メインコンテンツ以外の情報を上部に載せることが出来るので、多くのサイトでサイドバーが採用されています。実装も簡単に出来ますし、３カラム、４カラムと増やすことも出来るわけですが、実装の敷居も低いのでただの賑やかしになってしまいがちの部分でもあります。情報の配置の仕方によって、情報が活かされるときもあれば、そうでないときもあります。サイドバーもメインコンテンツ以外の情報を放り込む場所ではなく、的確な情報が載る場所として扱わなくてはいけません。 ブログのサイドバーで必要なもの サイドバーによくある情報は 最近のエントリーリスト 最近のコメントリスト アーカイブリスト カテゴリリスト タグクラウド Feed をはじめとした購読ボタン ウィジェット諸々 アクセス解析やサイトコンセプトによってサイドバーの使い方も変わってきます。このサイトは
コメントを残す8タイプの読者
「コメントリストで考えられるパターン」では、ブログのコメントリストの見せ方から読者との関係を良いものに出来るかを考えて行きましたが、今回はもう少し突っ込んで読者にスポットを当てたいと思います。読者と一言でいってもブログに訪れる方は実に様々です。住んでいる場所も職種も年齢もすごく幅の広いです。それゆえ明確な切り分けは出来ませんが、コメントを残す方はある程度決まっていると思います。 もちろん人間なので、そのときのムードやちょっとしたことがきっかけで変化すると思うので明確な区別は出来ないですが、８つのタイプの方（もしくはモードになった方）がコメントを残したりコメントを残す可能性を秘めています。 友達・同僚 その人を個人的に知っているから読んでいる方も少なくないです。たとえ日常を書いた日記でもおもしろく読めるのは、文字だけでは伝わらない何かを読み取ることが出来るからかもしれません。今でも mixi
カテゴリとタグを上手に使い分ける : could
CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yasuhisa.com/could/entries/001190.php