diff --git a/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx b/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx
index 7f9f701b45e..f2ef27020b7 100644
--- a/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx
+++ b/src/client/components/v6/shared/cells/AlbumCell/index.stories.tsx
@@ -26,8 +26,7 @@ export const Default = Template.bind({});
 Default.args = {
   href: '/',
   title: 'ごめんねFingers Crossed',
-  number: '27',
-  type: 'single',
+  caption: '27th. single',
   image: {
     sm: '/images/artworks/singles/27/A@1x.jpg',
     md: '/images/artworks/singles/27/A@2x.jpg',
@@ -41,8 +40,7 @@ export const LongTitle = Template.bind({});
 LongTitle.args = {
   href: '/',
   title: '夜明けまで強がらなくてもいい',
-  number: '24',
-  type: 'single',
+  caption: '24th. single',
   image: {
     sm: '/images/artworks/singles/24/A@1x.jpg',
     md: '/images/artworks/singles/24/A@2x.jpg',
@@ -56,8 +54,7 @@ export const FallbackBackground = Template.bind({});
 FallbackBackground.args = {
   href: '/',
   title: 'ごめんねFingers Crossed',
-  number: '27',
-  type: 'single',
+  caption: '27th. single',
   image: {
     sm: '/images/artworks/singles/27/A@1x.jpg',
     md: '/images/artworks/singles/27/A@2x.jpg',
diff --git a/src/client/components/v6/shared/cells/AlbumCell/index.tsx b/src/client/components/v6/shared/cells/AlbumCell/index.tsx
index 2ee8e4a1f02..dba87eee8fd 100644
--- a/src/client/components/v6/shared/cells/AlbumCell/index.tsx
+++ b/src/client/components/v6/shared/cells/AlbumCell/index.tsx
@@ -7,8 +7,6 @@ import {
   getGlobalColorVarName,
 } from 'client/styles/tokens/colors';
 import { ImageUrl } from 'server/types/commons';
-import { DiscographyType } from 'server/actors/Discography/types';
-import { useIntl } from 'client/i18n/hooks/useIntl';
 import {
   CoverImage,
   parentAnimationStyles,
@@ -17,17 +15,13 @@ import {
 export type AlbumCellProps = {
   href: string;
   title: string;
-  number: string;
-  type: DiscographyType;
+  caption?: string;
   image: ImageUrl;
   imageBackgroundColor?: string;
   titleBackgroundColor?: string;
 };
 
 export const AlbumCell: React.FC<AlbumCellProps> = props => {
-  const { formatAlbumType } = useIntl();
-  const caption = formatAlbumType(props.type, props.number);
-
   return (
     <Link href="/" passHref>
       <a
@@ -62,7 +56,7 @@ export const AlbumCell: React.FC<AlbumCellProps> = props => {
           >
             <CoverImage
               image={props.image}
-              caption={caption}
+              caption={props.caption}
               imageBackgroundColor={props.imageBackgroundColor}
               css={css`
                 flex: 1;
diff --git a/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx b/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx
index 3dd7eae8d9d..0d1e1497af9 100644
--- a/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx
+++ b/src/client/components/v6/shared/cells/MemberCell/index.stories.tsx
@@ -28,7 +28,7 @@ Default.args = {
   name: 'Saito Asuka',
   nameLang: 'en',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/saitouasuka@1x.jpg',
     md: '/images/members/singles/27/saitouasuka@2x.jpg',
@@ -44,7 +44,7 @@ Japanese.args = {
   name: '齋藤飛鳥',
   nameLang: 'ja',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/saitouasuka@1x.jpg',
     md: '/images/members/singles/27/saitouasuka@2x.jpg',
@@ -73,7 +73,7 @@ export const NoNumber = Template.bind({});
 NoNumber.args = {
   href: '/',
   name: 'Saito Asuka',
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/saitouasuka@1x.jpg',
     md: '/images/members/singles/27/saitouasuka@2x.jpg',
@@ -83,8 +83,8 @@ NoNumber.args = {
   nameBackgroundColor: '#e2f3fd',
 };
 
-export const NoPosition = Template.bind({});
-NoPosition.args = {
+export const NoCaption = Template.bind({});
+NoCaption.args = {
   href: '/',
   name: 'Saito Asuka',
   nameLang: 'en',
@@ -103,7 +103,7 @@ NotLink.args = {
   name: 'Kojima Haruna',
   nameLang: 'en',
   number: 1,
-  position: 'center',
+  caption: 'center',
   image: {
     sm: '/images/members/others/kojimaharuna@1x.jpg',
     md: '/images/members/others/kojimaharuna@2x.jpg',
@@ -116,7 +116,7 @@ FallbackBackground.args = {
   href: '/',
   name: 'Saito Asuka',
   number: 1,
-  position: 'fukujin',
+  caption: 'fukujin',
   image: {
     sm: '/images/members/singles/27/saitouasuka@1x.jpg',
     md: '/images/members/singles/27/saitouasuka@2x.jpg',
diff --git a/src/client/components/v6/shared/cells/MemberCell/index.tsx b/src/client/components/v6/shared/cells/MemberCell/index.tsx
index 8d66913d1eb..fe0513b3cff 100644
--- a/src/client/components/v6/shared/cells/MemberCell/index.tsx
+++ b/src/client/components/v6/shared/cells/MemberCell/index.tsx
@@ -7,7 +7,6 @@ import {
   getGlobalColorVarName,
 } from 'client/styles/tokens/colors';
 import { ImageUrl } from 'server/types/commons';
-import { useTranslations } from 'client/i18n/hooks/useTranslations';
 import {
   CoverImage,
   parentAnimationStyles,
@@ -43,15 +42,13 @@ export type MemberCellProps = {
   name: string;
   nameLang: string;
   number?: string | number;
-  position?: 'center' | 'fukujin';
+  caption?: string;
   image: ImageUrl;
   imageBackgroundColor?: string;
   nameBackgroundColor?: string;
 };
 
 export const MemberCell: React.FC<MemberCellProps> = props => {
-  const { getTranslation } = useTranslations();
-
   return (
     <LinkWrapper href={props.href}>
       <div
@@ -93,7 +90,7 @@ export const MemberCell: React.FC<MemberCellProps> = props => {
                 `}
               >
                 <Typography
-                  variant="h6"
+                  variant="em1"
                   element="span"
                   css={css`
                     color: var(${getColorVarName('onBackground', 'standard')});
@@ -124,9 +121,7 @@ export const MemberCell: React.FC<MemberCellProps> = props => {
           </div>
           <CoverImage
             image={props.image}
-            caption={
-              props.position ? getTranslation(props.position) : undefined
-            }
+            caption={props.caption}
             imageBackgroundColor={props.imageBackgroundColor}
             css={css`
               flex: 1;
diff --git a/src/client/components/v6/shared/cells/SongCell/index.stories.tsx b/src/client/components/v6/shared/cells/SongCell/index.stories.tsx
new file mode 100644
index 00000000000..1c2cdc51e82
--- /dev/null
+++ b/src/client/components/v6/shared/cells/SongCell/index.stories.tsx
@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+import type { Meta, Story } from '@storybook/react';
+import { SongCell, SongCellProps } from '.';
+import { ThemeDecorator } from 'storybook/ThemeDecorator';
+
+export default {
+  title: 'Components/Shared/Cells/SongCell',
+  decorators: [ThemeDecorator()],
+  component: SongCell,
+} as Meta<SongCellProps>;
+
+const Template: Story<SongCellProps> = props => {
+  return (
+    <div
+      css={css`
+        width: 200px;
+        height: 240px;
+      `}
+    >
+      <SongCell {...props}></SongCell>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/A@1x.jpg',
+    md: '/images/artworks/singles/27/A@2x.jpg',
+    lg: '/images/artworks/singles/27/A@3x.jpg',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const Variation = Template.bind({});
+Variation.args = {
+  href: '/',
+  title: 'ざぶんざぶん',
+  titleLang: 'ja',
+  number: 4,
+  caption: '#unit',
+  image: {
+    sm: '/images/artworks/singles/27/B@1x.jpg',
+    md: '/images/artworks/singles/27/B@2x.jpg',
+    lg: '/images/artworks/singles/27/B@3x.jpg',
+  },
+  imageBackgroundColor: '#ffa700',
+  titleBackgroundColor: '#fcda9c',
+};
+
+export const NoNumber = Template.bind({});
+NoNumber.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/A@1x.jpg',
+    md: '/images/artworks/singles/27/A@2x.jpg',
+    lg: '/images/artworks/singles/27/A@3x.jpg',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const NoCaption = Template.bind({});
+NoCaption.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  image: {
+    sm: '/images/artworks/singles/27/A@1x.jpg',
+    md: '/images/artworks/singles/27/A@2x.jpg',
+    lg: '/images/artworks/singles/27/A@3x.jpg',
+  },
+  titleBackgroundColor: '#f8b1b1',
+  imageBackgroundColor: '#bf0000',
+};
+
+export const FallbackBackground = Template.bind({});
+FallbackBackground.args = {
+  href: '/',
+  title: 'ごめんねFingers crossed',
+  titleLang: 'ja',
+  number: 1,
+  caption: '#title',
+  image: {
+    sm: '/images/artworks/singles/27/A@1x.jpg',
+    md: '/images/artworks/singles/27/A@2x.jpg',
+    lg: '/images/artworks/singles/27/A@3x.jpg',
+  },
+};
diff --git a/src/client/components/v6/shared/cells/SongCell/index.tsx b/src/client/components/v6/shared/cells/SongCell/index.tsx
new file mode 100644
index 00000000000..b634fc56f81
--- /dev/null
+++ b/src/client/components/v6/shared/cells/SongCell/index.tsx
@@ -0,0 +1,134 @@
+import { css } from '@emotion/react';
+import Link from 'next/link';
+import { Typography } from 'client/components/atoms/Typography';
+import { commonStyles } from 'client/styles/tokens';
+import {
+  getColorVarName,
+  getGlobalColorVarName,
+} from 'client/styles/tokens/colors';
+import { ImageUrl } from 'server/types/commons';
+import {
+  CoverImage,
+  parentAnimationStyles,
+} from 'client/components/v6/shared/images/CoverImage';
+
+const getWrapperStyles = (isLink: boolean) => css`
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  vertical-align: bottom;
+  cursor: ${isLink ? 'pointer' : 'default'};
+
+  ${isLink ? parentAnimationStyles : undefined};
+`;
+
+const LinkWrapper: React.FC<{
+  href?: string;
+  children: React.ReactNode;
+}> = props => {
+  const { href, children } = props;
+
+  return href !== undefined ? (
+    <Link href={href} passHref>
+      <a css={getWrapperStyles(true)}>{children}</a>
+    </Link>
+  ) : (
+    <div css={getWrapperStyles(false)}>{children}</div>
+  );
+};
+
+export type SongCellProps = {
+  href?: string;
+  title: string;
+  titleLang: string;
+  number?: string | number;
+  caption?: string;
+  image: ImageUrl;
+  imageBackgroundColor?: string;
+  titleBackgroundColor?: string;
+};
+
+export const SongCell: React.FC<SongCellProps> = props => {
+  return (
+    <LinkWrapper href={props.href}>
+      <div
+        css={css`
+          width: 100%;
+          height: 100%;
+          border: 2px solid var(${getColorVarName('onBackground', 'standard')});
+        `}
+      >
+        <div
+          css={css`
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 0;
+          `}
+        >
+          <div
+            css={css`
+              flex: 0 0 auto;
+              display: flex;
+              align-items: center;
+              border-bottom: 1px solid
+                var(${getColorVarName('onBackground', 'standard')});
+            `}
+          >
+            {props.number && (
+              <span
+                css={css`
+                  flex: 0 0 40px;
+                  align-self: stretch;
+                  display: inline-flex;
+                  align-items: center;
+                  justify-content: center;
+                  border-right: 1px solid
+                    var(${getColorVarName('onBackground', 'standard')});
+                `}
+              >
+                <Typography
+                  variant="em1"
+                  element="span"
+                  css={css`
+                    color: var(${getColorVarName('onBackground', 'standard')});
+                  `}
+                >
+                  {props.number}
+                </Typography>
+              </span>
+            )}
+            <Typography
+              variant="h7"
+              element="h3"
+              lang={props.titleLang}
+              ellipsis
+              css={css`
+                flex: 1;
+                display: inline;
+                text-align: center;
+                line-height: 1.5;
+                color: var(${getGlobalColorVarName('gray7')});
+                padding: ${commonStyles.spacing.xs};
+                background-color: ${props.titleBackgroundColor ??
+                `var(${getGlobalColorVarName('gray0')})`};
+              `}
+            >
+              {props.title}
+            </Typography>
+          </div>
+          <CoverImage
+            image={props.image}
+            caption={props.caption}
+            imageBackgroundColor={props.imageBackgroundColor}
+            css={css`
+              flex: 1;
+            `}
+          />
+        </div>
+      </div>
+    </LinkWrapper>
+  );
+};
diff --git a/src/client/components/v6/shared/images/CoverImage/index.tsx b/src/client/components/v6/shared/images/CoverImage/index.tsx
index 3d3eeb34fad..2103df72dce 100644
--- a/src/client/components/v6/shared/images/CoverImage/index.tsx
+++ b/src/client/components/v6/shared/images/CoverImage/index.tsx
@@ -9,6 +9,9 @@ import { Image } from 'client/components/atoms/image/Image';
 import { ImageUrl } from 'server/types/commons';
 import { joinClassNames } from 'client/utils/class';
 
+/**
+ * The styles to be applied to `<CoverImage>`'s parent component.
+ */
 export const parentAnimationStyles = css`
   & .image {
     transition: transform 0.3s cubic-bezier(0, 0.5, 0.7, 1);