エンジニアさん向けにUIデザイン講座を開いてみた（成果物編）
はじめに こちらは 「エンジニアさん向けにUIデザイン講座を開きたい！（準備編）」 「エンジニアさん向けにUIデザイン講座を開いてみた！（完結編）」 の続きとなりますので、先にそちらをご一読いただけますと話が理解しやすいかと思います！ UIデザイン講座「実務編」の成果物 UIデザイン講座の実務編では、弊社で使用している勤怠管理システムの一画面を再デザインする内容を実施しました。画面を再デザインする上でカラーやボタンなどを一から考え直して、簡易なUIライブラリを作成しました。 下記が受講者の皆さんの成果物の一覧になります。 画面デザインではないので、ちょっとわかりづらいかもしれませんが、ご了承ください！ ここまで大人数で同じテーマのものを作る機会はそうそうないですし、見ることも少ないので、私としても貴重な機会でした！ デザイン経験のないエンジニアさんでも色のチョイスのセンスがいい方がたくさん
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
店舗照明とは？照明計画やデザインのポイント、照明器具の種類・効果を紹介 ｜ASEI建築設計事務所＆鈴木亜生
店舗照明とは、物販店や飲食店といった店舗全般における照明を指し、商品や店舗を演出する上で重要な役割を持ちます。 店舗照明は商空間と商品のグレード感や魅力を高め顧客の購買意欲を盛り上げるなど、売上にも大きな影響を持ちます。そのため、住宅やオフィスと異なり店舗の照明計画はさまざまな検討や配慮が必要で、照明計画を専門とする照明デザイナーも存在します。 この記事では、店舗照明の概要、照明計画・デザインを活用するポイント、照明の基礎知識、照明器具の種類と特徴、照明計画の流れ、主要な照明器具メーカーの特徴とリスト、照明計画・デザインの助けとなるサイトやショールーム、店舗の照明デザイン事例などを網羅的に紹介しています。 店舗照明とは？ 店舗照明とは、物販店や飲食店といった店舗全般における照明を指し、商品や店舗を演出する上で重要な役割を持ちます。店舗照明は商空間の演出性を高める効果があり、店舗や商品のグレ
インテリアの見え方が変わる？カーテンやロールスクリーンの納まり | 家づくりにおいて大事なコト
おはようございます！！ 今日は久しぶりに本業の方で お客様と現場で喋れるので嬉しいです(笑) (一週間家族以外と会ってません(笑)) ということで本日の記事内容は 視聴者様からのリクエストのネタです ロールスクリーンの納め方！！ なるほど 確かにそれは大事なことですよね 地味にふれたことがなかったので 今回掘り下げていきます！！ ロールスクリーンとカーテンに注目！！ 家づくりするにあたって 家づくりは小さなデザインの塊です 小さな愛情の塊です 一つ一つを丁寧につくっていってこそ 空気感のある素敵なお住まいになります その一つを担うのがカーテンです 用途としては目隠しですが そいつをどのように見せるのか どのようにデザインしていくのか これも大きなポイントとなります！！ どれが正解とかはありません 家のデザインや空間によって 使い分けてもらうのがベストです 普段ロールスクリーンをよく使うので
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
かおりゅ on Twitter: "とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT"
とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT
【ALL無料】何年も推し続けているデザイン系サービス10選 | DevelopersIO
デザイナーのスギヤマです。 日々の仕事の中で、数多のデザイン系サービスにお世話になっています。今回は、その中でも何度も何度も何度も何度も使用している推しサービス（全て無料で使用可能）について、厳選に厳選を重ねてみました。 こちらのサービスの存在がなければ、きっと私の仕事は今の数倍の時間を必要としていたでしょう。ありがとうございます。ありがとうございます。 何年も使い続けている無料デザイン系サービス10選 FLAT COLORS フラットカラー https://flatuicolors.com/ 中でも https://flatuicolors.com/palette/defo を特に推します。 さまざまなカラーチャートサイトをジプシーしては結局ここに戻ってきてしまう。本当に使いやすい。シンプルにして最強のカラーシステムサイト。 最初期のデザインカンプを作る時には、まずここでの色を使っておけ
「結局色なんじゃん！！！！！」初心者とこなれてる絵師の色塗りの違いを分かりやすく比較した画像がこちら
かおりゅ @caoryu_YS @samenohougasuki これは目以外のパーツの塗りや色選びに関しては学びの余地があるのに目の塗りだけ異常に上手い(練習の跡が見える)現象を指しています。目ってキラキラしてるし自由に塗り方を盛れるので楽しいですが、好きなパーツと興味ないパーツで執念の注ぎ方に明らかな差が出るのは素人らしさに繋がる気がします。 2021-04-07 20:56:02
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
進化論のダーウィンも使った?!200年前の色辞典をデジタル化したWerner's Nomenclature Colours - PhotoshopVIP
写真撮影が今のように一般的になる前は、さまざまな配色をCMYKやRGBなどの表記ではなく、言葉で表現しており、そのガイドブック的な存在がヴェルナーの色辞典「Werner’s Nomenclature of Colours」でした。あの進化論でも有名なチャールズ・ダーウィンも、世界の自然史の研究を行った、HMSビーグル号による航海中に、このガイドブックを持参していたそうです。 1814年に出版されて以来、200年以上が経過したいま、ヴェルナーの色辞典がオンライン上に Werner’s Nomenclature of Colours として復活しました。 18世紀のおわりに、ドイツの地質学者アブラハム・ヴェルナー（英: Abraham Gottlob Werner）が110色におよぶ色を分類するガイドラインを考案し、スコットランドの画家パトリック・シム（英: Patrick Syme）によって
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
日本の伝統色が一目で分かり三原色・カラーコードも調べられる「NIPPON COLORS」
紅・山吹色・橙など日本古来の色の名称は実際にどんな色なのかイメージしづらいときがあるもので、そんな時に色を調べるのにもってこいなのが、様々な「日本の色」を知ることをできるサイト「NIPPON COLORS」です。 NIPPON COLORS - 日本の伝統色 http://nipponcolors.com/ NIPPON COLORSのトップページはこんな感じ。最初の画面は「櫨染(はじぞめ)」に設定されています。 知りたい色にカーソルを合わせてクリックすればOK。今回は撫子(なでしこ)をクリック。 クリックすると全画面が撫子色に変化。 撫子色の部分を良く見ると、カラーコードの番号も書かれています。撫子であれば「DC9FB4」。 色の三原色の配合も画面に表示されており、撫子色はC(シアン)が2、M(マゼンタ)が43、Y(イエロー)が3の配合。絵の具を混ぜて色を作ったりするときなどに参考になり
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
色の持つ効果がわかる図解、色の心理学 : カラパイア
ファーストフード店や飲食店などには赤が多く使われ、信用を第一とする企業は青を多く使う。色のもつ心理的作用を利用した企業の色彩展開や、実際に自宅でどのように色を活用すればいいのかがわかる図が公開されていたので参考までに。
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
http://handywebdesign.net/2012/11/if-you-want-to-use-many-colors/
配色のセンスをゼロから習得するために役立つスライド
