オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す

デザインフェーズ Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。 レスポンシブの作り方 デザインガイド・コンポーネント作成の重要性 UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。 アトミックデザインと

こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回は、優れたUIデザインをする上で必要となる「認知負荷」について説明したいと思います。これは「インタラクションコスト」と呼ばれ、ユーザービリティを考慮したUIを設計する上では最も重要となります。 インタラクションコストとは サービスを使う時にユーザーは様々な事を考えつつ、スクロールやスワイプをしながら画面のあちこちを見回し、自分自身の目標を達成しようと試みます。その時にユーザーが受ける負担やエネルギーが少なければ少ない程、そのサービスは「使いやすい」と言えます。ユーザーが受ける労力には以下の様なものがあります。 これらの労力を合算したものを「インタラクションコスト」と言い、ユーザービリティの指標とされています。 精神的な負荷 「精神的な負荷」とは、ユーザーが考える・判断するなど、あらゆる精神的な活動を行なった

インタラクションデザイン（interaction design）とは、ユーザーとアプリケーションの間に相互に発生するコミュニケーションを設計することを意味する。 デザインの範囲は、操作の反応までの時間・マウスなどの物理的な物を介しての操作方法・ボタンラベルなどの文言・ビジュアル表現など、ユーザーとの対話が発生するもの全てである。 インタラクションデザイン（interaction design）の「interaction」は、「相互」を意味する「インター（inter‐）」と「行動・実行」を意味する「アクション（action）」から作られた造語である。 インタラクションデザインは、UXデザインの要素のひとつで、UXデザインの大部分を占める重要な要素である。 UXデザインは製品の使用体験を設計することであり、その体験の大部分はユーザーと製品の間の何らかのコミュニケーションを伴う。 インタラクショ

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。実際のアプリを実例に紹介しながらインタラクションデザインの概念についても理解しましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 「イ

多くの会社はWebで強力なプレゼンスが必要な理由を理解しているものの、しばしばユーザーをそのプロセスから放置しています。競争が激しいデジタル世界において、企業はシームレスなユーザー体験を保証するためにできる限りの努力をしなければなりません。 私たちの生きるデジタル時代において多くの場合、企業のWebサイトは人々がそのブランドに触れる最初の接点となります。人々は実際の店舗に（もしあるならば）入るはるか前にWebサイトを訪れます。Chain Store Ageによると、顧客の39%は、Webサイトで選択肢が多すぎると不満を覚え、離脱するそうです。 それでは、企業はどのようにしてデジタルプラットフォームを通じて良好な体験を提供し、ユーザージャーニーを充実させ、購買の意思決定に影響を与えられるのでしょうか？ 良いUXの秘訣はインタラクションデザインにある インタラクションデザインは、ユーザーをもて

2019年9月10日、クックパッド株式会社にて「Cookpad Product Kitchen #2」が開催されました。北欧、デンマーク/コペンハーゲンの新興デザインスクール、Copenhagen Institute of Interaction Design（CIID）にて毎年夏に開催される、サマースクール。今回は、そのサマースクールに参加したエンジニア、デザイナーたちが、そこで学んだことや得られた気づきを語りました。プレゼンテーション「Intro to Interaction Design」に登壇したのは、クックパッド株式会社エンジニアの黒田健太氏。講演資料はこちら CIID Summer Schoolで学んだ、インタラクションデザインのこと 黒田健太氏（以下、黒田）：よろしくお願いします。まず自己紹介です。黒田健太と申します。 2019年の4月にクックパッド株式会社に新卒で入社いたし

自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい） ともこと申します！ 初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm 2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。 ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。 そして今年の6月末でヤフーを退職し、株式会社ニューズピックスにUIデザイナーとして転職しました。 現職ではNewsPicksアプリやWeb、その他関連サービスのUIデザイナーとして関わっております。 仕事の話はそこそこに…。なにより一番に覚えて帰っていただきたいのは、「女性アイドルが好きです！」ということです！！ ハロプロ、日向坂46などの日本の女性アイドルグループが物心ついたときから今までずっと好きでして、最近だと「Girls P

2018年9月8日 builderscon tokyo 2018 （#builderscon）に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有す

