[B! 設計][design] kihalaのブックマーク

個人的におすすめしたいFeature-Sliced Designというフロントエンドアーキテクチャ設計方法論

Feature-Sliced Designというフロントエンドアーキテクチャ設計方法論をプロジェクトに導入してみたところ、個人的には良いと感じているので、どのような設計方法論なのか、具体的にどのような部分が良いと感じたかを紹介していきたいと思います。 Feature-Sliced Designとは？ Feature-Sliced Designは、フロントエンドアプリケーションを対象としたアーキテクチャ設計方法論です。公式サイトでは、「コードを整理するためのルールと規約の集大成」と記載されています。 Feature-Sliced Designの設計方法論 Feature-Sliced Designでは、プロジェクトはLayerで構成され、各LayerはSliceで構成され、各SliceはSegmentで構成されます。 Layer Feature-Sliced Designの第一階層をLay

kihala 2024/05/11

リンク

モノタロウ社内デザインシステムの今までとこれから - MonotaRO Tech Blog

UI UXデザイングループのグループ長を担当させていただいている小田と申します。一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。今回はモノタロウのデザインシステムのお話をしたいと思います。デザインシステムの始まりこれは数年前の話です。何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。サービスの品質を上げるPDCAを早く回す為に土台（図1）を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。分散していたスタイル：作成したボタ