デザインの解剖 - MEMOGRAPHIX
武蔵野美術大学・デザイン情報学科の学生だった時、「デザインの解剖」というカリキュラムがあった。 デザインの解剖とは、グラフィックデザイナーの佐藤卓さんが独自に行ったプロジェクトで、コンビニやスーパーで売っているような日用品を題材に、ひとつの商品の構成要素を約20項目に分解、それぞれの項目で「どうしてこの部分はこうなっているのか」を、企業の担当者に直接取材して調査するというもの。この基本フォーマットを崩さぬまま、大学の授業としてアレンジしたのが、ムサビ版「デザインの解剖」だった。もちろん客員教授として佐藤卓さんを招いている。 今までに佐藤卓さんが「解剖」した商品は、ロッテ・キシリトールガム、富士フイルム・写ルンです、タカラ・リカちゃん、明治乳業・明治おいしい牛乳など、馴染みのある商品ばかりだ。このプロジェクトは、普段私達が「よく知っている」と思っているものが、実は「よく知らない」ことに気づく
ECサイトのUXデザイントレンド： 追随すべきもの3つと敬遠すべきもの3つ
最新のeコマース調査で明らかになったのは、商品画像が大きくなり、レビューが充実して、割引が使いやすくなるなど、ショッピングサイトのユーザーエクスペリエンスが改善したということである。しかし、新しいデザインは、商品情報の非表示、サイトからの貧弱なフィードバック、カスタマーサービスエリアの情報過密といった問題も抱えている。 Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid by Amy Schade on January 26, 2014 日本語版2014年3月11日公開 最近、eコマースユーザーエクスペリエンスレポートのシリーズをアップデートしているのだが、デザインの改善が見られることに我々は勇気づけられている。その一方、従来からの問題がまだ残っていることや、新たな問題も出てきていることにはがっかりした。 前回のeコマース調査の結果
快適にさくさく作れる、ワイヤーフレーム・モックアップがブラウザ上で作成できるHTML5アプリ -Moqups
Moqupsの特徴 Moqupsの使い方 Moqupsの特徴 ドラッグ&ドロップでエレメントを簡単に配置できます。 約60種類のUIエレメントを用意。 PDF, PNGへの書き出し。 HTTPS対応。 自動保存。 スマートガイド。 カスタマイズ可能なグリッド。 オブジェクトはグリッドにスナップ。 オブジェクトのロックとグループ化。 右クリックで、Undo/Redo/Cut/Copy/Pasteなど。 上記の操作はキーボードでも可。 タグ付けと検索機能 画像のアップロード メールによる共有。 Moqupsの使い方 Moqupsを使うにはとりあえず登録は必要ありませんが、機能が制限されます。 機能の制限はたとえば、書き出しがSVGのみになります。
第45回HTML5とか勉強会「ユーザーエクスペリエンスとペーパープロトタイピング」レポート
第45回HTML5とか勉強会「ユーザーエクスペリエンスとペーパープロトタイピング」レポート 窪田則子 2014年2月17日、日本マイクロソフトの品川本社オフィスにて、第45回HTML5とか勉強会を開催しました。今回は「ユーザーエクスペリエンスとペーパープロトタイピング」というテーマで、安藤幸央さんのご講演およびワークショップといういつもとは違った試みを行っています。 参加枠も100人の定員がすぐに埋まり、140人もの応募がありました。普段のHTML5とか勉強会に比べると、デザイナーの方の参加率が高いことが印象的ですが、エンジニアの方も興味を持って参加されていて、職種を問わず多くの方が興味を持っているテーマだということを感じました。 前半はスライドを見ながら 「ユーザーエクスペリエンス」に関してご講演頂きました。 まずは有名なサイトのプロトタイプを見て、どのサービスのプロトタイピングかを考え
デザインはエンジニアリングだ−−THE GUILD深津氏が語る「デザインを考えるために必要なメソッドとプロトタイピング」 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
アプリ開発のために、UIやUXといったデザインを考えなければいけない。そのためには、正しいメソッドをもとにデザインすることが求められる。THE GUILDの深津貴之氏は、QuadCameraやミニチュア風写真が撮れるTiltShiftGenの作者で、iPhoneアプリを中心としたUIデザイナーだ。 同氏がMOVIDA SCHOOLで語った「デザインを考えるために必要なメソッドとプロトタイピング」についてまとめた。 デザインの本質は「設計」 デザインは、表面的なものをキレイにすることではない。デザインの語源は「設計」であり、ものを整理したり整頓したりすることだ。目的を提案したり課題を解決したりすることが大きな方向性といえる。そのための手段として、ユーザ体験を考えるUXデザインや操作性としてのUIデザイン、情報をわかりやすく伝えるための情報デザインなどがある。 デザインは、センスではなくエンジ
今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です！ フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
ニュースの理解が深まるタイムツリーコンセプト
リアルタイム時代に必要なニュースUI 新聞サイト・ニュースサイトは、基本的に「記事」という情報の単位をもつことを前提にしています。そして、記事という単位を時系列やテーマ（カテゴリ）別で表示できるように CMS でコントールしています。こうした見せ方は情報サイト全般で扱われていますが、今のニュースのスピードや Web 利用の変化と照らし合わせると、記事という情報単位があまりにも大きく柔軟性が乏しく感じることがあります。現在のニュースサイトのコンテンツに起こっている現象が幾つかあります。 速報ですら記事にしないといけないので、200文字程度のページが存在する 記事というタイトルとテキストを必要とする『入れ物』があるため、テキストだけ、ビデオだけ、写真だけといったコンテンツタイプの格納がしにくい ソーシャルメディアでブレイクしたニュースに追いつけない ニュースサイトのリアルタイムと、人が体感する
MacのFinderでリスト表示のカラム幅を固定する方法 | 経験知
※本ページはプロモーションが含まれています 作成:2013/06/28 MacのFinderでリスト表示をした際ファイル名が長いと上記画像のようにファイル名の途中が「…」と表示されて省略されてしまいます。 この表示だと似た名前のファイルが大量にある場合に見分けがつきにくかったりするので、特定のフォルダでのカラム幅を固定する方法を紹介します。 Optionキーを押したままドラッグ＆ドロップ マウスをカラムメニューの境界線（下記画像位置）まで持っていき、 マウスが両矢印「←|→」の状態になったら、Optionキーを押したままカラムの境界線をドラッグ＆ドロップで固定したい幅まで移動させます。 以上でこのフォルダのカラム幅は設定した幅に固定され、他のフォルダは通常通りの幅で表示されます。他のフォルダに移動してから戻ってきてもここで指定した幅で表示されます。 ただし、この方法だとMacを再起動した時
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Design Dos and Don’ts - Apple Developer
GoodUI
タブレット向けWebデザインのノウハウ40選 ―― 第2章 タブレットデザインを考える | タブレット向けWebデザインのノウハウ40選
Online Mockup, Wireframe & UI Prototyping Tool
Shield UI Demos
タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る | タブレット向けWebデザインのノウハウ40選
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker