UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
ユーザーが迷わないトグルスイッチの使い方 | ベイジのUIラボ～業務システムとSaaSのUIを考える
トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。 トグルスイッチの定義 トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。 一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide
すべての働く人におくるストレスマネジメントの基本 | knowledge / baigie
仕事は挑戦の連続です。経験を積み、スキルが上がり、評価されるほど、難易度が高い仕事に関わるようになります。そこには必ず苦難があり、ストレスが待ち構えています。 ストレス学説の生みの親であるカナダ人生理学者のハンス・セリエ氏は、「ストレスは人生のスパイスである」という名言を残しています。確かにストレスは必ずしも悪いものではありません。 例えばパフォーマンスとストレスレベルは、逆U字の関係にあります。あるレベルまではストレスレベルの高まりに従ってパフォーマンスは向上し、あるレベルを超えるとパフォーマンスは低下します。この法則は心理学者ロバート・ヤーキーズとジョン・ドットソンの名前を取り、「ヤーキーズ・ドットソンの法則」と呼ばれています。 この法則に従えば、仕事で高いパフォーマンスを発揮したいなら、ストレスをゼロにするのではなく、適度なレベルにコントロールしなければなりません。そのために必要なの
デキるやつはクリックさせへん | ベイジの日報
ベイジの『7つの行動原則』には、「ホスピタリティ〜びっくりするくらい気を利かせる」ちゅう項目がある。 以前の行動指針にも「プロフェッショナルは気が利く」っていう項目があったけど、働く上での気配りや配慮を求めるカルチャーを大切にしたい、ちゅうこっちゃな。 せやけどこれ、曖昧で感覚的で抽象的な話といわれれば確かにそうや。せやから、こんな疑問を持つやつがおるかもしれん。 「気が利く」「気配り」「配慮」って具体的にどういう行動なん？ 気ぃ使ってるつもりやのに気ぃ利かんって言われてまう。どないしたらええねん 気ぃ配った行動が相手にどういう影響与えてるか把握してABテストして精度上げたいから定量的に教えろや 結局は精神論やろ？ でもな、なんでもかんでも定量的にすりゃええもんちゃう思うとる。特に組織の多岐に渡ることは、抽象的な方向性だけ示して、細部は自分の頭で考えてもらう方がええ。その方が結果的に組織の
ChatGPTをデザイナーの相棒にする第一歩 | ベイジの日報
今年に入ってから急激にAIの進化が進み、クリエイティブ業界では「仕事が取られるかもしれない」という不安が駆け巡った。AIが賢すぎる事実を目の当たりにするとマイナスな感情を抱きがちだが、せっかくなので味方につけて楽しみたいとも思う。 そこで私がまずおすすめしたいライトな使い方は、「アイコン選定のお手伝い」をしてもらうこと。 ベイジではBtoBサイトの案件が多いので、自分が普段接することのない専門性の高い領域だと「この見出しに合うアイコンって何だろう…」と迷うことが多くある。 少しの表現の違いで誤解を招くこともあるので慎重に選定したいが、一つ一つ調べるとかなりの時間がかかる。 そんなときにChatGPTに相談してみるのだ。以下は簡単な例。 以前は複数のサイトを見比べて一般的にどんなモチーフが使われているのか探したりと、素材を選ぶ前段階に時間がかかっていた。しかし1から自分で素材を検索するより、
【2024年6月版】ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジは2010年の創業以来、ウェブ制作事業を中心に事業を展開してきました。この事業では、サービスの質を統一するために2014年頃からワークフローの整備に取り組んできました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 そして、様々なプロジェクトでこのワークフローを実用しながら、今もアップデートを続けています。 また今回のワークフ
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
時間にまつわる11の原則（ビジネス編） | knowledge / baigie
時間を管理する能力は仕事のパフォーマンスに直結します。それは会社や市場からの評価に繋がり、最終的には年収や生活の質に影響を与えます。それなのに、私を含めて多くの人は、つい時間を無駄遣いするような行動を取ってしまいます。 その理由の一つには、「時間に対する誤解」があるのではないでしょうか。 このような思いと自戒を兼ねて、私なりに考える「時間の原則」をまとめてみました。 社内勉強会で披露したスライドを元に、詳しく解説します。 1. 平等の原則 1分＝60秒。1時間＝60分。1日＝24時間。1年＝365日。こうした時間に関する前提条件はすべての人に平等である、という原則です。人によって異なるのは与えられた時間ではなく時間の使い方である、ともいえます。 基礎的な能力に大差ない者同士が、同じ環境・同じタイミングで何かを始め、3年後にパフォーマンスが大きく異なっていたとしたら、その間の時間の使い方が大
知っておくと便利な思考フレームワーク×35 | knowledge / baigie
世の中には、経営やマーケティングのためのフレームワークや論理モデルが数多く存在しています。これらを学ぶことは、ビジネスパーソンとしての私の基礎力に繋がるのではないかと思い、特に著名なフレームワークを中心に、作られた背景や基本的な特徴を少し調べてみました。 3C マッキンゼー・アンド・カンパニー在籍時代の大前研一氏が1982年に発表した著書『The Mind of the Strategist』の中で提唱したフレームワークです。環境分析の手法のひとつといえるもので、外部分析と内部分析を簡潔に組み合わせて、市場機会を発見することを目的としています。 1980年代、トヨタ、SONYなど日本の製造業が世界市場で高い競争力を持っていました。しかし、成功している企業には必ずしも優秀な戦略コンサルタントがいた訳ではなく、洞察力と直感力による戦略立案がなされていました。 経営やマーケティングに関する「天賦
【2024年6月版】管理画面のUIデザインにおける25の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
提案書の書き方、徹底解説～提案書のストーリー・コピー・デザインの基本法則【スライド付】 | knowledge / baigie
PowerPoint歴23年、デザイナー歴20年、経営者として10年以上に渡って自社のマーケティングやセールスに深く関わり、提案書を作ったコンペでの勝率91%を誇る私の知見を余すことなく注ぎ込んだ、『最強の提案書を作る方法～伝わるストーリー・コピー・デザインの法則』というスライドを公開しました。 便宜上「提案書」としていますが、企画書、営業資料、ホワイトペーパー、社内文書など、人を動かすために作られるすべてのビジネス文書に応用できるはずです。 提案書のストーリー、コピー、デザインに関する、実践的かつ具体的なノウハウを詰め込んでいます。デザインについては、プロのデザイナーではなく一般のビジネスパーソンを対象とし、仕事の中で本当に必要な知識だけをまとめています。 約170ページある本スライドは、私が企業向けにこれまで20回以上行ってきた有料講座の配布資料を元に、公開用に仕上げたものです。スライ
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
デザイナーと働くなら知っておきたい4タイプのデザイナー像 | ベイジの社長ブログ
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
多くの採用サイトが間違っていると私が思う理由 | ベイジの社長ブログ
企業にとって、採用サイトあるいは採用ページというのは、既に存在して当たり前のものになっています。Webサイトは本業のビジネスではなくむしろ採用に活用したい、というような声も多く聴きます。実際に私たちが受注する案件でも、採用サイトは少なくない割合を占めています。しかしこのように企業からの関心が非常に高い採用サイトでありながら、マーケティングの一部として作られるWebサイトと比べると、戦略性や考え方の点で大きく遅れをとっているようにも感じます。このエントリーでは、世の採用サイトに関して私が感じている問題点を少しまとめてみました。 採用サイトからの直接エントリーが増える条件採用サイトを立ち上げる多くの企業は、自然検索からの採用サイトへの流入が増え、採用メディアや採用エージェントを挟まない直接エントリーが増えることへの期待を口にします。しかしその考えはいささか早計ではないでしょうか。 採用サイトの
デザイナーはなぜ「普通」を知る必要があるのか？ | ベイジの日報
バイアスや意思決定に関する書籍を読むと、統計学や確率、平均の話になることが多い。 バイアスのない意思決定というのは、統計学的にもっとも成功確率の高い選択をする、ということでもある。あくまで確率の話なので、短期的な結果だけみればその選択によって失敗することもあるだろう。しかし長い目で見た時には、平均への回帰が起こり、総じて成功確率が高まる。そういう判断の仕方が常時できた方が良い、という考えがその根底にある。 実はこの話は「普通を見極める」という話に繋がってくる。「普通」とは、曖昧で、時に都合よく使われる言葉である。何が「普通」かは人それぞれだ、という結論になることも多い。しかし、正解が分からない仕事をする上ではこの「普通を見極める力」は不可欠である。 「普通を見極める力」とは、「多数派を見極める力」「平均値を見極める力」「中央値（ボリュームゾーン）を見極める力」「最大値を見極める力」と、文脈
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
