CASE、IFを使ったディメンションのグループ分け Tableauは、ドラッグ&ドロップで項目を選択することで直感的にグラフを作成でき、分析に際して非常に役立つツールです。単純な操作でグラフの作成が可能なツールですが、単純な計算しかできないわけではありません。計算フィールドという機能を利用することで複雑な計算が必要な項目を作成することが出来ます。 前回ではメジャーとして用いるための計算フィールド作成例をご紹介致しましたが、計算フィールドはディメンションにおいても用いることが出来ます。本稿では筆者が頻繁に利用する、計算フィールドを利用したグループ分けをご紹介致します。使用するデータは、今回もTableauプリセットの「サンプル – ストア」です。 (例) 市町村のグループ分け(北部・中部・南部) 今回の例では大阪府内の市町村を北部・中部・南部の3グループに分けるよう記述します。実際の計算例は

この記事は、2016年12月16日に開催した「フリー ユア UX 2016」における同タイトルのオープニングトークをもとにしています。 2015年末に行ったイベント「UX まとめ」では、「UX」という言葉が世間でどのような意味で用いられているのかを考察しました。その最後にこのようなスライドをお見せしました。 この図では、UXというものはデザインの種類を表すものではなく、人が人工物とインタラクトする際に人の側で生じる主観であるということを説明しています。 人工物、つまり人が何かの意図を持って作ったものは、すべてデザインされています。人工物を「アーティファクト」と言いますが、ではアートとデザインはどのような関係にあるのでしょうか。 アートとデザインの関係については色々な言い方がされています。例えば、「アートは感性的でデザインは論理的だ」とか、「アートは問題提起でデザインは問題解決だ」といったこ

はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 - ITエンジニアに易しいUI/UXデザイン - デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile D

こんにちは、UXデザイングループのデザイナーの上田です。最近ハマってる音楽は、先日オススメしてもらって聴き始めた Little Glee Monster でして、 先月発売の「だから、ひとりじゃない。」を永遠リピートする日々です。 さて、クラウドワークスのUXデザイングループでは、仕事（発注者）と受注者のマッチングサービス「クラウドワークス」の提供すべきユーザー体験の指針として、2017年1月に“UXガイドライン”を作りました。 デザイナーイベントのUX JAM 14で、「自分たちでつくった『UXガイドライン』を片手に、クラウドワークスを作り変える」といったテーマで社外向けの発信はしており、SNSやイベントなどで一部反応は頂いていたものの、ガイドラインの内容自体は公開できてませんでした。そんな中で、もろもろ準備が整ってきたので、今回の記事では初めてその中身を公開できればと思います。 UXガ

のモックアップ作成ツール お手持ちの素材を使って、オンラインですばやく簡単にモックアップをカスタマイズ

今回は、iOSとandroidのアプリアイコン両方をデザインする際に気をつけたいポイントまとめていきます。 iOSとandroidアプリの両方をリリースすることが一般的になり、アイコンを同時に用意することも多いと思います。 両者の公式ガイドラインと標準アプリ、その他の大手アプリなどを参考にしてまとめていきたいと思います。 1.ガイドライン 2.標準アプリアイコン 3.両者の違い 4.事例紹介 5.両方にマッチするポイント 1.ガイドライン iOSはiOS Human Interface Guidlines、androidはGoogle Design GuidlinesのStyle/icons/Product iconsを参考にします。 読んでみたところ、iOSはめっちゃざっくり、androidはかなり詳細に書かれていました。 iOS Human Interface Guidlines実際の

発表レポートブログはこちらです。 http://y-ken.hatenablog.com/entry/elasticsearch-meetup-vol2Read less

システムログやエラーログというのは、開発を行う上では不可欠であり、稼働中のシステムの運用を行っていくうえでも現状のシステムの状態やエラー発生時の過去の動作を知る手掛かりの一つとなります。 弊社では「fluentd + Elasticsearch + Kibana」を利用してログを管理しておりますが、今回はその中でもログをグラフ等で視覚的にわかりやすく表示するツール『Kibana』をご紹介します。 ※ここでは弊社が導入しているKibana4をご紹介いたします。 Kibana is an open source analytics and visualization platform designed to work with Elasticsearch. You use Kibana to search, view, and interact with data stored in Elas

前回まではガイドラインの具体的な内容について解説してきた。今回は、そのガイドラインを基にしたチェックリストと、そのチェックリストを用い製品のユーザビリティを評価する方法について解説する。 チェックリストとは照合を行う為の表のことである。言葉を変えれば、検討の抜け洩れを防ぐために必要事項を洩れなく列記したものである。発想法の一つにもチェックリスト法（Alex F. Asborn）というものがあるが、視野が狭くなってしまうとか先入観があるなど、発想の妨げになるものを解消するための良い手法である。組み込み系ソフトウェアの設計活動にも、チェックリストを使用した手法を利用すれば、使いやすい製品の検討がより効率よく行える。 ガイドラインは、設計者が利用対象者であり、実務で参照してもらうことを想定している。使いやすさを具体的に記述したガイドラインや、ガイドラインに基づいたGUI部品の素材集的な位置づけを

UX Consulting for New Business UXデザインコンサルティングを通して、新規事業の成功に貢献します。 Our Service 直感的なUIや理想のUXの前に、本質的な課題解決を。 事業の根幹となるのはコンセプト、「誰のどんな問題を解決するために存在しているのか？」という問いが重要です。実際、多くの新規事業の失敗原因は、顧客の課題・ニーズが存在していなかったことにあります。しかし、顧客の課題をどう見つけていけばいいのか、アイデアにニーズがあるのかどう確かめればいいのか、に答えるのは簡単ではありません。 私たちは調査を通して課題や機会を明らかにし、共創のための場を通してアイデアを創り、その妥当性をあらゆる手段で検証していきます。常にユーザーからの学びを得つつ、課題解決につながるUXデザインで新規事業の成功に貢献します。

リソースが不足し、予算が取れない中で、企業は成功のほどが不明な大規模のデザインプロジェクトへの投資に乗り気にはなりません。 そんな中Googleは、デザインプロセスを速くし、価値あるインサイトを提供する方法論を作り出しました。 必要最低限の機能を持った製品（MVP）のことは一旦忘れて、１週間以内にプロトタイプを作り出し、テストすることにフォーカスしてみましょう。 Googleデザインスプリントプロセスの概要 Googleデザインスプリントは、５段階のプロセスで構成されます。各段階のプロセスは実行するのにおよそ１日（８時間）かかり、５段階すべて実行するにはおよそ40時間かかります。 素晴らしいデザインプロセスでは、繰り返すこと（イテレーション）が重要です。実際には、最初のスプリントで修正案をつくり、そのあとに少なくとも２回のイテレーションを回すことが強く推奨されています。 また、自分のアイデ

記事内容の要約 デジタル戦略をはじめた2000年以降、顧客の購買行動が劇的に変化 購入だけでなくコミュニケーションにもマイルを付与することで顧客行動を可視化する「MUJI passport」 競合状態だったECと店舗が、「MUJI passport」のデータ活用により協調関係に 人気ブランド「無印良品」を展開する良品計画は、早くからデジタルマーケティングに取り組んでおり、積極的にデータを活用する先進企業として知られている。そして、同社が顧客理解とコミュニケーション促進のために活用しているのがスマートフォンアプリ「MUJI passport」だ。単なるポイントアプリとはまったく異なる視点で設計したというMUJI passportが誕生した経緯に迫る。 顧客とのコミュニケーションを可視化した「MUJI passport」 無印良品の店舗で商品を購入する際、レジスタッフに「MUJI passpo

株式会社 日経BP 〒105-8308 東京都港区虎ノ門4丁目3番12号 →GoogleMapでみる ＜最寄り駅＞ 東京メトロ日比谷線「神谷町駅」4b出口より徒歩5分 東京メトロ南北線　「六本木一丁目駅」泉ガーデン出口より徒歩7分

