diff --git a/.github/workflows/preview-comment.yaml b/.github/workflows/preview-comment.yaml
new file mode 100644
index 0000000..1f12878
--- /dev/null
+++ b/.github/workflows/preview-comment.yaml
@@ -0,0 +1,32 @@
+name: Comment preview environment URL
+
+on:
+  # pull_request_target を使うにあたって https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ の一読を推奨
+  pull_request_target:
+    types:
+      - opened
+
+permissions:
+  pull-requests: write
+
+jobs:
+  comment:
+    name: Comment preview environment URL
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v7
+        with:
+          script: |
+            const prod = `https://${context.payload.pull_request.number}-prod.portfolio-preview.trapti.tech/`
+            const dev = `https://${context.payload.pull_request.number}-dev.portfolio-preview.trapti.tech/`
+            const msg = `
+            Preview (prod) → ${prod}
+            Preview (dev) → ${dev}
+            `
+
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.payload.pull_request.number,
+              body: msg
+            });
diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
new file mode 100644
index 0000000..5c8df95
--- /dev/null
+++ b/.github/workflows/preview.yaml
@@ -0,0 +1,48 @@
+name: preview
+
+on:
+  # pull_request_target を使うにあたって https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ の一読を推奨
+  pull_request_target:
+
+permissions:
+  packages: write
+
+env:
+  IMAGE_NAME: traportfolio-ui
+
+jobs:
+  build-preview-image:
+    name: Build Preview Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          persist-credentials: false
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Builder instance name
+        run: echo ${{ steps.buildx.outputs.name }}
+      - name: Available platforms
+        run: echo ${{ steps.buildx.outputs.platforms }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: traptitech
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Docker 内でビルドを行うことで、write perm つきでの任意コード実行を避ける
+      # workflow 自体の改竄はないが、悪意のあるソースコードが入った場合に secret が抽出される可能性があるためである
+      - name: Build
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/traptitech/${{ env.IMAGE_NAME }}:preview-${{ github.event.number }}-${{ github.event.pull_request.head.sha }}
+          cache-from: type=registry,ref=ghcr.io/traptitech/${{ env.IMAGE_NAME }}:buildcache