マガジンのカバー画像

デザインのルール設計

46
デザイン原則、デザインシステム、ガイドラインの考え方や運用について理解を深めるためのまとめ
運営しているクリエイター

記事一覧

ライティングガイドラインを分類し直し、構成を見直しました!

2024年10月10日、SmartHR Design System内のライティング配下の構成を大幅に変更しました! 実は、半年ほど前からこちらの改善に向けてチクチクと作業をしていました。この記事では、なぜ構成を変えたのか、どう変わったのかをご紹介します。 構成を見直した経緯SmartHR Design Systemは、最初にサイト構造を設計したうえでコンテンツを埋めていったというようなものではありません。必要に応じてコンテンツを少しずつ拡充してきたという歴史があります。S

『みてね』のビジュアルガイドラインができるまで。その背景とプロセスを聞いた

こんにちは。 MIXI デザイン本部 デザイナーリレーショングループです。 『家族アルバム みてね』(以下、『みてね』)では、誰もが『みてね』に関するデザインを高品質に、効率的に行えるように、また一貫性のあるユーザー体験を提供するために、デザインコンセプトやロゴ、カラー、写真に関するガイドライン、各種 UI コンポーネントを取りまとめたデザインシステムを運用しています。 デザインシステムのなかでもビジュアルガイドラインの策定を主導したのが、ビジュアルデザインチームの4名で

タイミーでは先鋭的なDesignDataOpsを構築した

こんにちは、タイミーのプロダクトデザイナーの横田です。 私たちは900万人以上のワーカー様が利用するスキマバイトプラットフォームを運営していますが、プロダクトデザイナーはかなりの少数精鋭です。 今回は、タイミーのプロダクトデザインにおける仕組み化についてご紹介します。 DesignDataOpsに取り組むデザインをめぐるオペレーションの整備については、近年はDesignOpsという活動の一部として捉えられています。しかし、DesignOpsの意義は拡大し、組織運営などのソフ

スタートアップがイラストシステム設計に取り組んだ話

株式会社スマートバンク、コミュニケーションデザイナー(以降コムデ)のmmitoです🎨 ここ半年は、弊社サービスB/43の「アプリ内イラストのガイドライン整備」や「人物イラストのシステム化」などを推進していました。 今回のnoteでは、スタートアップの弊社が「イラストを活用する理由」と「アプリ内イラストのガイドライン整備」や「人物イラストのコンポーネント化」に至った経緯を課題ベースで紹介していきます。 スマートバンクがイラストを活用する理由前述の通り、B/43ではイラストを

インタラクションを"感覚"から"言語"へ - インタラクションデザインシステム - 前編

こんにちはー!アクセンチュア ソングでインタラクションデザインのリードをしている佐々木です。 先日、アクセンチュア・イノベーション・ハブ東京にてFigma Japanさんの2周年記念イベントが開催されました。 改めまして、Figma Japanさん、2周年おめでとうございます! イベントのセッションでは、「インタラクションを”感覚”から”言語”へ」と言うテーマで、私たちアクセンチュア ソングのインタラクションデザイナーが開発した”atom Interaction”というシ

🍳半熟なデザインシステムを育てていく - noteの事例あれこれ振り返り

先日開催された「半熟デザインシステム vol.1」に、note社から登壇させていただきました。たくさんの方にご参加していただけて、とてもありがたかったです!オフライン開催ならではの、リアルな取り組みや悩みについてディスカッションできて、登壇しながらもとても勉強になりました。 今回はそのなかでお話しした、noteのデザインシステムの取り組みについて、内容を振り返りつつ、補足できるポイントも合わせてのまとめです。 イベント全体がまとまったレポートは、こちらの記事に書いていただ

IPの世界観に寄り添う、マルチブランドなカラーシステム設計論

はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多か

「誰もがつかえる」を目指す、noteのイラストシステム設計の裏側

2024年3月13日に開催されたFigma Japan2周年記念イベントTHE WAYS WE WORKに登壇しました。本記事は「誰でもつかえる」を目指す、noteのイラストシステム設計の裏側」というテーマでお話させていただいた内容です。 noteのイラストシステム「JOY」とは?2024年3月13日、noteのイラストシステム『JOY』を発表いたしました。 この「JOY」という名称には、誰もが楽しく、楽にイラストを作成できるように、という想いが込められています。 イラ

4年間、7色だけでUIをデザインし続けた話

2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナ

デザインシステム完全版|Figmaでの作り方、事例など【2024年版】

このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。 あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。 とはいえ、絶対これが正し

FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話

いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。(ここに関しては入社半年エントリー記事で詳しく書く予定) 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でも

noteのイラストが新しくなりました!イラストリニューアルの裏側

こんにちは。noteでイラストレーターをしているKimです。 2022年11月頃に、イラストをリニューアルすることが決まり、動き出してまるまる半年。 この記事では、新しいnoteのイラストには、どのような思いが込められているのか、「noteらしさ」をイラストで表現する過程でどんな課題と向き合い、どのように乗り越えてきたのか、制作の裏側をオープン社内報として公開します。 オープン社内報とは? 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開するこ

カラーパレット作成の参考にした記事、他社のデザインシステム

株式会社アンドパッドでUIデザイナーをしている、よつくらです。 アンドパッドのデザインシステムでカラーパレットの作成を担当しています。カラーパレットの作成・更新を何度も行ううちに「これもっと早く知っておきたかった….」と思うようなことがいくつかあったので記事にまとめました。 この記事で触れている内容UIデザインに必要なカラーパレット(アンドパッドのデザインシステムではリファレンスカラーと呼ばれる)の作成・更新に必要な知識、他社事例 この記事で触れていない内容ブランドカラー

そのデザインシステムは投資対効果をもたらしますか?

2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。 かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話