diff --git a/components/UserIconImage.tsx b/components/UserIconImage.tsx
deleted file mode 100644
index bffa313..0000000
--- a/components/UserIconImage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Button, Link } from '@material-ui/core';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import React from 'react';
-
-export function UserIconImage(): JSX.Element {
-  const userIconImage = localStorage.getItem('userIconImage');
-  const userId = localStorage.getItem('userId');
-  if (userIconImage) {
-    return (
-      <>
-        <Button
-          variant="contained"
-          href="/post/new"
-          style={{
-            fontSize: 24,
-            fontWeight: 'bold',
-            backgroundColor: '#e9f6fe',
-            borderRadius: 20,
-            margin: 5,
-          }}>
-          投稿
-        </Button>
-        <Link href={'/user/' + userId}>
-          <img
-            src={userIconImage}
-            alt="画像"
-            style={{ marginRight: '10px', borderRadius: '50%' }}
-          />
-        </Link>
-      </>
-    );
-  } else {
-    return <AccountCircle fontSize="large" style={{ marginRight: '10px' }} />;
-  }
-}
diff --git a/components/UserName.tsx b/components/UserName.tsx
index 45e10a8..510191e 100644
--- a/components/UserName.tsx
+++ b/components/UserName.tsx
@@ -2,14 +2,21 @@ import { firebaseConfig } from '../utils/firebaseConfig';
 import axios from '../utils/axios';
 import firebase from 'firebase/app';
 import React from 'react';
-import { Link, Typography, useTheme, useMediaQuery } from '@material-ui/core';
+import {
+  Link,
+  Typography,
+  useTheme,
+  useMediaQuery,
+  Button,
+} from '@material-ui/core';
+
+import AccountCircle from '@material-ui/icons/AccountCircle';
 
 export function UserName(): JSX.Element {
   const theme = useTheme();
   const showName = useMediaQuery(theme.breakpoints.up('md'));
-  if (!showName) {
-    return <></>;
-  }
+
+  const userIconImage = localStorage.getItem('userIconImage');
   const userName = localStorage.getItem('userName');
   const userId = localStorage.getItem('userId');
   const refreshToken = localStorage.getItem('refreshToken');
@@ -55,21 +62,77 @@ export function UserName(): JSX.Element {
   }
 
   if (userName) {
+    // 画面幅狭い
+    if (!showName) {
+      return (
+        <>
+          <Button
+            variant="contained"
+            href="/post/new"
+            style={{
+              fontSize: 24,
+              fontWeight: 'bold',
+              backgroundColor: '#e9f6fe',
+              borderRadius: 20,
+              margin: 5,
+            }}>
+            投稿
+          </Button>
+          <Link href={'/user/' + userId}>
+            <img
+              src={userIconImage}
+              alt="画像"
+              style={{ marginRight: '10px', borderRadius: '50%' }}
+            />
+          </Link>
+        </>
+      );
+    }
     return (
-      <Link href={'/user/' + userId}>
-        <Typography
+      <>
+        <Button
+          variant="contained"
+          href="/post/new"
           style={{
-            fontSize: 'medium',
-            textDecoration: 'none !important',
-            color: '#ffffff',
+            fontSize: 24,
+            fontWeight: 'bold',
+            backgroundColor: '#e9f6fe',
+            borderRadius: 20,
+            margin: 7,
           }}>
-          {userName}
-        </Typography>
-      </Link>
+          投稿
+        </Button>
+        <Link href={'/user/' + userId}>
+          <Typography
+            style={{
+              fontSize: 'medium',
+              textDecoration: 'none !important',
+              color: '#ffffff',
+            }}>
+            <img
+              src={userIconImage}
+              alt="画像"
+              style={{ marginRight: '10px', borderRadius: '50%' }}
+            />
+            {userName}
+          </Typography>
+        </Link>
+      </>
     );
   } else {
+    // 画面幅狭い
+    if (!showName) {
+      return (
+        <>
+          <Link href="/login">
+            <AccountCircle fontSize="large" style={{ marginRight: '10px' }} />
+          </Link>
+        </>
+      );
+    }
     return (
       <Link href="/login">
+        <AccountCircle fontSize="large" style={{ marginRight: '10px' }} />
         <Typography style={{ fontSize: 'medium', color: '#ffffff' }}>
           ログイン
         </Typography>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0073618..1c4a396 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -21,9 +21,6 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
   const DynamicComponentUserName = dynamic(() =>
     import('../components/UserName').then((mod) => mod.UserName)
   );
-  const DynamicComponentUserIconImage = dynamic(() =>
-    import('../components/UserIconImage').then((mod) => mod.UserIconImage)
-  );
 
   const theme2 = useTheme();
   const showTitle = useMediaQuery(theme2.breakpoints.up('sm'));
@@ -58,8 +55,6 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
               aria-controls="menu-appbar"
               aria-haspopup="true"
               color="inherit">
-              {/* ログイン済みならtwitterアイコンを表示 / ログインしていなかったら人アイコン*/}
-              <DynamicComponentUserIconImage />
               {/* ログイン済みならtwitterの名前を表示 / ログインしていなかったらゲストユーザー*/}
               <DynamicComponentUserName />
             </IconButton>