Zenn
📖

Amplify UIで問い合わせフォームの見た目を整えてみた

2025/03/12に公開
React
Amplify
tech

Amplify UI Installation

  • まず、Amplify UI公式サイトを参考にpackageをインストールしましょう。
    https://ui.docs.amplify.aws/react/getting-started/installation

  • Amplify UIは、フォームやボタンなどのUIコンポーネントライブラリです。先程のURLの左ペインのComponentを見ると、どのようなUIコンポーネントがあるか確認できます。コード例やどのような見た目になるかすぐに分かるので、使いやすいレファレンスでした。

  • 少しコードを書くだけでアプリを今どきの見た目に簡単に変更できました。（便利！）

問い合わせフォーム（見た目整え後）

  • メールアドレスと問い合わせフォームがある簡素なアウトプットです。（テストなのでとても簡素です）
  • 送信を押すとalertでメッセージが表示されます。

App.tsx
import { useState } from "react";

import '@aws-amplify/ui-react/styles.css';
import '@aws-amplify/ui-react/styles/reset.layer.css' // global CSS reset
import '@aws-amplify/ui-react/styles/base.layer.css' // base styling needed for Amplify UI
import '@aws-amplify/ui-react/styles/button.layer.css' // component specific styles
import { Input, Label, Flex, Button, Heading, TextAreaField} from '@aws-amplify/ui-react';

function App() {
  const [mail, setMail] = useState("");

  return (
    <main>
      <Flex direction="column" gap="1rem">
        <Heading level={3} color="#0d0d0d" fontWeight="bold">
          お問い合わせフォーム
        </Heading>

        <Label htmlFor="email">Email</Label>
        <Input 
          type="email" id="mail" name="mail" width="60%"
          onChange={(e) => setMail(e.target.value)}
        />

        <TextAreaField
          descriptiveText=""
          label="お問い合わせ内容"
          name="inquiry"
          column={50}
          rows={3}/>
        <Button 
          id="submit_button"
          backgroundColor="#ff8e3c"
          borderRadius="1rem"
          color="#0d0d0d"
          fontWeight="bold"
          width="6rem"
          onClick={ () => alert(mail+" 様"+ "\n" + 'お問い合わせありがとうございます！') }>
          送信
        </Button>
      </Flex>
    </main>
  );
}

export default App;
  • 少しコードを変えるだけで、見た目が今っぽくなりましたね。
  • 個人的にFlexでコンポーネント間を均等に開けてくれるのが見た目の統一感につながっていると思いました。

Discussion