Reactでユーザーインターフェイスを構築する際、視覚的な変化を伴うアニメーションやトランジションを効果的に使用することで、ユーザー体験を大幅に向上させることができます。特に、コンポーネントの状態変更時に動きを加えることで、UIが直感的で使いやすく感じられるようになります。本記事では、Reactを使用して状態変更時にアニメーションやトランジションを実装する方法を、基本から応用までわかりやすく解説します。最適な手法やライブラリの選び方、具体的なコード例を通じて、プロジェクトに活用できる実用的な知識を提供します。
Reactにおけるアニメーションとトランジションの重要性
現代のWebアプリケーションでは、アニメーションやトランジションは単なる装飾ではなく、ユーザー体験（UX）の向上に不可欠な要素です。状態変更時にアニメーションを導入することで、次のようなメリットがあります。
ユーザー体験の向上
滑らかなアニメーションは、操作が完了したことや状態が変化したことを視覚的に示し、ユーザーがアプリケーションの動作を直感的に理解できるようにします。
直感的な操作性の提供
例えば、メニューの開閉や新しい要素の追加・削除などをアニメーションで表現することで、ユーザーが操作内容を自然に受け入れられるようになります。
ブランド価値の向上
デザインに統一感があり、洗練されたアニメーションを取り入れることで、アプリケーションの見栄えが良くなり、ブランドの印象が向上します。
Reactは状態管理や仮想DOMを活用した高速なレンダリングが強みですが、適切にアニメーションを組み合わせることで、より完成度の高いUIを実現できます。これが、Reactにおいてアニメーションとトランジションが重要である理由です。
CSSを使った基本的なアニメーションとトランジション
Reactでアニメーションやトランジションを実装する際、まずはCSSを活用した基本的な手法を理解することが重要です。CSSのみを使用する方法は、シンプルかつパフォーマンス効率が高いため、初歩的なアニメーションに適しています。
CSSトランジションの基本例
CSSのtransitionプロパティを使うと、要素のスタイル変化にアニメーション効果を簡単に追加できます。
以下はボタンの背景色が変更される際にトランジションを適用する例です。
<button class="transition-button">Hover Me</button>.transition-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease; /* トランジションを定義 */
}
.transition-button:hover {
background-color: #0056b3; /* ホバー時の色を変更 */
}このコードでは、ボタンの背景色がホバー時に0.3秒かけて滑らかに変化します。
CSSアニメーションの基本例
より複雑な動きを加えたい場合は、CSSの@keyframesを利用してアニメーションを定義します。
以下は、要素をフェードインさせるアニメーションの例です。
<div class="fade-in-box">Hello, React!</div>.fade-in-box {
opacity: 0;
animation: fadeIn 1s forwards; /* アニメーションを適用 */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}この例では、ページロード時に要素が1秒間かけて透明から不透明に変化します。
ReactでのCSSトランジションの適用
Reactでは、classNameを動的に変更することでCSSアニメーションを適用できます。
import React, { useState } from "react";
import "./styles.css";
function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<button
className={`transition-button ${isHovered ? "hovered" : ""}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
Hover Me
</button>
);
}.transition-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.transition-button.hovered {
background-color: #0056b3;
}これにより、状態に応じたスタイルの変更をCSSトランジションで簡単に実現できます。
CSSのみで実現できるトランジションやアニメーションは、軽量でパフォーマンスの高い実装方法として、Reactプロジェクトの入門に最適です。
Reactでアニメーションを実装する際の課題
Reactでアニメーションを実装する際には、React特有の仮想DOMやコンポーネント再レンダリングの仕組みが影響を与えるため、いくつかの課題に直面することがあります。これらの課題を理解し対策を講じることで、スムーズなアニメーションを実現できます。
仮想DOMとDOMの同期の問題
Reactは仮想DOMを使用して効率的にUIを更新しますが、仮想DOMの変更が実際のDOMに反映されるタイミングによっては、アニメーションが正しく動作しないことがあります。例えば、要素が削除される直前にアニメーションを適用しようとすると、Reactが即座に要素を削除してしまい、アニメーションが実行されない場合があります。
対策:
- ライブラリ（例: React Transition Group）を活用して、要素のライフサイクルに基づいたアニメーションを制御する。
状態変更による再レンダリングの影響
Reactでは、状態（state）が変化するとコンポーネントが再レンダリングされます。この再レンダリングによって、アニメーションが途中で中断されたり、リセットされたりすることがあります。
対策:
- 状態を分割して、アニメーションと直接関係ない状態の変更がアニメーションを妨げないようにする。
- アニメーション専用の状態管理を導入して影響を最小限にする。
CSSクラスの適用タイミング
Reactでは、classNameを動的に変更してアニメーションを実現しますが、クラスの切り替えタイミングが不適切だと、アニメーションがスムーズに動作しないことがあります。
対策:
- 適切なクラスの追加・削除を行うために、
setTimeoutやrequestAnimationFrameを使用してタイミングを調整する。 - ライブラリを活用して、自動的にタイミングを管理する。
アニメーションのパフォーマンス問題
状態変更時に複雑なアニメーションを実装すると、特に低スペックなデバイスではパフォーマンスが低下する可能性があります。
対策:
- CSSアニメーションを優先して使用する（GPUによるレンダリングが可能）。
- JavaScriptを使用する場合は、
requestAnimationFrameを活用して効率的にアニメーションを実行する。
アニメーションの管理の複雑さ
大規模なプロジェクトでは、アニメーションを個別に管理するとコードが複雑になりやすく、保守性が低下します。
対策:
- アニメーションライブラリ（例: Framer Motion）を活用して、一貫したアニメーション管理を行う。
- カスタムフックを作成して、共通のアニメーションロジックを再利用可能にする。
結論
Reactでアニメーションを実装する際には、仮想DOMや再レンダリングの特性を考慮した設計が不可欠です。これらの課題を事前に認識し、適切なライブラリや手法を活用することで、スムーズで高品質なアニメーションを実現できます。
React Transition Groupを活用したアニメーション
React Transition Groupは、Reactアプリケーションでアニメーションを実現するための公式ライブラリであり、状態変更時のコンポーネントの出現、更新、消滅に伴うアニメーションを簡単に実装できます。このセクションでは、基本的な使い方と実例を紹介します。
React Transition Groupの概要
React Transition Groupは以下の3つの主要なコンポーネントを提供します：
<CSSTransition>: CSSクラスを使ったアニメーション。<Transition>: 細かいアニメーション制御が可能。<TransitionGroup>: 複数の要素をまとめてアニメーション化。
これにより、要素のライフサイクル（マウント、アンマウント、更新）に基づいてアニメーションを簡単に追加できます。
基本的な使用例
以下は、リストアイテムを追加・削除する際にスライドイン・スライドアウトアニメーションを適用する例です。
npm install react-transition-groupコード例:
import React, { useState } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css";
function App() {
const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
const addItem = () => {
setItems([...items, `Item ${items.length + 1}`]);
};
const removeItem = (index) => {
setItems(items.filter((_, i) => i !== index));
};
return (
<div>
<button onClick={addItem}>Add Item</button>
<TransitionGroup>
{items.map((item, index) => (
<CSSTransition
key={item}
timeout={300}
classNames="fade"
>
<div className="list-item" onClick={() => removeItem(index)}>
{item}
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
}CSS例:
.list-item {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
.fade-enter {
opacity: 0;
transform: translateX(-20px);
}
.fade-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.fade-exit {
opacity: 1;
transform: translateX(0);
}
.fade-exit-active {
opacity: 0;
transform: translateX(20px);
transition: opacity 300ms, transform 300ms;
}ポイント解説
<TransitionGroup>の役割:
- リスト全体を管理し、子要素の追加・削除時にアニメーションを適用します。
<CSSTransition>の役割:
- 個々の要素の状態（enter, exit）に応じたCSSクラスを適用します。
timeoutプロパティ:
- アニメーションの継続時間をミリ秒単位で指定します。
- CSSクラスの命名規則:
-enterと-exitなどの命名を守ることで自動的に対応するクラスが適用されます。
React Transition Groupを使う利点
- Reactの仮想DOMとシームレスに統合されており、状態変更に応じたアニメーションの管理が簡単。
- CSSクラスを活用するため、パフォーマンスが高い。
- 他のライブラリと比べて軽量で学習コストが低い。
React Transition Groupは、基本的なアニメーションから複雑な状態管理を伴うアニメーションまで柔軟に対応可能なライブラリであり、シンプルなUIの視覚効果を向上させる際に非常に有用です。
Framer Motionを利用した高度なトランジション
Framer Motionは、Reactアプリケーションで高度なアニメーションやトランジションを簡単に実装できるモダンなアニメーションライブラリです。その直感的なAPIと強力な機能により、複雑な動きやインタラクティブなトランジションを効率的に構築できます。
Framer Motionの基本概要
Framer Motionは、以下の特長を持つReact向けのアニメーションライブラリです。
- 直感的な記述: JavaScript内で動きを制御可能。
- 柔軟性: 状態やイベントに基づくアニメーションが簡単。
- GPU最適化: スムーズなパフォーマンスを提供。
インストール方法
npm install framer-motion基本的な使用例
以下は、ボタンをクリックすることでボックスが拡大縮小するアニメーションを実装する例です。
import React, { useState } from "react";
import { motion } from "framer-motion";
function App() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div style={{ display: "flex", justifyContent: "center", marginTop: "50px" }}>
<motion.div
initial={{ scale: 1 }}
animate={{ scale: isExpanded ? 1.5 : 1 }}
transition={{ duration: 0.5 }}
style={{
width: 100,
height: 100,
backgroundColor: "#007BFF",
borderRadius: 10,
}}
onClick={() => setIsExpanded(!isExpanded)}
/>
</div>
);
}
export default App;解説
motion.div:- Framer Motionが提供するアニメーション可能なコンポーネント。
initial:- アニメーションの初期状態を定義。
animate:- アニメーション中の目標状態を指定。
transition:- アニメーションのタイミングやイージングを設定。
高度なトランジションの例
次に、ページ遷移時にフェードイン・フェードアウトのアニメーションを適用する例を示します。
import React from "react";
import { motion } from "framer-motion";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
function Page({ children }) {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
{children}
</motion.div>
);
}
function Home() {
return <Page><h1>Home Page</h1></Page>;
}
function About() {
return <Page><h1>About Page</h1></Page>;
}
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;解説
motion.divのinitial/animate/exitプロパティ:- ページ遷移時に状態に応じてアニメーションを制御。
transition:- フェードの時間やイージングを設定。
Framer Motionの利点
- 状態ベースのアニメーション:
- 状態変化に応じた複雑なアニメーションを簡単に定義可能。
- シンプルなAPI:
- JavaScriptに馴染みのある記述で、アニメーションを手軽に実装。
- 柔軟なトランジション制御:
- イージング、遅延、タイミングの細かな設定が可能。
- モダンなインタラクション:
- ドラッグ、ホバー、クリックなどのイベントに基づいた動きを自然に表現。
まとめ
Framer Motionは、Reactプロジェクトに高度でパフォーマンスの高いアニメーションを追加する際に最適なツールです。軽量で学習コストが低く、複雑なトランジションやインタラクションも直感的に構築できます。初歩的なアニメーションから高度な動きまで、柔軟に対応できるこのライブラリを活用して、より魅力的なUIを作りましょう。
状態変更時のアニメーション設計パターン
Reactで状態変更時にアニメーションを適用する際、適切な設計パターンを採用することで、効率的かつ直感的な動きを実現できます。このセクションでは、具体的なアニメーション設計パターンを紹介します。
状態に応じたアニメーションの基本設計
アニメーションは、以下のような状態の変化に基づいて設計します：
- 要素の出現: 要素が表示されるときの動き（例: フェードイン）。
- 要素の消失: 要素が非表示になるときの動き（例: スライドアウト）。
- 状態の切り替え: 状態Aから状態Bに変わるときの動き（例: ボタンのオン/オフ）。
Reactでは、これらの変化をstateやpropsを利用して管理し、状態ごとにアニメーションを適用します。
例: フェードイン・フェードアウト
以下の例は、状態変更時に要素がフェードイン・フェードアウトする動きを示します。
import React, { useState } from "react";
import { motion } from "framer-motion";
function FadeInOut() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle Visibility
</button>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
style={{
width: "200px",
height: "100px",
backgroundColor: "#007BFF",
marginTop: "20px",
}}
/>
)}
</div>
);
}状態ベースの条件付きアニメーション
Reactでは状態を利用して条件付きでアニメーションを切り替えることができます。この設計パターンでは、状態が更新されるたびにアニメーションが再適用されます。
例: カードの拡大・縮小
function ExpandableCard() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<motion.div
onClick={() => setIsExpanded(!isExpanded)}
initial={{ scale: 1 }}
animate={{ scale: isExpanded ? 1.5 : 1 }}
transition={{ duration: 0.5 }}
style={{
width: "150px",
height: "100px",
backgroundColor: "#28a745",
margin: "10px",
borderRadius: "10px",
cursor: "pointer",
}}
>
Click Me
</motion.div>
);
}状態遷移図を用いたアニメーション設計
複雑なアニメーションでは、状態遷移図を用いて明確な設計を行うことが推奨されます。たとえば、以下のような状態を考えます：
- 初期状態（
idle） - アクティブ状態（
active） - 非アクティブ状態（
inactive）
これをコードで表現すると以下のようになります。
const animationStates = {
idle: { scale: 1, opacity: 0.5 },
active: { scale: 1.2, opacity: 1 },
inactive: { scale: 0.8, opacity: 0.3 },
};状態に応じてアニメーションを切り替える設計は、特に複雑なUIにおいて管理を容易にします。
アニメーションと状態管理の統合
アニメーションと状態管理を統合することで、UIの一貫性を保つことができます。たとえば、useReducerやContext APIを利用して、アプリ全体の状態とアニメーションを一元管理する方法が考えられます。
例: 状態管理によるトグル
import React, { useReducer } from "react";
import { motion } from "framer-motion";
const initialState = { isActive: false };
function reducer(state, action) {
switch (action.type) {
case "TOGGLE":
return { ...state, isActive: !state.isActive };
default:
return state;
}
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<button onClick={() => dispatch({ type: "TOGGLE" })}>
Toggle Animation
</button>
<motion.div
animate={{ scale: state.isActive ? 1.5 : 1 }}
transition={{ duration: 0.5 }}
style={{
width: "200px",
height: "100px",
backgroundColor: "#ffc107",
marginTop: "20px",
borderRadius: "10px",
}}
/>
</div>
);
}まとめ
状態変更時のアニメーション設計では、状態の変化を的確に捉え、適切な設計パターンを選択することが重要です。Reactでは状態管理とアニメーションが密接に関連しているため、これらを統合することで、直感的で魅力的なUIを効率的に構築できます。
ユーザー入力に基づくトランジションの応用例
ユーザー入力（クリック、ホバー、ドラッグなど）をトリガーとしてアニメーションやトランジションを実装することで、インタラクティブで魅力的なUIを構築できます。このセクションでは、具体的な実装例を示しながら、ユーザー入力を活用したトランジションの方法を解説します。
クリックによるトランジションの例
ボタンをクリックすると色と形状が変化するアニメーションの例です。Framer Motionを利用して簡単に実装できます。
import React, { useState } from "react";
import { motion } from "framer-motion";
function ClickTransition() {
const [isClicked, setIsClicked] = useState(false);
return (
<motion.div
onClick={() => setIsClicked(!isClicked)}
animate={{
backgroundColor: isClicked ? "#ff4757" : "#1e90ff",
borderRadius: isClicked ? "50%" : "0%",
scale: isClicked ? 1.2 : 1,
}}
transition={{ duration: 0.5 }}
style={{
width: "100px",
height: "100px",
margin: "50px auto",
cursor: "pointer",
}}
/>
);
}
export default ClickTransition;解説:
- ユーザーのクリック操作で状態が切り替わり、要素の色、形状、サイズが変化します。
animateプロパティで複数のスタイル変更を同時に定義可能です。
ホバーによるトランジションの例
ホバー時に要素が拡大し、影がつくようなアニメーションを実装します。
import { motion } from "framer-motion";
function HoverTransition() {
return (
<motion.div
whileHover={{
scale: 1.1,
boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.3)",
}}
style={{
width: "150px",
height: "150px",
backgroundColor: "#1e90ff",
borderRadius: "10px",
margin: "20px auto",
cursor: "pointer",
}}
/>
);
}
export default HoverTransition;解説:
whileHoverプロパティを使用して、ホバー中のみ適用されるアニメーションを定義。- 拡大や影の追加でユーザーの注目を引くことが可能です。
ドラッグによるトランジションの例
ユーザーが要素をドラッグして動かせるインタラクションを提供します。
import { motion } from "framer-motion";
function DragTransition() {
return (
<motion.div
drag
dragConstraints={{ top: -100, left: -100, right: 100, bottom: 100 }}
whileDrag={{ scale: 1.2 }}
style={{
width: "100px",
height: "100px",
backgroundColor: "#2ed573",
borderRadius: "50%",
margin: "50px auto",
cursor: "grab",
}}
/>
);
}
export default DragTransition;解説:
dragプロパティを有効にすることで、要素をドラッグ可能にします。dragConstraintsでドラッグの範囲を制限。- ドラッグ中に拡大する効果を
whileDragで設定可能です。
ユーザー入力を組み合わせた応用例
クリックやホバーを組み合わせて複雑なアニメーションを構築できます。
function CombinedTransition() {
const [isClicked, setIsClicked] = useState(false);
return (
<motion.div
onClick={() => setIsClicked(!isClicked)}
whileHover={{ scale: 1.1 }}
animate={{
rotate: isClicked ? 360 : 0,
backgroundColor: isClicked ? "#ff6b81" : "#1e90ff",
}}
transition={{ duration: 0.5 }}
style={{
width: "150px",
height: "150px",
borderRadius: "10px",
margin: "50px auto",
cursor: "pointer",
}}
/>
);
}
export default CombinedTransition;解説:
- クリックで回転や色の変更を行い、ホバーで拡大効果を付加。
- ユーザー操作による複数のインタラクションを自然に統合。
まとめ
ユーザー入力をトリガーとしたアニメーションやトランジションを実装することで、インタラクティブなUIを作成できます。クリック、ホバー、ドラッグといった基本操作を活用しつつ、Framer Motionなどのライブラリを使うことで、簡単かつ柔軟にこれらの動きを実現できます。ユーザーに直感的な操作感を提供するために、これらの応用例をプロジェクトに活用しましょう。
実装でよくある問題とその対策
Reactでアニメーションを実装する際には、設計上やパフォーマンス上の課題に直面することがあります。これらの課題を理解し、適切な対策を講じることで、スムーズで安定したアニメーションを実現できます。このセクションでは、アニメーション実装でよくある問題とその解決策を解説します。
1. アニメーションがカクつく
原因:
- 再レンダリングが頻繁に発生し、CPUやGPUに負荷がかかる。
- 高解像度画像や複雑なCSSプロパティを多用している。
対策:
- GPUで処理されるプロパティ（
transformやopacity）を優先的に使用する。 - 背景や影の効果には
box-shadowではなくfilter: drop-shadowを使用。 - Reactの
React.memoやuseMemoを使い、不要な再レンダリングを防ぐ。
例:
/* GPUで処理されるプロパティを活用 */
.box {
transform: translateX(0);
transition: transform 0.5s ease;
}2. 要素が即座に消える
原因:
- Reactが仮想DOMの更新で要素をすぐに削除してしまうため、アニメーションが完了する前にDOMから消えてしまう。
対策:
React Transition Groupのtimeoutプロパティを活用し、削除のタイミングを制御。exitアニメーションの完了後に要素を削除する設計を採用。
例:
<CSSTransition
in={isVisible}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>Fading Element</div>
</CSSTransition>3. 複数のアニメーションが競合する
原因:
- 複数のアニメーションが同時に適用され、意図しない動作が発生する。
対策:
- アニメーションの状態を管理するために
stateやuseReducerを利用。 Framer Motionのanimateで状態に応じたスタイルを定義。
例:
<motion.div
animate={{
scale: isHovered ? 1.1 : 1,
rotate: isClicked ? 90 : 0,
}}
transition={{ duration: 0.5 }}
/>4. アニメーションのタイミングがずれる
原因:
- 複数のアニメーション間で同期が取れていない。
対策:
delayプロパティを使用してアニメーションのタイミングを調整。- 状態管理を用いて、関連するアニメーションを同期させる。
例:
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.5 }}
/>5. パフォーマンスが低下する
原因:
- 複雑なアニメーションや高負荷なスタイルの適用。
- 大量の要素にアニメーションを適用している。
対策:
will-changeプロパティを使用し、ブラウザに事前の最適化を指示。- 大量のアニメーションを処理する際は、
requestAnimationFrameを活用。
例:
.animated-element {
will-change: transform, opacity;
}6. アニメーションのリセットがうまくいかない
原因:
- 状態管理の不備やCSSクラスの切り替えミス。
対策:
- 状態をリセットするタイミングを明確に定義。
- アニメーション完了後に状態を更新するために、
onAnimationEndを使用。
例:
<motion.div
onAnimationComplete={() => setIsAnimating(false)}
animate={{ scale: 1.2 }}
transition={{ duration: 0.3 }}
/>7. 動きが不自然に見える
原因:
- トランジションのイージング（
ease,linearなど）が適切でない。 - アニメーションの速度が速すぎる、または遅すぎる。
対策:
ease-in-outやカスタムベジェ曲線で自然な動きを設定。- トランジションの速度をデザインや動作意図に合わせて調整。
例:
<motion.div
animate={{ x: 100 }}
transition={{ type: "spring", stiffness: 50 }}
/>まとめ
Reactでアニメーションを実装する際には、パフォーマンスとユーザー体験の両方を考慮する必要があります。よくある問題を事前に把握し、適切なツールやプロパティを活用することで、スムーズで魅力的なアニメーションを実現できます。課題に直面したときには、このセクションの対策を参考にしてください。
まとめ
本記事では、Reactで状態変更時にアニメーションやトランジションを実装する方法を基本から応用まで解説しました。CSSを用いたシンプルなアニメーションの実装から、React Transition GroupやFramer Motionを活用した高度なトランジションの実現方法、さらにユーザー入力に基づくインタラクションの応用例を紹介しました。
また、実装時によくある課題とその対策についても触れ、アニメーションのパフォーマンスや自然な動きを確保するための具体的な手法を説明しました。これにより、Reactでのアニメーション実装がより直感的で魅力的なUI構築に役立つことが理解できたと思います。
適切なアニメーションは、ユーザー体験を大幅に向上させる重要な要素です。この記事を参考に、あなたのプロジェクトで洗練されたインターフェースを実現してください。
コメント