<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>モバイルファースト &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/モバイルファースト/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう</title>
		<link>/rdlabo/22596/</link>
		<pubDate>Wed, 29 Mar 2017 01:00:43 +0000</pubDate>
		<dc:creator><![CDATA[榊原昌彦]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[Ionic 2]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[モバイルファースト]]></category>

		<guid isPermaLink="false">/?p=22596</guid>
		<description><![CDATA[レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイト...]]></description>
				<content:encoded><![CDATA[<p>レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。
WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。</p>

<p>しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。</p>

<h2>レスポンシブとモバイルファースト</h2>

<p>モバイルファーストは、「モバイル環境に最適化した開発手法」と説明することができます。</p>

<p>モバイル（多くはiPhoneを指しました）は解像度が低く、操作方法もPC文化と異なり、かつ通信速度も遅いという制約があります。イベントひとつとっても、onclickでは待機時間があるから、jQueryのtapイベントを使う、というようにPCとモバイル開発の乖離をどのようにするかの課題があります。</p>

<p>モバイルファーストがいわれはじめた2009年当時は「PC版を作ったあと、MediaQueriesを使ってモバイルでも表示させる」というワークフローが主流でしたが、これではPCとモバイル開発の乖離にアプローチするのが難しかったため、「先にモバイル版をつくる」ワークフローを取り入れる現場が多く生まれました。PCよりもモバイルを優先させるので、「モバイルファースト」だったわけです。</p>

<p>その頃は、モバイルファーストとレスポンシブデザインの区別がつかない議論を度々聞きましたが、もうここらへんの誤解は整理された感があります。</p>

<h2>Googleが提示する「次のモバイルファースト」</h2>

<p>モバイルからのアクセスが主流になる中で、Googleは「次のモバイルファースト」として、2つの選択肢を提示しました。AMP（Accelerated Mobile Pages）と、PWA（Progressive Web Apps）です。</p>

<p>簡単に概要をいうと、AMPは超高速でWebサイトを表示することができます。HTMLやJavaScriptは高速化を妨げるものは使えなくなっており、またCSSはインラインのみでの表示でありと、ひたすらページ表示速度をあげるための仕様です。
PWAは「Webのアプリ化」を標榜したもので、インストール型のアプリと同様にWebを使うことができます。代表的な内容でいえば、Webをアプリとしてインストールしたり、オフラインでも表示することができたり、プッシュ通知を受け取ることができるようになります。</p>

<p>Googleはこの2つの仕様により、</p>

<ul>
<li>普通のWebサイトなら、超高速化するためにAMP
<li>いろいろな機能を実装するなら、PWAでWebをアプリ化
</ul>

<p>という2つの「次のモバイルファースト」を提示しました。これは、今の「レスポンシブにしてモバイルで表示できればOK」から大きな変化であり、これからのモバイル体験を大きく変えるものになるのではないでしょうか。</p>

<h2>UIデザインのモバイルファースト</h2>

<p>PWAの標榜する「Webのアプリ化」は、UIデザインにおいても「次のモバイルファースト」を生み出す可能性が高いです。
皆さんご存知の通り、PCと（現在の）モバイル、そしてモバイルアプリはUI文化が異なります。PCとモバイルのWeb表示はレスポンシブデザインによって多くの共通化されたモジュールが使われていますので似通っておりますが（便宜上、これらを「現行WebUI」といいます）、モバイルアプリUIは別物に近いといっていいでしょう。</p>

<p>例えば、「現行WebUI」では、HeaderのロゴはクリックしてHOMEに戻るという文化があります。ほとんどがこのUIを採用しています。しかしながらモバイルアプリはHeader部にロゴは入れませんし、入れていてもクリックさせない場合が多いです。
また、「現行WebUI」ではクリックできる場所は明確にするしきたりがあります。例えばカードデザインでも下に「詳しくみる」と注釈をつけてクリックを促したりします。しかしながら、モバイルアプリUIでは「カードはとりあえずクリックしてみるよね」という風潮があります。</p>

<p><img src="/wp-content/uploads/2017/03/074f1efc473594fd3f8d73e2b8b8f40c.png" alt="" width="640" height="408" class="alignnone size-full wp-image-22621" srcset="/wp-content/uploads/2017/03/074f1efc473594fd3f8d73e2b8b8f40c.png 640w, /wp-content/uploads/2017/03/074f1efc473594fd3f8d73e2b8b8f40c-300x191.png 300w, /wp-content/uploads/2017/03/074f1efc473594fd3f8d73e2b8b8f40c-207x132.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>モバイルファーストで考えた時、Webがアプリ化する前提でのUIの再設計も必要になってくるでしょう。その時に、各デバイスが発表しているデザインガイドラインはとても有用です。</p>

<ul>
  <li><a href="https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">iOS Human Interface Guidelines（日本語版）</a></li>
  <li><a href="https://material.io/jp/guidelines/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">マテリアル デザイン</a></li>
  <li><a href="https://msdn.microsoft.com/ja-jp/mt634411.aspx" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Windows 10 アプリ UX デザイン ガイド（Modern UI）</a></li>
</ul>

<p>AMPのように表示速度に最適化したWebはまた異なるUI文化が生まれてくるのでしょうが、「Webのアプリ化」を標榜するPWAはモバイルWebのUIもアプリサイドに寄せていくことになりそうです。
　</p>

<h2>デバイスの作法に寄り添うために</h2>

<p>WebのUIもアプリサイドに寄っていくことを考えた時、一番大きなハードルになるのは前挙した「各デバイス毎のデザインガイドライン」をどのように吸収するかです。モバイルでは、デバイスの文化に寄り添うUI設計が最もユーザの学習コストが低く、適切なUI,UXを提供することができます。iPhoneはフラットデザイン、Androidはマテリアルデザイン、WindowsPhoneはModern UIを提供するために1リソースで複数デザインパターンを用意して保守し続けることはハードルが高く現実的ではありません。</p>

<p>そのハードルに対して、適切にソリューションを提供してるモバイルフレームワークのひとつに、Ionic 2があります。</p>

<p>Ionic 2は、2017年1月にリリースされた、Angular 2を使って構築するモバイルフレームワークです。現在、（著者が確認する範囲では）唯一のPWA対応を標榜したモバイルフレームワークとなっております。</p>

<h3>Ionic 2のWebComponents</h3>

<p>よくモバイル開発で使われるComponents（CardやFabitなど）を、フラットデザイン、マテリアルデザイン、Modern UIのパターンを用意し、フレームワークが判断して自動的にデザインをデバイスに合わせます。</p>

<p><img src="/wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6.png" alt="" width="640" height="393" class="alignnone size-full wp-image-22361" srcset="/wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6.png 640w, /wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6-300x184.png 300w, /wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6-207x127.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>Ionic 2は、デフォルトで用意しているUIパターンは、複雑になりがちなHTMLを「Web Components」という技術によってカスタムタグを用意して、コーダーの負担を減らす工夫をしています。例えば&lt;button ion-button&gt;Login&lt;/button&gt;というボタンがあると、これをフレームワークが自動的に展開して、ユーザには</p>

<p></p><pre class="crayon-plain-tag">&lt;button block="" ion-button="" class="button button-md button-default button-default-md button-block button-block-md"&gt;
    &lt;span class="button-inner"&gt;Login&lt;/span&gt;
    &lt;div class="button-effect" style="transform: translate3d(392px, -91px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 552ms, opacity 386ms 166ms;"&gt;
    &lt;/div&gt;
&lt;/button&gt;</pre><p></p>

<p>と表示されます。手元のソースコードはシンプルですので、可読性が高く、またデバイス毎の表示に困ることはありません。2017年3月現在、28のコンポーネントがデフォルトで用意されています（<a href="http://ionicframework.com/docs/v2/components/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">コンポーネント一覧は公式リファレンスをご覧下さい</a>）</p>

<p><img src="/wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6.png" alt="" width="640" height="393" class="alignnone size-full wp-image-22361" srcset="/wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6.png 640w, /wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6-300x184.png 300w, /wp-content/uploads/2017/02/2e775995931fe381d9ce29df3b452eb6-207x127.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>また、フレームワークが直下に&lt;ion-app&gt;というタグを生成してくれており、そこにデバイスを示すclass（iPhoneだと<code>ios</code>、Androidは<code>md</code>、WindowsPhoneは<code>wp</code>）をつけてくれます。なので、もしも自分自身でカスタムデザインを用意したい場合、それを親にしてCSS設計することが可能です。</p>

<h3>Ionic 2のオフライン表示</h3>

<p>GoogleのPWAのガイドラインの中で<a href="https://developers.google.com/web/progressive-web-apps/checklist" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">「Progressive Web App Checklist」</a>を提供しています。Webをアプリ化するために、これだけはクリアしてねというチェックリストです。</p>

<p>その中で「オフラインでも表示される」というものがあります。普通のWebサイトでは、キャッシュを持っていてもオフライン環境で更新すると「オフラインです」とエラーがでます。しかしながら、Service Workerという技術を使うと、オフライン環境では自動的にキャッシュを返すことができます。</p>

<p>オフライン対応を有効するのはとても簡単で、<code>src/index.html</code>の17-24行目のコメントアウトを外すだけです。</p>

<p></p><pre class="crayon-plain-tag">&lt;script&gt;
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() =&gt; console.log('service worker installed'))
        .catch(err =&gt; console.log('Error', err));
    }
  &lt;/script&gt;</pre><p></p>

