アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

Chris氏はプロダクトマーケティングマネージャーであり、デザインとタイポグラフィのバックグラウンドを持っています。アカデミー・オブ・ファイン・アーツでインストラクターを務め、学生にデザイン理論とソフトウェアデザインについて教えています。 デザインシステムをどのように作成すれば、サービスが拡大する際にデザイナーや開発者がいつも直面する問題を解決できるのでしょうか。 少し前に、UXPinのCEOであるMarcin Treder氏は、社内のデザインシステムの構築に役立つ一連の記事を執筆しました。業界のリーダーたちにインタビューすると、世界中のチームにおいて頻発する問題はデザインの一貫性の欠如であるとわかりました。また、デザインチームやユーザーにとって、この一貫性の欠如は数多くの問題を引き起こす可能性があります。 ユーザーの混乱：同じアクションなのにさまざまなパターンがあると、ユーザーは混乱して

10年以上の歳月を経て、Atlassianのデザインは徐々に改良・洗練されていきました。そういった流れの中で、Atlassianは、2012年に最初の公式なデザインシステムを作成しました。当時の最優先の目的は、Atlassianのすべての製品で一貫性を確立することでした。最初の「デザインシステム」は、実際には従来的なスタイルガイドに近いものでした。 次の５年間で、Atlassianはデザインシステムの開発と調整を行い、有益な教訓を学びました。それは、デザインシステムは一貫性の維持だけにとどまらない効果があるということでした。2017年の最新バージョンでは、製品のインターフェイスからフリクションを減らすことに重点が置かれました。そして、デザインシステムを補完するUIライブラリー「Atlaskit」が追加され、デザインシステムの機能が定義されました。 Atlaskitでは、標準となるUIコンポ

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 UX MILK編集長兼デザイナーの三瓶です。 「デザイン」というと、一昔前まではグラフィックやアートの意味合いが強かったですが、今ではサービスデザインや体験のデザインなども注目されるようになりました。そんな中、私たちは「デザイナー」として、今後どのようなキャリアの歩み方をしていけば良いのでしょうか？ 今回はデザイナーの転職サービス「デザイナードラフト」の提供のもと、現在活躍されている３名のデザイナーにそれぞれのキャリア感をお伺いしてきました。 登場人物 広野　萌　株式会社FOLIO CDO 倉光美和　株式会社クックパッド デザイナー 割石裕太　株式会社Fablic / OH アートデ

『バンドリ！ ガールズバンドパーティ！』（以下『ガルパ』）はかわいいキャラクターとオリジナルやカバー曲が多数登場する今人気の「音ゲー」アプリです。アプリのセールスランキング上位にも食い込むほど熱量の高いファンと向き合うために、同社のデザインチームでは普段どういったことを考え、デザインをしているのでしょうか？ 今回は『ガルパ』の開発を手がけるCraft Eggさんのデザイナー３人に、ゲームアプリのデザイン現場について話を聞きました。 ユーザーに負けないコンテンツ愛が必要なデザイン現場 ―『ガルパ』はUX MILKで取り上げる中でも異色の「キャラゲー」です。かわいい女の子がたくさん出てきますが、皆さんはそれぞれ推しの女の子がいますか？ 井口：ひいきになってしまうので、全員推しということでお願いします（笑）。私たちのチームは皆コンテンツ愛がすごいと思います。 ―コンテンツ愛を重視しているようです

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。 クリック率が下がる ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません。しかしコールトゥアクション（CTA）として考えた場合、それこそが問題となります。 CTAボタンにはユーザーの関心を引きクリックを促すような、強いビジュアルの手がかりが必要です。ゴーストボタンのミニマルな見た目では、強いビジュアルの手がかりが足りません。結果としてクリック率の低下を生じます。 クリック率が低いと言うことは、ユーザーのほとんどがゴーストボタンを見逃しているということです。サイトでのエ

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

Paul BoagはUXデザイナーでデジタルトランスフォーメーションのエキスパート。非営利団体がWeb、ソーシャルメディア、モバイルを利用する支援をしている。 私たちは仕事をするために、クライアントとステークホルダーを納得させる必要があります。彼らがいないと、私たちは必要なことをするための承認を得ることができません。しかし、私たちのほとんどは説得するのが驚くほど下手です。よって問題は、私たちがどのように説得に失敗するのか、それについてどのように対処するべきかです。 私は、６月末のオンラインワークショップの準備にあたり、クライアントやステークホルダーとどのように協力して仕事するのかについて、多くのことを考えました。これは、同僚やクライアントから同意を得る方法について４つのパートから説明するものです。 私がこのようなワークショップを開くのは、ほとんどすべての作業において、やる価値があると他人を

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

Benは、UXPinのコンテンツデザイナーです。ウェブデザインとバックエンドの開発の、両方の仕事をしています。サイドビジネスとして、ウェブコミックの作成者のためのコンテンツマネジメントシステムの構築・保全の仕事をしており、年に１回NaNoWriMoにも参加しています。 プロトタイプを作成するプロダクトマネージャーには多くの選択肢があります。手書きのスケッチをチームに提供することもできますし、PhotoshopやSketchで大まかなビジュアルを作画することもできます。ビジョンを伝えるために完璧なドキュメントを作成することもあるでしょう。 これらすべてに共通することがあります。それは、アイデアや課題から完成品に至るまでの一連の流れを示すということです。残念ながら、このプロセスの統一された呼び方はありません。ある人はローファイと呼びますが、別の人はワイヤーフレームとも呼びます。たとえば「サムネ

Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？　実はワイヤーフレームは進化し続けています。 ワイヤーフ

