はじめまして！ 株式会社MIXI デザイン本部 プロダクトデザイン室 コミュニケーションデザイングループの滝山です。 先日、ViViViT主催のイベント「ポートフォリオの法則 UIデザイン編」に登壇させていただきました。 イベントでお話した内容を当日の資料とともにお伝えしたいと思います。 自己紹介2016年に新卒デザイナーとしてミクシィ（現：MIXI）に入社し、モンスターストライク等のエンタメ事業を中心にWEBサイト制作を担当していました。2018年末から1年半ほど育休と産休を頂き、復帰後は全社横断組織のデザイン本部に所属しています。現在はWEBサイト制作のほか、新規事業のUIデザインにも携わっています。 昨年から新卒採用のポートフォリオ選考や現場面接官を担当しています。 選考官として沢山のポートフォリオを見てきた中で、良いポートフォリオの共通点や、作り方のコツをお伝えしたいと思います。
大規模B2B SaaS 「HRMOS」におけるDesign Systemの開発・運用プラクティス
前回の記事ではHRMOSのDesign Systemの導入背景の紹介をしました。 本日はそのDesign Systemがどのように開発・運用されているのかを紹介したいと思います。 開発体制 Design Systemの開発はデザイナー、エンジニアが1つのチームとして開発を行っています。 開発のポイントとしては以下のとおりです。 デザインタスク、実装タスクなどすべてのDesign Systemのタスクは1つのバックログで管理 隔週に1度、やることの計画、やったことの確認をチーム全員で行う チームメンバーは全員兼務なので、極力MTGを増やさないよう、非同期でのコミュニケーションをメインにしている この体制になった背景として、当初はDesign System開発がデザイナーとエンジニアで分断されていたことにあります。 デザインとエンジニアリングでそれぞれ別のバックログをもち、それぞれ別のサイクル
100. A Philosophy of Software Design (1/3) w/ twada | fukabori.fm
MP3ファイルをダウンロード 内容紹介 twadaさんをゲストに、A Philosophy of Software Designをテーマに色々と語っていただいたエピソードです。 出演者 話したネタ 書籍：A Philosophy of Software Design, 2nd Edition 資料：“A Philosophy of Software Design” を30分でざっと理解する 記事：ソフトウェア設計についてtwada技術顧問と話してみた 〜 A Philosophy of Software Design をベースに 〜 記事：【続】ソフトウェア設計についてtwada技術顧問と話してみた 〜 A Philosophy of Software Design をベースに 〜 本書籍の翻訳は出ない？ Working Code isn’t Enough ストラテジックアプローチ と タ
『Software Design 2020年7月号』特集「一から学ぶログ分析」に寄稿しました - 下町柚子黄昏記 by @yuzutas0
『Software Design 2020年7月号』の第1特集「一から学ぶログ分析 - 事業を成長させる分析基盤を作るには」 第2章「ログ分析基盤の構築で考えるべきこと - 多様なログを安心して使えるようにするために」を寄稿しました。 本日発売の『Software Design (ソフトウェアデザイン) 2020年7月号』【第1特集】「一から学ぶログ分析 - 事業を成長させる分析基盤を作るには」に寄稿しました。初学者向けにまとまった内容ですので、ぜひ手に取っていただけると幸いです。https://t.co/IXp40MoPJc pic.twitter.com/XydqlWDjth— ゆずたそ (@yuzutas0) 2020年6月17日 執筆内容 初学者向けに、以下の内容を10ページでまとめました。 なぜログ分析基盤を作るのか 「使われるログ分析基盤」には何が必要か 分析者が手軽にログを参
WWDC22 Recap in Goodpatch WWDC22の発表内容とHIGの更新内容の振り返りつつ、AppleプラットフォームにおけるHIGの位置付けとソフトウェアUIデザインへの向き合い方を考えます。
最近イーロン・マスク氏の影響によりTwitterの改変に右往左往して大変ですよね…。Twitterに不満を持つ方が増えてきましたので、Mastodonサーバーを立てて5年目の自分が雑におすすめするMastodonサーバーを紹介します。 前提1. どこのサーバーに登録してもフォローはできますよく勘違いされているのですが、Mastodonは原則的にどこのサーバーにアカウントを作っても別のサーバーのアカウントのフォローが出来ます。たとえばAのサーバーに登録したからってBのサーバーにいる人をフォローできないという事はありません。Mastodonにはアカウント引っ越し機能もありますので、「とりあえず試しに登録してみて、合わなかったら他のサーバーを探す」というスタイルをおすすめします。 2. ここでおすすめする対象は一次創作・二次創作をするタイプのオタク向けですMastodonサーバーはサーバーごとに
Ant Designで始める管理画面開発
こんにちは、Ubieデザインエンジニアの takanoripです。 最近はずっと社内管理画面を開発しており、そのフロントエンド開発にAnt Design（Antd）を採用してみたので感想と注意が必要なポイントについてまとめました。 Ant Design？ Ant DesignはAnt Group（中国アリババグループの金融関連会社）が開発しているUIライブラリです。現在はReactのコンポーネントや周辺ライブラリが公開されています。 なぜAntdを選択したか 今回の管理画面開発でAntdを採用した理由は次の6つです。 コンポーネントの種類が十分豊富であること できる限り新規でコンポーネントを作らずに実装が進められることが重要 特にRange PickerやComboBoxなど複雑Form用コンポーネントが充実していること アントグループが開発をしていて十分に歴史があり現在も活発に開発がされ
OOUIからユーザビリティテストまで、スキル横断的にUIデザインを見る！Designer's MTG #10 UI Design編 レポート！ - Pepabo Tech Portal
こんにちは。 コーポレートデザインチームのmewmo(@mewmoppel)です。 ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG（通称 デザミ）」のフルリモート開催も当たり前の風景となってきました。 今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜 これまでのデザミのレポートはこちら Designer's MTG #9 Information Architecture編 レポート！ 40人のデザイナーがフルリモートで集合！ Designer's MTG #8 レポート！ 「デザミとは？」「エキスパートスキルエリアとは？」については、前回の記事で紹介していますので、気になった方はあわせてご覧く
Pepabo Design
GMOペパボ株式会社のデザインにまつわるドキュメントをまとめているウェブサイトです。現在は、共通基盤デザインシステム「Inhouse」のドキュメントを公開しています。
ユーザー体験を最高にするkintone Design Systemsをつくってます - Cybozu Inside Out | サイボウズエンジニアのブログ
春ですね〜、ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。 ユーザー体験を最高にするチームとは？ kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点では分割されていますが、ユーザー視点では1つのkintoneアプリケーションであり、各チームが足並みを揃えてデザインの一貫性や品質を意識しながら開発を行う必要があります。そこで、各チームを横断してkintoneのユーザーにより良い体験を届けることを目標としたチームが「ユーザー体験を最高にするチーム」です。 ユー
Nintendo suffers huge leak, source code and design files for Wii appearing online
Nintendo suffers huge leak, source code and design files for Wii appearing online A few days ago, leaks started to surface regarding some of the older Pokemon games. We were able to get a look at tons of beta designs from the Gen 2 era, which was followed by even more earlier sprites and other assets. Apparently, this Pokemon content was just a larger portion of an overall huge Nintendo leak. Sour
Shekhar Gulati Writings on Software Engineering, Software Architecture, and Engineering Leadership I spent some time going over the Postgres schema of Gitlab. GitLab is an alternative to Github. You can self host GitLab since it is an open source DevOps platform. My motivation to understand the schema of a big project like Gitlab was to compare it against schemas I am designing and learn some best
fffuel is a collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds 🚀 On fffuel you'll find a collection of free SVG makers to create cool backgrounds, seamless patterns, gradients, textures, shapes and blobs. Use the generated vector patterns directly on the web or in your favorite design app. 🤹♂️ The SVG and graphic creation tools on fffuel al
はじめに 10月12日発売の、Software Design総集編【2018～2023】における特集「生成AI時代を生き抜くITエンジニアの生きる技術」で、第1章「プログラミング」を担当させていただきました。 雑誌発売から一ヶ月近く経っているのでやや時期を逸した感もあるのですが、所属会社の名前を出して書いた記事でもあるので、この場を借りて宣伝をさせていただければと思います。 書影と記事抜粋 経緯 私は元々AIについては門外漢なのですが、生成AI（LLM）については特にChatGPTが公開された直後から興味をもちはじめました（辺りがガチの人からするとにわか感が満々ですが）。 特にプログラミング言語処理におけるポテンシャルの高さに魅了され、現在に至るまでChatGPT（OpenAI）, Claude（Anthropic）, Gemini（Google）など大手のLLMにとどまらずローカルのLL
Introduction Software Design 2025年3月号に「第3章：Emacs 拡張性に優れた、ハッカーのためのエディタ Lispがもたらす無限の自由さとは」というテーマで @tadsan と一緒に書きました。 着手開始から校了まで計12ページ、約1ヵ月程度かけて執筆しました。 全体の流れ 寄稿まで 当初、雑誌の寄稿依頼はtadsanの所に来ていました。 tadsanが以下のような見出し案を作って提出していました。 GNU Emacsは長い歴史を持つ伝統的なテキストエディタです。単なるテキストエディタではなく、しばしば「Emacsは環境だ」「EmacsはOSだ」とも言われます。 また、初心者が定着しにくい一方で一度手に馴染んだ人が熱狂的に使い続けることでも知られています。 本記事ではさまざまなテキストエディタを利用してきて10年前から毎日Emacsを使って生活している筆者
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的…
『グラフィックデザイン・レヴュー』のボードメンバーが、今どんな関心や問題意識をもっているかを肩肘張らず語り合う編集会議的座談会。第2回はゲストにデザイナー、イラストレーターとして活躍し、社会問題にも関心が高い惣田紗希さんをお迎えし、「グラフィックデザインとジェンダー」について話し合います。日本のデザイン教育の現場では近年、学生全体の約8割を女性が占める状況が長く続いてきました。このジェンダーバランスの背景にあるものは何か、それに対する産業や社会の潮流はどうなっているのか？ 活動拠点の異なるメンバーそれぞれの視点をもとに行われた座談会の模様をお届けします。 （協力：西山萌） 室賀：今回のテーマは「グラフィックデザインとジェンダー」です。近年、ジェンダーに対する社会的な取り組みが世界各地で大きな潮流となっています。Yulia Popova『How many female type design
AndroidアプリをMaterial Designのガイドラインに準拠させるための取り組み - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部ZOZOTOWNアプリ部Android2ブロックの鈴木（@s1u2z1u3ki）です。 本投稿ではZOZOTOWN Androidアプリを、Material Designに準拠したUI/UX1とするために取り組んでいる内容を紹介します。 目次 はじめに 目次 Material Designとは？ Material Design勉強会について 勉強会の流れ 存在した課題 課題解決へのアプローチ 提案会の実施 提案会の流れ 1. 提案会の準備 2. セクションの復習 3. 提案内容の議論 実装会の実施 「結局やらない」をなくすため モブプロ形式でリリースまでのスピードを上げるため 実装会の流れ 1. タスクの共有 2. タスクを進める 3. 進捗記入 4. 進捗共有 取り組みの結果 リリースした提案 1. ログイン画面のテキストフィールドのフォーカスを強調する
Companies Using RFCs or Design Docs and Examples of These
RFCs - requests for comment - or Design Docs are a common tool that engineering teams use to build software faster, by clarifying assumptions and circulating plans earlier. There are some similarities between writing automated tests for your code, and writing RFCs before you start working on a non-trivial project: Software engineers who write tests for their code - and ask for code reviews on it -
Ready-to-useYou can use the icons as HTML images, embed them in your HTML code, create an SVG sprite or render them in React. Multiple formatsIcons can be used in Sketch, Illustrator, XD and Figma - choose the tool you feel the most comfortable working with. CustomizableEvery icon is designed on a 24x24 grid and a 2px stroke. You can easily customize them, changing the size, stroke or color.
Introduction Participation If you are interested in contributing to this book, check out the contribution guidelines. News 2024-03-17: You can now download the book in PDF format from this link. Design patterns In software development, we often come across problems that share similarities regardless of the environment they appear in. Although the implementation details are crucial to solve the tas
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開
常に昨日を超えるロゴデザインをつくるために心がけている３つのこと｜松永克輝｜GRIZZLLY.DESIGN
僕はまだまだなので、「お前が何を言ってるんだ？」という声がたくさん聞こえてきそうですが、、、 常に昨日を超えるロゴデザインをつくろうと毎日もがいています。 昔は今の自分ほどに仕事に本気になれてなかったと思います。仕事に本気になることは、ただただ辛いことだと思っていたからかもしれません。 でも「本気で取り組む」ことで、こんなに仕事は楽しいのか！と知ってしまいました。 だからこそ常に自分史上最高のロゴデザインをつくろう、自分史上最高にお客様の力になろうと日々努力しています。 自分史上最高のロゴデザインをするために、自分史上最高にお客様のお手伝いができるように、普段から心がけていることをこのnoteで言語化してみたいと思います。 常に昨日を超えるロゴデザインをつくろうとしている理由常に自分史上最高のロゴデザインをつくりたいと思うようになった理由は大きく考えると2つあります。 特に2つ目の理由が大
Helios Design System
The page navigation is complete. You may now navigate the page content as you wish. This button opens a dialog containing an input field and some additional information that you may wish to explore. An automatic search will be performed as you type text into the search field, but the results may not be announced. Exploring the additional items in the modal will help you discover the search results
User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder. Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interacti
13-B-1 Architecture to Design より良い設計を目指して Feb. 13, 2025 Takeshi Yonekubo About Me 米久保 剛 (よねくぼ たけし) 株式会社電通総研 ITアーキテクト 『アーキテクトの教科書』（翔泳社） X: @tyonekubo note: https://note.com/yonekubo 12:30〜 3F 休憩ラウンジ 翔泳社書籍販売コーナー にてサイン会実施！
元制作会社のデザイナーが発注側でも活躍できる3つの理由｜KOEL Design Studio by NTT Communications｜note
こんにちは。KOELのUIデザイナーの荒砂です。突然ですが、KOELは2021年4月6日（火）にWebサイトをリニューアルしました。新しいサイトはこちらからご確認いただけます。 KOEL Design Studio by NTT Communications 2020年のKOEL発足から1年が経過し、メンバーも倍以上に増え、組織作りも急速に進みました。しかしこの変化をWebサイトで伝えられていないことが課題となっていました。刷新は急務となり、1月にリニューアルプロジェクトが発足。約2ヵ月という短期間で新Webサイトは生まれました。 今回のWebサイト、ビジュアルを一新するような「フルモデルチェンジ」ではなく、以前からの印象は活かしつつ、現状のKOELを漏れなく見える化した「マイナーチェンジ」に近いものになっています。支援領域、事例、メディア情報が集約され、KOELの情報発信の起点としての役
デザインコラボレーションツールを手掛ける米Figmaは7月2日（現地時間）、年次イベント「Config」で発表した「Figma AI」の機能の1つ「Make Design」を無効化すると発表した。 Make Designはデザインタスク合理化ツールの1つで、テキストプロンプトでアプリなどのデザインを行えるというもの。 アプリ開発者のアンディ・アレン氏が、この機能を使って生成したという天気アプリをAppleの天気アプリと比較する画像をXにポストし、「Figma AIは既存のアプリでかなり高度にトレーニングされているようだ」と報告した。画像を見ると、アプリのデザインはかなり似ている。 これに対し、Figmaの共同創業者でCEOのディラン・フィールド氏は、「Make Design機能はFigmaのコンテンツ、コミュニティファイル、アプリデザインに基づいてはいない。つまり、このツイートにおけるデー
Archive｜Tama Design High School - Tama Art University Bureau｜多摩美術大学 TUB
【この展示は終了しました】 多摩美術⼤学は、東京ミッドタウン・デザインハブにて、2023年11⽉27⽇(⽉)よ
The golang.design Initiative
The golang.design Initiative Hopefully everything about Go! PROJECTS /history /under-the-hood /research /go-questions /miner /gossa /more! © 2021 The golang.design Initiative About Contact Sponsors
dbtを活用したデータ基盤の 論理・物理設計の現在地と振り返り / data warehouse logic design by using dbt
dbtを活用したデータ基盤の 論理・物理設計の現在地と振り返り / data warehouse logic design by using dbt
Introducing Exciting New Tools from Ceros: Farewell to Open Design
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Open Design” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to “Open Design” as of October 1, 2
混同しがちなUI用語の用法を整理する【モーダル/フィードバック編】｜i3DESIGN Designers
はじめにこんにちは！i3DESIGN デザイナーチームのUIデザイナー関口です。 今回は、モーダルやアラート、ダイアログなど、ユーザーにフィードバックを提供するためのUI表現における言葉としての定義の違いをまとめました。 チームのコミュニケーションの中でも混同しやすいこれらの定義をしっかりと理解することで、チーム内で共通認識を持ち、スムーズなやりとりを実現することができると思います。 ぜひ、この機会に疑問を解消しましょう！ 1.モーダル・アラート・ダイアログ・ポップアップモーダル「モーダル」の定義UIデザイナーの方であれば、「モーダル」という言葉には聞き馴染みがあるのではないでしょうか。 特に、こちらの画像のような「画面中央にかぶさるように出てくるウィンドウ」を「モーダル」と呼ぶことがあります。 しかし、「モーダル」という言葉自体は本来、「具体的なものの名前」ではなく「表示の形式・状態」を
PCの在り方をMicrosoftとIntelが規定した時代 PC 9x/200x System Design Guideとは何だったのか
PCの在り方をMicrosoftとIntelが規定した時代 PC 9x/200x System Design Guideとは何だったのか：“PC”あるいは“Personal Computer”と呼ばれるもの、その変遷を辿る（1/5 ページ） 昔ながらのIBM PC、PC/AT互換機からDOS/Vマシン、さらにはArmベースのWindows PC、M1 Mac、そしてラズパイまでがPCと呼ばれている昨今。その源流から辿っていく第19回は、Hardware Design Guide、System Design Guideとは何だったのかという点について。 第1回：“PC”の定義は何か まずはIBM PC登場以前のお話から 第2回：「IBM PC」がやってきた エストリッジ、シュタゲ、そして互換機の台頭 第3回：PCから“IBM”が外れるまで 「IBM PC」からただの「PC」へ 第4回：EIS
LINE Design System
LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE's design and user experience.
Hawkins: Diving into the Reasoning Behind our Design System
Stranger Things imagery showcasing the inspiration for the Hawkins Design Systemby Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves Hawkins may be the name of a fictional town in Indiana, most widely known as the backdrop for one of Netflix’s most popular TV series “Stranger Things,” but the name is so much more. Hawkins is the namesake t
Map Design GALLERYオンラインストア（マップデザインギャラリー）｜ゼンリン｜地図雑貨を専門に取り扱う公式オンラインストア
プロサッカークラブ「V・ファーレン長崎」、プロバスケットボールクラブ「長崎ヴェルカ」とのコラボアイテム
Wise Design
Wise Design is the Wise design system. It helps our team create a distinct, accessible and consistent Wise experience that works for everyone, everywhere.
GitHub - onlook-dev/onlook: The open source Cursor for Designers. Design directly in your live React app and publish your changes to code.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MIXIデザイナーが思う良いポートフォリオの共通点｜MIXI DESIGN
The HIG & Software UI Design
「Gmail」と共通 ～「Google ドライブ」や「Google ドキュメント」も新デザインに／「Google Material Design 3」に準拠
絵や文を作るオタク向けの個人的マストドンサーバーおすすめ｜XM2design/xanac
My Notes on GitLab Postgres Schema Design
Free SVG generators, color tools & web design tools
Software Design総集編で生成AIについての記事を書きました
Software Design 2025年3月号にEmacsについて書きました
サービスにおけるDesign Systemの構築
グラフィックデザインとジェンダー｜ARTICLES｜The Graphic Design Review
Tabler Icons: 5850+ free vector icons for web design
Introduction - Rust Design Patterns
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
16 little UI design tips that make a big impact
Architecture to Design より良い設計を目指して | ドクセル
Figma、新AI機能「Make Design」停止 Appleのアプリに酷似結果を受け