<p>このことによって、Service Workerが対応している場合は<code>service-worker.js</code>を読み込み、オフライン対応が行われます。回線が安定してるPCとは異なり、トンネルの中であったり山中であったりでも安定してコンテンツを提供するためには必須の機能です。
<br>
Ionic 2では、<code>sw-toolbox.js</code>を利用しておりますので、詳細に興味がある方は<a href="https://googlechrome.github.io/sw-toolbox/usage.html#main" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">「sw-toolbox」</a>をご覧下さい。拡張すれば、いろいろなオフライン時の挙動を制御できます。</p>

<h3>Ionic 2のmanifest.json</h3>

<p>PWAでは、Webをアプリストアのアプリ同様にHOME画面にアイコン付きで登録することができます。manifest.jsonは、その時のアイコンであったりとか、起動した時のヘッダー部の配色であったりを定めることができます。
初期では以下の通りです。</p>

<p></p><pre class="crayon-plain-tag">{
  "name": "Ionic",
  "short_name": "Ionic",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}</pre><p></p>

<p>これを設定すると、Androidで表示された場合に自動的に「ホーム画面に追加」というバナーがでてきて、ユーザに対してWebをアプリとして扱うことを提案することができます。</p>

<h4>他のProgressive Web App Checklist</h4>

<p>他のProgressive Web App Checklistは以下の通りです。Webをアプリとして扱うことを考える時に、ぜひご配慮下さい。</p>

