いままでもロボットは、さまざまな形のものが考案されてきたが、実用化されたものといえば産業用ロボットと掃除ロボットくらいだともいえる。そんな中、ネットやモバイルの広がりを経て、いまコミュニケーションロボットが世界的に注目されている。それでは、いまロボットに求められるものは何だろうか？ シャープが2016年5月に発売した「ロボホン」（モバイル型ロボット電話"RoBoHoN"）の共同開発者、株式会社ロボ・ガレージ代表取締役で、東京大学先端科学技術研究センター特任准教授の高橋智隆氏に、ロボホンについて、そしてロボットという製品の未来について聞いた。 お話を伺って感じたのは、まったく新しい製品を世の中に送り出すときの“戦略”がいかに重要か？　それは、技術を磨きあげることだけではないということだ。「人類の夢」であるロボットを"製品"として形にしてきた数少ない人物のコメントは、おそらく多くのデジタル製品

WebデザインやUXデザインの話題では、アップルやグーグル、アマゾンが大人気。でも、ビジネスが成功しているからといって、常にデザインが正しいとは限りません。フォームにおける問題点と改善案を具体的に示します。 これまでに「アップルのように美しく」「グーグルのようにシンプルに」「アマゾンのように分かりやすく」デザインしてほしい、と言われた経験があるでしょうか？ 優れた技術で有名な企業はクライアントから「ゴール」とみなされ、多くの場合そこから学べます。 とはいえフォームのこととなると「デジタルの巨人たち」にさえ改善が必要な点があります。 アップルとアクセシビリティ クライアントはしばしば最初にアップルを引き合いに出すので、ここでもそうします。アップルはフォームを含め、モダンミニマリスト（フラット）デザインのインターフェイスを提供しています。図1に例を示します。 問題はフォームがときどき「ミニマリ

「フルスタックエンジニアよりもデュアルスタックエンジニアのほうが必要」と呼びかけるのが、「えふしん」こと藤川真一さん。Twitterクライアント『モバツイ』の開発者であり、現在はBASE株式会社CTOとして長年Web業界をリードしてきた同氏が考える、いま現場に求められる「デュアルスタック」の考え方とは？ フルスタックは「専門職に失礼」 ——藤川さんが提唱されているデュアルスタックエンジニアの話に入る前に、藤川さんが考えるフルスタックエンジニアの定義について教えていただけますか？ 一時期、流行りましたよね、フルスタックエンジニア。要は、「自分が思いつく範囲のことを全部やりましょう」という話だったと思います。とはいえ、フルスタックと言っておきながら、実は全然フルスタックじゃないんですよね。デザインをやるわけでもないし、そもそもフルスタックエンジニアの役割にマネジメントは含まれていませんから。

資生堂は、日本マイクロソフトの協力の下、オンライン会議に表示される顔に自動でメークや顔色補正を行う「TeleBeauty」を開発した。 昨今、働き方の多様化とともに、場所や時間にとらわれないテレワークが広がっている。女性の利用者も増えているが、その際の課題となるのが、オンライン会議に映るとき、メークや背景はどうするかという悩みだそうだ。 資生堂 宣伝・デザイン部 クリエーティブ企画室長の片岡まり氏によると、「当社の調査でも、いつも緊張するという声が多かった。例えば、在宅勤務時にスマホからオンライン会議に参加していたら、向こうでは大きなモニターを使っていたらしく、そうとは知らずに結構なサイズでノーメークの顔を映していたり、海外の会議だと時差があるので、早朝・深夜に身なりを整えるが大変だったり。PCのカメラも下からのアングルなので首やあごが太く見えたり、肌色もきれいに映らなかったりして、たとえ

「え？こんなものまで？」と驚くほどたくさん、それも親しみやすいタッチで統一されたイラストが揃うフリー素材サイト「いらすとや」が大人気。「日本が「いらすとや」だらけになってる」「イラストレーターの仕事を奪っているのでは？」との声が上がるほど、あちこちで使われています。 実際、「いらすとや」はWebデザインでも使い勝手がよく、とても便利。でも、案件によっては「競合サイトとイラストがかぶってしまう」「別のタッチのイラストが使いたい」といったこともありますよね。そこで、使い勝手のいいイラスト素材サイトを厳選して、各サイトの特徴をまとめてみました。 なお、商用利用可能なサイトの場合でも、グッズや再配布、販売目的での利用は禁止されていることがほとんどです。必ず各サイトの利用規約を確認してください。 「いらすとや」の作者が運営するゆるかわサイト『いらすとん』 http://www.irasuton.co

「購入ボタンは緑色がいいって専門家が言っている」「いや、Amazonのオレンジだ」なんて不毛な議論をしていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールを3つ紹介します。 『ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール』では、Webサイトの成果を大幅に改善してくれる4つの有名な心理学ルールについて説明しました。今回は、色や人間の注意力持続時間、反応を研究したさらに3つの心理学ルールを紹介します。そして、ルールに沿ってWebサイトを改善し、より大きな成功を得る方法について説明します。 では、始めます。 ルール1：人間が注意力を持続できる時間は、毎年短くなっている 2015年、Microsoftは2000人の被験者を対象とする調査を実行し（調査結果PDF）、脳波記録装置を使って112人以上の人びとの脳活用をモニタリングしました

