Amebaのデザインシステム「Spindle」の全貌公開
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
UIデザインのガイドラインとの付き合い方 - Satoshi Murata
UIデザインの仕事をしていると、iOSやAndroidといったプラットフォームが公開しているデザインのガイドラインとどのくらい折り合いをつけていくかということがしばしば議論の的になります。 私がアプリをデザインする場合は、ウェブのデザインをするときよりもそれを多く尊重しますが、ウェブの場合は独自のガイドラインを重視しています。 ガイドラインの意味 そもそもUIデザインのガイドラインとは何なのでしょうか。端的には、システムの振る舞いやグラフィックとしての表現方法に一貫性を持たせるための指針であると考えています。ノーマン風に言えば、行動的な側面で、デザイナーがシステムイメージを適切にデザインすることを助け、ユーザーのメンタルモデルに寄り添うための指針と言えるでしょうか。デザインシステムではこれを機能パターンや認知パターンというふうに呼び分けていたりします。 ガイドラインに定義された振る舞いを忠
デザインシステムに関わるいろいろなプロセスを図にしてみた
今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ
良いUIをつくるには「どうつくるか？」より「誰とつくるか？」｜takahashikazuki｜note
PLAID Advent Calendar 18日目の記事です PLAIDでKARTEのUIデザイン（HTML / CSS）を担当しています@takahashikazukiです。経歴は制作会社勤務が10年（3社）、フリーランスでの活動が5年です。PLAIDには2018年2月に入社しました。 フリーランス時代はスタートアップのプロダクト開発をお手伝いしたり、ECサイトのコンサルをしたり、サイダーをつくったり。入社後は、当時スタートしていたKARTEのUI刷新プロジェクトに参加しました。 ここでは、そのプロジェクトを通じて感じた事…特に「機能するスタイルガイドづくりに大切なこと」について書きたいと思います。 KARTEのスタイルガイドを刷新するKARTEローンチから3年。多くの機能追加や改修でデザインは一貫性を失い、HTML / CSSは複雑化し壊れはじめていました。そこでUIデザイナー2名+
iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編- #Zaim｜akatsuki174
なぜこの記事を書くのかこんにちは。Zaim で iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、「iOS エンジニア以外の人もこれを覚えておくと良いかも！」と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UI をもっと理解したい方は、こちらも頭に入れておくと良いと思います。 注： ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。 ・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。 ・ほとんどHuman Interface Guidelines（以下 HIG）から情報を引
【デザイン勉強会】私たちが今知りたいことを学ぶ！UI設計ナイト - DMM inside
こんにちは！ デザイナー２年目になりました、ライツ管理部の川崎です。 ライツ管理部は、エンターテイメント本部という大きな部組織が母体となっており、主に DMM picturesなどのデザインを担当しています。 そんなエンターテイメント本部と、セールスソリューション本部に所属する若手デザイナーがこのたび“いのこりデザイン勉強会（略して“のこ勉” ）”を発足し、第１回目となる会を先日開催しました！ いのこりデザイン勉強会の目的は？ 勉強会、と言っても固いイメージではなく、デザイナーである私たちが欲しい知識を吸収し、交流の場にすることが目的のイベントです。 記念すべき第１回のテーマは・・・ 『 UI設計 NIGHT 』 これが知りたい、とデザイナーからの要望が一番多いテーマです。 当日は、金沢を含め4拠点の事業所を中継でつなぐ形式で、第１回から大規模な会になりました。 慣れない運営にもどきどき・
運用期間20年 DMMが明かす、Vue.jsを使って長期運用サービスを改善するまで
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「長期運用サービス改善のために構築した開発環境の話」に登場したのは、koyano氏。DMMにおいて長期間運用されているサービス「DMM動画」の改善のために、Vue.jsを使って取り組んだことについて語りました。講演資料はこちら 長期運用サービス改善のために構築した開発環境の話 koyano氏：それでは始めさせていただきたいと思います。よろしくお願いします。 （会場拍手） 「長期運用サービス改善のために構築した開発環境の話」をさせていただきたいと思います。 まず自己紹介
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.life-is-bitter.com/entry/ui_checklist
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018 - Speaker Deck