<ul>
<li>SSLで提供されている
<li>モバイルに表示が最適化されている（レスポンシブデザイン）
<li>10秒以内に最初のページが表示される
<li>Chrome、Edge、Firefox、Safariで動作する
<li>各ページはURLを持っている
</ul>

<h2>おわりに</h2>

<p>GoogleがAMPとPWAというふたつの選択肢を提示しました。これは、既存のモバイルから設計するデザインワーク中心の「モバイルファースト」から、モバイル体験中心をWebを中心として再設計する新たな「モバイルファースト」を生み出す可能性を秘めています。Webの設計、デザイン、技術の大きな見直しの転換点となるのではないでしょうか。
そこで、ぜひともいちはやく「PWAのサポート」を発表したIonic 2を試していただき、この流れとWebのこれからを体験していただければと思います。</p>

<h3>Ionic 2 の日本語コミュニティあります</h3>

<p>今では随分改善されましたが、Ionic 2はリリース前（特にβ版時代）はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。</p>

<p><a href="https://ionic2-ja.herokuapp.com/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Ionic 2 slackチーム</a></p>
]]></content:encoded>
			</item>
		<item>
		<title>「エンタープライズとUX」ってテーマをふっかけたらめちゃくちゃ濃くて面白かった ─齋藤善寛＆新谷剛史ロングインタビュー</title>
		<link>/shumpei-shiraishi/11938/</link>
		<pubDate>Thu, 25 Dec 2014 04:00:55 +0000</pubDate>
		<dc:creator><![CDATA[白石 俊平]]></dc:creator>
				<category><![CDATA[デザイン]]></category>
		<category><![CDATA[システム開発]]></category>
		<category><![CDATA[BYOD]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[エンタープライズ]]></category>
		<category><![CDATA[コンシューマライゼーション]]></category>
		<category><![CDATA[モバイルオンリー]]></category>
		<category><![CDATA[モバイルファースト]]></category>

		<guid isPermaLink="false">/?p=11938</guid>
		<description><![CDATA[連載： Experts Opinions 「UX」 (5)HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第五弾です。 ぼくも昔はSIerの孫請けとして、エンタープ...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/opinions-ux/" class="series-223" title="Experts Opinions 「UX」" data-wpel-link="internal">Experts Opinions 「UX」</a> (5)</div><p>HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第五弾です。</p>

<p>ぼくも昔はSIerの孫請けとして、エンタープライズ業界の片隅で働いていたので、エンタープライズというキーワードにはつい反応してしまいます。とはいえ、今のエンタープライズ業界がどういう状況かはよく知らないのですが、UXに関する特集を行うにあたっては、「エンタープライズとUX」というテーマで必ず誰かに話を聞きたいと考えていました。</p>

<p>そこで<a href="http://www.2ndfactory.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">株式会社セカンドファクトリー</a>の新谷剛史さんに、このテーマをぶつけてみたところ、取締役副社長 シニアUXストラテジストの齋藤善寛さんも参戦し、めちゃくちゃテンションが高くて密度の濃いインタビューになりました。
今回、「(笑)」が多いのは（主に齋藤さんの）テンションの高さの表れだと思ってください。</p>

<p>エンタープライズとUXについて、ここまで濃くてぶっちゃけ気味のトークはなかなかないんじゃないかな、と自負しております。では皆さんどうぞ、今回もお楽しみください！</p>

<p><img src="/wp-content/uploads/2014/12/UXE1.jpg" alt="" width="640" height="444" class="alignnone size-full wp-image-11952" srcset="/wp-content/uploads/2014/12/UXE1.jpg 640w, /wp-content/uploads/2014/12/UXE1-300x208.jpg 300w, /wp-content/uploads/2014/12/UXE1-207x143.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><span style="font-size: 80%;">　　▲左から、株式会社セカンドファクトリー 新谷剛史さん、同・取締役副社長 シニアUXストラテジスト 齋藤善寛さん</span></p>

<h2>エンタープライズシステムはネガティブな宿命を背負っている？</h2>

<p><br>
<b>白石:</b> では、本日はよろしくお願いします。まず最初にお聞きしたいんですが、「エンタープライズ」という言葉をどのように捉えていらっしゃいますか？</p>

<p><img src="/wp-content/uploads/2014/12/UXE2.jpg" alt="" width="640" height="424" class="alignnone size-full wp-image-11953" srcset="/wp-content/uploads/2014/12/UXE2.jpg 640w, /wp-content/uploads/2014/12/UXE2-300x198.jpg 300w, /wp-content/uploads/2014/12/UXE2-207x137.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><span style="font-size: 80%;">　　▲インタビュアーHTML5 Experts.jp 白石俊平編集長</span>
<br><br>
<b>齋藤:</b> エンタープライズというと、一般的には業務用アプリってことなんでしょうけど、私たちの会社としてはあんまりそこをハッキリ定義してはいないですね。というのも、私たちはエンタープライズに特化した企業というわけではないんです。システムと人間が接するところに新たな価値を生み出せないか、そういうことをずっとやっている。
<br><br>
<b>新谷:</b> 私たちはデザインとエンジニアリングの両輪を回しつつ、ビジネス的な価値を創造することにはすごくこだわってる会社です。それが、私たちが「エンタープライズ系企業」と見なされがちな理由かもしれません。
<br><br>
<b>齋藤:</b> 確かにFlashの仕事を中心にしていた頃から、「エンタープライズ」と呼ばれる領域の仕事はやってきていますね。出退勤のシステムや、社内のアラートシステムをFlashで構築したり。それらの経験を踏まえつつ、あえてエンタープライズとは何かと言えば、「働く」という環境において利用されるものということでしょうね。「働く」という環境においては、人を働かそう、動かそうとするエネルギーがある。<br>それに対して、時には「動きたくない」と反発するエネルギーもあったり…って、こんなんで伝わります？(笑)。</p>

<p><img src="/wp-content/uploads/2014/12/UXE3.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-11954" srcset="/wp-content/uploads/2014/12/UXE3.jpg 640w, /wp-content/uploads/2014/12/UXE3-300x200.jpg 300w, /wp-content/uploads/2014/12/UXE3-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br><br>
<b>白石:</b> はい、大丈夫です、伝わってます(笑)。
<br><br>
<b>齋藤:</b> ってことで、業務で使用するアプリって、どうしても「（会社から）使わされる」という感覚が付きものだと思うんです。勤怠管理システムとかは、使わざるを得ないでしょ。それに、企業は何かと「管理したい」という欲望を抱いてしまいがちですが、それを形として表したものが業務アプリだったりもするわけです。つまりエンタープライズシステムっていうのは、最初からユーザーである従業員からネガティブな印象を持たれがちなもの、そういう宿命を背負っているシステムなんですよ(笑)。
<br><br>
<b>白石:</b> なるほど(笑)。ではお二人は、そのネガティブさをどうにか乗り越えて、価値を生み出すよう改善していく…っていうお仕事をされているってわけですね。それがエンタープライズにおけるUXを改善していくってところに繋がりそうですね。</p>

<h2>エンタープライズアプリにUXが必要な理由</h2>

<p><br>
<b>齋藤:</b> 先程も申し上げたように、ぼくらは「エンタープライズかどうか」というところにはあまりこだわってはいないつもりです。ただ、UXには非常にこだわっている。例えば「エンターテインメント」であっても、「働く」ということであっても、人と情報が交錯する地点というのは必ずあり、そこにはUXが存在します。
<br><br>
<b>白石:</b> 「働く」という行為についてもUXがあるというわけですね。言われてみると当たり前ですが、気づいてませんでした。
<br><br>
<b>齋藤:</b> その通りです。だから、エンタープライズアプリのUXについて考えることは、「オフィスの椅子や机をどうするか」と言った、オフィスデザインを考えるのと本質的には変わらないわけです。
<br><br>
<b>白石:</b> なるほど。そういう捉え方は新鮮です。じゃ、オフィスデザインに真剣に取り組むような企業は、「働く」ということのUXを真剣に捉えていると言ってもいいわけですね。
<br><br>
<b>齋藤:</b> そうそう。そういう企業は、「働く」という体験を改善することにすごく前向きです。ならば当然、日々使うアプリとかも改善の対象になりますよね。職場のUXが改善されることで、職場がエネルギッシュになったりコラボレーティブになったりするなら、素晴らしいことじゃないですか。ちなみに私たちも、オフィスデザインには相当こだわってますよ。
<br><br>
<b>白石:</b> そうした、自社内のUX改善に投資する企業というのは増えてきてますか？</p>

<p><img src="/wp-content/uploads/2014/12/UXE4.jpg" alt="" width="640" height="398" class="alignnone size-full wp-image-11957" srcset="/wp-content/uploads/2014/12/UXE4.jpg 640w, /wp-content/uploads/2014/12/UXE4-300x186.jpg 300w, /wp-content/uploads/2014/12/UXE4-207x128.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br><br>
<b>齋藤:</b> 増えてきてる、と言っていいと思います。例えばBYOD（Bring Your Own Device: 個人デバイスの職場利用）なんかも、UX改善の文脈から語ることができます。使い慣れない／使いにくい端末を会社が押し付けるんじゃなくて、従業員が普段から使って慣れ親しんでいるスマートフォンやタブレットをそのまま業務用端末として使おう、という流れですね。
<br><br>
<b>新谷:</b> そういう流れの中で、エンタープライズの世界もモバイル中心になりつつありますね。今の若い人なんて、「PC持ってないけどスマホ・タブレットなら持っている」という人はザラにいるわけですから。いまだに「PC向けのWebアプリをスマホやタブレットに対応させる」という発想でシステム開発している場合がありますが、その発想はもう古いと言っていいと思います。「スマホ・タブレットで使えるものが、たまたまPCでも使える」という感覚に変えていかないと。
<br><br>
<b>白石:</b> モバイルファーストとか、今じゃモバイルオンリーなんて言葉も出てきてますもんね。
<br><br>
<b>齋藤:</b> こうしてBYODが進んでいくことで、個人のデバイスが「業務用端末」にもなっちゃうわけです。いわば業務時間はどんどん広がってきていると言ってもいいですよね。
<br><br>
そう、そして触れる時間が長ければ長いほど、UXも重要。だから、UXが磨かれたコンシューマー向けアプリを仕事に使うシーンもどんどん増えているんだと思います。FacebookやLINEで仕事のやりとりをするのとかも、珍しいことではなくなりました。こういう消費者向け製品を業務用に使うという流れのことを、<a href="http://en.wikipedia.org/wiki/Consumerization" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">コンシューマライゼーション(Consumerization of IT)</a>と言ったりしますね。
<br><br>
今や、消費者向け製品のほうが進化が速いんですよね。以前は「企業が使っているものが安くなって、そのうち一般消費者が使うようになる」って感じだったのに、今はそれが逆になっちゃっている。例えばKinectみたいなものも今は1万数千円で買えるけど、昔ぼくらがああいうのを使ってアプリを作っていた頃は100万円くらいしていたんです。コンシューマー向け製品を使って企業が安価にモノを作る。そういう時代ですね。ここでも、発想を逆にしないといけない。</p>

<h2>「エンタープライズアプリにUXは必要ない。だって『慣れる』から」という考えについて</h2>

<p><br>
<b>白石:</b> エンタープライズとUXというテーマで以前新谷さんとお話した時、「慣れる」というキーワードがありましたね。「最初は使いにくくても、使っているうちに慣れるから大丈夫」という考えがエンタープライズには根強い…というお話だったかと思いますが。
<br><br>
<b>齋藤:</b> その意見については、「何をおっしゃる！」…って感じですね(笑)。「慣れ」を考慮してUXの設計をするのと、「慣れ」を逃げ道にしてUXの設計を怠るのは、似ているようで全然違います。前者は熟練者への配慮。「初心者にやさしい」は、熟練者にとってはまだるっこしかったりしますからね。でも、後者はただの怠慢。ユーザの慣れを理由にして、UX改善の努力を放棄してはいけません！</p>

<p><br><br>
「慣れ」を逃げの理由にしてはならない理由の一つに、まずは大きな話として、働き方の変化があると思います。派遣の方に来ていただいたり、いろんな企業を渡り歩いたりっていう働き方が普通になってきていて、一つの会社に腰を落ち着けて業務アプリにじっくり慣れる…っていう状況じゃなくなってきてるんですよ。</p>

<p><img src="/wp-content/uploads/2014/12/UXE6.jpg" alt="" width="640" height="428" class="alignnone size-full wp-image-11955" srcset="/wp-content/uploads/2014/12/UXE6.jpg 640w, /wp-content/uploads/2014/12/UXE6-300x200.jpg 300w, /wp-content/uploads/2014/12/UXE6-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br><br>
<b>齋藤:</b> それに、使うこと自体に「慣れる」ことはできるかもしれないけど、だからといって気持ちよく使えるようになるわけじゃないですよね。最初に触って「嫌だ」と思ってしまったら、その印象はずっとついて回るし、それが毎日のことになるとなると、働くモチベーションにも影響するでしょう。毎日アプリの使い勝手にイライラしつつ、出退勤の申請業務とかに時間取られちゃうっていうのは、バカにならないコストだと思いませんか？
<br><br>
<b>白石:</b> なるほど、言われてみればその通りです。それでも「慣れ」の話が付いて回るのは、結局のところUXへの姿勢の違いが現れる部分なのかもしれませんね。例えば、「リモートデスクトップをモバイル機器から使えるようにしとけばとりあえず事足りるだろう」みたいな。
<br><br>
<b>新谷:</b> ああ、そういう企業いっぱいありますね(笑) 。従業員にiPad渡したと言いつつ、従業員の皆さんはiPadでWindows XPの画面見てるとか。おっと、XPって言っちゃ怒られちゃうか…(笑)。
<br><br>
<b>齋藤:</b> ただですね、企業がとにかく何かしようとしている。そのことについては、肯定的に捉えるべきだと思うんです。「iPadでPCの画面を見る」のだって、機能は満たしている。ただそこに「UXがなかった」ということです。<br></p>

<h2>なぜエンタープライズのUXはコンシューマー向けに比べて遅れているのだろう</h2>

<p><br>
<b>白石:</b> コンシューマー向けのWebサイトやアプリのUXは、この数年で本当に良くなってきましたよね。それは、言ってしまえばUXがサービスの売上に少なからず影響を与える…という意識が根付いたからだと思うんです。エンタープライズにおいては、そういう意識の変化は出てきていますか？例えば、「UXが業務の生産性を上げる」とか。
<br><br>
<b>新谷:</b> エンタープライズだと、UXの改善がもたらす影響についてのわかりやすい指標があまりないので、どうしても投資の優先度が落ちちゃうんですよね。UXの改善が、わかりやすく結果に結びつくといいんですけど。「オフィスデザインにこだわったらメディアに取り上げられた」みたいな、「褒められた」という経験でもいい。
<br><br>
<b>齋藤:</b> UX改善の結果がわかりやすいっていう話でいうと、パソナさんの事例があります。これ事例として紹介してくれていいと言われてるんですけど、システムに対して年間3,000件の問い合わせがあったのが、ぼくらが手を入れたあとはゼロになったんです。
<br><br>
<b>白石:</b> それはすごい！そのことによって削減される問い合わせコストもバカにならなそう。
<br><br>
<b>齋藤:</b> そうでしょう？何をしたかっていうと、よくある問い合わせを全部UIに仕込んじゃったんです(笑)。
<br><br>
<b>白石:</b> それはわかりやすい話ですね(笑)。
<br><br>
<b>齋藤:</b> 問い合わせの結果を分析して、「次に何をしたらいいかをわかりやすく記述する」とか、「エラーメッセージをわかりやすくする」とか、そういう努力を積み重ねた感じですね。</p>

<h2>「UX的にイケてる」エンタープライズアプリって、どんな感じ？</h2>

<p><br>
<b>白石:</b> 具体的に「優れたUXを持つエンタープライズシステム」の例ってありますか？
<br><br>
<b>齋藤:</b> そうですね、二つ挙げられるんじゃないかな。
<br><br>
どちらも社内システムの話ですが、一つは従業員自らがUXの改善を行っていくという事例。もう一つは、その企業のコアコンピタンスを突き詰めるため、社内システムのUXを徹底的に改善したという先進的な事例です。</p>

<p><img src="/wp-content/uploads/2014/12/UXE5.jpg" alt="" width="640" height="436" class="alignnone size-full wp-image-11956" srcset="/wp-content/uploads/2014/12/UXE5.jpg 640w, /wp-content/uploads/2014/12/UXE5-300x204.jpg 300w, /wp-content/uploads/2014/12/UXE5-207x141.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br><br>
<b>新谷:</b> では、一つ目の事例は私の方からお話しましょう。
<br><br>
とある大きなメーカーの社内システムの構築を任されたのですが、そこの社員の方々にヒアリングすればするほど、どんどん要件が収集つかなくなっていくんです。ユーザーとなる従業員の数が多すぎて、ニーズがまとまりきらないんですね。一言で「社内システム」とは言うけれども、ユーザーそれぞれに話を聞いていくと、欲しがっているシステムが部門ごとに全く別ものだったりする。
<br><br>
そこで結局、Microsoftの<a href="http://www.microsoft.com/ja-jp/sharepoint/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SharePoint</a>をプラットフォームとして導入することにしました。SharePointは非常に柔軟なシステムで、ユーザ自らがシステムに手を入れていくことができる。いわば、自分たちでUX改善を継続的に行っていけるようなものです。
<br><br>
<b>齋藤:</b> 私たちの会社だと、サイボウズの<a href="https://kintone.cybozu.com/jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">kintone</a>を使って、人事や総務の人たちが自らUIをこしらえたりしてます。こうした「フレキシビリティ」は、今後のエンタープライズシステムにおいてはとても重要になってくるでしょうね。
<br><br>
<b>新谷:</b> また、これらのサービスはクライアント技術としてHTML5が使われているというのも非常に重要です。HTMLやAjaxの知識があるなら、UIは自在に作っていける。データは一箇所に集約したまま、です。
<br><br>
<b>齋藤:</b> 二つ目の事例は、「ドモホルンリンクル」で有名な再春館製薬所さんのコールセンターシステムです。
<br><br>
コールセンターというのは、「同じ時間内で、どれだけ多くの問い合わせを捌くことができたか」が重視されるのが普通です。しかし再春館製薬所さんは、「お客様とどれだけ密なコミュニケーションをとれたか」が会社にとっての価値だと考えている。例えばコールセンターのオペレーターが、「最近お肌のトラブルはありませんか？」とか「お孫さんの誕生日もうすぐですね」とか、そういう話をお客様に向かってするわけです。
お客様としては、「あなたとお話したことないのに、なんでそんなことわかるの？」「私のことをどれだけ知ってくれているの？」という驚き、そして感動に繋がりますよね。
<br><br>
お客様にこういう体験を提供するために、コールセンターの画面 ― 再春館製薬所さんは「お客様」画面と呼んでいますが ― がどれだけ情報ポータルとして洗練されているか、その人自身を感じられるか、というところが彼らの課題だったのです。
かつ、オペレーションはミスなく、素早くこなせる必要がある。
<br><br>
そのために私たちは検討を重ねた結果、スクリーンを複数に分割した形のUIを採用しました。複数のお客様の情報を同時に表示して一覧性を確保しつつ、どれか一つの分割ビューにタッチすると素早く拡大表示される。再春館製薬所さんは「パネルウィンドウシステム」と呼んでいらっしゃいますが、私たちなりにカッコよく言うと、エキスパンド（拡大）型の「コックピットUI」です(笑)。</p>

<p><img src="/wp-content/uploads/2014/12/UXE8.jpg" alt="" width="550" height="362" class="alignnone size-full wp-image-11968" srcset="/wp-content/uploads/2014/12/UXE8.jpg 550w, /wp-content/uploads/2014/12/UXE8-300x197.jpg 300w, /wp-content/uploads/2014/12/UXE8-207x136.jpg 207w" sizes="(max-width: 550px) 100vw, 550px" /><br><span style="font-size: 80%;">　　▲再春館製薬所コールセンターの画面「お客様画面」※写真提供：再春館製薬所</span>
<br><br>
<b>白石:</b> ちょっと感動的なくらいの事例ですね。その話を伺って、以前<a href="https://html5experts.jp/shumpei-shiraishi/11599/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">エキスパートの竹洞さんにインタビューをした際</a>に、「『自社が提供するサービスのユニークな価値とは何か？』という問いに対する答えを持たなければ、真のUX改善は望めない」とお聞きしたのを思い出しました。
<br><br>
再春館製薬所さんにとっては、お客様との密なコミュニケーションこそが会社の中核的な価値であり、そこを突き詰めた結果が、そうしたコールセンターのUI構築につながったんですね。あらゆる企業が自社のコアコンピタンスを自覚して、それを元に業務アプリのUXを改善していく…というのが理想なんでしょうね。
<br><br>
<b>齋藤:</b> その通りです。ただ、これは業務アプリとしては相当レベルの高い例ですよね。残念ながら世の中には、UXへの配慮が足りていない業務アプリも沢山ある。まずは、そうしたアプリを「普通」のレベルに持っていくのが大事かな、と。
<br><br>
<b>白石:</b> それは、「地に足のついた議論」って感じでいいですね(笑)。
<br><br>
<b>齋藤:</b> まずは「普通」を目指さないと。「事故がないオフィス」とか「事故がない厨房」とか、言うまでもなくあたりまえじゃないですか(笑)。それと一緒ですよ。
<br><br>
<b>新谷:</b> そうそう。まずは普通を達成して、その後初めて、CI (Corporate Identity) に基いてUXを向上…とかって話になるんですよね。</p>

<h2>まとめのひとこと</h2>

<p><br>
<b>白石:</b> いやー、まだ聞き足りないことがたくさんあるんですが、お時間がきてしまいました。特に、「UXがエンタープライズ開発をどう変えるか」とかは、お聞きしたかった…。
<br><br>
<b>齋藤:</b> ぼくらだって、全然話し足りないですよ！<br>今回は、全5回のうちの1回目ってところじゃないですか(笑)。
<br><br>
<b>白石:</b> ぜひまたお話を伺いに来たいです！では最後に、今回のテーマである「エンタープライズとUX」について、一言いただけますでしょうか。
<br><br>
<b>齋藤:</b> 「エンタープライズアプリにUXは必要か？」なんて、ぼくから言わせると「何をいまさら」って感じです。むしろ、エンタープライズだからこそUXでしょ？と。企業は人材こそ命でしょ？従業員あってこその企業でしょ？
<br><br>
従業員に建付けの悪い椅子とかあてがってたら、みんな腰痛で会社来なくなっちゃうよ、と(笑)。いい椅子買おうよ、と。エンタープライズアプリのUXに配慮するというのは、そういうことです。ぼくは、業務システムのUX改善は、福利厚生の一つだとすら考えてますから。</p>

<p><img src="/wp-content/uploads/2014/12/UXE7.jpg" alt="" width="640" height="402" class="alignnone size-full wp-image-11958" srcset="/wp-content/uploads/2014/12/UXE7.jpg 640w, /wp-content/uploads/2014/12/UXE7-300x188.jpg 300w, /wp-content/uploads/2014/12/UXE7-207x130.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<br><br>
<b>新谷:</b> 私は、エンタープライズのUXがなかなか改善されないのは、UXという言葉や技術に対して「食わず嫌い」する姿勢も原因の一つだと思ってるんですよね。難しく考え過ぎているところがあるんじゃないかと思うんです。
<br><br>
特に最近はSharePointやkintoneなど、ものすごく手軽にUIを修正したり構築したりする環境が整ってきているのに、結局それを外のSIerに発注したりしてしまう。すると、せっかくUXを自分たちで改善していける環境があり、流れも来ているのに、台なしになってしまう。難しく考えずに、自分たちの使っているアプリがどうやったらもう少し使いやすいかを考えて、実際に自分たちで改善していく。そういう流れを作っていけたらなあ…と思っています。
<br><br>
<b>白石:</b> おふたりともお忙しい中、インタビューにお時間を割いてくださって、本当にありがとうございました！とても楽しくてためになる時間でした。</p>
]]></content:encoded>
		
		<series:name><![CDATA[Experts Opinions 「UX」]]></series:name>
	</item>
	</channel>
</rss>
