XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
UXリサーチでAIが使えるか検証してみた
AI はリサーチに使える？ここ数年、インタビューをはじめとした定性調査のデータベース化やインサイトの整理の支援をしています。データベースはプロジェクト単位では見え難い、横断的な傾向が見える場合があるものの、運用コストがかかります。 短期的なメリットが見え難いだけでなく、運用負荷がかかるので片手間では続きません。インタビューのように文字起こしや要点をまとめるなど時間がかかる作業が多いのも長続きしない理由です。 こうした課題を解決するための自動化をいろいろ試していますが、昨年から AI（人工知能）をリサーチ分析に使えないか検証を始めています。例えば Google の Cloud Natural Language でテキストマイニングをし、ユーザーが使っている言葉の頻度を視覚化できないか試していました。ユーザーフィードバックをマイニングするだけでも、どの機能への要望があるのか見えて興味深い結果に
組織でデザインが推進できる人の思考術
デザインの推進は簡単なことではありません。デザインの定義が広がり過ぎてしまったことで人によって解釈や期待が異なりますし、デザイナーの責任範囲も様々です。あれこれ挑戦を続けても物事は思うように早く進まないですし、時には悲観的になるかもしれません。 物事が進むのが遅いのはごく自然なことです。何か実践するだけであれば、一週間あればできるかもしれません。ただ、そこで作ろうとしている価値を組織全体に浸透させるのは時間がかかります。組織が大きければ数年かかることもあります。長期戦だからこそ難しいですし、諦めてしまうこともありますが、うまく進める方法もあります。 中核へいくほど進みが緩やかですが、インパクトが大きくなります手段の目的化にある罠例えば UI ライブラリを作ることを目標とします。とりあえず作ることはできるかもしれませんが、作業コストに担う効果は得ることができるでしょうか。 UI ライブラリを
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
「プロダクトマネージャーこそ、戦略的に読書せよ！」──最短で成果を出すための読書地図
ProductZine Day＆オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine（プロダクトジン）」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。
プロトタイプは問いかけ｜上ノ郷谷 太一
なにかを作るときに、プロトタイプ (この記事では試作品として機能するものを指します) を用意しない人はいないと思います。わたしはデザイナーという職業柄、プロトタイプを利用する機会が多いです。たとえばわたしの場合は、デジタルプロダクトに限らず資料やブログなどの文章もプロトタイプを作成する対象です。よくプロトタイプを利用する一方で、それをうまく使えているのかという点ではまだまだ学ぶ機会が多いなと感じています。 プロトタイプへの期待開発しているプロダクトのプロトタイプをチームとのミーティングなどで共有したところ、いまいち盛り上がらなかった…。よいフィードバックを得られず「なんか良さそう」といった反応は悪くはないんだけど自分はモヤっとした状態になってしまうシーンをわたしは何度も経験してきました。そうなってしまったのは準備不足が原因であるのは間違いないのですが、どんな準備が足りなかったのかもつかめず
2022年4月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UX・UI UXデザイナーは本当にデザイナーなのか デザイン会社 ビートラックス: ブログ WebデザイナーはUXデザイナーより価値が低いわけではないし、UXデザイナーはWebデザイナーの上位互換でもない 一般的にUXデザイナーはWebデザイナーより給料が高かったりしますが、Webデザイナーの価値が低いわけでも上位互換でもないという記事です。 ベテランほど知らずに損してるIllustratorの新常識 2022 UIデザインのための心理学：33の法則・原則（実例つき） | knowledge / baigie Adobe XDで無料のスタータープランを使い続ける方法 | Stocker.jp
UXデザイナーは本当にデザイナー？UXデザインの役割の拡大 デザイン会社 ビートラックス: ブログ
最近とあることに気づいた。UXデザイナーポジションへの応募が多いが、そのバックグラウンドがかなり多種多様なのである。 元々Webデザイナーをしていた人もいるし、マーケター出身の人もいる。デザインとは関係のない学部や職種出身の人もいるし、前職がスタバのバリスタのケースもあった。 UXデザイナーの肩書きがインフレ気味最近では多くのデザイナーがUXデザイナーになりたがっている。 どうしてそうなってしまったのだろうか？おそらく、その裏には我々デザイナーの悲しい存在価値がある。 企業におけるデザイナーの存在は、テクノロジーやマーケティングなど、「動くか動かないか」や「数字」で判断される分野とは異なり、デザインは常に数値化が困難な分野。その不透明さゆえに、ビジネスのフィールドにおいて我々の仕事はあまり真剣に捉えてくれない壁があった。 そこで出てきたのがデザインとビジネスを融合させ、結果に繋がるデザイン
超わかる！ユーザーエクスペリエンス（雑）｜深津 貴之 (fladdict)
社内メンバー全員が、ユーザーエクスペリエンスをざっくり理解するための資料。（注: 以下は、ざっくり最速で基礎知識を説明するものです。厳密な定義は、ちゃんとした資料をご覧ください）。 5秒でわかる雑なUXモデルまず「だいたいあってる、ざっくりした概念図」を出します。 美味しいすき焼きを、お箸で食べて、ニッコリ「すき焼き（コンテンツ）を、お箸（インターフェース）で、食べたら美味しかった（エクスペリエンス）！」 シンプルに示せば、UXとはこれだけです。（注）ここのコンテンツはモノ、サービス、概念なども含みます。 そして「よいエクスペリエンス（雑）」とは、「ユーザーの精神活動をポジティヴにしていくこと」の積み重ねです。 ユーザーの精神が、左から右にシフトしたら、だいたいよいエクスペリエンスもうちょっと広げると、生活や人生をいい感じにすることも含みます。肉体的な変化とか、スキルアップとか…専門家に細
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
UXデザイナー1年目が実務で活かせた25冊｜Goodpatch Blog グッドパッチブログ
初めまして。UXデザイナーのしんやです。私は4月にGoodpatchへ新卒入社し、UXデザイナーとしての仕事を始めました。今期から新卒2年目になります。入社から振り返るとまだ体系化の余地があるUXデザインの仕事は、手探りな部分が多く、学習と実践を繰り返して知識とスキルを身に付けていったと思います。 この記事では、UXデザインに興味がある方、学習をしたい方向けにUXデザインを学習するのに役立った25冊の本をご紹介します。 ご紹介する25冊の本は、UXデザイナー1年目として、求められている品質にたどり着けなくても暗闇を手探りで進まなければいけない状態だった際に、同じチームで仕事ぶりを見ていた先輩デザイナー、エンジニア、代表土屋からおすすめしてもらった本たちです。ぜひUXデザインの理解を深める際に役立ててもらえると嬉しいです！ おすすめされて読んだ本たち UXデザインの目的理解 道具の目的が不明
なぜ優秀なデザイナーでも酷いデザインを生み出してしまうのか？ デザイン会社 ビートラックス: ブログ
日常生活において「なんでこんなデザインにしちゃったんだろう？」と感じることが意外と多い。誰がどう見たって醜いルックス、どうしたって使いにくい操作性、非常に心地悪い体験、などなど。もっと良いデザイナーにデザインさせろよ！と思うかもしれない。でも、もしかしたら原因は他にある可能性も。 優秀なデザイナー ≠ 優れたアウトプット優れたデザイナーに頼めば、必ず優れたデザインをしてもらえるのか？答えはNo。むしろどんな優秀なデザイナーであっても、低いアウトプットのクオリティーが低いものになってしまうこともある。 そして、その理由はデザイナーのスキル以外にあったりする。これは、イコール優秀なデザイナーさえ雇えばクオリティーの高い結果が出るわけではないということでもある。 ■ 醜いデザインが生み出されてしまう主な理由■事前に十分なインプットが得られていない間違った期待値設定クライアントや担当者に対して間違
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Design Tools Database - UI Design Tools
