{"id":44053,"date":"2023-03-30T01:11:54","date_gmt":"2023-03-30T08:11:54","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=44053"},"modified":"2024-05-15T02:16:58","modified_gmt":"2024-05-15T09:16:58","slug":"5-ui-components-in-atomic-design-ja","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/jp\/blog-jp\/5-ui-components-in-atomic-design-ja\/","title":{"rendered":"\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3 \u306b\u304a\u3051\u308b\uff15\u3064\u306e UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8"},"content":{"rendered":"\r\n
\"<\/figure>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n
\r\n

\u300e\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u300f\u306f\u3001\u304b\u3064\u3066\u306f\u66d6\u6627\u306a\u6982\u5ff5\u3067\u3057\u305f\u304c\u3001\u8fd1\u5e74\u306f\u5e83\u304f\u77e5\u308c\u6e21\u3063\u3066\u304a\u308a\u3001\u6ce8\u76ee\u3055\u308c\u3066\u3044\u308b\u306e\u306b\u306f\u305d\u308c\u306a\u308a\u306e\u7406\u7531\u304c\u3042\u308a\u307e\u3059\u3002\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u3092\u6b63\u3057\u304f\u884c\u3046\u3053\u3068\u3067\u3001\u30c7\u30b6\u30a4\u30f3\u30c1\u30fc\u30e0\u306f\u771f\u306b\u30e6\u30cb\u30fc\u30af\u306a\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u5c55\u958b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u3055\u3089\u306b\u3001\u305d\u306e\u3088\u3046\u306a\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u306f\u3001\u4ed6\u306b\u985e\u3092\u898b\u306a\u3044\u9ad8\u54c1\u8cea\u3067\u4e00\u8cab\u3057\u305f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u63d0\u4f9b\u3057\u3001\u30a8\u30f3\u30c9\u30e6\u30fc\u30b6\u30fc\u3068\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u306e\u4e21\u65b9\u306b\u5229\u76ca\u3092\u3082\u305f\u3089\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/span><\/p>\r\n

\u305d\u3053\u3067\u672c\u8a18\u4e8b\u3067\u306f\u3001\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u306e\u6982\u8981\u3068\u3001\u305d\u306e\u4e2d\u306b\u3042\u308b UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3064\u3044\u3066\u304a\u8a71\u3057\u307e\u3059\u3002<\/span><\/p>\r\n

\u30c7\u30b6\u30a4\u30f3\u30c1\u30fc\u30e0\u304c\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u624b\u6cd5\u3092\u63a1\u308a\u5165\u308c\u3084\u3059\u3044\u3088\u3046\u306b\u3057\u307e\u305b\u3093\u304b\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u3092\u30c7\u30b6\u30a4\u30f3\u3059\u3079\u304f\u3001\u753b\u671f\u7684\u306a Merge \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067 React \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092UXPin\u306b\u53d6\u308a\u8fbc\u307f\u307e\u3057\u3087\u3046\u3002UXPin Merge\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f<\/span>\u3053\u3061\u3089\u3092<\/span><\/a>\u305c\u3072\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/span><\/p>\r\n

\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u306e UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff15\u3064<\/b><\/h2>\r\n

\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u306f\u3001\u30d6\u30e9\u30c3\u30c9\u30fb\u30d5\u30ed\u30b9\u30c8\u6c0f\u306b\u3088\u3063\u3066\u958b\u62d3\u3055\u308c\u305fWeb\u30c7\u30b6\u30a4\u30f3\u7406\u8ad6\u3067\u3059\u3002\u5316\u5b66\u306e\u5206\u91ce\u306b\u3044\u308b\u30d5\u30ed\u30b9\u30c8\u6c0f\u306f\u3001\u5468\u671f\u8868\u3092\u3082\u3068\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u30c7\u30b6\u30a4\u30f3\u30fb\u958b\u767a\u306b\u95a2\u3059\u308b\u3053\u306e\u30e1\u30f3\u30bf\u30eb\u30e2\u30c7\u30eb\u3092\u958b\u767a\u3057\u307e\u3057\u305f\u3002\u5316\u5b66\u3067\u306f\u3001\u539f\u5b50\u306e\u30b0\u30eb\u30fc\u30d7\u304c\u7d50\u5408\u3057\u3066\uff11\u3064\u306e\u5206\u5b50\u3092\u5f62\u6210\u3057\u3001\u305d\u308c\u304c\u6b21\u7b2c\u306b\u5927\u304d\u306a\u5206\u5b50\u3084\u751f\u7269\u306b\u7d50\u5408\u3057\u3066\u3044\u304f\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/span><\/p>\r\n

\u305d\u3053\u3067\u5f7c\u306f\u3001\u3053\u306e\u30d7\u30ed\u30bb\u30b9\u3092\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u57fa\u790e\u3068\u3057\u3066\u9069\u5fdc\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/span><\/p>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n

 <\/p>\r\n\"1<\/figure>\r\n\r\n\r\n\r\n

\u30a2\u30c8\u30df\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u306f\u3001\u4ee5\u4e0b\u306e\uff15\u3064\u306e\u8981\u7d20\u3067\u69cb\u6210\u3055\u308c\u3001\u305d\u308c\u3089\u304c\u4e92\u3044\u306b\u7a4d\u307f\u91cd\u306a\u3063\u3066\u3044\u307e\u3059\uff1a<\/span><\/p>\r\n