45分間で「ユーザー中心のものづくり」ができるまで詰め込む2022年8月9日 ある企業さまでの研修「45分間で『ユーザー中心のものづくり』ができるまで詰め込む」のスライドです。登壇枠が45分という限られた時間のなかで、UXデザイン・UXリサーチのもっとも大切なエッセンスを凝縮してお伝えするようにしました。Read less
The Business of Expertise: Expertise Renders Your Work Less Interchangeable | takazudo.me
CSSの設計の話で、Tailwind CSSが良いんだよね〜って話をする流れで、Tailwind CSSを使うには、デザインをルール化して、例えば文字サイズとか余白とかを決めたパターンで作って、そういう風にできるといい感じなんだよねって話になるんだけれども、そういうことを言うと、よくある反応として、 「でもウチはデザインカンプが渡されて来て、それを言ってみれば完璧に再現することを求められるから、そういうのは無理だな〜」 みたいなやつがある。そういうのを見るたびに「その仕事の仕方がまず違うんじゃないんすかねー」って常々思うんだけど、この本にまさにそういう話が書いてあって、そうよなーって思ったのでそれについて書く。 The Business of Expertise by David C. Baker #ルールが統一されることで嬉しいと一番知っているのはその道の専門である実装者まず、デザインカ
Storybook + Figmaで始めるデザイン駆動コンポーネント開発 - hiro08gh
こんにちはhiro08です。 Storybookのアドオンを使えばFigmaのデザインデータを埋め込みすることができます。 利点として、実際のFigmaで作成されたデザインデータを見ながらコンポーネントを開発することできます。個人的にDXが爆上げで、必須のアドオンになっています。もちろん、Storybook自体をホスティングができるので、エンジニアとデザイナーの間でコミュニケーションの差異がないか確認しながら作業できるのも魅力です。 前提 create-react-appで作成したプロジェクトをベースにしています。初めてStorybookを使う場合は、こちらの記事も一読してください。 https://microcms.io/blog/storybook-react-use/microcms.io 新規でStorybookを導入する場合は、下記のコマンドを実行することでセットアップすることが
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
ネットで物議のローソンPBデザイン nendo佐藤氏に真意を聞いた
一部から批判の声が聞かれる一方で、それが売り上げに悪影響を与えてはいないという。冷凍食品や菓子、牛乳や豆腐、納豆などすでに新しいデザインに切り替わっている商品について、切り替え後の売り上げは順調。同社によれば、例えば冷凍食品は全体で、切り替え後の5月は前年同期比で3割の売り上げの伸びを記録。牛乳や卵、納豆なども1割程度売り上げが伸びている。 新型コロナ禍の影響で、自宅で過ごすことが増えた消費者が、外食を避けて自宅で食事を取ることになった影響もあり、この売り上げの伸びの要因すべてがパッケージのおかげ、と断定するのは早計だ。とはいえ、「現時点では、パッケージリニューアルによって売り上げが落ちている商品はほとんどない」（ローソンの梅田貴之中食商品本部本部長補佐）。 長期視点で選んだ「雑貨」的なデザイン あえてこのシンプルなデザインにした理由とは何か。「短期的な売り上げはもちろん大切だが、本当の狙
「STUDIO 3.0」が大型アップデート！コーディング作業は一切不要、国産の無料デザインツール
コーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツール「STUDIO」が、去年の4月以来の大型アップデートされました！ 新たにCMSが搭載され、リアルタイムの共同編集、デザイン機能も使い勝手がさらに進化を遂げています。もちろん前回アップデートの新ゴやリュウミンなど、モリサワフォント500種類以上の書体も変わらずに誰でも無料で利用可能のままです。 STUDIO STUDIO 3.0の新機能 STUDIO 3.0の使い方 STUDIO 3.0の新機能 STUDIO 3.0で目玉なのは、3つの新機能です。 共同編集からレビューまで搭載した、まったく新しいCMS UIのさまざまなアニメーションをコードを書かずに実装 シンボル機能で効率的にデザインを作成 まずは、大注目のCMS機能。 STUDIO 3.0では、プロジェクトのダッシュボードにてコンテ
ロゴデザイン、２２の確認すべき大事なこと
22 important things to check for logo design, thinking for creating design guidelines. 9月にロゴデザインのワークショップをやることになりまして、対象者に向けて予習の意味も兼ね、久々のデザインエントリーです。 「長く使える」「様々な用途に使える」「時を重ねてその精度が増す」「デザイン担当者の負担が少ない」「関わるクリエイターの創作意欲が湧く」「複数のデザイン関係者が扱いやすい」… などなど「ブランドデザイン担当者」として、また普段は「デザインガイドラインなど作成している立場」から特に重要な「ロゴデザインのポイント」だけをざっと書き出してみました（個別のエントリーはまた後日ということで）。 まず、最初は東京オリンピックなどでも話題になった「知財」「意匠系」のポイントからです。それではどうぞ。 <知財・意匠系
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
デザインワークをGitに含めるべき? 含めないべき? - Qiita
「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、GimpやInkscapeは実質プログラマだけのためのツールになっています。そういえば、Fireworksのオープンソース化嘆願はどうなったんだろう...? ツールが有料 デザインツールはときに高額です。また、セットアップに割く時間も「見えない」コストです。残念なことにインストールも自動化されていません。caskも使えません。$ npm installでは片付かないのです。また、アップグレードの問題もありま
制作会社の視点から見る、サービス制作会社まとめ | UXデザイン会社Standardのブログ
2014.12.10 / Business 制作会社の視点から見る、サービス制作会社まとめ Tomohiro Suzuki 自社のサービスの改善や、新規事業立ち上げの際にデザインの信頼できる会社を探そうとしたことはありませんか？ 記事の性質としてはデザイナーというよりも、クライアント様やデザイナーが足りないと感じて外部の会社を探そうと思っている人向けの記事になりますが、いざ探そうとなると意外と迷ってしまうことがあるかと思います。 そこで今回は、同業での視点からサービスの制作をメインに行っている信頼できる会社を紹介しようと思います。 （※今回は東京の会社に限定していますが、また別の機会にフリーランスや関西の会社なども含めアップデートした記事を公開できればと思います） きっかけ この記事を書くきっかけになった元は先週に公開されました、Goodpatchさんにお声がけ頂いてお話をしたPodpat
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbf9a8239270b982158e9318db2dd638d1ac2f8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ | WebNAUT
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ こんにちは！ディレクターの田川です。みなさんはモバイルのアプリやWEBサイトを設計するときに、プロトタイピングツールをお使いでしょうか？ ビーワークスでも、モバイルのアプリやWEBサイトを設計するときは、実機でのUIの見え方や使用感をチーム全員で共有するために、できるだけプロトタイプをつくるようにしています。 プロトタイプを作成するツールは色々ありますが、株式会社グッドパッチ様が提供している「Prott」は、操作が直感的で使いやすく、弊社ディレクターやデザイナー陣など多くのメンバーが使っています。 今回はProttのご紹介とグッドパッチ様がユーザーレビューでご来社くださいましたので、その様子をレポートします。 Prottのおすすめポイント Prottは今年4月にベータ版がローンチさ
エンジニアこそ色彩デザインを学ぼう - ppworks.jp
学ぼうよ、と思っていて、 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る を読んでいました。 @ken_c_lo氏が以下のスライドで触れていますが、エンジニアがデザイン学ぶのマジオススメとのことです。よっしゃ、学ぼう。 新人デザイナーのための色彩デザイン・配色のルールを学べる本 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る WEBというより印刷のデザイナー向けの本なのかな？という印象なのですが色の使い方という意味では勉強になりました。 特色の話やCMYKプロセスカラーの話は一旦無視しながら
ど素人でもプロ並みのチラシが作れてしまう…「Picky-Pics」がデザイナー殺しな件｜まだ仮想通貨持ってないの？
これはいいサービス！助かりますねー。 Picky-Pics（ピッキーピックス） チラシを簡単に作れてしまう 「Picky-Pics（ピッキーピックス）」はチラシや名刺をウェブ上でサクサク作れるウェブサービス。これさえあれば、Photoshopは要りません。デザインセンスも要りません。すばらしい！ 使い方は簡単。作りたい資料を選択して、デザインを選びます。 すると編集画面に移動します。あとは文字や背景を加工していくだけ。 素材は5万点近く用意されているそうです。 直感的に素材を追加できます。 各素材はドラッグすると移動します。簡単！ 編集画面の使い勝手もすばらしく、ピクセル数を合わせやすいガイド機能が実装されています。 フォントも豊富！これは嬉しいですねー。 出力は3パターン。ウェブページにもできるというのは嬉しいですね。 有料素材を使っている場合は、出力にあたって費用が発生します。この値段
色盲の人にもわかるバリアフリープレゼンテーション法
「色覚障害」とも呼ばれる「色盲」は黄色人種では男性の20人に1人(5%)、女性の500人に1人 (0.2%)に見られます（白人では男性の8%、黒人では男性の4%）。上記調査同時期の日本人男性は6,111万人、女性は6,359万人（平成8年 10月現在）ですから、色盲の人は約318万人となり、身体障害者の総計を越える数となっています。色盲は世界的にはAB型の血液型の頻度に匹敵し、極め てありふれた存在なのです。小中学校の40人学級（男子20人）の各クラスに必ず1人、男女100人の講演会場では、2～3人の色盲の聴衆がいるという計 算になります。社会的な差別や偏見といった過去の経緯から自分が色盲であることを隠す人が多いことや、色盲であっても実際にはかなりの色を不自由なく見分 けられることから、これまで色盲の人が色に関する不便を積極的に訴えることは少なかったと言えます。そのため、色盲がこのようにあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog