北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
Atlassianが見据えるデザインシステムの先にあるもの
デザインシステムを作っているプロダクトチームは多くあり、デザインシステムも発展しています。 私たちはAtlassianのAlex氏（デザインチーム主任）とVenn氏（シニアデザイナー）に、どのようにAtlassianのデザインガイドライン（ADG）を発展させてきたのかと、将来この業界がどこへ向かうと予測しているのかを直接伺いました。 縦割り状態を解消する Atlassianのデザインシステムチームは、デザインや開発、コンテンツ、イラストなどさまざまな分野をまとめています。Alex氏とVenn氏は、これらの分野を相互に繋げることこそが業界の将来にとって重要だと信じています。 デザインシステムにおける微妙なニュアンスのすれ違いなどはそれぞれの分野の違いから来ていると考えられており、ADGのチームはこれらの縦割りな状況は今後なくなるであろうと考えています。Airbnbの「React Sketch
ログアウトのUXを軽視してはならない
Roxanne はライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 ログアウトの体験は、ログインする回数が増えている中で見落とされやすいものです。素晴らしいUXほど、ユーザーを送り出すことよりも招き入れることに重点が置かれているのは当然かもしれません。しかし、重視されていないということは、ユーザーのログアウト体験が疎かになっていることを意味します。 最近、アカウントを作成したときのことを考えてください。そのブランドがWebサイトやアプリの入り口から、スムーズかつ素早くユーザーを迎え入れようと苦心しているのは間違いありません。アカウントを作成してアクセスするプロセスは、とても簡単で夢中になります。しかし、ログアウトに関しても同様に言えるということは、滅多にないでしょう。 ログアウトは
【2018年版】アプリUXデザインのトレンド12選
モバイルアプリ領域の動きは非常に早く、UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。 ここでは皆さんのタスクを軽減するために、2018年において影響力がもっとも大きいであろうトレンドをリストアップしました。 １. ユーザージャーニーの簡略化 アプリやWebサイトを使用する場合、ユーザーには特定の目的があります。その目的を達成するために費やす労力が少ないほど、より良い体験となるのです。 リニアユーザフロー リニアデザイン体験とは、ユーザーが各ステップを１つのアクションで完了できるようにするための開始・途中・終了があるUXのことです。タスクを完了するために必要な時間を見積もることができるため、リニアユーザーフローはユーザーのためになります。
TSUTAYA TVなどの事例からみる、成果を出すためのLPOのプロセス
LPO（ランディングページ最適化）と言うと、情報量が多く派手なLPを作るようなイメージもあるかも知れませんが、今はいかにユーザーの心理を汲み取り、彼らのニーズに合わせた情報を提供できるかという方向にシフトしています。 今回は国内売上No.1のLPOツール「DLPO」を提供するDLPO株式会社の方に同社の具体的な事例を交えつつ、LPOの極意について聞いてみました。 DLPOとは ― まずはDLPOについてお聞きしたいのですが、どのようなツールなのでしょうか？ 「DLPO」はLPOや、もっと広義でいうとCRO（コンバージョンレート最適化）のために、各ユーザーに最適なページを出すことのできるツールです。ページ最適化の手段としてはLPOでの定番とも言える「A/Bテスト」「多変量テスト」に加えて、独自な機能として「パーソナライズ機能」があります。 パーソナライズ機能は、ユーザーの閲覧データや環境デー
効果が実証されている７つのUXリサーチ手法まとめ | UX MILK
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 ユーザーリサーチをするとき、どの方法がもっとも有用な結果をもたらすか悩んだりはしませんか？ この記事ではUXデザインにおいて価値を発揮することが証明されている７つの優れた手法をリストアップしました。それぞれの手法について、どのような手法なのか、なぜ機能するのかを見てみましょう。 １. カードソート カードソートは、元来UXリサーチが形になるずっと前から、心理学研究で用いられた手法でした。コンセプトはシンプルで、カードに単語やフレーズを書いたあと、ユーザーにそれらを分類するように求めます。また、分類したカテゴリにラベルを付けるよう求めてもいいでしょう。カードソートは、情報アーキテクチャ（IA）が正しく実行されているかどうかを判断したり、新製品についてのIAを調
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
【at】Linuxで指定した時刻にジョブを実行する
Linuxで指定した時刻にジョブを実行するatコマンドについて紹介します。 atコマンドの使い方 atコマンドの書式は以下の通りです。
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
ケーススタディ：若い女性向けのECショップにおけるデザイン
ECショップをデザインするとき、デザイナーはどういったことを気にしてデザインをするべきでしょうか。シンプルでおしゃれなビジュアル？ それともお得情報を前面に出しますか？ 実際の店舗でもさまざまなショップが存在するように、扱う商品やターゲット属性によって、当然ながらECショップのデザインアプローチも変わってきます。 今回はHamee株式会社で運営しているECショップにおける事例を、デザイナーの平山さんにお聞きしました。 平山 智也 氏 Hamee株式会社 デザイン部 UI/UXデザイナー 茨城県神栖市出身。大学では情報学部でデザインコースを選考し、WEBデザインやUI/UXを学ぶ。 学生時代のアルバイトで不動産広告のデザインやweb制作会社のインターン経験を経て、新卒でHameeに入社。現在はEC店舗のUI/UX改善、販促企画などのコンテンツデザインに携わっている。 同じ商品でもターゲットに
見やすいサイトを作るときに最低限チェックしたい６項目
いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ
完璧なテキストフィールドのための14のルール
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
【2016年版】編集長のおすすめ記事10選
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 UX MILK編集長の三瓶です。この記事をもって、今年の配信は終了となります。皆さま、今年も毎朝たくさんの記事という名の牛乳を飲んでいただきましてありがとうございました。 おかげさまでUX MILKも2016年は大きく成長し、ようやくメディアとして顔を上げて歩めるようになりました。とはいえ、まだこの世に生を受けて２年目、まだまだ至らないところだらけですし、来年も1月4日から変わらず邁進していきますのでよろしくお願いいたします（もう少し休みたかった…）。 来週にはまた仕事が始まっているという現実に打ちひしがれつつも、なんとなく仕事納めた感じを出すべく、今年配信した記事の中からいくつか個
インタビュー：無印良品におけるUX戦略の考え方（抜粋）
この記事は本日マイナビ出版から発売の『UX × Biz Book ~顧客志向のビジネス・アプローチとしてのUXデザイン~』の「Chapter2 UXと顧客エンゲージメント 」から、無印良品のUXにおける取り組みのインタビュー部分を抜粋したものです。 本著のこの章では無印良品がどうUXデザインをビジネスに活用しているかクローズアップしており、Webやソーシャルでのブランド・コミュニケーションの責任者である良品計画のWeb事業部の川名さんと実際にWebにおけるUXを担当されている武田さんにお話を聞いています。 登場人物 株式会社良品計画 Web事業部 川名常海（かわなつねみ）氏 株式会社良品計画 Web事業部 武田歩（たけだあゆむ）氏 株式会社メンバーズ 執行役員、株式会社エンゲージメント・ファースト CEO 原 裕（はらゆたか）氏 無印良品の提供する顧客体験価値とは 原 裕氏（以下、原） い
ミニマルなモバイルアプリUIで気をつけるべき６つのこと
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザインはユーザーのエンゲージメントを高める上で、最も重要なものの一つです。ユーザーはシンプルなインターフェースを好むようになってきたので、UIを基本的で必要最低限な要素のみに残していくことが成功の鍵です。 ミニマリズムは、構造と機能の絶妙な組み合わせから成り立ちます。その最大の強味は、構造を明確化することにあります。線を整え、たっぷりと余白を残し、そして視覚的な要素を最小にすることで、最も複雑な主題（内容）でさえもシンプルになります（もちろん、効果的に使われればの話です）。 ミニマルデザインでは、簡潔さ、明確さ、そして一貫性が求められます。明確なビジュアルコミュニケーションによってユーザーの問題解決を導くべきです。ミニマルなデザインのアプリが評価されるのは、ユ
タイトルや見出しで使いたいオシャレなWebフォント20選
CSSで指定するだけのウェブフォントを使用したサイトが多くなってきました。最近ではGoogle Fontsがリニューアルされ、ウェブフォントの見比べやサイズやスタイルの選択などがより容易になりましたが、それでも多くのウェブフォントからイメージどおりのフォントを探すのは依然として大変な作業です。 そこで当編集部では今回「見出しに最適」なフォントをテーマに20点ピックアップしました。 各フォントごとにコードを書いてありますが、記事末尾にはこれらをキュレーションしたGoogle Fontsのページもリンクしておきますので、是非ご利用下さい。 見出しに最適なウェブフォント Alegreya Sans SC
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
シンプルなデザインに役立つピクトグラムのフリー素材８選
ピクトグラムという言葉をご存知でしょうか？ ピクトグラムは、ピクトグラフとも呼ばれるもので、情報や注意などを視覚的に伝えるための視覚記号の一つです。今回は、そんなピクトグラムについての説明とフリー素材をまとめているサイトをご紹介します。 ピクトグラムとは ピクトグラムとは、伝えたい情報やことがらをシンプルな視覚記号で表したものです。よく見かけるもので言うと、トイレの人型のイラストなどがそうです。多くの場合、背景と絵の部分で明度差のある二色を使い、できるだけシンプルで分かりやすいように作られています。 文字による表現とは異なり言語による制約がないので、誰でも直感的に意味を理解することができます。もちろん、国や文化によっては解釈が難しかったり間違えてしまうことはありますが、おおむねは共通の理解を得ることができます。 トイレのマーク以外にも、非常口の表示やエスカレーターの上り下りなど、公共空間で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