はじめに この記事は CrowdWorks Advent Calendar 2016 18日目の記事です。1 やすにしと申します。世間一般的に言う、ジャーマネ的なことをやらせていただいております。組織というのはナマモノでして、常に変化し、課題の種のようなものを見過ごすと、後々大変なことになることが多くあります。とはいえ、うまくいっても空気のように当たり前となりますし、うまくいかないと批判の的になるというなんとも世知辛い役割ですね。 我々も、5人ほどのエンジニアだった組織が、9ヶ月ほどで30人を超え、大きな変化を迎えました。人数が多くなるということは、課題が変容し複雑になるということ。当然ながらその複雑な課題に対して対処するわけですが、そこで多くの会社は「マネジメント」をしようとします。ただ、そのマネジメントもやり方を間違えると、活力や改善や変革をする芽を奪ってしまい、一気に硬直化し、数人だ

Windows用キーボードをMacで使うための設定 普段自宅で使用している iMac には、BootCamp 機能で Windows7 をインストールして、両 OS を切り替えて利用しています。 キーボードもそれぞれの OS 用のキーボードを使用していますが、キーボードを取り替えるのが面倒で、どちらか一つにならないかなと考えていました。 そこで、Windows 用のフルキーボードを Mac で利用できると便利だと思い、設定してみました。 なお、OS X Yosemite（バージョン10.10）で設定しています。Sierra（バージョン10.12）で設定するには、こちらの記事”Windows用キーボードをMacで使うためには！（Sierra編）”も参照してください。 Windows 用キーボードは、これです！ ロジクール社ソーラー・無線キーボード K750 です。 電池不要ワイヤレス接続なの

フローチャートを書く事は、時間がかかり、作業効率が悪くなるんじゃないかと思われる方もいらっしゃるとおもいますが、実際はフローチャートを書く事はプログラム作成が効率的になり、それにかかる時間が大幅に節約されます。 また、フローチャートを書いてから作ったプログラムは、バグが大幅に減りプログラムテスト後の修正の時間の短縮になります。 ■フローチャートを書く利点 (1) 頭の中の整理が出来る (2) プログラム作成途中のバグを減らす (3) 完成後のバグの発生率を下げる

実はプログラムを書く前に考えるべきことがある。 プログラムは料理のレシピを作るようなものだ。しかし、料理のレシピと違って人間が読むわけではない。そのレシピを読むのはコンピュータだ。コンピュータにわかる形で伝えてあげなければいけない。 そのためにはどんな順番で、どのような処理で行っていくか、これをあらかじめ考える必要がある。この順番や処理を考える上で便利なのが、フローチャートだ。 このページでは、フローチャートの書き方や考え方をまとめてざっくりと解説する。 これをしっかりと考えながらプログラミングができるかできないかで将来的に大きな差が出てくる。プログラミングの基本だと思って、この機会に理解してしまおう。 プログラミングで使われるフローチャートとは？ フローチャートはキレイなプログラムを組む上で使える手段のひとつだ。プログラムの全体像を直感的に理解できるため、設計や人への説明のときによく利用

はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo

解説記事内の画像はExcel 2016のものですが、操作方法は下記のソフト、下記のバージョンで同じです。 Excel 2016, 2013 PowerPoint 2016, 2013 積み上げ縦棒グラフや、 100%積み上げ横棒グラフといった、積み上げ系の縦棒グラフや横棒グラフに、 こういった線を追加して、 違いを分かりやすく、比べやすくすることができます。 この線のことを、区分線と言います。 区分線を追加するには それでは早速、グラフに区分線を追加設定してみましょう。 「グラフ編集操作の覚え方【Excel 2016・2013編】」でご紹介しているとおり、今現在、グラフの中に無い部品を付け足したい場合には、 「グラフに部品を付け足したい」場合には、「グラフエリア」を選択し、［グラフツール］の［デザイン］タブを使う がお約束なので、 「グラフエリア」を選択し、 ［グラフツール］の［デザイン］