プロダクト横断デザインシステム導入のあゆみ／（１）輪読会で共通認識を作る篇 - SEN PRODUCT BLOG
こんにちは！ICTチームのデザイナー、moco（@moco_megane）です。 現在、デザイナーとエンジニアが協力し、はいチーズ！の複数プロダクトにおいてデザインシステムの導入・運用を進めています。 この記事では、まず最初の一歩として行った「輪読会」の様子と、そこで得られたことについて書きます。 今後、実際に運用を始めるまでの泥臭い取り組みを、他のデザイナーメンバーとともに連載形式で書いていきます。 どうぞお楽しみに！ 手段としてのデザインシステム 経験の異なるメンバー同士で共通認識を作りたい （１）人を集めよう （２）本を決めよう （３）発表担当を決めよう （４）読んで、発表を聞いて、ディスカッションしよう （５）学んだことをもとに、企画書を作ろう （６）ふりかえろう アンケート結果 もらった感想たち 知識の底上げはできた、が！ 次回予告 手段としてのデザインシステム 千のサービスであ
組織にデザインの重要性を説くためには？｜こぎそ
最近デザイナー向けメンターをやっていますが、よく聞く悩みとして「組織にデザイナーがいない」「デザインが不要だと思われている」...など、組織にまつわるいろいろな課題を聞きます。 基本的に組織としてデザイナーやデザインの価値を認識されていない場合、現場がなんとかしてギリギリ支えているケースが多いですが、価値が認識されていないなら、当然評価もされないので、お給料も上がらず、活動が行われなくなって、やる気のある人は徐々に消えてしまいます。 今回は組織において「デザインの価値」をどう伝えるかをテーマにお伝えします。デザインが事業にもたらす具体的な効果、評価基準の作り方、そして「一人デザイナー」が直面する課題とその解決策まで、実践的なアプローチを示していきたいと思います。 手っ取り早い解決策は？まず先に身も蓋もないことを書くと、あくまで個人のデザイナーとして手っ取り早い解決策は「価値を認識している組
ドラッグ＆ドロップのUIを観察する｜トビ / Kazuhiro Tobita
ドラッグ＆ドロップは、スマホやパソコンを日常的に使う私たちにとって、直感的で馴染み深いインタラクションの一つです。MDN Web Docs（ウェブ標準技術を解説する開発者向けリソース）では、ドラッグ＆ドロップを「開始時」「操作中」「終了時」の3つのアクションに分けて定義しています： 1. 開始時：マウスでドラッグ可能な要素を選択する 2. 操作中：その要素をドロップ可能な要素へドラッグする 3. 終了時：マウスボタンを離してドロップする MDN「HTMLドラッグ & ドロップAPI」これら一連のインタラクションを意識せずにデザインプロトタイプを作成すると、ドラッグ可能な領域だけを1画面としてデザインしてしまいがちで、実装段階で細かいデザインの見直しが必要になることがあります。そのため、すべてのアクションを意識したデザインを考えると、後の手戻りを防ぎやすくなります。 今回はデザイン・実装・ア
最近のUXデザイナー志望者の傾向とWebディレクター不要論について｜おり
お久しぶりです。東京の端くれでひっそりデザイン会社を営むおりです。 最近、協力先企業においてデザイナーの採用をお手伝いすることが増えてきたのですが、その際に見えてきた最近のWebサービスのUXデザイナーの傾向について、やや引っかかる部分があったので、またぞろ筆を取った次第です。 UIやUXという言葉は広く一般に浸透してきたこれはとても喜ばしいことです。特にゲームなどの影響もあり、一般ユーザーであってもUIとUXの概念や関係性を正しく理解し、言及することが多く観測されるようになりました。 で、広く一般に浸透してきたということは、それらを作るデザイナーも増えてきたのかな？と思っていたのですが、どうやらそうでもないようで採用活動には大変苦戦しているという状況でございます・・・。 最近のUXデザインという業務の認識について募集要項上で職種としては、インターフェースの画面設計を独力で完結して欲しいの
AdobeのFigma買収で登録者数は月次で56倍、Googleも使うデザインツール「Penpot」
Adobeによるコラボデザインツール運営のFigma買収の報を受けて、劇的にユーザーを増やした企業がある。スペイン発のスタートアップ、Penpotだ。 Figmaが展開する「Figma」はブラウザベースのデザインツール。デザイナーや開発者を含むチームでのコラボレーションに最適化されており、アプリのUIのデザインやワイヤーフレームの作成などに便利なことから人気を博している。AdobeもFigmaに似たデザインツールの「Adobe XD」を提供しているが、デスクトップアプリで、かつ「動作が遅い」などといった理由から、デザイナーたちからの評判は芳しくない。一方、Figmaはブラウザ上で動作するため利用環境を問わず、操作性も高いことから、好評を得ている。そのため買収を経て、Adobeの血が入ることでFigmaが“らしさ”を失うのではないかと心配するユーザーは少なくない。 冒頭で名前を挙げたPenp
エンジニアのための Figma 知識
【2025年2月追記】 この度「ノンデザイナーのためのFigma入門」を出版しました🎉 本記事のような開発者向けの内容も含みつつ、FigJamやFigmaによるスライド資料作成など幅広いFigmaの利用法をご紹介しています。よろしければお手に取りください！ エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修
エンジニアがデザイナーといい仕事ができるために頑張ったこと｜seya
この記事は下記の記事に触発されて、逆方向の「エンジニアの自分がどういうモチベーションでどうデザインの勉強をしていったか」というのを語ってみよう！という内容となっております。 あと最近よく「なんでデザインし始めたの？」「どうやって勉強してるの？」という質問をいただく機会が増えてきたので、それへのアンサーともなればなと思います。 なぜデザインを勉強し始めたのか結論から言うと必要に駆られて勉強し始めました。 前職はスタートアップに勤めていたのですが、当時作り始めていた新規サービスに携わっている人はエンジニア2名 + デザイナー1名という少数のチームでした。 ただデザイナーともう一人のエンジニアは他のプロジェクトにかかりきり…なので一時期この新規サービスの開発は私だけという状況でした。 そこで困ったのがデザインがないこと。大まかなワイヤーフレームは握っていましたが、デザインがないのでフロントの仕事
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
UIコンポーネント以外から始めるデザインシステム
UIコンポーネントは表層的な解決手段 以前「デザインシステムを作る前にデザインのシステムを理解しよう」という記事で、組織がもつデザインのシステム（仕組み）の理解を深めることが重要であると書きました。 「えいや！」で UI コンポーネントが揃ったライブラリを作ることは難しくありません。しかし、組織にとって意味のある UI コンポーネントになっているかは別問題です。 たとえコードの書き出しまで出来るデザインシステムを作ったとしても、ある一部の人たちが楽になるだけの最適化に止まる場合があります。作り手視点のメリットだけでなく、組織への貢献という広い視野が抜けていると「作ってみたけど浸透しなかった」ということになります。 UI コンポーネントを作るだけでも様々な要素の積み上げで成り立っています。簡略化された図ですが、UI コンポーネントを作る前に様々な課題を解決しなければいけません。 事業目標 今
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 ま
デジタルカオスから秩序を生み出すための5つのステップ
多くの組織は自分たちが、乱立する先駆者とプロジェクトが同時に発生している「デジタルカオス」の中にあると思っています。この記事では、このカオスから秩序を生み出すための５ステップについてお話しします。 Stanfordのリサーチによれば、ほとんどの組織がデジタルの成熟度において５つのフェーズを通ると言います。すなわち、 非公式な始まり 分散型のモデル 集中型のチーム ハイブリッドなアプローチ 完全な統合 それぞれのステージには固有の難しさがありますが、分散型のモデルが特に困難を強いることになると言えるでしょう。 なぜならばそのフェーズにおいては、大きな組織の中で全体的な戦略も無いままに大量のデジタルについての先駆者が動くことになるからです。 これらの先駆者の多くはぶつかり合い、組織内の軋轢と「この組織におけるデジタルは誰が主導するのか」という議論を呼ぶことになります。このような内部の軋轢は組織
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
『デザイン思考』という言葉にデザイナーとして改めて向き合って考えた結果得られたもの - Pepabo Tech Portal
こんにちは、デザイン部デザイン戦略チームでプリンシパルデザイナーをしている咲 @satosio です。 2020年4月にGMOインターネットグループの新卒入社パートナーを対象に「デザイン思考について」約1時間の講義を行いました。この記事ではそこで使用したスライドをもとに「デザイナーにとってデザイン思考とはなにか」を説明していきます。 「デザイン思考」はデザイナーに限った話ではないのですが、「デザイン思考（笑）」というように、言葉自体をなんとなく毛嫌いしてしまっているデザイナーに「デザイン思考」と呼ばれているものの正体はなにかを説明することが本記事の目的です。 結論 概要 共感とはSympathyではなくEmpathy 共感からインサイトを得ることで自分ごと化する デザインとは意思決定の積み重ね 意思決定は「仮説推論」に基づいている デザインの思考法とはフレーミングを用いた仮説推論 デザイン
懐かしのインターネット。AppleにGoogle、Amazonなど1999年のサイトデザインはこんな感じだった。 | カラパイア
この画像を大きなサイズで見る1999年のウェブサイトデザイン image by:WEB DESIGN MUSEUM 1999年、みんなは何をしていただろう？ 時代が混沌としていたのは今と変わらず、世界はノストラダムスの予言や2000年問題などで揺れていた。 日本ではコギャル文化から「ヤマンバ」ファッションが誕生。流行語大賞は「ブッチホン」「リベンジ」「雑草魂」が受賞して、今年の漢字は世紀末らしく「末」。「動物占い」や「だんご3兄弟」なんかがブームになったのもこの頃だ。 一方、すっかり社会に浸透したインターネットはまだ未熟だった。WWW（World Wide Web）は今では考えられないくらいに遅く、しかもやたらと面倒くさい代物だった。それでもドットコムバブルは膨らみ続け、今まさに弾けんとしていた。 1999年、ウェブデザインが模索された時代 当時のインターネットの状況について、Web De
UXデザイナーへのガイド - The Guide To Design
デザインには魔法の公式はありません。それでも、ガイダンスを探しているなら、ここから始めましょう。 無料の独学ガイドで、デジタルプロダクトデザインの第一歩を踏み出そう 優れたコンテンツはすべてオンライン(＋ちょっとした手間)で入手可能です。より正式な教育機関（大学など）や、職業訓練スクールに法外な価格を投資する前に、UXデザイナーという職業の基本を学ぶことができるはずです。 （詳しくはこちら：UX業界には、異なるタイプのデザイナーがもっと必要：The Guide To Designをまとめた理由） ブートキャンプ（職業訓練）ではありません ガイドの最後にデザインの就職先紹介はありません。自問自答して欲しいのは「興味があるのはキャリアとしてのUXなのか？」ということです。 よくある「無料」 の電子書籍ではありません 無料の電子書籍でよくある、PDFをダウンロードした後にソフトウェアライセンスを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
品質向上を目指す開発組織のデザインレビュー / SmartHR
共創するためのデザイン批評
