UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されています。 UIデザインのコンポーネントや背景にぴったりな美しいグラデーションを作成できる無料ツール・無料素材を紹介します。

「Fluid UI」は既存のパーツを配置するだけでWebサイトやアプリのモックアップをサクサク作成でき、簡単な画面遷移や複数人での編集も行えるサービスです。実際に使ってどんなことができるのか試してみました。 FluidUI.com - Create Web and Mobile Prototypes in Minutes https://www.fluidui.com/ Fluid UIのページへ行き、右上の「CREATE ACCOUNT」をクリックします。 メールアドレスとパスワードのほかに、最初のプロジェクトの名前とどんな端末の画面で表示させるかを設定します。 今回は「first project」という名前の「iPhone 6」向けのプロジェクトを作成することにしました。入力したら「CREATE ACCOUNT」をクリックします。 画面上の「Add page」ボタンで新しいページを追加

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 UX MILK編集長の三瓶です。UX MILK関連のデザイン全般手掛けているので、そろそろ「UXデザイナー」と名乗ってもいい気がしてきている今日この頃です。 さて、今回は「UXデザイナー」のキャリアにまつわる話です。「UX」という言葉や「デザイン」の定義というのは実にあいまいなものですが、そんな中、私たちはそれをどう生業としていけばよいのでしょうか？ そこでデザイナーの転職事情に詳しいクリーク･アンド･リバー社の吉田氏にインタビューをしてきました。 登場人物 クリーク･アンド･リバー社 吉田 悠平 氏 UX MILK編集長 三瓶 亮 UXデザイナーの需要は高まっている 三瓶：まず簡単

デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで

Mads SoegaardはInteraction Design Foundationの共同設立者および編集長です。 デザイナーの皆さんをびっくりさせるような、非常に大事なツールを紹介しようと思います。そのツールは、音符と音符の間の静けさと同じくらい過小評価されています。ところが、そのツールにはユーザーをページ上にとどめる力があります。 多くの要素によって、インタラクティブデザインのレイアウトと構造は形づくられます。そして無視されがちですが、もっとも不可欠な要素の１つにホワイトスペース（またはネガティブスペース）があります。ホワイトスペースは、ほかのデザイン要素の中やその周りにあります。 Webサイトやアプリの場合、さまざまなビジュアル要素がレイアウトを構成します。ビジュアル要素には、タイポグラフィや境界線、アイコン、画像などが含まれます。絵を想像してみてください。これらのパーツはペイント

意味の連関から生じる「世界適合性」 スキューモーフィズムは「物理世界の表皮」として、スマートフォンのディスプレイに貼りついた。ヒトとコンピュータとの重ね合わせの存在であったカーソルが消失したサーフェイスでは、ヒトは「自分」の場所を確かめるためにマウスを左右に揺らして、カーソルを見つけ出す必要はない。ただ指差したいところを指差せば、そこが「自分」の場所となる。スキューモーフィズムがスマートフォンの画面を覆っているので、モノに触るようにスマートフォンをタッチすれば、機能がダイレクトにフィードバックされる。 けれど、スキューモーフィズムは具体的な存在ではない。物理世界のサーフェイスをディスプレイのXYグリッドで表現してはいるが、それはXYZの三軸で表される三次元の物理空間を、XYグリッドという抽象的な二次元のサーフェイスに展開しているにすぎない。だから、モノは画像に変換され、ヒトはそれを掴もうと

by m01229 MicrosoftがWindows 3.1の後継OSとして1995年に発売したWindows 95は、発売からわずか4日で400万本の売上を見せ、PCを一般家庭にも普及させた立役者としても知られています。そのWindows 95が一般にも受け入れられた理由のひとつに、スタートボタンや右クリックの実装など、ユーザーインターフェースのデザインが当時としては革新的であったことが挙げられます。以下のブログでは、「Windows 95のユーザーインターフェースがどのようにデザインされたのか」について書かれた、Microsoftの元従業員のKent Sullivan氏の論文「Windows 95のユーザーインターフェース：ユーザビリティ・エンジニアリングにおける事例研究」が紹介されています。 Designing Windows 95’s User Interface – Socke

PaulaはフリーのWebデザイナーです。彼女は小規模なオンラインビジネスのリブランディングなどを手掛けています。 会話型UIとは簡単に言うと、まるでほかの人と会話をしているかのように、言語を自然な形で処理するチャットボット体験です。テクノロジーにおける典型的な体験では、コンピューターが何かを実行するために、アイコンやリンクをクリックするような指示が求められます。私たちはある程度操作に慣れているとはいえ、これらは自然なコミュニケーションでも人間らしいコミュニケーションでもありません。 会話型UIは、インターフェースとの対話を人間同士が普通の会話をしているかのようなコミュニケーションの形へ切り替えます。現在、会話型UIを取り入れた、２つの人気な手法があります。１つはAmazonのAlexaのように、実際の会話を通して使用するものと、もう１つはFacebookの Messengerのように、チ

これはいいですね。 Laws of UXでは、UIに関する心理法則をシンプルにまとめている。 フィッツの法則、ミラーの法則、パーキンソンの法則などなど、知っているものから知らないものまで見つかるのではなかろうか。 デザイナーさんとUX/UIを考えるときにざっと見返してみると新しいアイデアが浮かんでくるかもですね。

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

