サービスの流れデザインのCSSジェネレーター
サービスの手順やステップを分かりやすく見せるためのCSSジェネレーターです。PCではジグザグのフロー、スマホでは縦並びに自動で切り替わるレスポンシブデザインを生成します。
プレビュー
<div class="flow-container {{flow_type}}">
<div class="flow-item s1">
<div class="item-header theme1">{{step_prefix}}<span>01</span></div>
<div class="item-content">
<span class="flow-title">お問い合わせ</span>
<p>お問い合わせフォームまたはお電話で、お気軽にご相談ください。専門エージェントが丁寧に対応します。</p>
</div>
<div class="arrow right"></div>
</div>
<div class="flow-item s2">
<div class="item-header theme1">{{step_prefix}}<span>02</span></div>
<div class="item-content">
<span class="flow-title">お打ち合わせ</span>
<p>経験豊富な専門エージェントが貴社のターゲット、エリア、営業手法などを丁寧にヒアリングします。</p>
</div>
<div class="arrow right"></div>
</div>
<div class="flow-item s3">
<div class="item-header theme1">{{step_prefix}}<span>03</span></div>
<div class="item-content">
<span class="flow-title">お見積もり</span>
<p>丁寧なヒアリングを重ねた上で、貴社に最適化されたプランでお見積もりをご提示します。</p>
</div>
<div class="arrow next-row"></div>
</div>
<div class="flow-item s4">
<div class="item-header theme2">{{step_prefix}}<span>04</span></div>
<div class="item-content">
<span class="flow-title">納品</span>
<p>通常ご入金確認後、3営業日以内で納品。データや紙一覧表などお客様の要望に合わせた形式が可能です。</p>
</div>
<div class="arrow next"></div>
</div>
<div class="flow-item s5">
<div class="item-header theme2">{{step_prefix}}<span>05</span></div>
<div class="item-content">
<span class="flow-title">運用開始</span>
<p>納品後の運用サポートも充実。効果的なリスト活用方法や、営業フェーズに合わせた改善提案を行います。</p>
</div>
<div class="arrow next"></div>
</div>
<div class="flow-item s6">
<div class="item-header theme2">{{step_prefix}}<span>06</span></div>
<div class="item-content">
<span class="flow-title">アフターフォロー</span>
<p>定期的なミーティングを通じた状況確認。市場の変化や新たなニーズに応じたプランの最適化を支援します。</p>
</div>
</div>
</div>.flow-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px 20px;
position: relative;
}
/* パターンA: 3->4 接続、下段は右から左へ */
.type_a {
grid-template-areas:
"s1 s2 s3"
"s6 s5 s4";
}
/* パターンB: 3->4 接続なし、下段も左から右へ */
.type_b {
grid-template-areas:
"s1 s2 s3"
"s4 s5 s6";
}
.s1 { grid-area: s1; }
.s2 { grid-area: s2; }
.s3 { grid-area: s3; }
.s4 { grid-area: s4; }
.s5 { grid-area: s5; }
.s6 { grid-area: s6; }
.flow-item {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: relative;
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.item-header {
padding: 10px;
color: #fff;
font-weight: bold;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px 10px 0 0;
}
.item-header span {
font-size: 30px;
margin-left: 8px;
}
.theme1 { background: {{color_teal}}; }
.theme2 { background: {{color_pink}}; }
.item-content {
padding: 25px 20px;
flex: 1;
text-align: center;
}
.item-content .flow-title {
display: block;
font-size: 18px;
color: #333;
margin: 0 0 15px;
padding-bottom: 12px;
position: relative;
font-weight: bold;
}
.item-content .flow-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
border-radius: 2px;
}
.flow-item:has(.theme1) .flow-title::after { background: {{color_teal}}; }
.flow-item:has(.theme2) .flow-title::after { background: {{color_pink}}; }
.item-content p {
font-size: 13px;
line-height: 1.6;
color: #555;
text-align: left;
margin: 0;
}
.arrow {
position: absolute;
width: 40px;
height: 40px;
border: 4px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.flow-item:has(.theme1) .arrow { background: {{color_teal}}; }
.flow-item:has(.theme2) .arrow { background: {{color_pink}}; }
.arrow::after {
content: "";
width: 10px;
height: 10px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
display: block;
}
/* 共通の右向き */
.arrow.right {
right: -34px;
top: 50%;
transform: translateY(-50%);
}
.arrow.right::after { transform: rotate(45deg); margin-left: -2px; }
/* パターンAの下段用左向き */
.type_a .arrow.next {
left: -34px;
top: 50%;
transform: translateY(-50%);
}
.type_a .arrow.next::after { transform: rotate(-135deg); margin-right: -2px; }
/* パターンBの下段用右向き */
.type_b .arrow.next {
right: -34px;
top: 50%;
transform: translateY(-50%);
}
.type_b .arrow.next::after { transform: rotate(45deg); margin-left: -2px; }
/* 3->4 接続矢印 (パターンAのみ表示) */
.type_a .arrow.next-row {
bottom: -28px;
left: 50%;
transform: translateX(-50%);
}
.type_a .arrow.next-row::after { transform: rotate(135deg); margin-top: -4px; }
.type_b .arrow.next-row { display: none; }
@media (max-width: 768px) {
.flow-container {
gap: 12px 8px;
}
.item-header {
padding: 8px;
font-size: 11px;
}
.item-header span {
font-size: 20px;
}
.item-content {
padding: 15px 8px;
}
.item-content .flow-title {
font-size: 14px;
margin-bottom: 12px;
}
.item-content p {
font-size: 11px;
}
.arrow {
width: 32px;
height: 32px;
border-width: 3px;
}
.arrow::after {
width: 7px;
height: 7px;
border-width: 2px;
}
.arrow.right { right: -20px; }
.arrow.next-row { bottom: -20px; }
/* パターンAの下段用 */
.type_a .arrow.next { left: -24px; right: auto; top: 50%; }
/* パターンBの下段用 */
.type_b .arrow.next { right: -22px; left: auto; top: 50%; }
}機能、使い方
- ステップ形式のフロー図を生成するツールです。
- レイアウト変更: ジグザグ（パターンA）か、単純な2段（パターンB）かを選択できます。
- 矢印の自動調整: パターンに応じて、接続が必要な箇所の矢印の向きが自動で変わります（Bの場合は3→4の接続なし）。
- テキスト表示の切り替え: ステップ番号の前の「STEP」という文字を非表示にできます。
- レスポンシブ対応: スマホ画面でも見やすいように、フォントサイズや矢印の大きさが自動で最適化されます。
