デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
2019年、UIとUXデザインのトレンドを解説！デザインのテクニックやツール、ブラウザ、フォントも進化している
デザイン業界の現在の流れを把握し、それらがどこに向かって進んでいるのか、何ができるようになるのか、チェックしておきたいUIとUXデザインのトレンドを紹介します。 昨年まではスマホ中心のトレンドが多かったですが、今年のキーワードは「コンテキスト」です。より良い方法でデザインするために、インターフェイスのトレンドを確認しておきましょう。 2019 UI and UX Design Trends by Moses Kim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ブラウザの進化 02. 目的があるアニメーション 03. インターフェースの3Dとディープフラット 04. 超現実的なデザイン 05. グラデーション 2.0 -燃えるようなカラーと暗闇 06. 可変フォント 07. Figma 08. 音声UI 09. UXに
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
pukiwiki、はてなトップページの妙な恐怖感
尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38
サービス普及のためのユーザーインターフェース指向型サービス開発
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo!ブックマークのディレクションを担当しています。本エントリーでは、エンジニアのみなさまや企画担当の方を対象にサービス普及施策のヒントとなるような話題をお届けします。 「サービス普及のために何をすべきか？」 おそらくサービス関係者にとって永遠のテーマといえるこの課題に対し、ユーザーインターフェース（UI）を起点にサービスのあり方を考える方法が有効です。 特に効果的と思われるのは「アフォーダンス」と呼ばれる概念を応用した取り組みです。これより詳しくご紹介します。 アフォーダンスとは？ 認知心理学の分野から出てきたのが、デザイン業界で転じて、道具の使いやすさ実現のためのキーワードとなりました。その
Jesse James Garrett: The Elements of User Experience
The Elements of User Experience User-Centered Design for the Web from New Riders Publishing in conjunction with the American Institute of Graphic Arts order now from Amazon.com the original diagram that started it all translations of the original diagram the simple planes poster teaser posters: #1 #2 #3 from the book: table of contents introduction chapter 2: meet the elements What the reviewers a
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
web屋が主張する「リキッドレイアウト」に騙されないために - 鍵っ子ブログ
鍵っ子ブログ(Key Blog)：Keyが大好きな鍵っ子によるKeyのファンサイト。Keyに関する情報・コラム・考察・ニュースが中心 リキッドレイアウトの是非について web屋を自称する人の主張が余りにも酷い。 「その余白、もったいなくない？」っていう自然な感覚とそれをなんとかしようとするWebデザイン魂を眼前にすると、「横幅はやはり800px基準でしょ」とか「いやそろそろ1024px基準でもいいかも」とかいう議論自体がなんだかむなしいと感じただけだ。 その余白がもったいないと思う感覚とどうにかしようとするデザイン魂 - Web屋のネタ帳 つまりweb屋のネタ帳氏の主張は「ディスプレイの解像度に合わせて動的に表示を変えるAmazonすげー。それに比べて楽天は左右に余白が出来てそのスペースがもったいない」らしい。 たしかにその主張は一理あるが、ではweb屋のネタ帳氏のサイトはどうか。 スペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「個」から「集」のデザイン
新着記事
ウェブデザインに使用するUIのパーツをまとめたPSD素材
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
IDEA * IDEA