ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
【悪いUI・良いUI】発想の転換から打開したアイデアまで【デザイン思考】｜Angry Breakfa$t
※某まとめサイトにてまとめていた記事の転用です BASENAME: 2150782012031271001 STATUS: Publish ALLOW COMMENTS: 1 ALLOW PINGS: 1 CONVERT BREAKS: richtext DATE: 12/06/2018 00:54:50 良い・悪いと思ったデザイン例からデザイン思考、デザインに関した事例などを多数サイトやSNSでの投稿を参考・引用してまとめました。 ■はじめにデザインに関する疑問や、ここでの前提をまずまとめていきます。 ―――デザインとは？ （design）の語源は、デ（de：削る）・ザイン（sign：形作る）である。これはラテン語で「私欲を削り落とし、本質を磨き上げること」を意味する。 出典 なぜゴッホは貧乏で、ピカソは金持ちだったのか? | 山口 揚平 |本 | 通販 | Amazon デザイン（de
これぞプロのデザイン！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 UI & UX Micro-Tips: Volume One. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 装飾的な要素をたまに使うのは全く問題ありません 2. UIの要素は互いに区別できるようにする 3. シャドウはわずかな量があるだけで十分 4. 見た目的に分かりやすいフォントを選択する 5. パンくずはユーザーが理解しやすいようにする 6. 彩度の高いカラーは慎重に はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがありま
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります。 それは ディスプレイが非常に多くの多様性を持っている ことです。 正方形に近い形のタブレットもあれば細長い端末もあり、カメラがディスプレイの中に割り込んでいたり、 OS が専有する領域があったりと様々です。物理的な大きさもバラバラですね。 そのくせモバイル端末はタッチパネルで、ディスプレイに触れる UI になっているのです。 ゲーム開発を生業とする多くのエンジニア / アーティスト / ゲームデザイナーは、 これまでに何度も頭を抱えてきたことでしょう。 本稿では、2019 年現
div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。 augmented-ui augmented-ui -GitHub augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。 ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック（Adobe MAX JAPAN 2018発表資料） - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design
Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けていないか確認することができます。 Pages: Login このページに必要な要素 ロゴ 完全なロゴ、もしくはシンボルマークのどちらか。 タイトル ユーザーに何をさせたいかに関するコンテキスト。 アカウントの識別 ユーザーの一意の識別子。 パスワード 自分のアカウントにアクセスを許可するための安全なプライベートコード。 パスワードのリセット ユーザーは自分のパスワードを忘れてしまうかもしれません。 登録するためのリンク ユーザーがアカウントを持っていない場合は、このページにアクセスします。 オ
一休のWebデザイナーとUIデザイナーの違い - 一休.com Developers Blog
この記事は一休.com アドベントカレンダーの20日目の記事です。 qiita.com はじめまして、宿泊サービスのUIデザインを担当しています河村です。 一休のデザイナーは部署ごとに在籍チームが異なります。私は長い間、営業企画部デザイナーとして働いていましたが、今年4月よりプロダクト開発部UIデザイナーとして働いています。（本ブログでは、前者をWebデザイナーとします） WebデザイナーとUIデザイナーをやってみて、多くのことが「違った」ので、どんな違いなのかをお話させていただきます。 目次 １） 仕事内容の違い ２） 必要なスキルの違い ３） 仕事の進め方の違い ４） まとめ 仕事内容の違い ビジュアル表現に特化 一休のWebデザイナーの主な業務内容は、トップページなどの更新作業、施設紹介ページ、特集・企画販促ページ、メールマガジン等の作成です。ページ全体のビジュアルを管理しているので
会社のみんなでDaily UI Design Challengeに取り組んでみた話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog credit: @takaha_shh, @chashi, @52shinNaka, 春野 健吾 ヤフオク!アプリ開発部の中島（@52shinNaka）です。 今日は最近会社の有志でやり始めたデザイン力向上のための取り組みを紹介したいと思います。 Daily UI Design Challengeとは？ Daily UI Design Challengeとは、2015年の10月ごろから西海岸のデザイナーが始めた取り組みで、毎日一つUIのお題が届くメーリングリストです。 一日に一回、こんな感じでメーリスが届くので、 与えられたお題に沿ってUIを作って、DribbbleやUplabsに投稿します。 DribbbleやUplabsとかで
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
UIデザイナーの能力開発ステップと鍛錬方法｜たけてつ
先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。 一方で「デザイナーがいない。」とよく聞きますし「誰かいない？」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっていけるのではないか。と考えるようになりました。 では、デザイナー人口を増やすには、微力ながら自分で何かできないか。と考え、いろいろトライ&エラーした結果、同じ思想を持つCocoda!に出会い共感し、アドバイザーというカタチで力添えさせて頂くことになりました。 今回は、Cocoda!チームへの初アドバイスとして、"UIデザイナーになる、もしくは、より良いUIをアウトプットできるようになる為には、何
メルカリiOSのUIテスト自動化をまるっとご紹介します！ | メルカリエンジニアリング
こんにちは、メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD改善・その他社内の生産性を上げるための自動化を行っています。 今回はiOSのUIテスト自動化について、最近の改善をまとめてご紹介したいと思います。 ざっくり言うと HTMLレポートに出力し、失敗原因を見やすくするようにしました リトライ実行するためのfastlaneプラグインを作りました テスト実行環境をJenkinsからCircleCIに移行しました Slack Commandを使って、簡単に実行できるようにしました これまでのiOSのUIテスト自動化 AQA(旧QA-SET)では去年から、JP版アプリ(iOS / Android)のUIテスト自動化に取り組んでいます。 去年のMercari Tech Conf 2017では、
デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」
デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」 数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は、WEBやUIデザインに役立つ、Adobe XDのUIキットを20種をまとめた「20 Free Adobe XD UI Kits for Web & Mobile App Designers」をご紹介します。 Free Adobe XD Collaboration App by Edwin Delgado – Dribbble どのキットも、無料で利用できるので、チェックしておくと重宝してくれそうです
WEBデザイナーとUIデザイナーは違う職業なの？（求められるスキルや傾向など）｜スズキアユミ（デザインメモ）
【重要：この記事を読む前に】この記事は2018年に書いたもので、すでに4年ほど経過しています。常にトレンドが移り変わる業界ですので、あくまでも過去のものとしてご参考にしてくださいませ！（2022.04.14記） WEBデザイナーとUIデザイナーって、求められるスキルや得られるものって違いがあるの？と質問されて、「それたしかにちゃんと考えたことなかった！！」と思い、私なりに簡単に書き出してみました。 もちろん、会社や顧客によって変わってくるので、あくまでも【傾向】と明記していますが、これからデザイナーを目指している、別の方向へ転職しようと思っている方などに、少しでも参考になれば幸いです！ 【前提】 この記事でのデザイナーの「デザイン範囲」まず、前提として昨今『デザイン』という言葉が広義になり、デザイナーのやることが広範囲になっているので、この記事では『制作・開発工程フェーズをメインとしたデザ
Microsoft、オープンソースの自動UIテストスクリプトツール「WinAppDriver UI Recorder」を公開
Microsoft、オープンソースの自動UIテストスクリプトツール「WinAppDriver UI Recorder」を公開：自動UIテストのスクリプトを簡単に作成できる Microsoftは、Windows 10対応のUI自動化サービス「WinAppDriver」の新しいオープンソーステストスクリプトツール「WinAppDriver UI Recorder」を公開した。 Microsoftは2018年6月20日（米国時間）、「Windows Application Driver」（WinAppDriver）コミュニティー向けの新しいオープンソースツール「WinAppDriver UI Recorder」（以下、UI Recorder）の公開を発表した。UI Recorderは、自動化されたUI（ユーザーインタフェース）テストのスクリプトを簡単に作成できるツールだ。 WinAppDrive
ナビゲーションでありがちな６つのミスと３つの好事例
LiorはAppseeのインバウンドマーケティング部長です。UXデザインの新しいトレンドを追ったり、最新のお気に入りアプリについて話したりするのを楽しんでいます。 アプリはそれ自体が小さな世界のようなものです。マイクロインタラクションが取り入れられた機能の山と膨大なデータの海、創造力を持ちアプリに貢献してくれるユーザーの街などが存在しています。これらの世界を構築するために、アプリデザイナーはその力を発揮します。 ナビゲーションを簡単にしたり、アクセスしやすいオープンな道を開いて、完璧な世界へと仕上げます。ユーザーがアプリを起動するときには必ず、ナビゲーションから始める必要があります。道が分岐している場合は、ユーザーに地図を提供して、その地図を読みやすくすることが重要です。 この記事では、UXやUIのデザイナーが犯しがちなナビゲーションの間違いを紹介します。そして、これらの間違いによってなぜ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator
1冊は持っておきたい！UIデザインや人間の認知についてしっかり学べるデザインの解説書 -UIデザインの教科書
デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
