モバイルアプリにおける５つのアニメーションの活用法
10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
これからのUXデザインにおけるモーションデザインの重要性
モーションデザインとは空間の関係性や、機能性、あるいは意図を美しく流動的に説明する際に使われます。「モーション」というと大げさに聞こえるかもしれませんが、効果的に使用したものはさりげなく自然なものです。よく考えられたモーションデザインは、従来のデザイン要素よりもよりUXを高めることができるはずです。 今回はモーションデザインの基礎や、いつ、そしてなぜモーションデザインを使うべきなのか、そしてより良いUXのためにどうモーションデザインを使えば良いのかをお話ししましょう。 モーションを基盤としたデザイン モーションは物語を伝えることができます。アプリがどのように構成され、何ができるのかを表現できるのです。モーションはナビゲーションを再定義し、インタラクションに新たな深度をもたらし、より自然な体験を作り出すのです。クリックしたボタン、画面のトランジションのひとつひとつに物語があることを、モーショ
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
GoogleのUXデザイナーがサイトをチャットボット化して学んだ9つのこと
Adrianは現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。Twitter：@azumbrunnen_。 私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。 何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。 それでは、まいりましょう！ botなどの対話型トレンドに対する憂鬱 私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武
Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
直感的なラピッドプロトタイピングツールMockplusを使ってみた
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。 プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。 ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。 Mockplusとは MockplusはJongde Softwareが提供するラピッドプロトタイ
スーパーマリオのステージ1-1から学べるUX
上海で働くさすらいのゲームデザイナー/ディレクター。日本語、中国語、英語、名古屋弁のマルチリンガルということになっている。 ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの１－１に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たことがないものを作りたい！」と思うものですが、ユーザーにとってみればコンテンツを初めて利用するときの面倒くささがその斬新さに比例して大きくなっていきます。最初の「覚える」段階のUXが悪ければ、その先にどれだけステキな体験が待っていたとしても、そこに到達する前に多くのユーザーは離脱
RealtimeBoard - UXデザインの最強コラボレーションツール
株式会社リクルートテクノロジーズ UX デザイナー。楽天株式会社、株式会社コンセントを得て現職。人材領域のサービスデザインに従事。ユーザエクスペリエンス設計担当者が集まるコミュニティ UX Tokyo 主宰。 コラボレーションツールの発展と課題 UXに携わる方であれば、UXデザインないしはサービスデザインに関するコラボレーションツールの１つや２つをこれまでに利用した経験があるのではないでしょうか？ UXデザインやサービスデザインのプロセスが多様化し、複雑化する中で我々UXデザインに関わる人間の負荷を軽減してくれる大変便利なツールがオンライン、オフライン問わず次々と登場しています。著者はこれまでにプロトタイプを強みとしたオンラインツール「UXPin」や紙上のテンプレートを無償で公開している「Service Design Toolkit」などを利用してきました。 ところが、どれも長くは続きませ
思わず熱中してしまうゲーム風プログラミング学習サイトまとめ
近年ではプログラミングをゲーム風に楽しく学べるサービスが増えていますが、中には「ゲームっぽい」だけでフタを開けてみたらただのプログラミング講座だった…というものも多いです。 もちろん、コードを書く部分はただのプログラミング講座にはなってしまうのですが、いわゆるゲーミフィケーションとよばれる報酬制度や世界観の演出は大事です。 そこで今回はゲーム好きな筆者が試して、実際記事執筆を忘れて遊んでしまいそうになったサービスを厳選してご紹介します。 海外のものも多く、ローカライズされているものを極力選びましたが、されていないものも、頑張れば読める程度の英語のものに絞っています。 CODECOMBAT 言語：Python、JavaScript、CoffeeScript、Lua キャラを選んでダンジョンを進める、本格的なブラウザゲーム風の学習サービスです。キャラをコードで動かしてミッション達成を目指します
アプリのUIデザイナー必見！ 参考になる海外ギャラリーサイト9選
アプリのUIデザインをまとめたギャラリーサイトを紹介します。デザインのアイデアが思いつかないときや、アプリのUIをさらに改善したいときに参考になりますので、ぜひチェックしてみてください。 CAPPTIVATE.co http://capptivate.co/ アプリのUIを動画で見ることができるサイトで、画像をマウスオーバーすることで自動的に動画が再生されます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。 UX Archive http://uxarchive.com/ 「ログイン」や「商品の購入」などユーザーの各行動フローに注目したギャラリーです。ひとつの行動フローが複数枚の画像で表現されています。アプリの機能を考えるとき、どのような画面・項目が必要な
UXでもビジュアルデザインは大事？
Marliは教育とゲームが大好きなコンテンツ・ストラテジストです。彼女の仕事はゲームデザインからWebアプリケーション、モバイルにまで及びます。MarliはTwitterでもUXデザイン、文学、マペットについて発信しています。 『エモーショナル・デザイン―微笑を誘うモノたちのために』において、著者のDon Norman氏は、「システムの見た目は、美しさとユーザビリティ両方のユーザー認識に影響があったのに対して、ユーザビリティはこれらに全く影響がなかった」と語りました。つまり、ビジュアルデザインは、実際のユーザビリティと同じくらい全体のエクスペリエンスに影響するということです。 ビジュアルデザインがユーザビリティと同じくらい、またはそれ以上に大事かもしれないという考えは、何だかしっくりこないでしょう。人間は、見た目の美しい物や人に惹かれてしまうもので、大人も子供も、外見が魅力的だと感じる人を
Flashはなぜその役割を終えたのか
デザイナー/デベロッパー。Fotogramme for Instagram 作者。フリーランサー。ウェブやモバイルアプリのUXディレクション、デザイン、開発を手がけています。 @hiro_kimu emotionale.jp。 Flashという名称が無くなってしまうーー2015年11月末、Flash Professionalのアプリケーション名称を「Adobe Animate CC」に変更するという発表がAdobeからあり、20年に及んだFlashの歴史が転換期を迎えました。「Flashは死んだ」と評されてすでに久しいですが、存在よりも先に名称が消えてしまうことになるとは思わなかった方も多いでしょう。 W3Techsによる調査結果では、2015年12月現在、ウェブサイトでのFlashの採用率は9.6%にまで落ち込んでいます。2011年1月の同調査では28.5%だったことを鑑みると、ウェブに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのUIデザインの参考になるスライド10選