【React】プロフィールコンテンツにアイコン画像と自己紹介を表示させる｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでよくあるプロフィールコンテンツのデザインを作成する手順
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11
chart.js:4.4.0
react-chartjs-2:5.2.0

Reactでよくあるプロフィールコンテンツのデザインを作成する手順

Reactでよくあるプロフィールコンテンツのデザインを作成する手順を解説します。

プロフィールコンテンツで使用する画像ファイルを準備する

まずはプロフィールコンテンツで使用する画像ファイルを準備します。

今回は縦横比「1:1」の画像を用意し、「public/images/common/配下」に画像を設置し、相対パスで画像を読み込ませていきたいと思います。

もし、ダミー画像を使ってとりあえずデザインを進めていきたい場合は「https://placehold.jp/」が使いやすいのでおすすめです。

プロフィールコンポーネントを作成する

次にプロフィールコンポーネントを作成します。

import React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

const ProfileList: React.FC = () => {
    return(
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Typography component="h2" variant="h2">
                        Profile
                    </Typography>
                </Grid>
                <Grid item xs={12} md={4}>
                    <Box sx={{ width: "100%" }}>
                        <img style={{ width: "100%", height: "auto", borderRadius: "50%" }} src="/images/common/profile_image.jpg" />
                    </Box>
                </Grid>
                <Grid item xs={12} md={8}>
                    <Box sx={{ width: "100%", paddingLeft: {sx: "0px", md: "30px"} }}>
                        <Typography variant="body2" color="text.secondary">
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                        </Typography>
                    </Box>
                </Grid>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Button variant="contained" size="large">
                        LearnMore
                    </Button>
                </Grid>
            </Grid>
        </>
    );
};

export default ProfileList;

import React from "react";

import Box from "@mui/material/Box";

import Grid from "@mui/material/Grid";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

const ProfileList: React.FC = () => {

return(

Profile

</Typography>

</Grid>

</Box>

</Grid>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</Typography>

</Box>

</Grid>

LearnMore

</Button>

</Grid>

</>

);

};

export default ProfileList;

おしゃれなサイトではプロフィールのアイコン画像に丸い画像が表示されていると思いますが、スタイルに「borderRadius」プロパティに「50%」を当てると丸い画像になります。

また、グリッドはアイコン画像は「4」、自己紹介は「8」で割り当てています。

トップページコンポーネントを修正する

最後にトップページコンポーネントを修正します。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"
import SkillList from "../../components/SkillList"
import ProductionList from "../../components/ProductionList"
import ProfileList from "../../components/ProfileList";

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <SkillList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ProductionList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ProfileList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

import MV from "../../assets/images/mv.jpg"

import SkillList from "../../components/SkillList"

import ProductionList from "../../components/ProductionList"

import ProfileList from "../../components/ProfileList";

const Top: React.FC = () => {

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

<Box>

ProfileListコンポーネントをインポートし、プロフィールコンテンツでProfileListコンポーネントを呼び出す形にしています。

おわりに

Reactでよくあるプロフィールコンテンツのデザインを作成する手順を解説していきましたが、いかがだったでしょうか。

アイコン画像を丸くするだけでもおしゃれになりますし、グリッドを割り当て比率やテキストの色やフォントサイズを調整するだけでも印象はかなり変わります。

是非、Reactでおしゃれなデザインにしていきましょう。