本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第13弾は、配色とユーザーエクスペリエンスに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Thirteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 色彩理論を知らなくてもデザインに統一感を与えられる 2. ユーザーが選択したアイテムを目立たせる 3. 細いフォントは暗いカラーにする 4. 最も重要な要素をより目立たせる 5. 次のステップの情報を提供する 6. CTA用にカラーを1つ確保しておく はじめに 次のプロジェクトのために効率的で美しいUIを作成
アクションゲームを爽快にする、ちょっとだけズルい調整メモ｜深津 貴之 (fladdict)
アクションゲームで爽快感を出すための、ちょっとしたズルのメモ。いろいろとプレイして見つけたやつ、思ったやつ。 ギリギリのジャンプをしたときの体験ジャンプで飛び移るとき。「ギリギリ届かない」かつ「キーを進行方向に倒している」場合、ユーザーの意図は「飛び移りたい」と類推される。キャラの座標を多少修正して、うまく飛び移れたことにする。次善策は、「壁にしがみつける」だが、爽快感は多少落ちる。 ギリギリで減速する体験走行時に「逆方向にキーをいれている」場合、ユーザーの意図は「急減速したい」と類推できる。キー入力の長さに応じて、摩擦係数をどんどん増やす。 ギリギリで踏みとどまる体験走行時にブロックから飛び出して落ちてしまうとき。「走行と逆方向にキーをいれている」場合、ユーザーの意図は「踏みとどまりたい」と類推される。よろめき演出で猶予時間を与えるか、急減速を可能とする。 ギリギリでジャンプが間に合う体
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
よりユーザーを中心としたデザインスプリントを考える
この記事はUX for the Massesからの翻訳転載です。配信元または著者の許可を得て配信しています。 Making 5-day designs sprints more user-centred もし１つだけ超常的な力が手に入るとしたらなにを選びますか？ 私なら未来を予見できる予知能力を選びます。想像してみてください。株式市場はもちろん、あらゆるギャンブルで大儲けできるだけでなく、プロダクトやアイデアが実現されるのかずっと前にわかってしまいます。たとえばFacebookやTwitterが世に出る前にそれらをつくることができます。フラットデザインが主流になるずっと前にそれをつくり出して、友達をあっと言わせることもできました。いつでもどのデザインがうまく行って、どのようなアイデアが成功するのかを知ることができるでしょう。時代遅れのデザイナーになることは決してなく、いつでもスーパーデザイ
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた｜Aoi Sano | デザイナー
こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI
他のデザイナーとの差別化に役立つ「USP」の考え方
Addisonは食べ物やデザイン、アート、カルチャーの融合を模索するブログ、Food Identitiesの著者です。 まず初めに１つ質問させてください。生活の中で使う歯磨き粉、デオドラントやシャンプー、または自動車のオイルに好んで選ぶブランドはそれぞれいくつありますか？ それらのブランドのうち、特定のブランドが他と異なっていたり優れていると考えたことはありませんか？ 何度も繰り返し購入したくなるような「お気に入りの」ブランドが、魅力的に見える理由は何でしょうか？ 答えはそのようなブランドが持つ「USP」にあるかもしれません。 USPとは、ユニークセールスポイント（Unique Selling Point）のことで、特定の広告キャンペーンが成功する一方、なぜ他のものは失敗するのかといった理由を説明するために1940年代に開発されたマーケティングコンセプトです。 成功したブランドのキャンペー
UXデザインに欠かせない！おすすめのプロトタイピングツール7選【2019年最新】 | Web Design Trends
プロトタイピングツールとは プロトタイピングツールとは、Webサイトやアプリなど、実際のプロダクト制作を行う前にプロトタイプを作成するためのツールです。 ではプロトタイプとは何かというと、下記のようになります。 プロトタイプを作ることで、画面遷移やアニメーションなどの動き、流れを確認することができるため、よりリアルなプロダクトに近い状態でUXデザインを確認することが可能です。 プロトタイプは一度作成したら完成というわけではなく、チームのメンバーや外部テスターに共有したりして、フィードバックをもらいながら修正を重ね、改善し続けます。 様々なプロトタイピングツールがありますが、目的によって使い分けることで、より効率よくプロトタイプ作成とフィードバックを行うことができます。 プロトタイピングツールの種類 一般的に、プロトタイピングツールの種類は大きく3つに分けることができます。まずは、プロトタイ
「仕掛学」を用いた「ついしたくなる」UXデザインを考える - log4ketancho
「UXデザイン」という言葉が巷に出てから久しいですが、この本はUXを学ぶ一歩目としておすすめです。私の周りにはUXに明るい人が多く、色々な話を聞くのですが、正直、具体的にどのようなアプローチすれば良いUXを作れるのかが全く分かっていませんでした。しかし、この本を読みUXデザインの本質が少し見え、専門家の話も腹落ちできるようになりました。 仕掛学―人を動かすアイデアのつくり方 作者: 松村真宏出版社/メーカー: 東洋経済新報社発売日: 2016/09/23メディア: Kindle版この商品を含むブログを見る Webサイトやアプリデザインをしている友人から、UX関連の相談を受けることがあるのですが、まずはこの本を紹介しています。ただ、紹介するときに「学びは何なの？」に上手く説明することができなかったため、今回、改めてこの本からの学びを整理することにしました。 仕掛学とは 解決したい課題があった
コードを最適化するためのフロントエンドフレームワーク10選
UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
優れたUI設計のために知っておきたい4種類のデザイン手法 | KOBIT
UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。 前回記事では、UIに優れたサイトを構築するにあたり必要な概念として、レイアウト・配色・フォントの原則を紹介しました。 今回も、引き続きデザインに関する方法論として、フラットデザインやレスポンシブデザイン等の流行のデザイン手法を紹介していきます。 「UI/UXを知り、優れたWebサイトを構築する」連載一覧 1.UI/UXの基本（全三回） ・第一回：良いUI/UXとは何か？Amazonと楽天に見るユーザー体験の違い 2.UXに優れたサイトを構築するために検討するべき事項（全四回） ・第四回：優れたUXを設計するための戦略：ペルソナ法とストーリーボード 3.UIの要素や方法論の解説 ・第八回：優れたUI設計のためのレイアウト・配色・フォントの原則 デザイン方法論 UIデザインは、技術の進化やWe
デザイン思考、UXデザイン、サービスデザイン、リーンスタートアップがどう違うのかを分かりやすく説明してみたよ！ - カタパルトスープレックス
アメリカやアジア、ヨーロッパではデザイン思考とかUXデザインとかリーンスタートアップがとても流行っています。それをビジネスにする人たちもたくさん出てきています。日本でもIDEOが再び支社を作ったので盛り上がってくるんですかね！ でも、デザイン思考、UXデザイン、サービスデザイン、リーンスタートアップって似たような部分があったりしてよく分からないって人が多いんじゃないでしょうか？大丈夫です。違いをきちんと説明できる人はそうそういませんから！ミートアップとかイベントでいろんな人と話をしますが、ちゃんと説明できる人と出会ったことはないっスね、ボクの狭い交友範囲内ではですが。 そこで、不肖私が最近はやりのデザイン思考、UX、サービスデザイン、リーンスタートアップがどう違うのかを説明してみましょう！これは「なかむらかずや」が考える定義なので異論反論あるでしょう。違うよ！と思ったら自分バージョンを作っ
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
正しいカスタマージャーニーの設計と実践――理念→全体設計→実装→運用の全体像と具体的なポイント | 【レポート】カスタマーエクスペリエンスコンファレンス2016
モバイルアプリのUIデザインの参考になるスライド10選
