ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
三井住友銀行がnoteをはじめる理由。｜SMBC DESIGN
はじめまして。三井住友銀行の金子と申します。 私は2017年に入行し、デジタル領域中心のインハウスデザイナーをしています。 今回の投稿では、三井住友銀行にデザイナーが誕生してから今に至るまで、そしてnoteをはじめる理由、についてお伝えしていきます。 得体のしれない存在 そもそも当行で「デザイナー職」ができたのは3年ほど前。 Macはもちろん、デザインツールもないところからのスタートでした。 （今では作業環境もかなり進化していますが、それはまた別の記事にて。） 当初、何をやるか決まっておらず、周りからみればデザイナーは得体のしれない存在で、私たちとの関わり方を模索しているような状態でした。。（笑） 要件や設計が固まった後に相談をもらう事も多く、「できること限られるので、企画段階から相談してほしい！」というシーンはよくありました。デザイン界隈では、もはや”あるある”ですよね。 ただ、私の所属
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
The Most Hated UI & UX Pattern of 2018
Let’s play a game. I will present you with five UI/UX design patterns, in the most horrific way possible. You carefully consider my arguments, and then pick the pattern you hate the most. Shall we? Disclaimer: There won’t be any dark UX patterns in this post, like a fake hair on the screen or a non-working unsubscribe button. I think those are in a league of their own and deserve a standalone arti
レシピを見ながら楽しく実装、フォームのアクセシビリティ！その2 | フロントエンドBlog | ミツエーリンクス
<ul> <li><label><input type="checkbox"><span>選択A</span></label></li> <li><label><input type="checkbox"><span>選択B</span></label></li> <li><label><input type="checkbox"><span>選択C</span></label></li> </ul> <ul> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></l
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
スマホのUI考２ 〜 フィードバックについて | fladdict
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
第21回 JavaScriptによるUIの実装：タブメニュー編 | gihyo.jp
こんにちは。前回から引き続き、JavaScriptによるUIを実装する方法を紹介していきます。 基本のタブメニュー ウェブアプリでよく使われるインタフェースのひとつ、タブメニューを実装してみましょう。まず、骨組みとなる基本のHTMLは以下のとおりです。 タブメニューの基本HTML <div class="js-tabs"> <ul id="tab_menu1" class="tab_menu"> <li><a href="#page1-1">Page 1</a></li> <li><a href="#page1-2">Page 2</a></li> <li><a href="#page1-3">Page 3</a></li> </ul> <div id="tab_content1" class="tab_content"> <div id="page1-1" class="page"> P
第8回 適切な説明を加えたデザインにするには | gihyo.jp
ツールチップでさりげなく情報を伝える サイトの情報設計をする際、カテゴリーを整理したり、グローバルメニューの分け方を考えるのが重要ですが、メニューでひとことでは言い切れない場合が少なくありません。 特に、ユーザーの利用頻度が多い管理画面などは、「あれ、これ何のページだっけ？」ということが起こり得ます。運用・管理の引き継ぎで大変な想いをした方も少ないないのではないでしょうか。 そんなときに、「ひと言だけれど、カーソルを合わせたときに説明が出る」ようにすれば、ユーザーにとってわかりやすく、ユーザビリティの高いUIになります。 今回は、ツールチップを使って、ユーザーの操作の邪魔にならない形でさりげなく情報を伝える方法をご紹介します。ツールチップとは、カーソルを合わせたときに補足情報が表示される小さな枠のことで、使い方によっては効果的なUIを実現することができます。 tipsyとDD_bela
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.ipa.go.jp/files/000044154.pdf
iOSやMac OS Xの「使えるUI」が検索＆ダウンロードできる『Cocoa Controls』 | 100SHIKI
スマートフォンアプリデザインに役立つ 基礎のまとめ！