​​freee株式会社の伊原と申します。主に人事労務freeeという、勤怠管理・人事情報管理・給与計算といったバックオフィスの仕事をクラウド化するサービスのUXデザイナー兼プロダクトマネジャーとしてやっていってます。あとアクセシビリティの本を3冊ほど出していて、あだ名は「アクセシビリティで一発当て太郎」です。休日はだいたい双子の娘と公園に行っています。

ある日、隣に座っていたwevoxのデザイナー木下と「僕らがいつも気をつけていることって何だっけ？」と雑談しながらパパっと言葉を書き出していました。 なぜ出したかというと、若手デザイナーが2人いて同じことを別々に伝えていて、まとめたらモレなくダブりなく伝えられるよね。という気づきがキッカケで、会話しながら言語化し多少のブラッシュアップをした後、バージョン1として社内のデザイナー陣に共有しました。 それが全部で10個にまとめ上げた「Atrae Design Mindset」です。 言語化したのはたった数十分でしたが、noteにするのに半年かかりました😅 それでは、1つずつ紹介していきます。 現地現物「机の上や頭の中だけで考えたり判断するのではなく、実際に現場に足を運び、現場の事実に基づいて考える。 問題を解決し、困難を乗り越えるための答えは、必ず現場にある。」というのがトヨタ社の考え方です。

こんにちは。2020年に新卒入社し、ビズリーチ事業部でプロダクトのUIデザインを担当している松永です。今回はデザイナーを目指す学生の方や、春からデザイナーとして働く方に向けて、2020年に入社した新卒...

スマートキャンプ デザインブログ、デザイナーの髙松（@dream_yt95）です。 今回はnoteのお題「#推薦図書 」に合わせて、先日読んだ本を紹介します。 紹介する本「今日からはじめる情報設計 - センスメイキングするための7ステップ」という本について書いていきます。 この本でなにがわかる？情報設計という言葉はUIデザインの文脈で使用されることが多いですが、情報を操って「見やすく」「捉えやすく」することはすべての人が行なっていることです。 デザイナーは「見やすく」「捉えやすく」することを業務として意識的に行います。無意識に行なっていたことを意識的に行おうとした途端に、再現できなくなってしまう経験は誰でもあるのではないでしょうか。 突然、自分の周りが混沌として見えてしまったとき、情報の整理をどこから始めていいのかわからないとき、混沌のきっかけを探したいとき、私はこの本をもう一度読み返すと

2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。 UIデザインをはじめるために必要な知識を解説しました。 （予告から内容はかなり変わりました） 第一回「これだけ守れば見やすくなるデザインの基礎」はこちら https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life

Windows アプリの開発では、"コントロール" は、コンテンツを表示したり、操作を有効にしたりする UI 要素です。 コントロールとは、ユーザー インターフェイスの構成要素です。 パターンとは、いくつかのコントロールを組み合わせて、新しいものを作成するためのレシピです。 単純なボタンから、グリッド ビューのような強力なデータ コントロールまで、ユーザーが使用できる 45 種類以上のコントロールが用意されています。 これらのコントロールは Fluent Design System の一部です。すべでのデバイスやあらゆる画面サイズで見栄えがよく、力強い、スケーラブルな UI を作成できます。 このセクションの記事では、Windows アプリにコントロールとパターンを追加するための設計ガイダンスとコーディングの手順を示します。 概要 XAML と C# でコントロールを追加し、スタイルを指定

Components are interactive building blocks for creating a user interface.

People rely on the power, spaciousness, and flexibility of a Mac as they perform in-depth productivity tasks, view media or content, and play games, often using several apps at once.

公開日 : 2020年9月7日 (2020年9月8日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームにおいて、数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる場合、HTML の <input type="number"> を用いるのが基本です。ボックスに直接タイプ入力することができると同時に、ブラウザによってはスピナー (spinner) が提示されるので、それを「回す」ことで入力値を増減することもできます。 <input type="number"> の例 (Google Chrome)。ボックスの右側にスピナーが提示されている。 しかし、ブラウザ標準のスピナーは小さくて、ユーザーによっては見づらかったり使いにくかったりします。またユーザーの環境でスピナーが表示されない (ただのテキストボックスのように見える) こともあります。 比較的