ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System
なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか
コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。
フォント選びが楽しくなる！IDEOが作ったフォントマップがすばらしい！
まるでGoogleマップを操作するような感覚でフォントを探せる！ IDEOが作ったツールなら、希望のGoogleフォントを目で見てすぐに見つけられます。 Google Fontsでは、サイトに簡単に埋め込める多種多様なWebフォントが提供されています。正確には818種類もあるのです。818種類の中からどうやって選べはよいのでしょう？ 条件検索でセリフ、サンセリフ、ディスプレイフォント（見出し文字用フォント）、手書き調、モノスペースなど絞り込んでも、たいていは希望と違うフォントのリストをかき分けて探さなければ理想のフォントにたどり着きません。フォント選びには時間がかかりますね。 そこでIDEOフォントマップを紹介します。かしこい機械学習で、デジタルの地図の上に字形が似たフォント（Googleフォント）を分類します。Googleフォントと比べて、IDEOフォントマップを使う利点がを見ていきます
生まれ変わったFacebook製テストフレームワーク「Jest」とは何か？
長らく停滞していたFacebook製のJavaScriptテストフレーム「Jest」が息を吹き返しています。概要とサンプルを使ったテストの手順を紹介します。JavaScript PlaygroundのJack Franklinによる特別寄稿です。 この記事ではFacebookが開発したテストフレームワークJestを使い、ReactJSコンポーネントをテストする方法を説明します。Jestの独創的な機能、特にReactアプリ向けテストを簡単に実施する機能について説明するまえに、プレーンなJavaScript関数でのJestの使用法を紹介します。 Jestが注目に値するのは、Reactに対応しているだけでなく、JavaScriptアプリケーションのテストにも使用できるからです。ただし、いくつかの機能はユーザーインターフェイスのテストにとても役立つ形で提供されるので、Reactにぴったりです。 サ
サイトの課題はユーザーインタビューで知る (1/2)
「ユーザーインタビュー」。聞いたことはあっても実施するタイミング、方法、結果の活用方法がわからない方も多いのでは？ ヤフーでUXデザイナーを務める瀧知惠美氏が、事例をもとに4回にわたって解説します。（編集部） ユーザーインタビュー（直接ユーザーと話をすること）を業務で活用する場合、わからないこと、うまくいかないことが多々あります。本連載では、ユーザーインタビューを実践するにあたって気をつけるべき細かなポイントを、実施プロセスに沿って紹介します。最初の2回は、Yahoo!ショッピングでユーザーインタビューを活用した事例となります。第1回目の今回は、ユーザーインタビュー実施の意義と準備までまとめました。 そのため、「商品詳細ページでカートボタンが押されにくい」といった課題が見つかると、PDCAを回して商品詳細ページを改善していましたが、大きな効果は得られませんでした。そこで、ユーザー導線を俯瞰
短命に終わる「失敗商品」を買う一定の消費者グループが存在
マサチューセッツ工科大学(MIT）は12月23日、短命に終わってしまう「いわゆる失敗商品」を買う一定の消費者グループが存在するという論文を発表した。 これはMITスローンマネジメントスクールなどの研究者によるもので、いわゆるマーケティング分野のビッグデータ解析。2003年～2005年の間に発売された8809種を調査、3年で店舗から引き上げられた商品を失敗商品とした(3年間で約40％の新商品が生き残った)。 消費者購入履歴と商品寿命を照らしあわせ、『ある種の消費者グループ』が売上に占める比率が多いほど、その商品は短命に終わるという明確な傾向を発見した。その消費者グループが売上の20～50％を占めれば成功確率は31％減少し、さらにその消費者が商品を3回買えば成功の見込みは56％減る。そもそも3年間生き残る新商品が40％なので、そこから56％減れば商品は終わったも同然と言える。 消費者と製品寿命
明朝体は絶滅するのか？ AXIS Font生みの親の挑戦
「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ
世界の先端に触れる！UXのスペシャリストが東京に集結
世界トップレベルの“UX達人”が集うカンファレンス＆ワークショップイベント『UX Days Tokyo 2015』が、4月17日から19日まで東京都内で開かれる。主催はWeb Directions East LLC。 4月17日のカンファレンスでは、「iPhoneアプリ設計の極意」の著者として知られるUXデザイナー Josh Clark氏、メールシステム「MailChimp」のUIを設計したAaron Walter氏、著名コンサルティングファーム「Adaptive Path」のChris Risdon氏などの5人が登壇。ウェアラブルを中心とした「Iot（Internet of Things）」の新しいUI、チームでUXに取り組むための実践的共有方法「Connected UX」、Lean UXのための「ヴィジュアルメソッド」などをテーマに、世界最先端の取り組みを紹介する。 4月18、19日に
明大、タッチパネルを拡張するシートを開発
明治大学は10月3日、タッチパネルの操作部を拡張できる縞模様シールを開発したと発表した。 これは数理学部先端メディアサイエンス学科の研究成果で、導電性素材を縞模様状に配置したシールシート。静電容量式タッチパネルに貼り付ければ、タッチパネル外の部分を触ることで操作することができる。 原理は比較的簡単ながら、たとえばスマホの側面や背面でスクロール操作するといった操作位置の移動に加え、縞模様の形状を変えることでスマートウォッチの小さな画面を大きなタッチ面で操作するモーションの拡大／縮小、直線状のスクロール操作をダイヤルのような円形動作に変換など、さまざまな応用が可能という。
IT農業の推進者が語る「本質はセンサーとカメラじゃない！」 (1/2)
9月6日に仙台で開催されたJAWS FESTA Tohoku 2014において、農業×ITというテーマで講演したのが、アグリフューチャー 代表取締役の女川源（おながわはじめ）氏だ。自身が農家でもある女川氏は、ユニークな語り口調で農業の現状とITのミスマッチについて講演した。 震災で復活するより多くの耕作地が捨てられる 女川氏は、震災前にIT企業から農家になったという経歴の持ち主で、震災後に有限会社アグリフューチャーを設立。コミュニティやメーカーと共に、安価な農業用システムの開発やセンサーデータの活用など、自らIT農業を推進している。 昨年の日経ビジネスでは「農業とITの『通訳者』」と紹介されており、トレードマークのテンガロンハットをかぶり、さまざまなイベントで登壇している。「農家のコミュニティに入る時、テンガロンハットの人として印象が付けられたので、すんなり入っていけた」（女川氏）。今回は
「会社を辞めたい」という優秀な社員に聞くべき8つの質問
必要な社員が会社を辞めようとしている時にすべきこと 会社は社員無しでは成り立たない。優秀な社員が「会社を辞めたい」と申し出てきた時、会社にとっては青天の霹靂（しかも望みもしない）といった場合がよく見られる。そこでYoung Entrepreneur Council （YEC）のメンバーである8人の起業家に、そんな場面に陥った際に投げかけるべき質問は何かと聞いてみた。 会社に何を求めているのか？ 別のポジションに移動することで、本人の不満解消につながるか尋ねてみるといい。不満の原因は、単なる報酬なのか、才能に見合った責任ある仕事を任されていないことなのか、それとも自分の意見が尊重されていないと感じていることなのか。お互いに求めるものを理解していないため、容易に解消できる不満であっても大きな問題と発展してしまうことがあるだ。 社員が会社を去ってしまう前に話し合うこと。これが、あなたと社員が率直
「源ノ角ゴシック」を実現させたアドビ西塚氏の勘と感覚 (1/5)
アドビ Japan R&D 日本語タイポグラフィ シニア デザイナーの西塚涼子氏。「かづらき」「りょうゴシック」のデザインを担当したことでもしられる人物だ 開発に3年をかけたアドビのPan-CJK（汎 中日韓）フォント「Source Han Sans（和名：源ノ角ゴシック）」が7月16日にリリースとなった。 「日本語、中国語の繁体字・簡体字、韓国語いずれも1つのフォントファミリーでカバー」と聞くと、「ああそうなんだ。カバーできるんだ」とすんなり飲み込んでしまうが、Source Han Sansは、日中韓国語をカバーし、かつ「どの国にとっても自然」という点で画期的なフォントだ。 同じ起源を持ち、近い意味を表す漢字でも、日本と中国、韓国とでは書体が異なる。繁体字と簡体字でも全く異なるし、各国に固有の漢字もあるから、話はさらに複雑だ。「どんな書体なら自然なのか」は国によって全く違うのだ。 国ごと
日本MS、社員食堂もクラウド化—「Cloud First, Mobile First」を目指す (1/3)
日本マイクロソフトは、2014年7月9日、同社の品川本社19階にある社員食堂「One Microsoft Cafe」をリニューアル。その中で、「One Microsoft Cafe」のクラウド化が進められることになった。 社員食堂のクラウド化とは何か？ 今回の同社が取り組んだのは、WindowsタブレットおよびMicrosoft Azureによる新発注システムの導入だ。 カード決済機能を備えたWindowsタブレットを使い 柔軟にレジを増減 これまでOne Microsoft Cafeでは、5台のレジを使用して注文に対応していたが、昼食時間帯には多くの社員が訪れるため、レジ前には長蛇の列ができることもしばしばあった。
公開されたグーグルとメーカーの契約 Androidはオープン？ (1/2)
Androidの独占状態に歯止めがかからない。2013年通年でのAndroidのシェアは78.4％。2012年の66.4％からさらに比率を上げたとされている。そのAndroidの魅力の1つが「無料」「オープン」である。だが、GoogleがSamsung／HTCと交わしていた機密扱いの契約が公開され、現実にはかなりの条件がついて回ることが明らかになった。欧州で進行中のAndroidへの独占禁止法調査にも影響を与えるかもしれない。 機密扱いだったグーグルと端末メーカーとの合意書 その内容は？ AndroidとiOSの2強時代とはいうものの、実際のところ2013年はAndroidの年と言える。Gartner調べによる2013年のシェアは、Androidは12ポイントも伸ばして78.4％に、一方のiOSは19.1％から15.6％に減らした。Windows Phoneは前年の2.5％から増えてはいる
寿司もITも鮮度が一番！あきんどスシローのAWS活用術 (1/2)
AWS Summit 2013の2日目にあたる6月6日には、回転寿司チェーンを展開するあきんどスシローがIT活用やクラウド導入について披露した。自慢の寿司をふるまいながらの講演は、回転寿司屋の舞台裏がつまびらかにされた笑いの絶えないセッションとなった。 中とろ vs システム 「スシロー」は関西を中心に全国350店舗を展開する回転寿司のチェーン店。年間の来店客数は日本の人口と同じ1億2000万人にのぼり、売上高では1000億円を超えるという。全店舗1皿105円という均一価格で有名だが、えびアボガドを始め、既存の寿司の常識を覆す新しいメニューを出すことでも知られている。最近では、189円の吟味ネタという取り組みも進めている。 今回のAWS Summit 2013では、情報システム部 部長の田中覚氏が「中とろより価値あるITを。あきんどスシローのクラウド活用術」というタイトルで、AWS上に構築
アスキーゲーム:Xbox 360の独自システム「実績」について、達人が熱く語る！ (1/4)
Xbox 360登場時に新たに設けられた謎のポイント「ゲーマースコア」。Xbox 360向けの各ゲームに設定された「実績」をクリアすることで、ゲーマースコアとして実績に見合ったポイントが加算されるシステムだ。 ゲーマースコアは、自分固有のIDである「ゲーマータグ」に紐付けられ、数々のゲームをプレイしていくことで、どんどんと加算されていく。しかし、ゲーマースコアを貯めたからといって、特に何かと交換できるわけではない。あるのは達成感と、「ポコン」という何とも言えない不思議なサウンドのみである。今回はそんな「実績」に魂を惹かれた男たちが、お台場という少々似合わない場所にて、熱くトークを繰り広げる……。 ところで「実績」って一体何ナンだ？ と、その前に読者にはXbox 360に備わる「実績」というシステムについて、知らない人も多いと思う。そこでここでは「実績」について説明しよう。 「実績」とは、冒
「デザイナーのためのiPhoneアプリUI/UX設計」本日発売
iPhoneアプリのUI/UX設計からIllustratorを使ったUIパーツの作成、Xcodeでの組み込み、App Storeでの販売までを紹介した書籍『デザイナーのためのiPhoneアプリUI/UX設計』（大橋 学・段 霞・野澤紘子・堀内孝彦・真鍋和久 共著）が5月7日、アスキー・メディアワークスから発売されました。Amazon.co.jpほかネット書店、大型書店で購入できます。 イラレで作るiPhoneアプリUIの実践的ガイドブック 「iPhoneアプリのインターフェースデザインの依頼が来たのだが、どこから手を付けていいのかわからない」「スマホのUIパーツはどうやって作る？」――。iPhoneの爆発的な普及によってiPhoneアプリの需要が高まっています。これに伴い、グラフィックデザイナーがiPhoneアプリのデザイン制作を受注するケースや、WebデザイナーがiPhoneアプリを開発
新Webエンジン「Blink」—GoogleはなぜWebKitを捨てたか？ (1/3)
先週、Webブラウザーの世界にふたつほど衝撃的なニュースが走った。ひとつ目はMozillaがSamsungと共同でプログラミング言語Rustをベースにした新Webレンダリングエンジン「Servo」の開発を進めていくと表明したこと、そしてもうひとつが今回の主題、GoogleがWebKitを離れて「Blink」への移行を表明したことだ（開発者向けバイナリーを配布するGoogle Chrome Canary（28.0.1468.0 canary）では、すでにBlinkが含まれている模様）。 Mozillaの抱えるGecko、AppleとGoogleが推進するWebKit、そしてMicrosoftのTridentの3つは、Webブラウザー業界においてシェアのほとんどを握る3大勢力となっている。その勢力のうちのふたつが従来の技術とは別の新しいエンジン採用と開発推進をほぼ同時に発表したことは、今後のト
ログインボタンって本当に必要？ UIの常識を検証する
会員登録制サイトに欠かせないログインボタン。ヘッダーの右上に設置されていることが多いですが、購入などのアクションを起こした時点でログインフォームを表示するようにしておけば、ユーザーにわざわざ「ログインボタン」をクリックしてもらう必要性は薄れます。 ユーザーが明示的にログアウトしない限り、ログイン状態を維持しておくのも有効です。後日再訪問したときには「ようこそ○○さん」などと表示し、ログイン状態が続いていますが、購入や登録情報の閲覧など高いセキュリティが必要なアクションでは再度認証を求めます。わざわざログインしないでもパーソナライズされた情報が表示されるので、ユーザーにとって利便性が高く、運営側にも「会員の行動履歴を取得しやすい」「ターゲティングによりコンバージョン率が上がる」などのメリットがあります。 このように、「ログイン」「ログアウト」ボタンはどの程度目立たせればよいのでしょうか？ 今
アップル風カルーセルUIは意味があるのか？
アップルのサイトで印象的な「カルーセル（画像スライダー）UI」。しばらくすると、ページ上部の大きなエリアが右から左へなめらかに流れていきます。エリア下部のドットや左右の「＜」「＞」をクリックし、手動でも切り替えられます。 カルーセルにはバリエーションがありますが、本記事で取り上げるのは以下のようなスライダー型のUIです。 エリア全体が一定間隔で右から左へ流れていく エリア下部のドットが現在位置を表す ドットや左右の「＜」「＞」をクリックし、手動でも切り替えられる ページを遷移することなくコンテンツが切り替わるので、貴重なエリアを有効活用できる点が優れています。タブと違って、隠れたコンテンツが気付かずに埋れてしまうことも減りそうです。 ただし、広告だと無視されてしまうバナーブラインドネス効果が発生するリスクがあります。脈絡が無く連続性の低いプロモーション画像をつなげると違和感があるため、CD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
