これはブックマークしておくと便利！ HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon ShapesHTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボン...記事の続きを読む
Design Skill Map - メルカリUXデザインチームの専門スキル｜Mercari Design Blog
UX Designチームのasakomです。今回はデザイナーの役割定義の活動の一つとして作成した、”Design Skill Map”についてお話しします。 このSkill Mapは、メルカリUX Designチームで求めるデザイナーの専門スキルを整理したものです。以前紹介したDesign Ladderは、メルカリの行動指針に基づいて作成した、デザイナーに求める態度やマインドセット。今回は専門職としてのデザイナーに必要な技術や知識をSkill Mapとしてまとめました。 UXデザイナーの役割定義や、個人の目標設定、採用の基準作りなど、チームの運用に関わる人や、メルカリのUXデザインチームが求める人材に興味のある方に、ぜひ読んでいただきたいです なぜSkill Mapを作ったかUXデザインチームの役割定義は、チームのミッション達成のために存在します。私たちのチームのミッションは、”メルカリの
デザインシステム作成Tips 9つ
はじめに エンジニアとしてデザインシステムを立ち上げてバージョン1を作る機会があったので、そのときに学んだTipsを共有します。 そもそもデザインシステムは「生産性を上げる」ことと「統一的なUI/UXを提供する」ことが目的ですが、このTipsの内容もいずれもその目的のためのものです。 定義する面でのTips 1. コンポーネントのレベル分けを定義する UI上ではある要素を組み合わせて別の要素が作られることがあります。例えばテキストとフレームからボタンが作られたり、ボタンを並べてページネーションを作ったり。 レベル分けしてコンポーネントそれぞれがどのレベルに属するのかを定義することで、これらの情報構造を整理することができます。アトミックデザインがその代表例ですね。 例えば以下のように分けることができます。 Level0: Styles UIを作る最小の要素。Typography, Color
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
UIデザインの「あれ」の名前を知ろう｜株式会社ドヴァ
こんにちは。ドヴァ マーケティングサービス部所属デザイナーのマリコです。 WebのUI・UXデザインの仕事をしていると、デザイナー同士なら「ここのデザイン、コレをこうしたい（身振り手振り）」だけでほとんど伝わるけど……、クライアントに説明するときはそのイメージと一緒に、正式名称で正しく伝えるようにしよう、と思うことがよくあります。 でも、パーツデザインの名称って意外と知られていないものが多いので、今回はその一部を紹介します。「これは絶対この名前で、それ以外は間違いです！」というわけではなく、さまざまな呼び方がある場合も多いため、こういう呼び方もあるんだなぁという気楽な感じで読んでいただければ嬉しいです。 『三本線のボタン』⇒ハンバーガーメニューボタン 今や、どのWebサイトでも使われている超定番のナビゲーションメニューボタン。名前のとおり、ハンバーガーのパティとバンズのような形状からこの名
Modern iOS Navigation Patterns · Frank Rausch
This page collects all the familiar navigation patterns for structuring iOS apps, like drill-downs, modals, pyramids, sequences, and more! Think of it as an unofficial bonus chapter for Apple’s Human Interface Guidelines, written by someone who cares deeply about well-crafted user interfaces. A typical iOS application has a fixed architecture—often a hierarchical tree with multiple levels. This ri
ダメなUIを作るコツ｜yumemi
先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。 また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。 ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。 社内での勉強会のお知らせ背景そもそもこのような会を実施した背景には、つぎのように思ったことがきっかけでした。 エンジニアとかUXとかDXとかHCDとかと比べてUIのイベントが少ない気がする。酔いどれUIデザイン選手権をやりたい。一番イカれたUIをデザインしたやつが勝ち。 — yumemi (@n__yumemi) January 24, 2023 たとえば、connpassで検索したときの結果は「UIデザイ
【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
2022年、もっとも注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
共感を生み出すストーリーテリングのための７つの要素
Rikke Dam氏はInteraction Design Foundationの共同設立者でチーフエディターです。 「ストーリーテリング（Storytelling）」はUXデザインとデザイン思考のプロセスの中で大きな役割を担います。 ストーリーテリングはユーザーの物語を説得力のある形で具現化し、それによって私たちデザイナーは彼らのモチベーションやニーズに深い共感を抱くことができます。ストーリーはプロジェクトを通して一貫した共感を形作ることができるので、チームメンバーは常に刺激を受けつつ、集中し続けられます。 ストーリーは、デザインプロジェクトに共感を吹き込むすばらしい方法で、デザイン思考の実践者にとっては非常に役立つものです。この記事では、アリストテレスに教えられたように、上手なストーリーテリングの要素について述べます。さらに、デザインプロジェクトに物語を組み込むために利用できる様々なデ
RPGで“適切な経験値”はどう実装する？ ゲームデザインにおいて必要となる、等比数列の概念
Unityを学ぶための動画を集めたサイト「Unity Learning Materials」。ユニティ・テクノロジーズ・ジャパンの安原氏が、ゲーム制作に使う数学について解説しました。パート5のテーマは「RPGで数列」。ゲームデザインにおける経験値の計算例と、そこで必要となる数列の概念について。 RPGで適切な経験値はどう与えたらいいのか？ 安原祐二氏（以下、安原）：パート5は、かなり具体的な例を出してみようかなと思います。（スライドを示して）RPGは、ロールプレイングゲームのつもりで書いています。「RPGで数列」という話をしてみましょう。 自分がレベル5のプレイヤーだったとしましょう。ロールプレイングゲームは、見えていない場合もありますが、だいたい敵にもレベルがあります。 自分よりもレベルが低い敵には楽勝で、同じレベルの敵はいい勝負。そして、1つ上のレベルはちょっと厳しいというゲームデザイ
UIデザインに特化された配色ツール！ Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette
見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。 カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。 この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。 Goodpalette GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。 使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
デザイナー1年生のための教科書「アプリデザインドリルPDF」96ページ完全公開 | DevelopersIO
今回、クラスメソッドのアプリデザインドリルを作成しましたので、みなさまに公開させていただきます。 メールアドレスなどの登録はなく、フリーでダウンロードいただけます。 以下のリンクからダウンロード可能です。 アプリデザインドリルver1.pdf 本ドリルは、参考書兼問題集として作成されています。まずは、出題される問題で現段階での理解を確認し、その上で解説を読んで理解して、再度問題を確認することで基礎知識を覚える構成になっています。 内容は、以下をまとめています。 クラスメソッドデザイナーが仕事を進める上で認識しておくと良いこと いろいろな方を見ていて、よくつまづいている部分についての説明 綺麗なレイアウトを作成することの技術的な面での記載はありません。レイアウトついては良サイトがたくさんありますので、あまりみない情報をお届けできればと思います。 ドリル目次 PART 1：UIデザイナーの役割
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
エンジニアに「効く」デザイントレーニング | Fintan
エンジニアに「効く」デザイントレーニングとは 「色々と頑張っているのに開発中の画面がイマイチパッとしない」「急に画面デザインを求められて困った」「センスもないし、デザイナーに使える予算もない」など、UIデザインで困っているエンジニア向けの動画教材です。 デザインのトレーニングを受けたことがないシステムエンジニアを対象にしており、センスに自信がなくても大丈夫な内容になっています。 1つ10～20分程度の短い動画で、すべてを最初から順に観ていただく必要はありません。「必要な部分だけ」「必要な時に」無理のないペースで学んでいただけます。 軽く復習、見直しができるよう、動画と同内容のPDFも公開します。 なぜエンジニアにデザイントレーニングが必要か? 昨今、コンシューマ向けだけでなく、ビジネス向けのアプリケーションやシステムにおいても、UIデザインという品質は重要視されるポイントになっています。
DXを妨げる要因と実現へのアプローチ by @yuzutas0 / 20211022
株式会社商船三井様の社内セミナーで用いた資料です。 関係者の許諾を得て公開しています。 関連記事「DXに関する私的な殴り書き」 https://yuzutas0.hatenablog.com/entry/2020/06/02/110000 関連スライド「民間企業におけるDXの事例と課題」 https://speakerdeck.com/yuzutas0/20210623 合同会社風音屋 https://kazaneya.com/
FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends
先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
概要: デザインシステム入門｜Figma によるデザインシステム入門