Web制作やアプリ開発に欠かせないワイヤーフレーム。 プロジェクトをスムーズに進めるために気をつけたいポイントとは？ Webプロジェクトについてクライアントと話し合い、望むべき最終結果を決めるときには、アイデアをまとめたあと、クライアントに対してビジョンをシンプルに分かりやすく説明しなければなりません。ここで役に立つのが「ワイヤーフレーム」です。 では、ワイヤーフレームとはなんでしょうか？ ワイヤーフレームとは、インターフェイスをシンプルな線だけを使って視覚的に表現したり、またはモックアップにしたりすることです。色、フォント、画像といったデザイン的要素はなく、アイデアを伝え、プロジェクトの初期段階でWebサイトのレイアウトを説明するときに使われます。 しかし、ワイヤーフレームを省略したり、あるいはとんでもないワイヤーフレームを描いたりするデザイナーは多いものです。 そこで、今回の記事ではワ

デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？ ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル

UXについて考えるのはストレス？ よいUXを提供しようと必死になってデザイントレンドを追いかけたり、専門書を読み込んだりしていると、やることが多すぎて大変……。まずはこの4つを押さえてみては？ ユーザーエクスペリエンスデザイン（UXデザイン）についてざっとGoogle検索してみると、その検索結果は、記事、ブログ投稿、書籍など、何千件とは言わないまでも、何百件にものぼります。これにはちゃんとした理由があります。それは、UXデザインが複雑で成長を続けている分野であり、一定の技術的および創造的な困難を伴うということです。 ベストなUXを提供するには長期的な視野が必要ですが、デザインのトレンドは刻々と変化し続けているため、乗り遅れないようにするにはとても骨が折れます。次に実施するプロジェクトに関するヒントやコツについて情報を知りすぎていると、やることが多すぎて圧倒されるかもしれません。 できる限り

HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算 実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？　次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。 え、でもこれだとノーマルっぽい？　じゃあこちらでどうでしょう。

SketchやPhotoshopでデザインしたUI、エンジニアとどうやって共有していますか？　Sympliを使ったワークローなら、デザイナーもエンジニアも幸せになれるかもしれません。 2016年、デザインコラボレーションツールは大人気となっています。 一昔前は、カレンダーアプリとToDoリストアプリをうまく組み合わせたプロジェクトチームがほとんどで、その結果もたいていは良いものでした。しかし、デザイン・開発プロセスが複雑になり、特化したコラボレーションツールをめぐる論争はさらに激しくなっています。 では、現在利用可能な「完璧な」デザインコラボレーションプロセスとはどのようなものでしょうか。その定義は少し厄介かもしれませんが、最近デザインコラボレーションツール界の有望な選手を見つけたので、紹介しましょう。 デザインコラボレーションツールを選ぶ上で、好みの問題は大切な要素ですが、結局は誰にとっ

2016年の上期ももうすぐ終わり。下期へ向けて見直しておきたいモバイルUIデザインのトレンドをUXPinのデザインチームから。 モバイル端末の表示を楽しくするには、モバイルデザインをよりよくする必要があります。 UXPinのデザインチームの話題をもとに、2016年のモバイルデザイントレンドを5つ、紹介します。 1.階層化されたインターフェース 当然ですが、デスクトップとモバイルスクリーンの最大の違いは大きさです。モバイルサイトとアプリは余白が少なく、簡単で単純なデザインです。この欠点を補うために、多くのインターフェースが幾重にも重なり合った複数レイヤーを使うことになります。 これらの「積み重ねられた」インターフェースは書類の山のようなもので、ユーザーは開いたり閉じたり、引き出したり、タブを切り替えたり、スワイプしたり、外側と相互に作用したり、あるいは単にウィンドウをより自由に削除したりでき

せっかく最高のアプリを作ったのに、デザインがイマイチイケてない。ちょっと気をつけるだけでデザインのクオリティが一気にアップする、余白恐怖症解消のすすめ。 記事を読む前に「ローワン・アトキンソン：地獄へようこそ」を1分ほどご覧ください。 なにに気づきましたか？ 多くの場合、ローワン・アトキンソンの素晴らしい機転のきいた言動に注目しますが、観客が笑うための無言の時間を取っていることには気づきましたか？ これは笑いの間と呼ばれ、コメディアンが成功するために身につける重要なスキルの1つです。 合間に無言の時間がないローワン・アトキンソンのパフォーマンスを想像してみてください。無言であることがそれぞれのジョークを成功させる鍵であるため、無言の時間がないとそこまで面白くなくなってしまいます。重要な意味を持った無言です。 音楽でも同じ状況があります。とはいえ、完全に無音というよりは、徐々に音が大きくなる

