SWELLデザインパターン(コピペ)

イントロ(概要紹介)

左テキスト+右動画

[pattern_copy id=”intro-01″]

SECTION NAME

おすすめは1行に12文字くらい
2行目も同じかちょい少なめ

ここにサブタイトルを17文字くらいを
最大2行に設定するとバランスが良いです。

ここの概要文の文字数はトータルで
最大150文字程度に収めると、
スマホ画面が文字だらけになるのを
避けられるためおすすめです。

1行あたり20文字以内で改行できるように、
文章を整えるとさらに読み易くなります。

情報量が多く、文字数が長くなる場合は、
ここでは概要のみ掲載しておき、
別ページで詳しく紹介がおすすめ。

PC画面では右側に動画が配置されます。
動画をループ再生させてもOK。
再生時間は最大8秒くらいにするのが、
データ容量的にも望ましいです。

ユーザーにとってブログ記事でもない限り、
長い文章は離脱要因のひとつ。

もし、文章が長くなってしまう場合は、
内容を分割して、カード3枚並びなどの
画像+見出し/説明のデザインにして、
補完イメージ(図解化)するのがおすすめ。

左テキスト+右画像3枚フェード切替

[pattern_copy id=”intro-02″]

SECTION NAME

おすすめは1行に12文字くらい
2行目も同じかちょい少なめ

ここにサブタイトルを17文字くらいを
最大2行に設定するとバランスが良いです。

ここの概要文の文字数はトータルで
最大150文字程度に収めると、
スマホ画面が文字だらけになるのを
避けられるためおすすめです。

1行あたり20文字以内で改行できるように、
文章を整えるとさらに読み易くなります。

情報量が多く、文字数が長くなる場合は、
ここでは概要のみ掲載しておき、
別ページで詳しく紹介がおすすめ。

PC画面では右側に動画が配置されます。
動画をループ再生させてもOK。
再生時間は最大8秒くらいにするのが、
データ容量的にも望ましいです。

ユーザーにとってブログ記事でもない限り、
長い文章は離脱要因のひとつ。

もし、文章が長くなってしまう場合は、
内容を分割して、カード3枚並びなどの
画像+見出し/説明のデザインにして、
補完イメージ(図解化)するのがおすすめ。