タグ

uiとuxに関するtomono-blogのブックマーク (85)

  • CallToInspiration – Small details for very exacting ideas!

    Call for inspiration using the purple hat for when you have inspiration blocks or need fresh new ideas. A great tool created by a deisnger for web professionals.

    CallToInspiration – Small details for very exacting ideas!
  • ChatGPTを活用したUI勉強会のススメ

    Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023

    ChatGPTを活用したUI勉強会のススメ
  • まもなくやってくる消滅のために|UXライターより|岡田麻沙

    ChatGPTの普及が進むなか、UXライターの存在意義はいつ消滅するともしれない。直近の知見を放出しておこうと思う。かつてUXライターと呼ばれるものたちが存在したことを覚えておいてほしい。 ここでは、①トーン&ボイス(プロダクトとしてユーザーに語りかける際の文体)、②品詞の使い分け、③機能名の決めかた、の3点について記しておく。 トーン&ボイス|マトリクスで検討するトーン&ボイスについては、「Material's Communication Principles」で言われているように、さまざまなシーンを想定しながら考えることが重要だ。 ひとりの人間でもシチュエーションによって喋りかたが変わるように、ひとつのプロダクト内でも語りはさまざまに変化する。ユーザーとの関係性に合わせて言葉をチューニングする必要がある。以下のマトリクスは、そうしたパターン出しの一例だ。 出典:Material's C

    まもなくやってくる消滅のために|UXライターより|岡田麻沙
  • UIのお作法。28個の「〇〇できそう感」をまとめました。|maiokamoto

    UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 1、進めそう感 2、戻れそう感 3、進めそう&戻れそう感 4、開きそう感(ドロップダウン) 5、開きそう感(アコーディオン) 6、開きそう感(モーダル1) 7、開きそう感(モーダル2) 8、カレンダーが開きそう感 9、メニューが開きそう感(ハンバーガー) 10、検索できそう感 11、入力できそう感 12、検索できそう + 入力できそう感 13、パスワード入力できそう感 14、パスワード感(強め) 15、間違えた感(エラー) 16、合ってる感(OK) 17、電話かかる感

    UIのお作法。28個の「〇〇できそう感」をまとめました。|maiokamoto
  • UIデザイナーのスキルとOOUI観点の構造設計|Goodpatch Blog グッドパッチブログ

    はじめに UI デザイナーとして、スキルを伸ばす方向性を悩んだことがありますか? 去年、私はスキルを伸ばす方向性をすごく悩みました。世の中の流れとして、UIデザイナーはUXデザイナーを目指すのが多いのに対して、私はインターフェイスアーキテクチャやインタラクションデザイン、エンジニアリングについてすごく興味があるんです。しかし、どうやってそれらのスキルを伸ばすのかは分かりませんでした。 社内の有志のチームに参加 その時、OOUIをはじめUIデザインを研究する有志の集まりがあって、私はそのチームに参加しました。 【Today's Goodpatch✍️】有志で発足された、オブジェクトベースなUIデザインを研究するチームの様子をキャッチ👀上野学さんの記事をチームで読みながら、オブジェクトベースなUIデザインへの取り組み方などディスカッションが白熱していました! pic.twitter.com/

    UIデザイナーのスキルとOOUI観点の構造設計|Goodpatch Blog グッドパッチブログ
  • SANKOU! | Webデザインギャラリー・参考サイト集

    コーポレートサイト ブランドサイト・サービスサイト ECサイト・オンラインショップ キャンペーン・特設・プロモーションサイト ポータルサイト・メディア・情報サイト プラットフォーム・コミュニティサイト 採用サイト・採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある・作り込まれている イラストを使用 3D表現・3Dイラストを使用 シズル感・訴求力のある写真・動画使用 写真少なめ・写真以外のビジュアル表現 さりげない動き・動きなし やや動きあり ダイナミック・印象的・細やかな動き 日語メイン ノーコードツール「STUDIO」で制作 スマホ特化・モバイルファースト Web・ITAI・デジタル・テクノロジー・通信関連 サービス・アプリ・ツール 病院・クリニック・歯医者・医療・薬 学校・教育・幼稚園・保育園・スクール 金融・投資・保険・士業 カフェ・飲店・

    SANKOU! | Webデザインギャラリー・参考サイト集
  • 【フロントエンド初心者向け】ユーザビリティを上げるちょいテク

    フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ!」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ

    【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
  • 全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ

    デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。

    全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
    tomono-blog
    tomono-blog 2021/03/23
    これはこういうジャンルの記事の中では、珍しくためになる記事。
  • 【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
  • Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ

    先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか?継続的にバージョンア

    Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
  • 画面をデザインするということ - Qiita

    この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている1エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 (実際にUX5段階モデルを意識して仕事してるわけではありませんが、何かしら

    画面をデザインするということ - Qiita
  • UIデザインにおけるインターフェイスアーキテクトの役割|Goodpatch Blog グッドパッチブログ

    アーキテクチャ(Architecture)とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト(Architect)とは建築家や(建築)設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト(仕組士): システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」(IEEE 1471)と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン

    UIデザインにおけるインターフェイスアーキテクトの役割|Goodpatch Blog グッドパッチブログ
  • UXデザインにおける5段階モデルとは?【2019年版】|Goodpatch Blog グッドパッチブログ

    2022年追記:最新版記事のご紹介 UXの5段階モデル改めてデザインの5段階モデルとして、より汎用性の高い形で再解釈に取り組んでいます。最新版の記事はこちらからご覧ください。 みなさんは、ユーザー体験を構成する5つの段階をご存知でしょうか?一般的には「ギャレットのUX5段階モデル」や「UXの5段階モデル」などと呼ばれています。この言葉を聞いたことはあるが、なぜ重要なのかうまく把握しきれていない方や、そもそも聞いたことがないという方もいらっしゃると思います。 そこで今回は、デジタルプロダクトのデザインにおいてなぜUXの5段階モデルの概念が重要であるのかを説明していこうと思います。 関連情報: グッドパッチ、戦略から表層までユーザー体験に一貫性を生み出すプロセス「UXデザインの5段階モデル」を読み解くホワイトペーパーを公開 なぜ『UXの5段階モデル』なのか? 「デザイン」という言葉は、プロダク

    UXデザインにおける5段階モデルとは?【2019年版】|Goodpatch Blog グッドパッチブログ
  • UIデザイン講習会

    2020/7/25にtraPで実施したUIデザイン講習会の資料です

    UIデザイン講習会
  • ヤコブ・ニールセンのユーザビリティ10原則まとめ|rie

    こんにちは、rieです。 CMSサービスのプロダクトチームに所属しています。 CMS(コンテンツマーケティングシステム)は、Webサイトのページやブログ記事といったコンテンツを管理画面がら作成できる多機能なサービスです。 そのため、ユーザーが迷わずストレスなく操作できるUIUXが大事になってくるわけですが、それをデザイナーから開発チームまで浸透させたくて、バリューチェーンで心得ておきたいデザインとして、ユーザビリティの権威であるヤコブ・ニールセンの10原則を開発チーム内に共有しました。 それによって得られた事をヤコブ・ニールセンの話を中心にお話しします。 そもそも、ヤコブ・ニールセンとは?Webのユーザビリティの第一人者とされるデンマークの工学博士です。安く早く実行できるユーザビリティ向上術やユーザビリティのゴールの5つの指標など実用的な方法論をこれまで導きだしました。 https://

    ヤコブ・ニールセンのユーザビリティ10原則まとめ|rie
  • ユーザビリティコラム:Jakob Nielsen博士のAlertbox

    システム状態の可視性(ユーザビリティヒューリスティックNo.1) 7月3日 現在の状態を伝えることで、ユーザーはそのシステムをコントロールできていると感じ、目的達成のための適切な行動がとれるようになり、最終的にはそのブランドを信頼するようになる。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士(略歴)ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日語訳を許可を得て公開しています。

    ユーザビリティコラム:Jakob Nielsen博士のAlertbox
  • 低コントラストのテキストは解決策にならない

    低コントラストのテキストがトレンドのようだ。しかし、それは視認性が悪く、発見しにくく、アクセシビリティも劣る。代わりに、もっとユーザブルな代案を検討しよう。 Low-Contrast Text Is Not the Answer by Katie Sherwin on June 7, 2015 日語版2015年9月16日公開 低コントラストのデザインが美しいというのはWebに繰り返し立ち現れる思想だが、それは視認性や発見しやすさを奪い去るものである。低コントラストのデザインは目に負担がかかるので、歳を取って、能力が少し衰えたように我々は感じる。ミニマリズムというトレンドに魅了されたサイトは、高コントラストという従来からの自分たちの流儀を捨て去り、暗黒面(あるいはミディアムグレー面と言うべきか)に寝返ろうとしている。デザインでの評価のために読みやすさを犠牲にしようとするサイトにとって、低コ

    低コントラストのテキストは解決策にならない
  • UXという言葉が登場する以前に私が見たUXデザイン:GUI編

    オフィス機器メーカー、ユーザビリティ評価専門会社を経て、2013年に株式会社キトヒトデザインを設立。ユーザビリティ、UI/UXデザイン関連業務を行う。 趣味はちょっとマイナーな国への旅行UXという言葉が騒がれるようになる前にも、UXデザインらしきものは確かにさまざまな形態で存在していました。この寄稿記事では、株式会社キトヒトデザインでユーザビリティ、UI/UXデザインなどを手がけている萩さんがご自身で体験したデザインのお話を不定期更新でお届けしています。今回は第11回目です。シリーズ全編はこちら UX(ユーザーエクスペリエンス)とは切っても切れない関係のUI(ユーザーインターフェイス)。 この言葉が広まったのは、UIの一種であるGUI(グラフィカルユーザーインターフェイス)が注目されるようになったのと同時期だったと思います。私自身は、GUIを通してUIを理解したような感覚なので、今回

    UXという言葉が登場する以前に私が見たUXデザイン:GUI編
  • 北欧のUXデザイナーが日本の文化から学んだこと

    Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に5日間、滞在してみることにしました。 日はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日の非デジタルデザインについて

    北欧のUXデザイナーが日本の文化から学んだこと
  • 2019好きなゲームUI/UXまとめ|尾形

    記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。

    2019好きなゲームUI/UXまとめ|尾形