「お客様の声」や「商品の感想」などに使えるCSSデザインの実例

<div class="nyano-feedback-wrapper">
<div class="nyano-feedback-card">
<div class="nyano-profile">
<div class="nyano-profile-image">
<img src="イメージ画像" alt="Profile Image">
</div>
<div class="nyano-profile-footer">東京都K様</div>
</div>
<div class="nyano-feedback-content">
<p>そのサービスがいいかどうかは、何回か試してみないとわからないと思います。しかし、このサービスは、<span>１回目から明らかに違いました。</span>早めに始めることをオススメします。</p>
</div>
</div>
<div class="nyano-feedback-card">
<div class="nyano-profile">
<div class="nyano-profile-image">
<img src="イメージ画像" alt="Profile Image">
</div>
<div class="nyano-profile-footer">名古屋市O様</div>
</div>
<div class="nyano-feedback-content">
<p>私たちの場合は、<span>朝起きてから、どうするのかを徹底的にシミュレーションしました。</span>今後、サービスを開始される方は、実際にどのように活用するのかを考えてみて、イメージできてから始めるといいと思いますよ。</p>
</div>
</div>

<img src="イメージ画像" alt="Profile Image">

.nyano-feedback-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 700px;
margin: auto;
}

.nyano-feedback-card {
display: flex;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
align-items: flex-start;
flex-wrap: wrap;
}
.nyano-feedback-card:nth-child(odd) {
background-color: #fff6eb;
}
.nyano-feedback-card:nth-child(even) {
background-color: #edf7ff;
}

.nyano-profile {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
margin-right: 15px;
}

.nyano-profile-image {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}

.nyano-profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.nyano-profile-footer {
margin-top: 10px;
font-size: 12px;
color: #666;
text-align: center;
}

.nyano-feedback-content {
flex: 1;
}

.nyano-feedback-content p {
font-size: 14px;
line-height: 1.6;
color: #333;
text-align: left;
}

.nyano-feedback-content p span {
font-weight: bold;
color: #e56b3c;
}

@media (max-width: 480px) {
.nyano-feedback-card {
flex-direction: column;
align-items: center;
text-align: left;
}

.nyano-profile {
margin-right: 0;
margin-bottom: 10px;
width: auto;
}

.nyano-feedback-content {
text-align: left;
}
}

<div class="nya-feedback-card">
<div class="nya-rating">
<div class="nya-stars">
<div class="nya-star full"></div>
<div class="nya-star full"></div>
<div class="nya-star full"></div>
<div class="nya-star half"></div>
<div class="nya-star empty"></div>
</div>
<span class="nya-rating-value">3.5</span>
</div>
<p class="nya-title">丁寧な対応で素晴しいサイトができました</p>
<p>ホームページの制作を依頼するのは初めてでしたが丁寧に対応して頂きありがとうございました。出来上がりも素晴しく想像通りのものができて嬉しく思います。またお仕事を依頼したいと思いますので、その時はどうぞよろしくお願いいたします。</p>
<div class="nya-profile">
<div class="nya-profile-image"><img src="イメージ画像" alt="Profile Image"></div>
<div>
<span class="nya-author">肉球だから痛くない！にゃのらいと整体</span><br>
<span class="nya-author-subtitle">院長にゃのらいと</span>
</div>
</div>
</div>

<div class="nya-star full"></div>
<div class="nya-star half"></div>
<div class="nya-star empty"></div>

<span class="nya-rating-value">3.5</span>

<div class="nya-profile-image"><img src="イメージ画像" alt="Profile Image"></div>

.nya-feedback-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
max-width: 700px;
margin: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nya-rating {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.nya-stars {
display: flex;
gap: 5px;
position: relative;
}

.nya-stars .nya-star {
width: 20px;
height: 20px;
background-color: #ddd;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
position: relative;
}

.nya-stars .nya-star::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #f5a623;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
z-index: 1;
}

.nya-stars .nya-star.full::after {
width: 100%;
}

.nya-stars .nya-star.half {
background: linear-gradient(to right, #f5a623 50%, #ddd 50%);
}

.nya-stars .nya-star.empty {
background-color: #ddd;
}

.nya-feedback-card .nya-title {
font-size: 20px;
margin-bottom: 10px;
color: #333;
font-weight: bold;
}

.nya-feedback-card p {
font-size: 14px;
color: #666;
line-height: 1.5;
}

.nya-rating-value {
margin-left: 10px;
font-size: 14px;
color: #666;
}

.nya-profile {
display: flex;
align-items: center;
margin-top: 20px;
}
.nya-profile-image {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}

.nya-profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.nya-author {
font-weight: bold;
color: #333;
}

.nya-author-subtitle {
color: #999;
font-size: 13px;
}

@media (max-width: 480px) {
.nya-feedback-card {
padding: 15px;
}

.nya-feedback-card .nya-title {
font-size: 18px;
}

.nya-feedback-card p {
font-size: 12px;
}
}