【2024年6月版】ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジは2010年の創業以来、ウェブ制作事業を中心に事業を展開してきました。この事業では、サービスの質を統一するために2014年頃からワークフローの整備に取り組んできました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 そして、様々なプロジェクトでこのワークフローを実用しながら、今もアップデートを続けています。 また今回のワークフ
新卒デザイナーが1年で学んだ、チームで働くために意識したい10のこと｜en.
こんにちは！ delyでクラシルというレシピ動画サービスのデザイナーをしている @ysk_en です。 いやぁ、この一年本当にいろいろありましたね。 チームでの働き方もプロダクト開発の進め方も何もわからない状態で新社会人生活をスタートしましたが、上司や同僚の支えがあってなんとか今まで生きながらえています。 このnoteでは、新しく入ってくる新卒デザイナーの後輩に向けて書いたメモをベースに、プロダクトの体験設計時に意識すること、困ってどうしようもなくなった時のアドバイス、開発チームでのコミュニケーション、対フィードバック戦術を書き記します。 # プロダクトの体験設計時に意識することそもそも、学生時代に自主制作で俺的最強のデザイン（何かの劣化コピー）をしていた所から、1領域を任せてもらい、チームのKPIにコミットするためには、カルチャーに添った仕事のやり方から学ぶ必要がありました。 ただFig
エンジニアといい感じに連携したいデザイナーの取り組み｜taiga / 佐野大河
こんにちは、デザイナーの佐野大河 @sn_taiga です。今日はエンジニアといい感じに連携したいデザイナーの取り組みについて話します。 社内でC2Cというデザイナー同士で学びを共有し合う場があり、そこで話した内容を社外向けにまとめました。 👉 C2Cについて詳しく書かれている記事はこちら チームのエンジニアにヒアリングしてみた画面を設計するときや仕様を詰めるとき、伝えるとき、動作検証をするときなどなど、日々デザイン業務に取り組む上でエンジニアとコミュニケーションを取るシーンは多いと思います。 そんな中自分が「エンジニアが開発しやすいように」よかれと思ってやっていることを付箋に書き出し、チームのエンジニアにヒアリングをしてみました。 良いと思った付箋に印を付けてもらい、その理由等を聞きました💬 「エンジニアが開発しやすいように」というテーマで書き出してみたものの、むしろデザイナーがエン
良いUIを支えるフロントエンド開発のポイント
前回書いた「なぜUIデザインとフロントエンド開発に注力しているのか」はおかげさまで（自分の記事としては）様々な反響をいただきました。SNS上の言及だけでなくカジュアル面談でも話題にしていただく方が多くとても嬉しいです。 フロントエンド開発とUIデザインの関係についてもう少し掘り下げるため、今回は良いUIを支えるためにフロントエンド開発で重要になるポイントだと Gaji-Labo が考えていることをまとめていきます。 前提：リリースも仮説検証の通過点ウォーターフォール的な開発が主流だった一昔前は、サービスのリリースがひとつのゴールだったように感じます。しかし、Web開発にもアジャイル開発や人間中心設計の手法などが浸透した現在では、リリースしたら終わりというプロジェクトは少なくなりました。（フェーズの変化によりチームの体制が縮小されるというのは当然ありますが、リリース後もある程度の規模感で開発
なぜUIデザインとフロントエンド開発に注力しているのか
Gaji-Labo は “すべてのサービスとプロダクトに「手ざわりのいいUI」を” というタグラインを掲げ、「フロントエンド開発」「UIデザイン」「チームとプロセスの支援」の3つの柱で受託の事業をおこなっています。 現在とくに主力となっているのがフロントエンド開発とUIデザインですが、受託の開発会社・制作会社でこの2つを掲げている会社は少ない気がします。 弊社サイトのキャプチャーインターフェイスは人間に一番近いユーザーインターフェイスはサービスのなかで一番ユーザーに近い部分だと思っています。 僕は15年ちょっと前にHTMLコーダーからキャリアをスタートしました。その頃からHTMLコーディングは地味な仕事だけど「HTMLは情報を」「CSSは表現を」「JSはインタラクションを」ユーザーに直接届けるところに楽しさを見出していました。 その後マークアップエンジニア・フロントエンドエンジニアと世間で
ユーザーファーストであり続けるために開発チームオンボーディング資料を作ってみた｜坪田 朋
※クラシル開発チーム向けの資料を外向けに公開した内容です これから開発メンバーが増えてくるので、カルチャーを言語化してみた。今できている文化もあると思うし、今後の考え方を言語化したモノもある。 これをクラシル開発チームのオンボーディング資料として、継続的にアップデートしていくことにする。 これは何に使うのか・新メンバー向けのカルチャー説明 ・メンバー同士で声を掛け合ってカルチャーを浸透させていく ・採用面接やリファラル採用時の文化説明 作った背景開発部もエンジニア、デザイナーが増えて組織が大きくなってきた。常にユーザーファーストであり続けられるよう今から言語化しておく事にする。 「成長痛」とも言われるが、ベンチャー企業の組織拡大に伴い30 / 50 / 100人の壁が存在していて、組織に歪が生じやすいし、個人で成果を出すのが難しくなってくるタイミングがある。 人が増えていく過程で様々なカル
アジャイル開発にUXアプローチを取り入れるための6つのポイント - ポップインサイト
Meta/Google/X (Twitter) を歴任 現ShopifyのUXデザイナーが解説 ビジネス成果向上に直結する❝速さ❞を生み出すデザインテクニック この記事は、米国Nielsen Norman Groupの許可のもと翻訳したものです。 元記事：The State of UX Agile Development by Hoa Loranger and Page Laubheimer on February 5, 2017 近年の研究結果から、アジャイル開発プロセスにユーザー中心設計を取り入れることでUXが飛躍的に向上していることが明らかになりました。 アジャイル開発は、従来のウォーターフォール開発の様々な問題点を克服できる手法です。しかし、様々なチームでこのアジャイル開発とユーザー中心設計を両立させるためには、新たに発生する問題を解消する必要があります。 近年、アジャイル開発とユ
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
突破するプロダクトマネジメント - クラシル開発チームで実践した事まとめ｜坪田 朋
こんにちは、坪田です。 dely Advent Calendar 3日目の記事です。 昨日は、エンジニアのmochizukiが NetflixのFast JSON APIを使ってみた を書きました！ 僕は、クラシルを運営するdelyでクラシルユーザー体験と、開発部門のマネジメントに責任を持っており、そのプロダクトマネジメントのスタイルを書いてみます。 よく、CXOって何をするのか聞かれますが、僕の場合は社長である堀江さんのビジョンを汲み取り、1秒でも早く、ユーザーに評価される最適な体験を作ってリリースする事を仕事にしてます。プレイヤー領域としては、UIデザインを武器にしているので、ユーザー体験を可視化しながら関係者を巻き込んで開発するスタイルが強みです。 今回は、突破するプロダクトマネジメントという内容で、クラシルで実践しているプロダクトマネジメントの手法について書きました。 タイトルを突
UI/UXデザインのプロセスとプロダクトデザインのプロセスについて | デザインコラム・ブログ | デザイン作成依頼はASOBOAD
UI/UXデザインプロジェクトはどのように進められるのでしょうか。プロダクトに関わるデザインのため、様々な部門や担当者との関わりがあります。つまり綿密な準備・計画が大切です。今回は “UI/UXデザインのプロセスとプロダクトデザインのプロセスについて” グラフィックデザインからUI/UXまで幅広いキャリアを経験している クリスティーン・マジー(Christine Maggi) 氏の動画からご紹介したいと思います。※翻訳・記事掲載は許諾を得ています。(Thank you, Christine Maggi – Design Gal !!) 以下翻訳内容です。 みなさん、こんにちは。Design Gal、クリスティーン・マジーです。この動画とチャンネルをチェックしていただきありがとうございます。 今日はUX/UIデザインプロジェクトのプロセスを説明します。UXとUIは仕事をしたことがない人には少
おすすめの食べ方を見ながら食材を買える体験をデザインした話｜クックパッドマート
こんにちは。クックパッドマート開発チームの長野です。ユーザーさんが日常的に使い続けたくなるサービスにしていくためのサービス開発全般を担当しています。 今日は、先日iOSアプリでリリースした新機能とその開発プロセスについて、お話ししたいと思います。 食べ方を想像しながら食材を選ぶ 今回リリースした新機能は、クックパッドマートで扱う様々な商品（食材）に対して、その食材を使ったおすすめの「食べ方」を提案する、というものです。 これまでも、商品におすすめのレシピを紐付けて見せるということは行なっていたのですが、今回のアップデートではより幅広い種類の「食べ方」とそのレシピを見ることができるようになりました。 ▲「食べ方」が表示されるホーム画面と商品詳細画面 例えるなら、お店の人と対面で買い物をするときに「この魚は煮付けでもいいし、塩焼きでも美味しいよ」などと会話して、自分の気分で食卓をイメージして食
おすすめの食べ方を見ながら食材を買える体験を作った話 - クックパッド開発者ブログ
はじめに こんにちは、買物事業部のデザイナー兼エンジニアの長野です。 生鮮食品ECサービス「クックパッドマート」の開発チームで、注文ユーザー向けのサービス開発全般を担当しています。 今日は、先日クックパッドマートのiOSアプリでリリースした新機能とその開発プロセスについて、お話ししたいと思います。 クックパッドマートの詳細については、以前にも サービス立ち上げ期の話 や、エンジニアメンバーの連載記事 が投稿されているので、そちらもぜひご参照ください。 食べ方を想像しながら食材を選ぶ 今回リリースした新機能は、クックパッドマートで扱う様々な商品（食材）に対して、その食材を使ったおすすめの「食べ方」を提案する、というものです。 これまでのバージョンのアプリでも、商品におすすめのレシピを紐付けて見せるということは行なっていたのですが、今回のアップデートではより幅広い種類の「食べ方」とそのレシピを
プロダクトマネージャーの Job Description
ソフトウェアエンジニアからプロダクトマネージャーにジョブチェンジするにあたり、社内説明するために作った資料を公開します。プロダクトマネージャーという職種はプロダクトマネジメントについて書いてある本（シリコンバレーの PM が書いたもの）でも「定義は会社や組織によって異なる」とあるので、自分の会社でも役割を明確にしておく方がやりやすいだろうと思って作りました。プログラマー/エンジニアは How にフォーカスするけど、プロダクトマネージャーは What にフォーカスする職業だなぁと最近は思っています。 以下は HTML バージョン プロダクトマネージャーの役割 ソフトウェアを継続的に企画・製造してユーザーのニーズを満たし、ビジネス上の成功を実現する ビジネス上の成功とは何か？ Product/Market Fit ※図は Dan Olsen のスライドから引用 Product/Market F
クラシルで実践しているプロダクト改善プロセスのすべて - dely engineering blog
こんにちは！ dely, Inc.でプロダクトマネージャー兼開発部ジェネラルマネージャーをしている奥原 (@okutaku0507) といいます。この記事はdely Advent Calendar 2018の24日目の投稿です。明日は待ちに待ったクリスマスですね。 先日は、弊社CTOの大竹 (@EntreGulss) から「越境型スキルのすゝめ」というタイトルで投稿がありました。自分の立ち位置を理解して、スキルにレバレッジをかけ付加価値つけながら、時代の急激な変化の中で日々戦っているたけさんの考えが書かれていて、とても面白い記事になっています。 さて、Advent Calendarも終盤に差し掛かった今回は「クラシルで実践しているプロダクト改善プロセスのすべて」という題で、弊社が運営しているクラシルで実践しているリーンなプロダクト開発を一つ一つの事細かに紹介します。そのため、とても長い記事
価値実現するプロセスと大事な1つのこと｜たけてつ
世界を少し良くするには、良いモノを世に出すことで良い変化がきっと起こります。良い変化があると自分に良い報酬が返ってきて自分も良い変化が起こると言われています（玉樹真一郎氏の「コンセプトのつくりかた」から） 所属していたオプトではこのようなことを「先義後利」と言っていますが、サービスやプロダクトにおいては、ユーザーに価値を提供することで、ファンになってもらえたり対価が得られたりし、ビジネスが継続できることで、掲げたVisionや描いた世界観に近づいていける。価値実現している。と言えます。 ユーザーに提供する価値は、課題解決型だったり、価値創造型だったりといろいろとありますが、どのようなプロセスを辿るのでしょうか。以前教えて頂いた安藤先生の仰る「価値発見→価値実現→価値伝達」をベースに自分なりに再考し、価値実現するためのプロセスを描いてみました。 価値実現プロセス 価値あるモノをつくるには、価
総合職・デザイナー向け技術基礎研修 2018 - クックパッド開発者ブログ
こんにちは、技術部の長（@s_osa_）です。 先日、新卒の総合職・デザイナー向けに技術基礎研修を行ないました。 そこで研修をするにあたってどのようなことを考えて何をしたか、担当者の視点から書いてみようと思います。 なぜやるのか 研修を担当することになったとき、はじめに「なぜやるのか」「この研修の目的は何なのか」を考え直してみました。 ぼんやりとした「技術についても少しは知っておいてほしい」という気持ちはありましたが、研修内容を考えるにあたって目的を明確にする必要がありました。 研修を受けてもらうのは総合職・デザイナーの人たちです。 エンジニアに対して技術研修があるのは自然ですが、技術職ではない人たちに技術研修を受けてもらうのには然るべき理由があるはずです。 理由の言語化を試みたところ、「研修を受ける人たちは技術職ではないが、テクノロジーカンパニーの一員であることに変わりはない」というとこ
Abstractを用いたデザイン管理システムを導入して1年経ったお話 - BASEプロダクトチームブログ
この記事は、「BASE Advent Calendar 2018」の7日目の記事です。 devblog.thebase.in こんにちは、BASEのデザインチームに所属している北村（@naomi_kun）です。 BASEのデザイン管理ツールに「Abstract」を導入してちょうど1年が経ったので、導入する前を振り返りながら、良かったところの所感をまとめたいと思います。 はじめに 突然ですが、デザインデータの管理ってみなさんどうしていますか？ 共有するのが大変だったり、バージョン管理のルールを厳格にしておかないとメンテがしづらかったりと、デザインデータの管理って非常に面倒ですよね。 BASEもGoogleDriveやDropboxを用いてデータ共有していたものの、ファイルの置き場が煩雑になったり、新しいデータがどれなのか毎回他のデザイナーに確認しなければならないなど、多くの課題を抱えていまし
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインプロジェクト初期の不安定な時期をどうやって突破するか / How to Breakthrough early phases of design project
エンジニアのためのデザインレビュー入門 | より良いプロダクトをつくる - Qiita
