モバイルアプリにおける５つのアニメーションの活用法
10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
ユーザー体験に影響する重要な７つの要素
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 ユーザー体験（UX）は、製品が市場で成功するか、失敗するかを左右する重要なものです。改めて、UXとはどういう意味なのでしょうか。 UXは、製品の「使いやすさ」を示す「ユーザビリティ」と混同されがちです。 実際、教養としてのUXはユーザビリティから始まったものの、次第にユーザビリティを包括するものになっていきました。優れた製品を市場に提供するために、ユーザー体験のあらゆる側面に配慮することが重要です。 UX分野のパイオニアのPeter Morville氏は、同分野のベストセラー著者です。フォーチュン誌に載る上位500の会社にも、UXに関するアドバイスをしています。 ユーザー体験に重要な要素として、彼は以下の７つを挙げました。 役に立つ：Useful 使いやすい
【2017年版】海外のプロトタイピングツール11選（機能比較表つき）
Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。 そのため、「それぞれのツールの特徴ってなんだっけ？」と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局「いつもの」ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。 そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。 シンプルなプロトタイプ制作におすすめ ここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。「使用感や見た目の心地よさの追求」までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。 １.P
フラットデザインのためのベストプラクティス
フラットデザインは、シンプリシティ（単純化、簡素化）の考えにそったミニマリズムにもとづく、洗練されたデザインと考えられているでしょう。しかし、フラットデザインにおけるシンプリシティの実現は簡単ではありません。きれいにまとまったビジュアルと機能的なデザインを創り出すことを考慮し、すべての要素を同じ目的のためにデザインしなければなりません。 ユーザーのためになるフラットデザインの活用方法には、どのようなものがあるか見ていきましょう。 見えないデザイン 不要なスタイリングを取り除きましょう ユーザーが気付かないような、「見えないデザイン」を実践するのは良いことです。なぜなら、ユーザーが毎回デザインに気を取られていては、「体験への没入」の妨げになってしまうからです。ゴールは、特定のアクションやメッセージを、ユーザーに素早く簡単に理解してもらうことのはずです。必要な機能を明らかにするために、デザイン
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
【連載】インタラクションデザインとは？ ⑤団体・書籍編
この記事は、インタラクションデザインをもっと学びたい人向けの連載です。UX Boothの記事を基にインタラクションデザインに関する様々な情報を全５回に分けてご紹介していきます。 ①基礎知識編｜②手法編｜③ツール編｜④著名人編｜⑤団体・書籍編 第５回は団体と書籍についてみていきます。 諸団体 インタラクションデザイナーはどんな団体に属していようと、IxDです。しかし、ネットワークを築いたり、その分野の他の人達から学んだりするには、他のデザイナーを探してみるのも一案です。これらの団体はアメリカ中で参加でき、国際的なものもいくつかあります。 IXDA IxDAのネットワークは、インタラクションデザインの問題を議論するオンラインフォーラムに加えて、インタラクションデザインに夢中な人達が集まり鍛錬を積めるプラットフォームも用意しています。 詳細情報：http://www.ixda.org/ AIGA
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
CSS/JSでここまでできる！美しいアニメーション10選
HTMLやCSS、JSのコードとその実行結果を共有できるサービスのCodePenは、いわばフロントエンドエンジニアの遊び場です。中にはどういったコードで動いているか見当もつかないようなものもあります。 今回はCodePenで公開されているアニメーションの中でも、思わず見入ってしまうような美しいアニメーションを10点ピックアップしてご紹介します。画像の下のCodePen埋め込み部分で「Run Pen」で実際に動かして見て下さい。 [under construction] See the Pen [under construction] by Lucas Bebber (@lbebber) on CodePen. Cloudy Spiral CSS animation See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@ha
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
Sketch 3対応ですぐに使える無料アプリUIキット8選
アプリをデザインしたり、モックアップを作るとき、毎回ゼロからデザインを作るのは大変です。 最近ではPhotoshopやSketch 3で使えるUIのテンプレートキットなどが幅広く出回っており、しかも多くが無料で使用可能です。 そんなお手軽にUIを作ることのできるキットですが、今回は中でもSketch 3に対応している無料のものを集めてみました。 Avital Mobile UI Kit Avital Mobile UI Kit ※ダウンロードにはメールアドレス登録が必要です Phoenix UI Phoenix UI: Vol 1 by Adrian Chiran Carbon: Material UI kit for eCommerce apps Carbon: Material UI kit for ecommerce apps ※ダウンロードにはTwitterでのシェアが必要です F
Slackにおける組織的なUXデザインプロセス
Jerry Cao氏はUXPinのコンテンツストラテジストで、毎日溢れ出る想像力を利用して執筆活動に励んでいます。以前は、Braftonでクライアントにコンテンツストラテジーを開発し、DDB San Franciscoでは従来の広告宣伝に携わっていました。 チームコミュニケーションを円滑にすることを目指すSlackは、2016年のはじめには60万人を超える有料ユーザーを抱え、時価総額300億ドルの評価額となりました。 Slackは仕事をできるだけシンプルに捉え、組織全体で向き合うことで生産性を上げており、デザインプロセスに関してもこれは例外ではありません。 Slackでは400名以上の従業員が働いていますが、彼らは開発者であると同時にSlackのテスターでもあります。全従業員がユーザーとして毎日8時間以上もSlackを使っているので、デザインチームは今までにないほどコンスタントにユーザーか
Webデザイナーがこの夏入れておきたいChrome拡張機能10選 | UX MILK
仕事でもプライベートでも、ブラウザを使う比重はどんどん増えていませんか？ サイト閲覧はもちろん、メールやチャットツールなど、ブラウザベースのものばかりです。Google ChromeやFirefoxの拡張機能なども日に日に進化しており、ブラウザ主体となった私たちの生活のかゆいところに手を伸ばしたアプリが次々と出ています。 今回はGoogle Chromeのおすすめ拡張機能の中でも特にこの夏話題の物を中心にご紹介していきたいと思います。Webデザインや開発などに関わるクリエイター目線で、仕事に便利なものを中心にピックアップしていきます。 Fontface Ninja Chromeに追加：Fontface Ninja Webサイトで使われているWebフォントの種類とフォントサイズなどがマウスオーバーで表示されます。日本語は表示対応していなさそうですが、かっこいい英語フォントなどの名前がすぐわか
動画内の音声が検索可能に！DeepGram が提供する音声認識AI | UX MILK
独自のAIで音声内のキーワードを検索できる「DeepGram」が登場しました。 DeepGramは動画やオーディオ内の会話をAIによって認識し、音声による検索や整理を可能にしたサービスです。オーディオを高度な音声認識によってテキスト化し、検索する仕組みになっています。 主な用途としてはコールセンターの記録やその他音声を扱うアーカイブの整理や、動画編集における素材の仕分け補助などを想定しています。 DeepGramを使ってみる 動画ファイルを登録する DeepGramにサインインすると、まず「ファイルをアップロードしよう！」と促されます。 アップロードせずとも、URLからでも登録できますので、今回は試しにAppleの新作発表会であるWWDCのプレゼンテーション動画のダイジェストをアップロードしてみます。 ※日本語の動画も試してみましたが、うまくいきませんでしたので、英語の動画で進めていきます
Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK
TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日本語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 １. All The Style Guides（allthestyleguides） 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 ２. House of Butto
英語も学べる！海外で今話題のデザイナー向け記事を届けてくれるサイト８選
デザイナー向けの英文記事は良質なものが多いので、英語とデザインの勉強をかねてチェックしている/チェックしたいという人は多いのではないでしょうか。 しかし、英文記事は毎日発信される量も多く、RSSに登録したりTwitterでフォローしてみても、「読む記事を選ぶだけで時間がかかる！」となりがちです。 そこで、今回は海外のデザイナー向けニュースを届けてくれる、ニュースキュレーションサイトを以下の３つのタイプに分けてご紹介します。 毎日ちゃんと読みたい 1週間に１回まとめて読みたい Twitterで流れてきたものを読みたい 毎日ちゃんと読みたい Designer News デザイナーのコミュニティとして有名なサイトです。投稿されたニュースに対して、Up / Down の投票がされる Reddit のような仕組みがあり、評価が高いニュースだけをチェックできます。 また、記事に対するコメントや質問コー
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
RealtimeBoard - UXデザインの最強コラボレーションツール
株式会社リクルートテクノロジーズ UX デザイナー。楽天株式会社、株式会社コンセントを得て現職。人材領域のサービスデザインに従事。ユーザエクスペリエンス設計担当者が集まるコミュニティ UX Tokyo 主宰。 コラボレーションツールの発展と課題 UXに携わる方であれば、UXデザインないしはサービスデザインに関するコラボレーションツールの１つや２つをこれまでに利用した経験があるのではないでしょうか？ UXデザインやサービスデザインのプロセスが多様化し、複雑化する中で我々UXデザインに関わる人間の負荷を軽減してくれる大変便利なツールがオンライン、オフライン問わず次々と登場しています。著者はこれまでにプロトタイプを強みとしたオンラインツール「UXPin」や紙上のテンプレートを無償で公開している「Service Design Toolkit」などを利用してきました。 ところが、どれも長くは続きませ
レスポンスが気持ちいいボタンのUIアニメーション10選
アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。 過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。 とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーションとなるような、ボタンやローディングなどのデザイン案を集めてみました。 レスポンスのよいアニメーション10選 Open & Close by Creativedash Add & Remove by Ricky Boyce Open & Close & Smash by Chuan² Fun Buttons by Eddie Lobanovskiy (Unfold) Submit Button by
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのUIデザインの参考になるスライド10選
