diff --git a/src/components/layouts.tsx b/src/components/layouts.tsx
index 53bafdb..4631735 100644
--- a/src/components/layouts.tsx
+++ b/src/components/layouts.tsx
@@ -56,6 +56,8 @@ export const AppMessageBox: FC<
     <div class="message-header">
       <p>{props.title}</p>
     </div>
-    <div class="message-body">{props.children}</div>
+    <div class="message-body">
+      <div class="content">{props.children}</div>
+    </div>
   </article>
 );
diff --git a/src/routes/html.tsx b/src/routes/html.tsx
index 69e971a..ca3ae1d 100644
--- a/src/routes/html.tsx
+++ b/src/routes/html.tsx
@@ -5,7 +5,7 @@
  */
 import { Hono } from 'hono';
 import { Input } from '../components/inputs';
-import { AppLayout } from '../components/layouts';
+import { AppLayout, AppMessageBox } from '../components/layouts';
 
 const app = new Hono<{ Bindings: CloudflareBindings }>();
 
@@ -43,7 +43,18 @@ app.get('/', (c) => {
             </form>
           </div>
           <div class="column">
-            <div class="section" id="result" />
+            <div class="section" id="result">
+              <AppMessageBox title="Usage" type="info">
+                <ol>
+                  <li>左のフォームに必要な情報を入力してください。</li>
+                  <li>
+                    リポジトリがPrivateなら、事前に attakei
+                    にRead権限を付与してください。
+                  </li>
+                  <li>「URL生成」ボタンをクリックしてください。</li>
+                </ol>
+              </AppMessageBox>
+            </div>
           </div>
         </div>
       </section>