デザインのしたじきコ・デザインのためのシンキングシート
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
私の考えるプロダクトマネジメントとUXデザインの関係
2019/2/26 BIT VALLEY -INSIDE- Vol.6 @Leveragesでの登壇のスライドです。 発表の内容をnoteにしてますのでこちらもご参照ください。 https://note.com/taketetsu1982/n/n2e431592eade https://atnd.org/events/103410 BIT VALLEY -INSIDE- Vol.6 ハッシュタグは #bvinside 渋谷界隈にオフィスを構える企業による合同勉強会のコミュニティ、BIT VALLEY -INSIDE-。 参加はオープンなので渋谷以外の企業の方も参加いただけます。 第6回はレバレジーズ株式会社にて、マーケティング、ユーザエクスペリエンス（UX）、プロダクトマネージメントをキーワードに、領域におけるスペシャリストの方々にお話いただきます。 後半はライトニングトークスを行います。
2018年 UIデザイナーが読んでよかった本 7冊｜kassy｜note
こちらはInHouseDesigners Advent Calendar 2018の23日目の記事になります。 UIデザイナーのkassyです。あっという間に年末ですね。 今回は、今年読んで良かったUIデザイン関連の本を中心に紹介したいと思います。気になる本があったら、年末年始のお供にぜひどうぞ！ 1. 『融けるデザイン』コンピューターなどがますます小型化・分散化していく時代の中で、人間とハードウェアやソフトウェアの関係性は今後どのように変化していくのか？そのタッチポイントであるインターフェイスは今後どのようになっていくのか？について考察した本。学術的な内容ですが、具体例も豊富なのでおもしろく読めます。
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
優れたダッシュボードをデザインするための10のガイドライン | UX MILK
Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに
【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ - クックパッド開発者ブログ
ホリデー株式会社 *1 の多田です。Holiday ( https://haveagood.holiday/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使い心地を良くしてこそ、サービスで本当に実現したい価値をユーザにまっすぐ届けることができるためです。 iOS アプリの使い心地を良くするための基本的なインタラクションを以前当ブログで投稿した記事でいくつか紹介しましたが、今回は前回紹介しなかったインタラクションのうち、「読み込み中」の UI の基本パターンについて取り上げようとおもいます。 はじめに：なぜ読み込み中の UI を考えなくてはいけないのか Holiday iOS アプリでは、基本的にデータはクライアント側で持たずサーバと通信して表示するデータを受け取っており、
Amazonに見られる、UI変更を伴わないUX改善
Web マーケター。 ソフトウェアのテクニカルサポートからキャリアチェンジし、Web/アプリ業界へ。株式会社ファンコミュニケーションズを退職後フリーランスとなる。独立した理由は髪の毛を伸ばしたかったから。 Webやアプリ等のデジタルなサービスに触れていると、UXと言えばUIを前提としたものと考えがちです。 今回は、ECサイトを例にとり、UI変更を伴わないUX改善について触れてみたいと思います。 2015年9月9日、Amazonジャパンが携帯電話番号があればメールアドレスなしでもアカウント作成できるよう仕様変更を行いました。これはあまり大々的にニュースに取り上げられていませんが、実際にはEC業界にとって大きな意味を持ちます。また、UXの観点からも、UI変更を伴わないながら大きな意義があると思えます。 メアドを持たない若者たち ECの歴史が始まってより長く、メールアドレスをベースとしたユーザー
ここが最前線！2015年WEBデザイントレンド13選
更新日: 2017年5月22日公開日: 2015年6月4日ここが最前線！2015年WEBデザイントレンド13選 時代ごとに web デザインは変化し、いつの時代もユーザーの視線と心を釘づけにできるよう創意工夫されています。 また例え難しいデザインのテクニックが無くても、その時々のトレンドをうまく取り入れるだけで、斬新なサイトにも見えます。今流行りの web デザインを 事例を含めてご紹介します。 はじめに - 2015年 web デザイントレンドの背景ファーストビューよりスクロールを重視するデザインに Photo: cewdseo.com 今やフェイスブックやツイッター、LINE などの SNS は、私たちの生活に無くてはならない存在となりつつあります。日本人の5人に1人が Facebook ユーザーで、世界でもおおよそ5人に1人が Facebook を使っています。 またスマホ普及率は国
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
【デザインまとめ】綺麗なデザインの管理画面 30選
以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆Con デモサイト メガネのロゴがかわいい ◆Mega デモサイト 黒でメリハリ ◆Admin box デモサイト ちょっとレトロ感ある色遣いが印象的。 ◆Singular デモサイト やわらかな色遣い。 ◆Azan デモサイト ◆Brio Web App デモサイト 丸みの強い要素がかわいい ◆HeyMetro デモサ
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
開発前に欠かせない超ハイレベルな無料プロトタイプ制作アプリ5選|グロースハックジャパン|Growth Hack Japan
dited by Ryutaro Mori growth hack japan official Twitter account growth hack japan official Facebook account 過度に強調することが出来ないほど重要なプロトタイプ制作。 その重要性は、グロースハックジャパンの記事「グロースハックの大前提 「MVP」の種類と実例 5選」でもお伝えした通りです。 ではどんなツールを使ってプロトタイプを制作すれば良いのか。 ここは多いに迷うところですが、「はやい、やすい、うまい」に越したことはありませんよね？ そこで本日は、吉野家もびっくりの超ハイレベルな無料プロトタイプ制作アプリを、5つまとめてご紹介致します！ 数あるアプリの中でも、使いやすさや完成品のクオリティに焦点をあてて厳選した5つの無料アプリですので、必ずお気に入りが見つかること間違いないでしょう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選