知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
2022年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
2022年のロゴデザインのトレンドはワードマークとタイポグラフィがより重要な役割を果たしています。特にジェンダーや環境配慮などはどのジャンルのデザインでも積極的に取り入れられています。 デザインの引き出しを増やすには、注目されているトレンドを押さえておくことが大切です。ロゴにはタイポグラフィ、カラー、形など、デザインの基本となる要素が詰まっており、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2022 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2022年、ロゴデザインのトレンドの傾向 三角形を2つ使用したロゴ「BowTies: 蝶ネクタイ」 一滴の重要性がわかるロゴ「Uvula: 口蓋垂」 ライフラインを表現するロゴ「Rooters: 木の根」 圧力を反転さ
GoogleのDesign Docsから学ぶソフトウェア設計 - Qiita
概要 Design Documentと聞くと何を想像しますか？ 一般的にDesign Documentが指すのは設計書であることが多いのではないでしょうか。 設計書、簡単に説明するのであればソフトウェアを「どうやって作るの？」を説明したドキュメントです。 Googleではソフトウェアエンジニアリング文化における重要な要素として、今回お話ししていくDesign Docsと呼ばれるものがあります。 Design Docsとは？ Design Docsとは、開発者がコーディングに着手する前にソフトウェアシステムまたはアプリケーションの開発する人が作成するドキュメントです。 => ソフトウェア設計における仕様書や設計書とは別物と捉えた方がよいです。 仕様書、設計書は作成した上でのDesign Docsの作成となるようです。 このドキュメントには、高レベルの実装戦略と主な設計の決定事項がまとめられて
デザイン作成が無料で驚くほど簡単に – Canva
ブラウザを更新してください ご使用のブラウザが古いかサポート対象外の可能性があります。Canvaで引き続き続行するには、次のいずれかの最新バージョンのブラウザに更新してください：
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
デザインパターン - Google Cloud のソリューション
ウェブサイト リニューアルおよび移行のお知らせ 2022 年 7 月 Google Cloud Solution Design Pattern のウェブサイトはリニューアルを行い、以下に移行いたしました。より使いやすくなっておりますので、これまで以上にご活用いただけますと幸いです。 gc-solution-design-pattern.jp ソリューション デザインパターン とは ソリューション デザインパターンでは、 ワークロードごとに Google Cloud のアーキテクチャを 2 つの観点でまとめています。 1 つ目は、様々な業界で利用できる共通のソリューション デザインパターンとして「エンタープライズ向けの組織、 IAM、請求管理」、「インフラストラクチャとマイグレーション」、「アプリケーションおよびデータベースのモダナイゼーション」などを用意しています。 2 つ目は、ゲーム業界
Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleのAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか？継続的にバージョンア
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
「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では、プロジェクトのダッシュボードにてコンテ
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
本のフォントが気になったので、徹底的に調べてみたら、意外な事実が判明した。｜後日談追記｜伊藤太一 / プロダクトデザイナー
2020.1.14. 一番下に後日談追記。 「読みたいことを、書けばいい。」という本を買った。 noteをはじめたことで、そもそも文章ってどう書くのかとか、わかりやすい文章ってどういうことなのかが気になっていたから。 学びたい欲求が出たときはすぐに行動に移すと吸収が違う。 だから買ったのに。 まず表紙からそうはさせてくれないのである。 なんだこのフォントは。 思わず読もうとする手をとめた。 まず、この「を」に注目してほしい。 タイトルの文字「読みたいこと」と「書けばいい。」と比較して、太さ（以下：ウエイト）は同じに見えるが、文字の雰囲気が異なっていることが分かる。 くるっとなってるこの部分。 ここだけ筆の流れを感じさせるような繋がりがある。 もし他の文字と同じルールで作るのであれば、こうするのが自然だ。 デザイナーさんがニュアンスを加える為に、アレンジして作った文字なのだろうか。「A1
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
デザインを「見る」訓練をしている話。4つのステップと勉強法｜せんざき｜n2p designer
どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、iPhoneで撮ってるらしい、、 目が良ければiPhoneでもこんなに綺麗に撮れるんだなあhttps://t.co/S7WBO3JSG8 pic.twitt
「良いデザイン」について考え続けていたら全てがつながって途方に暮れたけど、越境して少し強くなれた、わたしの話。｜筒井美希
この記事は、Designship2019 で行ったセッション『良いデザインってなんだろう？ 変わるもの、変わらないもの』を元に構成したものです。 イントロダクションこんにちは。筒井美希と申します。わたしは今、恵比寿にあるコンセントというデザイン会社で仕事をしています。 これまでの仕事としては、雑誌や書籍などの出版物や、大学案内・企業広報誌・カタログなどの広報物のデザイン。ウェブやアプリなどのデジタルメディアや、ロゴデザイン、パッケージ・ノベルティなどもつくりました。 ４年以上前になりますが『なるほどデザイン』という書籍を出版してから、デザインに関するセミナーやワークショップのご相談をいただくことも増えました。 だんだん仕事の幅が広がってきて、ちょっと変わったところでいうと空港のサインをリサーチしたりとか、インナーブランディングなど組織課題に関する相談にのったりとか。必ずしもモノを作るわけで
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ローソンのPBパッケージの視認性が話題になる中、セブンイレブンは「オシャレをぶん殴る」主張が激しいフォントで真逆を行っていた
デザインが苦手な人へ。デザインの四大原則を押さえれば格段にクオリティ上がるよ→素人が作るチラシや仕様書などにも有益
