本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
ユーザーテストサービスのUIscope | UIscope
ユーザーがどのようにサービスを使っているのか。 利用シーンが最短1日で届く、 ユーザーテストサービス。 いますぐ無料で試してみる UIscope とは？ 「高品質なユーザーテストを 最も安く・早く・簡単に」 ユーザーがサービスを使っている様子を 動画形式でお届けする、 ユーザーテストサービスです。 ユーザーテストとは
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。 UI & UX Micro-Tips: Volume Seven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは分かりやすく簡潔に 2. 長文コンテンツには、20ptを試してみてください 3. エラーメッセージは色だけで情報を伝えないように 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成 5. 見出しは文字間隔と行の高さを小さくする 6. 要素をよりはっきりと魅せる はじめに 次のプロジェク
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ
デザインと行動心理学｜nagaimen
情報設計やコミュニケーションに役立ちそうな、人の無意識な行動心理のキーワードをイラスト付きでまとめてみました。 視線解析 目は脳とつながっていて、視線と心理状態は結びつきやすい。記憶に関することは左に、未来に関すること右に視線が向く傾向がある。視覚に意識を集中すると上、聴覚に意識を集中すると真ん中、体全体で感じようとするときは下らしい。なので、嘘をつくときは右上をみてしまう傾向がある。ユーザーインターフェイスにおいても「戻る」ボタンが左、「進む」ボタンは右に配置されている。 アフォーダンス アフォーダンスとは、環境や形状が与える意味のこと。例えば、ドアの取っ手は前後に開けるものと認識するし、ドアにくぼみがあればスライドして開けると認識する。そういえば、線香花火はヒラヒラに火をつけたくなるので 反対かもと思い調べてみると、ひらひらを持つことで揺れを吸収し火球が落ちにくくなるらしい。線香花火の
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo
Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 一般的なデザインは、カラー、タイポグラフィ、画像など多くの要素の組み合わせからできています。印刷用のデザインでも画面用でも、要素のバランスをとって全体的な体験をより良いものにするためには、デザインのコンポジションに関わるいくつかのルールの理解が欠かせません。この記事では、コンポジション、すなわちデザインの構成とは何かを説明し、ストーリーを語る優れたデザインの構築に役立ついくつかの原則を紹介します。 デザインにおける視覚的な構成とは？ 視覚的な構成は、デザイン構築の基礎であり、すべての要素を調和させて全体としてのメッセージを伝えるためのレイアウトです。下の画像に描かれている単語を使ったアートはその好例です。一つひとつの言葉はとても単純な要素ですが、要素の組み
Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleのAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか？継続的にバージョンア
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
動きで魅せる！Web制作の参考UIインタラクション、アニメーション38個まとめ
この記事では、ウェブデザイン制作の参考にしたい、刺激的な最新UIインタラクション、アニメーションをまとめてご紹介します。ユニークでクリエイティブなアイデアが満載の素敵アニメーションが揃っており、今後のウェブデザインがますます楽しみになる、未来を感じるデザインを中心に集めています。 最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ Web制作参考アイデア集！話題の最新ウェブデザイン40個まとめ 前回のまとめはこちらからどうぞ。 動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ 動きで魅せる！Web制作の参考UIインタラクション、アニメーションまとめ GoSurf Website
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
Webデザインに動きを加える５つの方法
アラン・スミス氏はライターで、ソーシャルメディア、ウェブデザイン、モバイル・アプリ、デジタル・マーケティング、起業家精神、ベンチャー企業などの様々な話題を最先端のデジタル世界で取り上げています。 1906年に最初のアニメーション動画が制作されたのは、ストーリーテリングにおける革新的な一歩でした。ストーリーテリングで用いられるアニメーション技術は、毎年格段に進歩しており、それは2018年も同様でしょう。Webデザイナーは古い技術ではなく、より高度な２Dや３Dのアニメーション画像を選ぶようになってきています。 2018年のアニメーション Webデベロッパーは、FlashをやめてCSSやJavaScriptでアニメーションを作成するようになりました。Flashをサイトにインストールすることは、技術的な理由から段階的に廃止されました。Flashが廃止された第１の理由は、iPhoneやiPad、iP
.DS_Storeの仕組みと削除＆作成しないよう設定する方法 | UX MILK
MacのFinderで不可視のフォルダやファイルを表示した状態にすると「.DS_Store」というファイルがあることが分かります。 この.DS_Storeはフォルダを開くと自動で作成されてしまい、フォルダ内の正確なファイル数が分からなくなるなど邪魔になってしまうことが多々あるので一部ユーザーからはとにかく不評です。 また、非表示にしていてもWindowsと共有しているドライブなどでは見えるようになってしまうので気になってしまう方は多いようです。そんな謎のファイル.DS_Storeについて詳しくご説明します。 .DS_Storeとは？ アイコンの位置や表示設定などのフォルダ表示設定に関するメタデータを記録するための隠しファイルです。Finder上でもリモートシステム上でもアクセスするすべてのフォルダに.DS_Storeファイルが作成されています。 .DS_Storeは削除して良い？ Find
「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめてのUIデザイン 改訂版
コグニカル
正しいカスタマージャーニーの設計と実践――理念→全体設計→実装→運用の全体像と具体的なポイント | 【レポート】カスタマーエクスペリエンスコンファレンス2016