デザインにおいて全くの素人だった大学生が、ひたむきな自主学習で一躍、時の人に。春田雅貴さん（23）は、他社サービスのデザインを完コピ。自ら分析・発信し、話題となった。なぜ彼は泥臭い努力を？ そこにあったのは「社会とつながりたい」という強い意志だった。 なぜ、デザインの素人だった大学生が注目された？ デザイン界で、ちょっと名の知れた大学生インターンがいる。 それが春田雅貴さん（23）さんだ。彼は横浜国立大学・経営学部の大学4年生（2018年1月現在）。クラウド会計ソフトのfreee社でインターンのデザイナーとして働く。じつはつい１年前までデザインに関してまったく素人だった。 彼を有名にしたのが「UIトレース」という取り組み。 他社のWebサイト、ランディングページ（LP）、プロダクトにおけるUIをゼロから模倣（模写といってもいい？）。そのポイントをtwitterや、ブログで発信していったのだ

透き間を実体化するデスクトップメタファー 二つの平面を見通す透視仮説と重なるウィンドウによって、ディスプレイにフィクショナルな探索空間が生まれ、イメージは見るだけのものでなくなった。ヒトはコンピュータに行為を委譲して、マウスとカーソルを用いて「見て指差す」ことで、行為を遂行していく。ヒトはマウスの先にあるカーソルとしてディスプレイ平面にスルスルと入り込み、ウィンドウやアイコンなどのオブジェクトを操作しながら、コンピュータとともに合生的行為を生み出すようになった。 ヒトはハードウェアとソフトウェアという二つの層の重なり合いに対応するマウスとカーソルを使い、重なるウィンドウをかき分けて情報を探索しながら、ディスプレイのXYグリッドに基づくフィクションとしての空間のなかで行為を遂行している。ウィンドウとウィンドウとのあいだ、ウィンドウとデスクトップとのあいだに隙間はないけれど、それらは重なり合っ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーが使う手段の中で、「色」はもっとも強力なツールの１つです。同時に、色という概念は習得するのが難しくもあります。色の組み合わせが無数にある中で、サイトやアプリに使用する色を決めるのは骨の折れる作業です。 そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような切り口から便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 色のアクセシビリティを考慮する １. インスピレーションを受ける 自然の風景 あなたの周りには、既にたくさんのひらめきのもとがあります。インスピレーションを受けるには、周りを見回す

直近だと…（2022/01/13追記） あれから4年近く経ち、私も転職したことで、デザイナーではなくなりました…。 この記事がたまに見られてるっぽいので、一応アップデートしておきます。 現代だと、gap という、まさしくこの記事の意図を表現するプロパティが出来たため、そちらを使うことを推奨します。 この記事の内容で書かれていた方は、コード内を margin-top で検索すれば、置き換えはそんなに難しくないのではないかと思います。 この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー(主語がでかい)は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『marginは下ではなく「上」で取る！』ことが多い理由の分析 「余白

こんにちは。THE GUILDのこばかなです。デザイナーとかをやっています。 10秒でわかるこの記事の内容先日こんなツイートをしたのですが、今回はこの話について詳しく書きました。 デッサンとは何か？たまにデザイナーの間で「美大に行く必要があるのか」「デッサンを学ぶ必要があるのか」という議論がされますが、個人的には「WEBやUI、UXデザイナーにとっては必要ない」と考えています。（グラフィックデザイナーやプロダクトデザイナーは学んでおいた方が便利だと思います） なぜならデッサンによって得られるものは「観察力」がメインであり、それを磨く方法は他にもあるからです。 行く必要がないと言いつつ、私は美大に行ったのですが、受験時代はほぼ毎日何時間もデッサンを描く生活を3年ほど続けていました。 ▼浪人時代に描いたもの デッサンは一見すると「リアルな絵を描くこと」を目的にしてるように思えますが、経験者の一

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXデザインを行う際、ワークショップやインタビューなどが主流な調査方法として挙げられます。そして調査結果はユーザーストーリーやプロセスフローで表現されます。また、チームのメンバーと考えを共有したり解決策を話し合うための手段として、ペルソナやWebページのレイアウトであるワイヤーフレームといったツールが使われます。 しかし、これらの調査を行うためには設計した製品のターゲットとなる、実在するユーザーを考慮しなければなりません。製品をより良いものにするためには、ユーザーと製品の間で何が起こっているかを理解し、製品がどのようにユーザーの生活を良くするのかを把握しておく必要があります。そして、ユーザーへの理解を深めるためにストーリーボードを活用します。 この記事では、UX

『クイズRPG 魔法使いと黒猫のウィズ』や『白猫プロジェクト』など、誰もが知っているスマホゲームを提供している株式会社コロプラ。最近では、VRに注力していることでも話題になっています。 ゲームはよく知られていますが、実際にゲームがどのように作られているかを知っている人は少ないのではないでしょうか。そこで、今回はコロプラのゲームプロデューサーとデザイナーの２人にゲーム制作の現場についてお話を伺いました。 ―まずは自己紹介をそれぞれお願いしてもよろしいでしょうか？ アッキー氏（以下、アッキー）：はい、アッキーと申します。『白猫プロジェクト』や『バトルガール ハイスクール』、最近だと『白猫テニス』や『プロ野球バーサス』で、２DデザイナーとしてUIデザインやコンセプト作りなどを担当していました。 前職は、広告系のデザイナーで、メインはDTPデザインをやっていました。ですので、まったく関係ない企業か