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
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
ついに「Adobe XD」の日本語版リリース！Webサイト制作がはかどり過ぎて楽しい | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。長野チーム・デザイナーのずんこです。 突然ですが、今日は何の日かわかりますか？ ・ ・ ・ 答えは、デザイナーのみなさんお待ちかねの「Adobe XD」日本語版のリリース日です！ webデザインの現場でも存分に使える「Adobe XD」。アドビさんのご厚意とPRのため、一足早めに使わせてもらいました。 早速、その使用感についてレポートしていきます。 そもそも「Adobe XD」とはSketchやProttのいいとこ取りソフト 「Adobe XD」の正式名称は「Adobe Experience Design CC」。新しいUXデザインツールとして、プレビュー版が今年の春にリリースされ話題になりました。 公式の記事はこちら。 アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場！ 使い方をクイックに解説 「Adobe XD」は、デザインが作成できるだけで
UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介します
Adobe Experience Design（以下、Adobe XD）の評判はいいって聞くけど、実際のところどうなの？ 使えるの？ そんな疑問がすっきりするAdobe XDで何ができるのか、Webサイトやアプリのワイヤーフレームやプロトタイプを作成するのに便利な機能を紹介します。 Wireframing and Prototyping in Adobe XD 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 UI/UXデザインに適したツールを探して Adobe XDとは Adobe XDのアートボード Adobe XDのシェイプ操作 Adobe XDのオブジェクトのグループ化 Adobe XDのリピート グリッド（Repeat Grid） Adobe XDのエクスポートとインポート Adobe XDでプロトタイプを作成 Adobe X
ウェブサイトをデザインするときにインスピレーションを刺激するUIを集めた「Inspiration UI」
インターネット上に存在する無数のウェブサイトの中から優れたUIのものだけを大量に集め、「404ページ」「マップ」「ショッピングカート」など、UIの優れた部分でカテゴリ分けすることで、デザインの中で参考にしたいポイントを自由に検索できるようにしたサイトが「Inspiration UI」です。 Inspiration UI - Find design inspiration from real live projects http://inspirationui.com/ 「Inspiration UI」のトップページ上部には「Popular」「Recent」「All Patterns」と書かれたタグがあります。 トップページを開いた際には「Popular」が選択された状態になっており、Inspiration UIで人気の高いサイトがズラリと表示されています。 マウスオーバーすると、ウェブサイ
CrossUI - 多数のブラウザに対応したWebアプリケーション開発ライブラリ MOONGIFT
Web技術が進歩していることもあって、これまでローカルでないと実現しなかったようなUI、機能などがWebブラウザ上でできるようになっています。とは言え、それはできるという話であって、実現しようとすればかなり大変なのは間違いありません。 特にUIやJavaScriptと連携させた動きの制御は苦労が伴います。そこで使ってみたいのがCrossUI、JavaScript用のRADツールです。 CrossUIの使い方 CrossUIではリッチなUIを持ったWebアプリケーションが簡単に開発できます。このようなD&Dで画面設計できるツールもあります。 さらに画像編集ソフトウェア。 Outlook風UI。 注文管理システム。 データベースマネージャ。 フローチャート。 表計算。 CrossUIはちょっと昔風（YUIあたり？）のUIとなっていますが、業務アプリケーションとしては十分なデザインでしょう。その
React Storybook - Reactアプリのコンポーネント開発にお供に！ MOONGIFT
Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。 そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理できるようになります。 React Storybookの使い方 デモのTodoアプリです。 データを追加すると、それがロガーに表示されます。 左側のメニューから選択するとデータが表示されている版が選択できました。 さらに未完了タスクの表示を選択しました。 こちらは2つのタスク、ステータスによるフィルタリング機能がついた画面です。 消し込みがかかった版です。 React Storybookを使うことで、UIコンポーネントを分割してその結果を確認しながら開発できるようになります
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
UX Timeline, back to the past!
Since 2015, I am not affiliated, associated, authorized, endorsed by or in any way officially connected to AirBnb, Deezer or others companies displayed on uxtimeline.com. Despite many hours of research on Internet (Wayback Machine; Google Image; etc.). It could remain some mistakes. Please let me know. Designed by Jacinthe BUSSON, COO & Co-founder Fastory.io and Elegantt For Trello
Cookpad × Fablic のデザイナーイベント「Think User First」を開催しました。 - クックパッド開発者ブログ
こんにちは、ユーザーファースト推進室 デザイナーの吉井です。 クックパッドでは去る7月23日（木）、フリマアプリ「フリル」を運営するFablicさんと合同でデザイナー向けにイベントを行いました。 イベントのタイトルにもある通り、"ユーザーファースト"をテーマに掲げ、開発現場での実践事例を交えながら両社の文化やデザイナーの働き方についてご紹介しました。 お集まりいただいた70名の皆さまの熱量も高く、イベントスタート時からパネルディスカッション、懇親会に至るまで、とても充実した時間を過ごさせていただきました。 ご来場いただいた皆さま、本当にありがとうございました。 また今回は多数応募をいただいたため残念ながら抽選に漏れてしまった皆さま、たいへん申し訳ありません。 こういったイベントは今後も開催していきたいと思いますので、またのご参加を心よりお待ちしております！ 最後に、各発表者の当日のスライド
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
実践的なUXデザインとインタラクションデザインの考え方
3. 3 [社外] ・第9回マニフェスト大賞「ASK TOKYO」 ・クラウドを利用した3DCGデータ利活用実験「ARK」 (CG・VFX産業クラウド活用・高連携実証事業) ・Yahoo!クリエイティブアワード よるパネ部門「おやすみひつじ」 [社内] ・写真共有サービス「My365」 ・Pipul アバターエンジン ・ユーザ行動分析サービス「Growth Replay」 ・プッシュ通知配信/解析サービスSDK「Growth Push」 6. ■会社名 ：株式会社シロク ■所在地 ：東京都渋谷区円山町28-3 渋谷YTビル 4F ■設⽴立立 ：2011年年12⽉月1⽇日 ■資本⾦金金 ：5000万円 ■株主 ：株式会社サイバーエージェント 他 会社概要 沿⾰革 2011年10月： 個人プロジェクトとし
フラットデザインの成り立ちとGUIへ実際にどう使うのかがものすごくよく理解できるムービー
影やテクスチャなど余計な装飾を排除したフラットデザインは、ウェブ上で使用するとユーザーがページのどこをクリックしていいかわからなくなるという欠点を持ちつつも、現在では色んな場所で使われています。なぜフラットデザインが優れているのか、そしてどうしたらフラットデザインをコンテンツに使うことができるのか、LGの公開しているムービーを見ると、非常によく分かるようになっています。 LG G3 : Graphic User Interface - YouTube これまでLGは影や光が当たったときのツヤ・テクスチャなどを使った、どちらかというと写実的なアイコンを使ってきました。 ユーザーの注意を引きやすいように、ということでさまざまな素材を追加していったわけです。しかし、レンズをつけたり…… より本格的なカメラに近づけても、ユーザーエクスペリエンスは真の意味で向上しないことに気づきます。 ガシャン、と
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
![[Google調べ] 入力フォームの最適化のために必須な4つの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00f4804fe59acd36d8e9d02e50d10db7dc9a119/height=288;version=1;width=512/https%3A%2F%2Fwww.suzukikenichi.com%2Fblog%2Fwp-content%2Fuploads%2Fsplash_1200_675.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グラフィックデザインにおける各要素の重要性を可視化 – Learning Visual Importance for Graphic Designs and Data Visualizations
UX/UIデザイン - OHAKO | 企画～実装をご支援
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
業務システムのUX向上へ各社動く、富士通はGUI開発支援の米企業と包括契約
ログイン - はてな
PCサイトのUIデザインにおける12のトレンド
