2017年4月13日の「DevLOVE 関西『デザインリニューアルの難しさ』」にて発表された、Backlog UI リニューアルの舞台裏のスライドです。

サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

初めまして。 面白法人カヤックでデザイナーをやっているばっこ（@is178）です。 一昔前は画面の中の要素をデザインをすることがWebデザイナーのお仕事でしたが、今や画面の向こうにいるユーザーの体験さえもデザインの対象となりました。 机の前に座っているPCユーザーだけでなく、利用シーンも様々なスマホユーザーの体験まで考慮する必要がある今、認知科学・行動経済学・脳科学などの知識もあると、デザイナーとしての強みになるのではないでしょうか。 そこで、各分野の個人的なおすすめ本を18冊紹介したいと思います。 認知科学 認知科学の対象領域を狭めないために明確な定義はないのですが、特徴づけをするならば「知的システムの構造、機能、発生における情報の流れを科学的に探る学問」です。 お馴染みのアフォーダンスやシグニファイアもこの分野ですね。 1.教養としての認知科学

ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ

Photo by Dan Zen こんにちは。谷口がお送りします。 ここ数年、Webサービスの開発において「UI」「UX」という言葉がよく聞かれるようになりました。 「UI」とはUser Interfaceの略で、簡単に言ってしまうと、パソコンやスマートフォン等を操作する際のの画面表示やメニューに表示される言葉など、情報の表示様式や操作感のことです。 対して「UX」は、User Experienceの略です。UXは、ある製品やサービスを利用したり、消費した時に得られる体験全般のことを指し、個別の機能や使いやすさだけでなく、ユーザーが製品やサービスを利用したときに得られる利用体験、満足感の向上を目指すのがUXデザインになります。 ※UXとはISO 9241-210[2]において「製品、システム、サービスを使用した、および／または、使用を予期したことに起因する人の知覚（認知）や反応」と定義され

「UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね！ そこで今回は、日本中の「UI/UX」に関する資料を気合いで全部集めてみました！（たぶん） それでは、早速みていきましょう！ UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

Event : UI温泉 in 綱島温泉 2015.02.07 Speaker : 割石裕太 / wariemon - UI Designer @KAYAC inc. / OH UI温泉 - UIと湯を愛するイベント - 4番目のスピーカーとして登壇させていただきました。 UI と 温泉 の共通点として「心地よい温度」を見出し、 そこに至るまでのフローを考えた内容となっております。

日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル

こんにちは。 スマートフォンサイトやアプリにおいて、重要なことの一つであるUI（ユーザーインターフェース）。 また、PC向けサイトでも、よりユーザー目線に立ったUI設計が必要です。 UI設計ひとつで、大きくコンバージョンが上がったり、クリック率の増加が見込めるので、入念に考えなければなりません。 今回は、UIを徹底的に考えるために、UIについて様々な視点から書かれたスライドをご紹介したいと思います。

UI関連のアイデアや表現、もしくはコンポーネントライブラリをとにかく色々見てみたい時ってないですか？ ナビゲーションからフォーム、カラーピッカーやプルダウンメニュー等、UIの表現を考える時ちょっと探したいってシチュエーションは結構あると思います！僕であれば、レスポンシブ対応のナビゲーションなんかは結構どういう形が理想か、まだまだ暗中模索状態って感じですので、色んなサイトを参考にしたい所です！ そんなこと考えている時に直ぐ検索してみることが出来るサイトが今日ご紹介させて頂くUIBoxです！ UIの参考となるヒントがもしかしたら見つかるかもしれませんので、是非一度除いてみてください〜！ UIBox – Curated HTML, CSS, JS UI Component Library 検索フォームからのUI検索が可能ですねー。 例えばナビゲーションに関するUIのコンポーネントが見たかったら、