ワークショップをしたり、外部パートナーを招くことで「これからデザインを頑張っていこう」という雰囲気になっても、成果に結びつかなかったり、組織の文化として根付かないことがあります。デザインは『特効薬』でないからこそ持続的な活動が欠かせませんが、何をしたら良いか分からない組織も少なくありません。本セッションでは、確実にデザインを推進していくための計画の立て方を紹介します。
はじめに 弁護士ドットコム デザイナーの林(@taka_piya)です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android
皆さん、こんにちは。開発本部のリサーチ&デザイン室(以下リサデ)の室長の磯野です。今回は、私たちがプロダクトデザイングループ(以下プロデザ)からリサデへと生まれ変わった経緯と、これからの目標について紹介します。 設立の背景と目的開発組織が成長するにつれ、プロダクトの提供価値をより早く、より大きく高めるためにユーザーリサーチ活動の重要性が増してきました。しかし、従来の開発案件に紐づくリサーチだけでは、以下のような課題が生じていました。 リサーチ活動が開発のボトルネックになってしまう戦略的な意思決定へのリサーチ活動の貢献が限定的になってしまうこれらの課題を解消するために、開発案件とは別に幅広い顧客理解や、顧客のビジネス成功につながる課題発見を目的とした、より広範なリサーチ活動が必要とされるようになりました。 また組織のVisionとして「Design boosts」を掲げて、以下のように目指す
Social LoginSocial login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
※本ページは、アフィリエイト広告を利用しています。 ダークパターン(Deceptive Patterns)とは、Webサイトやスマホアプリでユーザーを騙して個人情報や時間やお金をかすめ取るために設計されたユーザーインターフェイスのことです。 たとえば、いつの間にかメール配信に登録されていたり、購入時に手数料が加えられていたり、無料だと思っていたらサブスクを契約させられていたり、登録は簡単なのに退会するのは難しかったり、キャンセルがクリックしにくいようにデザインされていたり、さまざまなダークパターンが存在します。 最近のWebサイトやスマホアプリで見かけるダークパターンをはじめ、それらのダークパターンを反面教師として制作時に気をつけるべきポイントを詳しく解説したUI/UXのデザイン書を紹介します。 ダークパターンに騙されないように知識を増やしておくのにも役立ちます。 本書はダークパターンの名
今年のWWDCから各セッションの動画がYouTubeで視聴できるようになりました。日本語字幕を確認できたり、読み上げソフトで日本語音声で視聴できたりします。 WWDCの各セッションの動画をYouTubeのApple Developerチャンネルで視聴できるようになっていた。https://t.co/hA4RVE0ZxQ 2023年のWWDCのセッションも追加されてる。日本語字幕で視聴できるのが便利。 pic.twitter.com/wbU86jBoBu — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 11, 2024 手軽に視聴できるようになったので、いつもよりたくさんのセッションを視聴することができました。 主にデザインに関連するセッションで気になったものをまとめていきます。 ラインナップは以下の通りです。 visionOSやApp Intentのセッシ
ヒアリングに行くのではない。最初から価値を与えること。これは、プロジェクトの初期対応でデザイナーが取るべき基本的な態度です。 今回のテーマは、デザインの初期対応。その効果的な動き方を紹介します。 デザインプロジェクトのスタートは、他者から依頼を受ける場合と、デザイナー側から提案を始める場合の2つのパターンがありますが、今回はそのうちの「デザイナーが依頼を受けるパターン」について。 初期対応の時点で、デザインの成果の半分は決まってしまいます。それくらい重要なものですが、なせかデザインの世界ではあまり論点化されていません。自分の経験が何かの役に立てばとの期待を込めて。どうぞ。 ヒアリングじゃない。ディスカッションだ。依頼や問い合わせを受けてデザイナーが初期対応すること。これをヒアリングと呼ぶこともありますが、それには注意が必要です。 最初に関係性が固定されるヒアリングに行く。情報を聴きに行く。
2023年も残りわずか、今年も毎年恒例のGoodpatch Design Advent Calendar2023の最終日を担当しておりますグッドパッチ土屋です。(これで毎年クリスマスが嫌になっております) 今年は僕がこの1年の中でかなりのリソースを割いてお手伝いしたDesign Leader Impact Award(以下DLIA)にちなんだ話を書きたいと思います。 「経営にデザインが足りない」という業界の課題に対してNewsPicksとGoodpatchの共催で日本の創業10年未満のスタートアップで働くCDOやCXOなどのデザインリーダーにスポットを当てて表彰するというアワード形式のイベントを11月22日に開催しました。 第一回ファイナリストのデザインリーダー達イベントは新しくできた虎ノ門ヒルズ ステーションタワー TOKYO NODEというオシャレなイベント会場で行われ、セッションでは
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか? 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
私は今、画像生成AIが楽しくて、暇さえあれば色々な画像を生成して楽しんでいます。 もともと、私がAI画像生成を使い始めたきっかけは、Webメディアのデザインの素材として使えるのではないかと思ったことがきっかけです。 私はいくつかのメディアを運営しているのですが、そのなかで多くの写真素材やイラスト素材が必要になります。大抵はフリー素材を使用しているのですが、フリー素材の中に気に入るものがない場合はストックフォトサイトで購入することもありました。 素材探しには結構時間かかることもあったので、AIを使って自分で素材を生成できるならそっちの方が速そうだし、なんか楽しそうだなと思いました。 Midjourneyを使って4か月ほど経ち、これまでに色々な画像を生成して、Webサイトのアイキャッチ、Web広告なんかを作ってきましたが、とても満足しています。 そこで、この記事では、実際にサンプルで作ったWe
こんにちは、石黒です。 スクラムにおけるデザイナーの立ち位置ってどうすればいいの? 開発チームと一緒に動くのか、開発チームとは別に動くのか、こんな疑問の声があちこちから上がってきています。そこで、リクルートマーケティングパートナーズ ( 以下、RMP ) で内製開発を実施している料理サプリのデザイナーは、どのように動いているのかをご紹介します。 また、スクラムに関してはこちらの記事で紹介しておりますので、こちらも併せてご覧いただければと思います。 正しく理解しようアジャイルとスクラム〜アジャイルとは?〜 正しく理解しようアジャイルとスクラム 〜スクラムの概要を知ろう〜 スクラムの始め方 〜私のスクラムとの出会い編〜 料理サプリとは 料理サプリは、プロの料理人による質の高いレシピを無料で提供するサービスです。すべてのレシピに丁寧な調理動画がついているため、知りたかった料理のコツも気になったそ
前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事(厳密には違うんですが、本旨ではないので割愛します)→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い
日本ウェブデザイン株式会社 代表取締役CEO。HCD-Net認定 人間中心設計専門家。使いやすいプロダクトを作る専門家。担当したサイトが、雑誌のユーザビリティランキングで国内トップクラスの評価を受ける。ユーザーエクスペリエンス、情報アーキテクチャ、アクセシビリティ。ライター。 #IBMChampion ux hcd uxd user experience ai ucd watson artifact intelligence chatbot watson knowledge studio watson discovery web design usability scenario persona product management design thinking css3 html5 google analytics design bis innovation big data dx キ
この記事では、マイクロソフトで働く現役プロダクトデザイナーPranava Tandra氏が、一般的なデザインプロセスの各ステップで利用しているFigmaプラグインをまとめてご紹介します。 大前提としてプラグイン(英: Plugin)とは、アプリケーションの機能を拡張するサードパティ製スクリプトのことを指します。 Figmaプラグインは、デザイン作成プロセスのシンプル化や高速化、生産性をアップさせるなど、作業をより快適にすることができます。 ここでは、一般的なデザインプロセスを以下のフェーズに分け、各手順の作業効率を向上させる、便利なFigmaプラグインを詳しく見ていきましょう。 プロジェクトの設定 ワイヤーフレームの作成 コンテンツとの連携 クイックデザイン(ユーティリティ) デザインファイルの最終確認 デザインシステムの作成 アニメーションとプロトタイプ検証 ファイルのエクスポート Co
こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。 入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か?と思い至り、これまで取り組んだことについて書いてみることにしました。 私は現在、メインでSmartHRの基本機能の開発に携わっています。 サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営、Figmaというツールの社内利用推進および組織アカウントの管理・運用に関わっています。 Figmaに関しては、過去にSmartHR UIのリソース(ライブラリ)を一般公開したことで様々な反響がありました。 今回は、SmartHRのプロダクトデザイングループでは普段Figmaをどのように活用しているのか、を複数回に分けて紹介していきます。 第1弾ではプロダクトデザイングループの「デザインデータに対する
こんにちは。root 採用広報担当です。 rootは「Design Doing for More〜デザインの実践を個から組織・事業へ〜」をVisionに、デザインの根源的な力をより多くの人々、より多くのものごとへ活用することで、世界をより良く前進させていくデザインファームです。 今回のnoteでは、 UI/UXデザインを学び始めた頃のメンバーがデザイン基礎を学ぶために活用した本や記事、デザイン業務において愛用しているツールなどを「マイ・ベスト・◯◯」として紹介します。 ぜひ日頃の学習、業務にお役立ていただけましたら嬉しいです! デザインのクオリティを支える基礎知識・情報rootでは、クライアントの事業に対して伴走しながら支援に取り組みます。クライアントにはスタートアップ企業も多く、スタートアップ企業や新規事業開発の現場においては、スキルだけではなくあらゆる知識・情報・経験が求められます。
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く