Davidはデジタル製品のデザインを10年以上行っています。彼はブダペストにある20名のデザインチーム、UX Studioの創設者です。彼らの顧客には、HBOのような国際的ブランドのほかに、ベルリンやロンドンの新規事業も含まれます。 性格が悪いように聞こえるかもしれませんが、デザインスプリントが流行する前から私はデザインスプリントを実践していました。 数年前、デザインスプリントについての書籍が存在せず、ブログ記事も非常に少なかったとき、私たちはUX Studioでデザインスプリントを実践していました。まず、デザインの仕事を開発者のスプリントに合わせて行うことから始めて、継続的にスプリントを繰り返せるようにしました。スプリントを今では私たちは継続的なデザインプロセスの一部として、週単位でデザインスプリントを活用しています。 この記事では、私がこれまでに学んできたことと、私たちがデザインスプリ

Stephen Moyersはオンラインのマーケティング担当およびデザイナー、テクノロジーに詳しい熱心なブロガーです。彼はロサンゼルスに基点を置くSPINX Digital Agencyと契約しています。 音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。 Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。 ネガティブスペース ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要

Alanはアイルランド人のプロダクトデザイナー。専門はビジュアルデザイン、イラストレーション、ブランドアイデンティティ。 デザインシステム言語（Design System Language、以下デザイン言語）という言葉が、デザイン業界でバズワードになっています。 編注：デザインシステム言語は、デザイン原則やパターンによって定義されたデザインに関する共通の言語。デザイン要素の名称やタイポグラフィ、配色などのルールを含みます。 しかし実際、デザイン言語は製品づくりにおいてどう有用なのでしょうか？　この記事では、デザイン言語がなぜ必要なのかを理解してもらえるよう、デザイン言語の基本について説明しようと思います。 基礎となる言語を作ることが、プラットフォーム内のデザイン哲学と方法論を１つに結びつける。 なぜデザイン言語が必要なのか？ デザイン言語が必要とされる理由を、内的視点と外的視点の２つから考

ユーザーは、自分のウォンツよりもニーズを満たす製品を選ぶ傾向にあることが立証されています。Abraham Maslow氏は人間の欲求についての理解を深め、それがどのように満たされるのか研究しました。デザインの文脈においても、マズローの欲求階層説を活用することで、ユーザーのウォンツよりもニーズを満たす、より効果的なUXを提供することができます。 ユーザーにあなたの製品を受け入れてもらいたければ、受け入れてくれるように動機づける必要があります。アメリカの心理学者、Abraham Maslow氏は、人間のモチベーションに関する研究で知られています。1943年、Maslow氏は論文『人間のモチベーションに関する理論』を発表しました。論文の中で、彼は人間の欲求について自身の解釈を明らかにし、欲求がもっとも基本的なものからもっとも複雑なものへと、階層を形成していることを提唱しました。 彼は、人間が満足

「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。

ECショップをデザインするとき、デザイナーはどういったことを気にしてデザインをするべきでしょうか。シンプルでおしゃれなビジュアル？　それともお得情報を前面に出しますか？ 実際の店舗でもさまざまなショップが存在するように、扱う商品やターゲット属性によって、当然ながらECショップのデザインアプローチも変わってきます。 今回はHamee株式会社で運営しているECショップにおける事例を、デザイナーの平山さんにお聞きしました。 平山 智也 氏 Hamee株式会社 デザイン部 UI/UXデザイナー 茨城県神栖市出身。大学では情報学部でデザインコースを選考し、WEBデザインやUI/UXを学ぶ。 学生時代のアルバイトで不動産広告のデザインやweb制作会社のインターン経験を経て、新卒でHameeに入社。現在はEC店舗のUI/UX改善、販促企画などのコンテンツデザインに携わっている。 同じ商品でもターゲットに

メディア業界でのデザイン、編集、及び印刷出版物とオンライン出版物のライティングに10年以上の経験を持ちます。スポーツが好きで、サッカーとバスケットボールの旅を計画に多大な時間をかけ、また統計学にものめり込んでいます。 ECにおけるデザインと、デザイナーが実際にやりたいデザインは必ずしも一致しません。 ミニマリズムなどに代表されるシンプルですっきりとしたデザインは、最近のトレンドではありますが、販売サイトではあまり実用的ではない場合もあります。 ECにおけるデザインの最終的な目標は、ユーザーとの対話です。もっと直接的に言うのであれば、ユーザーにより多くの商品を買ってもらうように気を引くことです。 その目的を達成するという点では、最近のWebデザインのトレンドは逆効果になる恐れがあります。 デザイン vs 機能 機能性はECをデザインするときに最重要なものです。オンラインショッピングのサイトは

ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。

今やWebデザイン業界のスタンダードとなっているレスポンシブデザインですが少し前は違いました。 今日は2014年に航空業界初のレスポンシブデザインを取り入れたVirgin AmericaのWebサイトについて、デザインからローンチに至るまでを詳しく見ていきたいと思います。 過去数年で最も影響力のあるWebプロジェクトのひとつとなったこのプロジェクトの、成功までの軌跡を細かく見ていきましょう。 Virgin Americaはプロジェクトのパートナーとして当時、従業員わずか10人にも満たない新しい会社だったWork & Coを起用しました。彼らとのコラボレーションは、果たしてどのような結果となったのでしょうか？ 結果的には、航空業界初のレスポンシブWebサイトとして、Work & Coの急激な成長へと導きました。今やVirgin Americaの案件には、100人以上の人々が関わっています。