ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
少年ジャンプ＋副編集長が大学1年生から「漫画アプリのUIについて物申したい！」というDMが来て実際に会って考えが整理されて意義深い時間になったという話
モミー 【少年ジャンプ＋編集】 @momiyama2019 「少年ジャンプ＋」副編集長です。ほかに「ジャンプルーキー！」「MANGA Plus by SHUEISHA」など立ち上げました。リプライやDMの返信は気まぐれです。 shonenjumpplus.com モミー 【少年ジャンプ＋編集】 @momiyama2019 先日、見知らぬ大学１年生から、漫画アプリのUIについて物申したい！というこんなDMが。 で、実際にお会いした。 話題はアプリの設計から、最終的には漫画表現の時代に合わせた進化など、広く漫画全体の課題や未来まで広がった。 結果、逆に僕の考えが整理されて意義深い時間に。学生氏に感謝！ pic.twitter.com/Q6XZUtPAEi 2020-06-14 01:11:49
UIデザインと守破離の精神｜Goodpatch Blog グッドパッチブログ
デザイン業務ではしばしば“奇抜さ”が求められることがあります。人間は常に新しい形や刺激的な表現を求めていて、誰もが思いつくようなものでは受け入れられないことも多々あります。そのことは十分に承知の上で、私は良いデザインとはどこか“普通の形”をしているものだと考えています。普通というとなんだかネガティブにも捉われがちですけれども、環境に融け込んでいて違和感がないという意味で、普通であることはデザインの目指すべき一つの姿なのではないかと思います。はじめ奇抜な形をしていたものが次第に社会に受け入れられていって、いつからか「普通」になっているようなこともあります。｢新しくあること」と「普通であること」は必ずしも二項対立の関係ではありませんが、どちらを取るべきかでしばしば頭を抱えてしまうデザイナーは私を含め多くいらっしゃるのではないでしょうか。 UIデザインの世界を見てみても、やはりどこか「普通ではな
LINEマンガのUIデザイン一新で苦心した3つのポイント
2019年10月8日、デザイナー向けミートアップ「LINE CREATIVE Meetup」の第2回が開催されました。LINEのクリエイティブを担当する「クリエイティブセンター」が、自社サービスのデザインにまつわる事例について語ります。プレゼンテーション「『LINEマンガ』のデザインリニューアル」に登場したのは、LINE株式会社 クリエイティブセンター UIデザイン1室 UIデザイン4チームの全炯晩（ジョン・ヒョンマン）氏。LINEマンガのUIデザインがどのような経緯でリニューアルに至ったかを明かしました。 LINEマンガはいかにリニューアルしたか 全炯晩氏：はじめまして。私は全炯晩と申します。今回このようにみなさんとお会いできて、本当にうれしく思います。 私はLINEのクリエイティブセンターでUIデザイン4チームでマネージャーとして働いています。LINEに入社したのは2011年で、今
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた｜Aoi Sano | デザイナー
こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
優れたダッシュボードをデザインするための10のガイドライン | UX MILK
Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
UXデザインとUIデザインの３つの大きな違い
Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？ これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され
デザイン初学者がUIトレースを１ヶ月続けてみた｜きなこ
こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. UIトレースを始めたきっかけ 2. 最
UIデザイナーの能力開発ステップと鍛錬方法｜たけてつ
先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。 一方で「デザイナーがいない。」とよく聞きますし「誰かいない？」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっていけるのではないか。と考えるようになりました。 では、デザイナー人口を増やすには、微力ながら自分で何かできないか。と考え、いろいろトライ&エラーした結果、同じ思想を持つCocoda!に出会い共感し、アドバイザーというカタチで力添えさせて頂くことになりました。 今回は、Cocoda!チームへの初アドバイスとして、"UIデザイナーになる、もしくは、より良いUIをアウトプットできるようになる為には、何
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務系システムは『イケてるフラットデザイン』だと使いにくい？現場が本当に必要だった物との比較
Engadget | Technology News & Reviews
