About
ユーザインタフェース 使いやすいように、 わかりやすい画面に、 間違えにくいように、 美しい情報デザイン、 丁寧な説明。 すばらしいユーザインタフェースができた。 ユーザエクスペリエンス しかし、そのATMは少し時間がかかった。 結果的にお客さんは並ぶことが多くなった(気分を害す、イライラ)。 「お金を引き出す、預ける」という銀行の体験は悪くなってしまった。 解説(UIからUXが重要と言われようになった理由) この場合、良いユーザインタフェースを設計できたとしても、並んでしまうことを問題として扱わなくなる。ユーザインタフェースの設計としては、最高のATMを提供することはできるだろう。しかしユーザエクスペリエンスからみると、最高の預金・引出体験にはらない。つまり、最高のUIを提供しても、ユーザの問題を解決したことにならない。だから「ユーザの体験という視点からUIを設計していこうよ!」という流
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 1.やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレイアウトになったときに、サイドバーを縦1列に並べるというものです。 また、メインコンテンツの高さが、サイドバー(上)の高さより低い場合でも、サイドバー(下)がメインコンテンツ側に回り込まないようにします。 さらに、各レイアウトは固定・リキッドのいずれも実現し、レイアウト全体はセンタリングさせます。 上記のレスポンシブWebデザインのサンプルを作るにあたってウェブを検索したのですが、同様のサンプルが
デザイン勉強会2nd 第二部 デザイナーたちの「すごいやり方」 1. 第2部 パネルディスカッション デザイナーたちの「すごいやり方」 司会 田口 パネラー まめこ ハマダ シラサカ ショウ2009年11月12日木曜日 2. 仮案件の内容2009年11月12日木曜日 3. 店舗設定 業種:カフェ 店名:MOCA 住所:渋谷某所 概要 渋谷にあるカフェ。 20代∼30代の人に人気があり、 店内にはボサノヴァが流れ、 ゆったりしたソファでくつろぎながら、 自家焙 で世界のコーヒーが飲める。 音楽はインスト多め または jazzやボサノヴァ2009年11月12日木曜日 4. 参考店舗(渋谷カフェamber) 業種:カフェ 店名:MOCA 住所:渋谷某所2009年11月12日木曜日 5. ワイヤー フレーム (レイアウト) ある程度、 文章も仮で 決めました。2009年11月12日木曜日 6. 予
Several parents, grandparents, and even teachers consider smartphones to be negatively affecting the education of students. However, they are not that bad if used wisely. Many apps are out in the market that can be worth the time spent for them. Choosing them can even simplify the life of students. Additionally, there are apps related to betting sites that can provide entertainment and potentially
本当は書くの嫌なんですが、あえて突っ込んでみました。 こういうのは個人的考えを出し合って理解を深め合った方がより良いと思ったためです。 前回は、UXデザインという切り口で書きましたが、ふわっとした印象のUXについて、個人的に重要としている点を挙げていきます。UXの根本的なところは色んな所で書かれてますので、UXとはなんぞや?というようなモノは省きます。 まず前提として、UXは「体験や感情」という人の本質部分の背景的な考察、 更に「不変的な事実」、そしてフロントの「UIへの適用」が重要ファクターだと考えています。 これらを掘り下げて説明する能力も無いわけですが、我々が慣れ親しんだ部分で言うと、 わかりやすいところ以下の3つがあるかと。 1. 今までの体験 「今までの体験」という点をデザインに取組む、これは「デザイン」の原点的なモノだと考えています。 以前にも書いたんですが、デ
上の図は、UX デザインに関連する00年代の時代背景をまとめたものである。この10年間を思い出しながら、インターネット技術の潮流、共有された思考のモード、デザインに関するキーワードをざっと並べてみた。 00年代初頭、Web サイトというメディアが成熟期に向かう過程で、インフォメーション・アーキテクチャ(IA)という分野の価値が高まっていく。IA/UX という表記の通り、この時代の UX デザインの捉えられ方は、IA の概念と表裏の関係にあった。つまり、正しい情報設計のためにユーザー中心の思想で設計を行う、といった意味合いで使われることが多かった。 00年代後半にさしかかると、今度は利用者自らがコンテンツを生成するという、ユーザー体験の変化が起きる。またモバイル端末の環境が整い、数多くの Web サービスやアプリケーションが作られた。 こうした流れは、ユーザーインターフェース(UI)の単純化
2012年10日6日は、神戸ITフェスティバルの講演に続いて CSS Nite in KOBE でも登壇しました。神戸での記念すべき第一回目ということで、技術話がほとんどない働き方をテーマにした話題が中心でした。私のセッションは、終わりなき Web の旅と題して、予測不能でトレンドも目まぐるしく変わる Web の世界で変わらないもの、目標にできるものを紹介しました。 再考 Progressive Enhancement 今頃「Progressive Enhancement」なんて言葉を使うなんて古いと考える方もいるかもしれません。不幸にも日本語で最適な表現がなく、カタカナ表記でプログレッシブ エンハンスメントとしてもピンと来ないのが、言葉のもつ意味が浸透しないひとつの要因ではないかと考えています。例えば、昨年からよく耳にするようになったレスポンシブ Web デザインにしても、Progres
レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。 This Is Responsive レスポンシブ デザインのパターン レスポンシブ デザインのリソースとニュース レスポンシブ デザインのパターン まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。 Responsive Patterns 下記にいくつかピックアップしました。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
ニュースと言うわけではないですが、ちょっと話題になっていましたので、まずはこちらをご覧下さい 「Stores.jp」でストアを開設した人は特定商取引法違反になるのか? (NAVERまとめ) 確かに気になってた部分ではありましたが、代行で責任を負ってくれるのかな? と言うことでスルーしていました。 よくよく考えてみれば、受注も発送も利用者が行う以上、代行も何もあったもんじゃなかったですね。ごめんなさい。 (現在は利用者の情報を掲載できるようになっていますが、対応しているところ少なすぎませんか?) 今回は「だから特定商取引法について周知しよう!」と言う話ではなく、こう言う「もしかすると起こり得て当たり前だった」理由を改めて考えてみたいと思います。 何度と無く同じことを書いていますが、原因の一つは「圧倒的な説明不足」にあると思うのです。 最近のサービスにおけるデザイン性や傾向なんかも考えながら、
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く