2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co

Laws of UXLaws of UX is a collection of best practices that designers can consider when building user interfaces. The 2nd edition of Laws of UX: Using Psychology to Design Better Products & Services is now available! Learn More →

様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。 特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。 ご存知の通り、花粉症の

Strikethrough Text With Explanations In Modal On Hover Code by: eightarmshq If you are having trouble with the pen, try the archived copy on GitHub.... Read More

Rails Developers Meetup 2018 Day 3 Extreme で発表させていただきました - https://techplay.jp/event/679666 - 質問: https://railsdm.herokuapp.com/issues/76 協力: FlyTeam: https://flyteam.jp/ レイルラボ: https://raillab.jp/

配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

Downloads Get the desktop, mobile,
and font installer apps

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？ 私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました

街には数多くの広告があり そこには多くの言葉やイメージが あふれています。 私たちは考えました。 その情報量を極限まで減らして、 “ある図形”をみただけで、 クロレッツを連想する、 そんな究極にシンプルな広告は つくれないだろうか。 それが実験広告 「クロレッツのかたち」です。

われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド

We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster

エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ

2017/6/29 UX failconの登壇資料です

…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン

Want to learn UX from the ground up? Get an entire collection of UX books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $14.99/month. However well-designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Photo: Marco Giumelli, “Waiting” A 2014 MIT study showed that humans can

四季の移ろいの中に美の心を生み出した様々な伝統色。日本では古来より暮らしの中に多彩な色合いを取り入れ、繊細な色の世界を見出し、その豊かな情趣を愛でてきました。 それらは多くの絵画、染織物、陶芸、詩歌、文学として、生活や文化の中に深く息づいています。例えば、平安の女性達の聡明で繊細な感性が産み出した重 （かさ）ね装束の配色美、中世の武家社会に見られる質実剛健さ、戦国武将達の極彩色に満ちた綺羅 （きら）びやかな彩、山紫水明との調和を求めた閑寂な風流、そして、侘び・寂びの世界などなど。 歴史の流れの中でつけられた和の色は、名前も美しく風雅です。このサイトでは、そんな日本古来より伝わる色【和色】をカラーコードとともに伝統的な呼び名、歴史、由来を添えて掲載しました。日本人の美の心が生み出した色とその色名をぜひお楽しみください。 あ行 藍色Ai-iroあいいろ 藍色鳩羽Aiirohatobaあいいろは

この7年の間にTwitterのアカウントを作られた皆さんは、始めのプロフィールアイコンが卵だったのを覚えていらっしゃいますか？これは「卵からスタートし、そこからかえった鳥がタイムラインにツイート（さえずり）をお届けする」という思いを込めてデザインされました。でもそろそろ、皆さんが、ご自分ならではの画像や写真をアップロードしてもっと自己表現したくなってくださるものに変更したいと考えました。そこで、デフォルトのプロフィールアイコンの新しいバージョンのご紹介です。 なぜこのデザインに変更したかを順を追ってご説明しましょう。 これまでブルーやグレー、ホワイトを主な色として使っていたTwitterが、最近、他のカラフルな色も使っていることにお気づきでしょうか？昨年、世界各地からいろいろな情報や考え方が集まるTwitterらしさをより表現できるよう、ブランドをリフレッシュしました。この考え方をプロダク