実例から考えるUIの情報設計｜usagimaru
情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁ってみると、“ふわっとした” 話か、Webサイト設計の話に終始するものが多いのですが、本来はWebサイト設計以外の分野にも通用する考え方です。今回はiOSなどのアプリケーションデザインに焦点を当てて、UIの情報設計というものを考えてみたいと思います。 この資料では、「情報設計としてのUIの組み立て方と考え方」をテーマとし、すでにあるようなUIの実例を用いて情報設計視点でのUIデザインの解説を試みます。UIの具体イメージと結果から設計の意図というものをクイズ形式で考えられる内容となっています
「北欧、暮らしの道具店」のメルマガをABテストで改善した話｜Kurashicom Tech Blog
こんにちは。デザイナーの白木です。 前回はクラシコムのUXリサーチについてお話しましたが、今回は「北欧、暮らしの道具店」のメルマガをABテストの手法を使って改善した話をしたいと思います。 「北欧、暮らしの道具店」通常のメルマガは商品紹介がメインですが、それとは別に当店のアプリを紹介するメルマガも配信しています。 これまではメルマガ登録者全員に配信していたのですが、その中にはアプリをすでにご利用いただいている方も多くいらっしゃるため、アプリのダウンロードには繋がりにくいという課題がありました。 そこでアプリ紹介メルマガを配信する対象をメルマガの新規登録者に絞ることにしました。新規登録者は当店を知って間もない方が多いと思われるため、アプリについて知ってもらえる良い機会になると考えたからです。 内容も見直し、いくつかのパターンを配信して効果を検証してみました。 ※本来同じ期間に複数のパターンをテ
✕はなぜ閉じるのシンボルなのか歴史を読み解く｜みーた
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
自分がUIデザインをする時に、普段利用しているリファレンス集｜mamoru kijima
概要自分がデザインをする時に普段利用しているサイトをまとめてみました。これ系のサイトは沢山ありますが、ここに書いてあるリファレンス集は3年ほど利用して厳選したサイトなので信頼性が高いです。 1.インスピレーション面で参考にするサイト
ソリッドとアウトライン、どちらのアイコンが認識しやすいか
アイコンのスタイルをソリッドとアウトライン、どちらを使用するか決めなければならない場合がありませんか？ 好みで決めるという人もいるかもしれませんが、それぞれ分かりやすい場合と分かりにくい場合があります。 どのような場合にソリッドを使い、アウトラインを使うとよいのかを紹介します。 ちなみに下記は、左が過去のデザイン手法、右が現在のデザイン手法です。 Solid Vs. Outline Icons: Which Are Faster to Recognize? by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アイコンのスタイルがユーザビリティに与える影響 アイコンにおける特徴的な手がかり アウトラインアイコンが速い場合 ソリッドアイコンが速い場合 スタイルに違いがない場合 ボタンとしてのアイコンを使用す
UI トレースは何をトレースしているのか｜ai
エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。 楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。 その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。 自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。 しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
Dropbox 流！データをもとに言葉をデザインする 6 つの方法
0 0 160 0 本記事はDropbox UX WriterのJohn Saitoがこちらで執筆した記事を本人の許可のもと掲載しています ライティングはひとつの芸術です。言葉は私たちに、笑いと涙と、大きなことを成し遂げる刺激をもたらしてくれます。 でも、ライティングにも科学があると思います。さまざまな題材を選ぶことができ、テーマをより客観的に見つめる機会が持てるのは、データがあるからです。 適切な語句を見極める Dropbox の UX ライターである私たちは、どの語句を取り上げても必ず意味がわかることを目標にしています。誤った言葉ひとつで、ユーザー エクスペリエンスが台無しになりかねないからです。ユーザーは、意味が曖昧なボタン ラベルや聞き慣れない言い回しがあると、すぐにイライラします。 そこでライティングに関しては、適切な語句を確実に選べるよう数種類のテクニックを駆使し、情報に基づく
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
良い UI をつくる - おいちゃんと呼ばれています
師走に入った。来年良いスタートを切るために一年を振り返るには良い時期だ。 さて、2015年の後半くらいから、フロントエンド・エンジニアとして「良い UI をつくる」ことに自分のリソースを集中させてきた。UI はここではウェブアプリケーションの UI を指す。 一年半をそれに費やしてきて、このあたりで、自分が考える、良い UI（ユーザーインターフェイス）とは何か、どうすればそれを実現できるのかを整理しておくのも悪くないなと思ったので書き留めておく。 良い UI をつくるには 良い UI をつくるには次の 2つが必要だと考える。 1 良い UI を定義できること 2 上記 1 を実装（実現）できること そう、いまから何をしようとしているのかというと、良い UI をつくるために必要な要素をツリー構造で整理しようとしているのだ。 ただし、以下に良い UI をつくるために必要な要素を分類しようと試み
Framer: A Free Prototyping Tool for Teams
High-fidelity interactive design, minus the code.So how does it work? Import from any of your favorite UI design tools or start from scratch in Framer. Simply right-click to swap out static elements and replace them with interactive components. Try it out now Motion that works like magic.Ready to design your first animation? Drag and drop with Magic Motion to create an immersive prototype. Just us
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
GitHub - nohana/StoryboardTraining: デザイナー向けStoryboard勉強会資料
README.md Storyboard Training デザイナー向けStoryboard勉強会資料 事前準備 以下の作業を事前に完了させておいてください。 Xcodeのインストール どちらか好きな方でインストールしてください https://itunes.apple.com/jp/app/xcode/id497799835?mt=12 https://developer.apple.com/downloads/ Xcodeを1回以上起動 初回起動は時間がかかります Storyboardとは アプリの画面遷移と画面レイアウトをグラフィカルに編集するためのツールです Xcodeで作成することができます .storyboard という拡張子のファイルで、内部的にはXMLです 用語 View(ビュー) 画面に表示されるパーツを意味します ボタン、ラベル、画像などもViewです View Co
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
「ゲームクリア」を海外では何と言う？様々な言い方から文化的な違いが見えてくる
「ゲームをクリアする」を海外では何という？ 世界標準語と呼ばれる英語であっても、国が変われば慣用句的な使われ方は変わる。アメリカではゲームをクリアすることを「beat」というが、ロンドンではそうは言わない。 それは当然である。アメリカでゲームをクリアすることを「beat」(打ちのめす)と呼ぶのは、アメリカには資本主義的な競争文化が深く根付いているからであって、イギリスでは「finished」(終わる)だとか「completed」(完結)なんて、アメリカに比べて控えめで実際的な言い方をする。 さまざまな国や地域で ゲームをクリアする をどのように表現するのか、Twitter で少し話題になっていたようだ。 ちなみに日本ではクリアすることを英語では「clear」と表記し、STAGE CLEAR などと日本のゲームは演出するが、イギリス的な すっきりする という意味合いで用いられるようになったと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Interface In Game | Collection of video games UI | Screenshots and videos
ユーザーインターフェイス解剖学（公開版）
Zeplin
Advanced Web & Mobile Prototyping Tool for Product, UX and UI Design | Atomic
http://chromelens.xyz/