MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ

by Tobias van Schneider first appeared on my private email list. 私が「割れ窓理論」に出会ったのは、数年前、当時働いていたSpotifyの同僚が勧めてくれたのがきっかけでした。 「割れ窓理論」とは、地下鉄の落書きを消したりすることで都市の環境をきちんと整備すると、破壊行為や路上飲酒といった小さな犯罪の発生率が下がり、街に秩序を好む雰囲気が生まれるというものです。そして、それがより深刻な犯罪の発生を減少させるというのが最大のポイントです。 比較的最近のニューヨークの例を紹介しましょう。1990年代にニューヨークの犯罪発生率は劇的に下がりました。重大犯罪がこの期間アメリカ全土で28%減少したのに対し、ニューヨークは56%以上も減少しました。どうして短い間にニューヨークの犯罪発生率はこれ程大きく落ち込んだのでしょう？ 一般的に、こう

顧客の抱える課題がサイト構築にとどまらず、もっと大きなものだった場合、どのように解決していけばよいのでしょうか。UX・CXを中心にした設計フェーズ、設計を目に見える形に落とすためのデザインフェーズ、それらをシステムに組み込む実装フェーズと、一連の流れを実際のプロジェクトの事例をもとにして紐解きます。今回は、UX設計とデザインのフローを中心に、エンドユーザーとクライアントを「つなぐ」ためのウェブサイトデザインについてお伝えします。 --- MTDDC Meetup Tokyo 2016で発表したスライドです。

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように

こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ

JerryはUXPinにおけるコンテンツストラテジストであり、そこで非常に活発な想像力をもって日々文献を執筆しています。過去には、Braftonの顧客を対象にコンテンツ戦略に取り組み、DDB San Franciscoにおいて、従来型の広告事業に携わりました。 マーケティングツールを提供するHubSpotのサイトは、毎月400万人以上のユーザーが訪問し、90カ国、18,000社以上の企業にサービスを提供しています。 HubSpotにとってこのサイトは、ビジネスの要となる存在です。HubSpotが一民間企業から、世界規模の組織へと大々的に成長する段階で、サイトのリニューアルが必要となりました。 リニューアルは突如限られた期間内で行わなければならず、プロジェクトのキックオフからわずか1.5カ月後に控えた、HubSpotが年に一度行う産業イベント「INBOUND」での新製品のグランドリリースに間

マテリアルデザインは、Googleが提唱するメタファーに基づいたデザイン手法ですが、多くのアプリに適用されだしています。 マテリアルデザインの第一の目的はユーザーを幸せにすることです。 デザインのあらゆる側面（色、タイポグラフィ、ビジュアル、マルチメディア、構造など）は、ユーザーが欲しいものを即座に得られるような快適な環境を作り出し、且つ心地よくそれが実現することを手助けするべきなのです。 マテリアルデザインでは、次のことが求められます: ユーザーインターフェイスは直感的ですっきりしている 情報の階層構造は明確でわかりやすくすべきである 全ての構成要素は配置・目的ともに必然であるべきである。飾りとして使われるアニメーションでさえも、意図や関連性を持つべきである 今回はUpLabsでキュレーションしているデザイナーによるギャラリーの中から、これらのガイドラインと各デザイナーの考える最適解が組

こんにちは、投稿開発部のデザイナー、木村です。主に、iOS/Androidのクックパッド App、また昨年から「お料理アルバム」というAppのデザインを担当しております。 今回は、お料理アルバムのデザインリニューアルを例に、既存サービスが持ってた課題をどのように解決していったかについて、デザインの観点を交えてお話したいと思います。 リニューアルの経緯 お料理アルバムは、毎日の料理写真をプライベートに記録する iPhone/Android Appです。多くのユーザーから「こんなアプリを待っていました！」「自動で写真をキレイに並べてくれて助かっています！」といった声を頂き、投稿された写真数は400万枚を超えるサービスに成長しました。 そんなお料理アルバムもリリースから1年半ほど経過し、さらにより多くのユーザーに喜んでいただくために、デザインのリニューアルを計画しました。 ゴールはユーザーの「ム

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ

Nick氏はロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルアプリをデザインする際、最も心に留めておきたいことは、ユーザーにとって便利で直感的なデザインにするということです。 デザインしたアプリがユーザーの役に立たなければ、実用価値がありませんし、誰も使ってくれません。便利なアプリだとしてもユーザーの時間と労力を必要とするものであれば、その使い方を学ぶことさえしてくれないでしょう。 良いUIデザインはこの両方のポイントをおさえています： 便利なモバイルアプリはユーザー中心である。ユーザーは差し迫った問題を解決するために、あなたのアプリをインストールします。アプリにはハッキリとした「目的」が必要です。あなたのユーザーが何を達成しようとしているのかを考え、その目的に焦点を当て、必要ないものは全て取り除きます。 UI

Webデザイナーや開発者は往々にして、自分たちの制作物に誰がアクセスして使うのかという点に関して無関心です。 使いやすさなどよりビジュアルが優先されることも多いですが、現代のクリエイターとして私たちは、より道徳的な観点を持ち、人それぞれの能力に併せたアクセシビリティを提供するべきです。 イギリスのアクセシビリティに関する法律に対する法的義務はさておき、イギリスには1,190万人以上の障害者がおり、その数は人口の19%に該当します。これはつまり、アクセシビリティが十分でないサイトに対して不満を持っている潜在ユーザーが、それくらい存在するということです。 どうして良いWebアクセシビリティが必要なのか ユーザーはWebサイトを使用するとき、どんなことを困難と感じるのでしょうか。アクセシビリティを語るにあたって、どういったものがあるかを見てみましょう。 聴覚系の障害 これは軽度なものから重度の聴

この記事の目的 セル（UITableViewCell）は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。 セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていますが、私はこれを読んだだけでは十分に理解が及ばなかったため、iOS 標準アプリの事例からセルのデザインについて考察したものをまとめました。この記事では iOS の標準的なセルのデザインパターンを探り、自身のアプリにどう活かせるのかの土台となるよう考察してみま

クライアントや上司、チームメンバーなどデザインを取り囲むステークホルダーにデザインの意図を正しく伝え、承認や合意を得ることは最適なUXを実現するうえで必須です。本書は、デザイナーが、デザイナー以外の人に、デザインに関わる様々な事柄を効果的に説明できるようになるための考え方やテクニックを紹介します。コミュニケーションの重要性、ステークホルダーの視点の理解や心情に寄り添う意味、デザインの狙いを明確にする作業、ニーズを聞き出すためのコツなどを詳しく説明します。 デザインが承認されるまでの手順や合意しておきたい事柄を順を追って解説しているため、デザイナー以外の人にも役立ちます。日本語版付録として、ヒーウォン・チョイ氏による「最小限のドキュメントで理解を最大限に深める」を収録。デザインの有効性を実証するスキルを身に着け、組織としてベストなUXを実現したいと考える人、必携の一冊です。 翻訳者によるサポ

Lyftのデザイン原則 Lyftはデザイン原則をピラミッド型で定義するために、マズローの欲求５段階説を用いています。私は、Lyftがデザイン原則それぞれの重要度を示すために、このような心理学と融和させているところにとても興味がありました。 デザイナーである私は、デザイン決定において皆のアイデアが一致しない場面によく遭遇します。基本となるデザイン原則を抜きにして判断を下すことは非常に難しいことです。そこで、私は同僚のKlara Pelcl氏からの後押しもあり、経営層を説得しデザインチームの中で核となるようなデザイン原則をJules Cheung氏と協力しながら定めました。 私たちはブレインストーミングを行い、６つの原理を作り出しました。それは、ユーザーを知ること、明確さ、一貫性、効率、協調、そして、美しさです。Lyftのデザイン原則の図が、 実際にそれを適用するために何ができるのかを考えるき

機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール