「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

デザインシステムという名の成果物が抱える問題 デザインツール上で UI コンポーネントを並べただけでも『デザインシステム』と呼ぶくらい言葉が広まった今日。2017年に記事にした頃と比べると随分変わったという印象があるものの、デザインシステムと成果物が密接になり過ぎていると感じることがあります。 デザイン組織の成熟度に合わせて施策を変えるべきだと思いますが、事例を検索をしたり書籍を読むと、Lightning Design System や Carbon Design System のような完成されたものが出てきてしまいます。こうした状況だと「デザインシステムを作る」目的が上記のようなサイトを作ることになってしまう場合あります。つまり、デザインシステムとは完成された何かを作り上げることが目的になっているわけです。 足元を見ないで理想を作り上げようとしていないか 事例で見かけるようなデザインシス

Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Hello Web Design teaches design principles, handy shortcuts, and quick solutions to common problems, so you can learn the fundamentals of design and get ahead in your career. Using rea

Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ

管理画面を開発することになったとき、どう作ればいいのか分からないかもしれません。管理画面のデザインに関する記事はたくさんありますが、設計については情報が少ないという問題があります。 私はこれまでいくつかのプロダクト開発に携わってきました。そのほとんどが管理画面をもっていました。この経験を元に、管理画面を設計する上でなにを考えればいいかを解説します。また、プロダクトのフェーズにおける管理画面の考え方についても整理します。 この記事を読むことで、管理画面の作り方がよくわからない状態から、どう作りはじめればいいかがわかるようになると思います。

この本では、ウェブデザイン初心者・入門者の方に向けて、Figmaというデザインツール（本教材の範囲内での利用料は無料）を用いて、サクッとウェブサイトをデザインするための方法をまとめました。 【概要】 ・内容：Figma入門、日本語化の方法、ペーパープロトタイプ、フレーム（キャンバス）の作成、ボタンの作成、ページ遷移、ローカルスタイルの作成、コンポーネント化、スクロール、画像のマスク化、デザインのシェア、プラグインの導入方法 ・所要時間：約1時間 ・必須条件：パソコン操作、メールアドレスもしくはGoogleのアカウント ・推奨OS：macOS / windows ・レベル：★☆☆☆☆

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

こんにちは。くろだです。 自社広告配信サービスを開発・運用する部署に所属するUXデザイナーです。 今回は、担当しているサービスの社内管理画面リニューアルを行った一連の動きをご紹介します。 UXデザインプロセス・アジャイル開発(スクラム)を取り入れたプロジェクト進行や、やってみて気づいた事を軸にまとめてみました。 リニューアルに至る背景 長く走ってきたサービスはどうしても「負債」が溜まってきます。 負債とは、技術負債もありますがUX負債も存在します。 それらの負債を取り除き、更に躍進できるようにしていきたい！ しかし長く走ってきたサービスだけあって、 ステークホルダーが多い…ページ数もとても多い…何が正しいかを見極めるのはとても難しそうです。。 そこで、組織で取り組んできたUXデザインプロセス＋アジャイル開発で進める事にしました！ 全体の動き計画 リニューアル全体の動きは、大きく下記の3段階

​​▼この記事では、前回の記事で紹介した自作アプリを題材にしています。 前回の記事を先に読んでもらえると、この記事の内容がより理解しやすくなると思います！ 【初アプリ】未経験がFlutterで肉牛繁殖農家のためのアプリを作ってみた こんにちは、Takuです。 先日、Flutterで肉牛生育記録管理アプリ「Memow」をリリースしました。​ ​ このアプリのユーザーである自分のオカンオトンは、特にこちらからレクチャーせずとも問題なく使いこなしています。 基本的にオカンがデータを入力し、オトンは共有データを閲覧するという使い方をしているようです。 ​ それまでアナログ管理をしていたオカンオトンがすんなりこのアプリを使用できていることについて、前回の記事を読んでいただいた方から「驚いた」という反応を多くいただきました。 ​ ユーザー（オカンオトン）がこのアプリを使えている理由を自分なりに分析する

今、UIデザイナーや開発者の間で注目を集めている「オブジェクト指向UI」。その発信源である Sociomedia が、御社のシステム開発／アプリケーション開発／UIデザイン力向上をサポートします。 OOUI – オブジェクト指向ユーザーインターフェースとは、オブジェクトを起点として操作体系を設計することです。企画段階におけるコンセプトデザイン、設計段階における画面仕様検討、そして実装を経たデザインルールの組織的な管理段階に至るまで、開発工程全体を通じて適用される、シンプルで強力な基本原理となります。 書籍『オブジェクト指向UIデザイン』 OOUI についてのブログ記事 UIを設計する上でオブジェクトを起点とするという考えは、GUI（グラフィカルユーザーインターフェース）の初期からあり、オブジェクト指向プログラミングとの高い親和性を持って実践されてきました。しかしソフトウェア工学やデザイン手

マテリアルデザインでは、Googleにより作り方のガイドラインがしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを淡々と紹介していきます。WEB制作、アプリ制作時のチェックリストとしてご活用ください。 Google I/O 2018でのガイドラインのアップデートを反映しました。 重要なルール 1 マテリアルから文字をはみ出してはいけない

Googleのマテリアルデザインを主眼にしたリンク集です。 Google公式 Material Design 入門+コンセプト復習編 よくわかるマテリアルデザインの設計コンセプト 今さら聞けない?! 5分でわかる！マテリアルデザイン入門 まずはこの2つでイメージを把握。図解が丁寧で素晴らしいです。 はじめてのマテリアルデザイン入門 上から順に見ていくとマテリアルデザインの概要がつかめるという素晴らしい記事。 Google の新しいデザインガイドライン「Material Design」(Developers.io) 公式ドキュメントの翻訳と、 マテリアルデザインのゴール、基本原則等を丁寧に書いてくれています。 マテリアルデザインをどうやって始めればいいのか？までの解説付き 具体的な基準数値を把握しよう編 アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） iOSヒ

Google I/O2018でMaterial Designが大きくアップデートされました。Material Designのサイトの更新量が大きすぎて全量を把握するのも大変ですが、要点だけまとめました。 目次 ・Material Themingで多様なスタイルが可能に ・コンポーネントの更新 - App Bars：Bottom - Backdrop - Extended FAB - Sheets : Side - Text Fields - ButtonsMaterial Themingで多様なスタイルが可能に今回のアップデートで一番インパクトがあったのがMaterial Themingでした。これまでMaterial Designではどのアプリも画一的なスタイルに制限されていましたが、Material Themingによって多様なスタイルが可能になりました。これにより、ブランドイメージに