「IoTなんて自分の仕事とは関係なさそう」なんて言わないで。スマートフォンの登場がWeb制作の常識を変えたように、IoTだってフロントエンド開発者やデザイナーが扱う仕事になるかもしれません。 Word Wide Webは日々進化し、27年におよぶ歴史の中でその形は変化してきました。その歴史の中でコンテンツの表示やスタイリングの方法もしばしば移り変わってきました。最近ではレスポンシブWebの登場が大きな変化として挙げられるでしょう。レスポンシブWebは、さまざまなブラウザーとデバイスのサイズに適応させる、1つのWeb（One Web）のアプローチです。 Internet of Things（IoT：モノのインターネット）に対応したデバイスは常に増え続けています。たとえば、Raspberry Pi、スマートウォッチ、声だけで操作できるモバイルデバイスなど、たくさんあります。レスポンシブWebの

こんにちは。ぼく編集の西牧です。 前回は、iPad Proを2台使い、見開きで漫画を描いている人がいるというので行ってみたら、なんと寺田克也さんで驚いたというお話でした。うちのライターの四本さんのお知り合いらしいですが、だったら最初からそう言ってほしかったです。 漫画は見開きページで考えるもの。だから漫画を描くにあたって、2台のiPad Proと、Procreateというアプリ、そしてApple Pencilの組み合わせは、寺田さんにとって最高のものなんだとか。しかもモバイル性が高い。海外の個展や日本各地のイベントに引っ張りだこの寺田さんにとって、それも重要な性能のはずです。 ただ、2台のiPad Proを同時に使うことはAppleも想定していません。だから、やればできるとはいえ、実際にはいろんな不都合が生じます。それを寺田さんは工夫で乗り切っているようですが、もっと使いやすくなるよう、各

どんどん進化しているCSS。コーディングが捗る新しいプロパティや値を使いたいけど、ブラウザー対応が…。でも、CSS変換ツール「PostCSS」の便利なプラグインを利用したら、CSSの最新仕様を心置きなく使えちゃうそうですよ。 前にSitePointで書いた記事『The PostCSS Guide to Improving Selectors and Media Queries』の説明から引き続き、CSSの利用範囲を広げるPostCSSプラグインを紹介します。以前の記事ではセレクターとメディアクエリを拡張することでスタイルシートの構造改善に主眼を置きました。今回は、最新仕様のプロパティや値の実装を中心に紹介します。記事で紹介するプラグインにはそれぞれ異なった機能が備わっており、ニーズに応じて単体でも、組み合わせても効果的に利用できます。 私が個人的に気に入っているものから紹介します。 リセッ

海外サイトで最近よく見かける、メール登録を促すモーダルウィンドウ。なぜあのUIがダメなのか？ 優れた実店舗のUXから考えてみると… インタラクティブなデザインにおいて心理学は重要な役割を果たします。最適なUXを提供するためには、ユーザーに共感し、ユーザーが行動する前にユーザーの意図を汲み取らなければなりません。それによって、ユーザーが求める方向へ簡単に導き、最適なコンテンツを見てもらえるようになります。 この記事では、実店舗が売上を伸ばすために取り組んでいる5つの方法（中にはとても些細なものもあります）について考えてみます。どれもオンラインショップの改善にも応用可能な方法です。 1.レジでの追加購買促進 一般的に、小売店は往々にしてもっとも値段の高い商品を店舗の前面に配置して、お客さまに先に見せて（価格差に関するお客さまの心理を利用するため）、より安価な商品を店の奥に置くことで、とてもお得

「ガチっとスタートアップ」は、ガチ鈴木が日々の取材で見つけたスタートアップの中から、個人的にググッときたサービス、プロダクトを紹介するコーナーである。 180本以上のイラスト作成の講座動画が観放題のイラストレーターを目指す人のためのウェブサービスがPalmie（パルミー）だ。イラストマンガのナンバーワンオンラインスクールを目指すベンチャー企業のパルミーが制作、提供している。 イラスト、マンガ作成に必要な知識が、オンライン動画講座で学べてしまうサービス。無料動画には、“シワの塗り方”、“目の描き方”、“配色講座”などの基礎的なものから、部位の専門的な名称などを説明しながらの“着物の描き方”など専門的な講座も用意されている。学んだあとはイラスト投稿機能“イラレポ”に投稿して、フィードバックが受けられるほか、ただ単に動画を観ていくのではなく、体系的にイラストの描き方が学べる“Palmieカリキュ

チャットボットの会話とデザイン。一見すると何の関係もなさそうですが、「会話がユーザーとのインターフェイスになる」と考えれば、立派なUIのデザイン。ビジュアルだけがデザイナーの仕事ではなくなる未来が近づいているようです。 ピザを注文したいとき、いつものように「ピザが欲しい」と思ってアプリを開く代わりに、メッセージアプリを起動してメッセージを送信。メッセージの受け手はあなたの好みを知っていて、早くピザを食べたがっていることも感じ取ります。同じ日のこと。あなたはピザを注文する前に「『X-Men』の映画チケットを2枚と会場への車を手配して」とも頼みました。 ——いずれの会話も、ピクセルパーフェクトなUIには依存していません。その代わり、ベースとなるサービスは、同じメッセージアプリを利用しています。UXの視覚的な要素は少なくなり、メッセージに応じて反応するように準備されているボットが機能する、会話型