タグ

デザインシステムに関するkaraumaのブックマーク (46)

  • 次世代デザインツールはどこへ向かうのか 中編

    実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうと

    次世代デザインツールはどこへ向かうのか 中編
    karauma
    karauma 2019/07/04
    “Storybook と Sketch を繋げる story2sketch もあります。先述した html-sketchapp を拡張したもので、Storybook をワークフローの一部として活用しているのであれば試す価値があります。”
  • 次世代デザインツールはどこへ向かうのか 後編

    次世代デザインツールはどこへ向かうのか 前編 次世代デザインツールはどこへ向かうのか 中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント(部品)として捉えた UI の管理 複数人のデザイナーによるプロダクトデザインの運用 コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニーズが高まってきています。欧米ではここ数年でデザイナーとエンジニアの比率が小さくなってきている状況をみても、デザインが個人プレーからチームプレーになってきているのが分かります。 大企業でデザイナーの雇用(又はデザイン会社の買収)が増えていた

    次世代デザインツールはどこへ向かうのか 後編
    karauma
    karauma 2019/07/04
    “デザインシステムの作成・運用に最適化するための機能実装。・一貫性のあるデザインの作りやすさ・コンポーネント(部品)として捉えたUIの管理・複数人のデザイナーによるデザインの運用 ”
  • Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy

    この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ!」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl

    Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
  • Storybookがなぜ必要か?(Vue.js編) - Qiita

    まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基的な使い方をサンプルと共に紹介します。 TL;DR StorybookUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。

    Storybookがなぜ必要か?(Vue.js編) - Qiita
  • Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ

    はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー&エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹

    Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ
    karauma
    karauma 2019/06/27
    (De)デザイン制作→(En)実装→(De)確認→(De)修正依頼→(En)修正→(De)確認のフローを (De)デザイン制作→(De)実装/修正(→(En)コードレビュー)にできるため、修正のやりとりが大幅に減る
  • Sketch移行とUIコンポーネント化で、良いことしかなかった話

    アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し

    Sketch移行とUIコンポーネント化で、良いことしかなかった話
    karauma
    karauma 2018/03/19
    ][PJ][UX]“コンポーネント化”