社内勉強会用 デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計
![加速するコンポーネント設計入門 / Component Design as an Accelerator](https://cdn-ak-scissors.b.st-hatena.com/image/square/48ffd1cc6daeec237b54465386562e0081d5ca68/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F23c0422308d8431bab148a3e64396801%2Fslide_0.jpg%3F22922235)
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない!」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
みなさま、こんにちは。 プラコレアドベントカレンダー2019も折り返して、8日目。 冒険法人プラコレのデザイナーzukaです。 (投稿が遅れてしまいました。本当に申し訳ございません。) なんだかんだとデザイナー歴3年目。 少しずつ社内で力になれることも増えて、毎日充実しております。 令和初のクリスマスも間近に迫り、 女性率の高いプラコレ社内は一層明るい会話も飛び交っておりますが、 先週、信じられない発言が私の耳をつんざきます。 “もう、自分でつくれちゃうから” えぇ…………。 私たちはDressy(ドレシー)というブライダル系メディアを運営しており、 多くの花嫁さまのハートをきゅんとつかむようなコンテンツを 365日毎日発信し、業界へ新しい価値を提供しております。 なかでもデザイナーの役割といえば、 良質なグラフィックを作り出し、企画を盛り上げること。 かつての広告バナー100000000
iPhoneをデザインしたAppleのデザイナー、ジョナサン・アイブ氏にも影響を与えたといわれる伝説の工業デザイナーであるディーター・ラムス氏は「いいデザインの十か条」を提唱しています。ラムス氏と「いいデザインの10か条」を映画監督のゲーリー・ハストウィット氏が映像化した「Dieter Rams’ 10 Principles of Good Design」が無料公開中です。 Rams — Gary Hustwit https://www.hustwit.com/rams 「Dieter Rams’ 10 Principles of Good Design」は以下から見ることが可能です。 Dieter Rams’ 10 Principles of Good Design on Vimeo 「全てのものは相互作用し、同時に他から独立しています」というラムス氏の言葉と共にムービーはスタート。 「
ANDPADでデザインを担当している後藤です。 エンジニア 「このボタン、分かりにくいですね」 開発を進めてて、エンジニアにこう言われたことはありませんか? 「このボタンって、どう動くんですか?」 「このボタン、気がつきにくいですね。」 そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。 今回は「並び替えボタン」で起きたケースを紹介します。 あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。 【目次】 ・どこが分かりにくかったか? ・エンジニアとデザイナーの通る思考回路は違う ・エンジニアの考えた解決策 ・画面上における機能の優先順位 ・機能単体のゴール ・まとめ どこが分かりにくかったか?実際の画面がこちらです。(※こちらは現在開発中の機能になります) さて、どこが分かりにくかったでし
無料なのに高機能で軽い!ブラウザで動くデザイン作成ツール「Canva(キャンバ)」を早速使ってみたら凄かった! シェア つぶやく ブックマーク LINE Pocket オーストラリア発のクラウドベースのデザイン作成ツール「Canva」がKDDIウェブコミュニケーションさんと組んで日本に上陸いたしました! 高機能で無料使用も可能ということでしたので早速使ってみたのですが、「Canva」かなり凄いです。これまではブラウザ場で扱えるPhotoshopの代役といえば「Pixlr Editor」が高機能で有名だったと思いますが、ブラウザという制限があるので、色々と使いにくい部分も多かったのですが、「Canva」はあまりストレスを感じること無く、直感的にデザインができます。しかもブラウザであることを全然感じさせない軽さ。いやーこれで無料は凄いです。 それでは詳細の使用感や機能などをお伝えいたします!
はじめに こんにちは、Python界の情弱です。もうかれこれ5年くらい「僕にウェブデザインのセンスがあったら、いやせめてデザインのセンスがあったらどんなによかったことだろう」と思っていたわけですが、半ば諦めていました。しかし先日同僚の@kotarokパイセンに勧められるがままに「ノンデザイナーズ・デザインブック」を読んだら、これが素晴らしい書籍で、もう一度僕にやれば出来るかもと思わせてくれたわけです。 ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本(ソフトカバー)購入: 58人 クリック: 1,019回この商品を含むブログ (102件) を見る 本書が良いのは、多くのデザイン例があり、それも原則の適用後だけではなく、その前後でどれだけデザイ
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
ファーストフード店や飲食店などには赤が多く使われ、信用を第一とする企業は青を多く使う。色のもつ心理的作用を利用した企業の色彩展開や、実際に自宅でどのように色を活用すればいいのかがわかる図が公開されていたので参考までに。
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考:Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 (※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか? 情報が見つからなかったので知ってる方は教えてください) また、viewportの数値はサイト側で指定できます。 スマホ
デオシークの特徴 加齢臭も撃退 強烈な足のニオイも撃退 ワキ、足など全身のニオイをシャットアウト デオシークは厚生労働省が認可した医薬部外品で、殺菌効果や消臭効果がきちんと認められた有効成分が配合されている商品です。 市販されているデオドラントクリームと比べると、医薬部外品は入っている成分が違いますので、消臭効果が高いです。 デオシークは、デオドラントクリーム単品でも消臭効果が期待できますが、ボディソープとのセットを使用することでさらなる消臭効果が期待できます。 ワキガや加齢臭などのような頑固な臭いによる悩みは深いですが、デオシークによって悩みから解放される人が増えています。 博士有効成分は消臭効果や殺菌効果が認められている成分なんだ 頑固な臭いはデオシークで一発なんだ もう怖くないんだ 価格 3,380円(定期コース) 6,980円(単品購入) 有効成分 パラフェノールスルホン酸亜鉛、イ
今回は、「設計変更」が発生したときの設計者とクライアント間のコミュニケーションを考慮しました。 あなたは、あなたのために仕事を注文するクライアントやディレクターとどのような意識を持っていますか? たとえば、少し大規模なシステム開発の場合、「このように動くものを作る」と言った直後にプログラムを作成する開発者などはいないようです。 実際、システム開発の予算の大部分は非常に重要であるため、「設計(要件定義を含む)」に充てられています。 つまり、この「設計」フローがなければ、手を動かすことで作業することはできません(大まかに言えば)。 一般的なデザイナーの仕事には大きな懸念があります。 つまり、「要件を設計および定義するためのフローなしで設計を行う設計者が多すぎます」。 現在、特にWeb制作では、「デザイナーと開発者」は異なる次元の人種のように切り離されていますが、それは本当ですか? 私はデザイナ
プログラミングとデザインにおける論理と感覚って、同じようなものなんじゃないかな。とようやく実感してきた。だからこそ、僕たちがプログラミングに触れてきたようにデザインに触れてきたデザイナーさんの力を借りたいよね。あと、コミュニケーション大事。そんな話。 祝日の朝にカフェでダラダラ書いたので、グダグダで読み返すと何言ってるかわからない。でも、休みの日にカフェでプニプニと文章書いてると、気分転換になってよかった。食事をとらずに食費を浮かせてカフェラテを注文したかいがあった。 デザインが見えない。 今年の1月ごろからずっと「デザイン」「デザイン」と言ってるけど、まったく何もやってない。とっかかりがわからなくて、手が出せない感じ。デザインという言葉自体、幅が広くて、デザインの対象がコミュニケーションだったりユーザーインターフェイスだったりする。そこも絞れていない感じ。絞れていないというか、共通する基
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
この記事は2011年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」(2015年3月) 前にも「独学でWebデザイナーになるのにまずやること」というエントリーをかいたが、簡易的な内容だった。 今回も大筋の考え方はかわらない。Webデザイナーになるには、たくさん作品を作って人にみてもらうことである。 今回はもっと踏み込んで、全くの未経験の人がどうすればWebデザイナーになれるのかの具体的なステップ(行動プラン)をまとめてみたい。すでに学校やスクールでWebを学んでいる人や会社でデザイン部門をあらたに設立したい人にも役に立つだろう。 ステップ1 制作環境をつくる まず最初にやることは制作環境を揃えることである。以前だと、FAXとスキャナーは必須だったが、いまは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く