LPを作っていて「ここ、どう繋げばいいんだろう…」って手が止まったことありませんか?

・色を変える?

・余白をあける?

・線を入れる?

実はこれ、

初心者さんが一番迷うポイント☝️

でも、

セクションのつなぎ方って

センスで選ぶものじゃないんです。

大事なのは

👉 次のセクションで

読者の気持ちがどう変わるか。

・興味 → 共感

・共感 → 不安

・不安 → 希望

・納得 → 行動

この「感情の流れ」が分かると、

どんなつなぎ方を選べばいいか

自然と決まってきます。

今回の投稿では

初心者さんが迷わないように

・大前提の考え方

・判断するための視点

・セクションのつなぎパターン例

をまとめました🌷

LP作りで

「なんとなくデザイン」から

「考えてデザイン」に進みたい人は

保存して、作業中に見返してください!⸜🌷︎⸝‍

💬 LP作るときに毎回迷ってた…という方、

どのセクションで一番止まりますか?👀

コメントで教えて下さい♡

初めまして!

🌷じぶん開花Webデザイナーよこさんです🌷

🌼このアカウントでは🌼

駆け出しWEBデザイナーや、WEBデザイナーを目指すママさん向けに

🌷WEBデザインの知識

🌷育児中ママさんのWEBデザイン勉強中の悩み

🌷フリーランスとしての働き方

🌷フリーランスWEBデザイナーを目指すマインド

などを発信しているよ!

ぜひ、もっと知りたい方はフォローしてね!

あなたは、WEBデザイナーになってどう生きたい?

どんな自分になりたい?

ちょっとづづ、確実にやりたいことができる生活を目指そう🌷

#コメントチャレンジ

#webデザイナー

#webデザイン勉強中の方と繋がりたい

#フリーランス

2025/12/19 に編集しました

... もっと見る「セクションタイトルのデザイン」、私も最初は“なんとなく”で決めていました。装飾を増やせば見やすくなる気がして、線を引いたり背景を変えたり…でも後から見返すと、タイトルだけが主張しすぎたり、逆にどこが区切りか分かりにくかったり。そこで意識するようになったのが、セクションタイトル=見た目ではなく「読み進めてもらうための装置」だという考え方です。 まず、セクションタイトルで決めたいのは「ここで読者の気持ちをどう動かすか」。たとえばファーストビュー直後は“興味”が強いので、タイトルは短く・強くしてテンポよく入るのが合いました。逆に「共感→不安」のパートでは、あえて余白を広めに取り、タイトルも少し柔らかい言い回しにすると、読者が感情を受け止めやすくなります。デザイン要素(色・線・囲み)は、その感情の変化をサポートするために使う、という順番にすると迷いが減りました。 次に便利だったのが「情報の重さ」でタイトルの存在感を変えること。悩みの提示や問題提起など“重い”情報の前後では、装飾を盛りすぎず、余白と文字サイズで落ち着かせる。ベネフィットや解決策など“軽い”情報では、少し明るいトーンやアイコンを足して、読み手の気分を持ち上げる。これだけで同じフォントでも印象が変わります。 そして「一呼吸いるか?」の視点。読者に考えてほしい場面(例:失敗の原因、現状の棚卸し)では、セクションタイトルの上に余白を入れたり、背景を薄く切り替えて“区切り”を作る。逆に勢いで読ませたい場面(例:手順、チェックリスト)では、背景は同色のまま、タイトルだけを整えてスムーズにつなぐ方が読了率が上がる感覚がありました。 最後に、私がよく使う簡易ルールを置いておきます。①強調したいセクションは「背景トーン変更 or 囲み」②自然につなぎたいセクションは「同色背景+タイトル整形」③視線を下へ流したいときは「斜め・三角・曲線」などの“つなぎパターン”を使う。セクションタイトルのデザインに迷ったら、まずは感情→情報の重さ→呼吸→強調/つなぎの順にチェックすると、決め手が見つかりやすいです。

関連投稿

「何から始めればいいか分からない人」
のために⁡ 最初の一歩を決めるシート作りました⁡ 👉「一歩」と⁡ 残してもらえれば受け取れます!⁡ ⁡ 私も⁡ 全然うまくいかない時期ありました⁡ 今も全然あります⁡ ⁡ 頑張ってるのに⁡ 何も変わらない⁡ ⁡ で、ずっと考えてたんですよね⁡ 「何をすればいいんだろう」って⁡ ⁡ でも今思うと⁡ あの時間⁡ ほとんど止まってました⁡ 手が動いてませんでした⁡ ⁡ 変わり始めたきっかけは⁡ すごくシンプルで⁡ “分からないまま動いたこと”⁡ ⁡ やってみて、⁡ 違う…⁡ またやる!⁡ それだけでした⁡ ⁡ もし今⁡ 止まってる感覚があ
ひでお室長|心のコンビニ|

ひでお室長|心のコンビニ|

36件の「いいね」

「どこで探せば雰囲気がまとまる素敵なLPになるの?」
女性起業家さんのLPって、 写真・アイコン・装飾… 「どこで探せば雰囲気がまとまる素敵なLPになるの?」 だから今日の投稿は “これ揃えたらLPがまるっと作れる” 素材だけを厳選してまとめました🌷 ✔女性起業家の写真 ✔カフェ・自宅オフィス背景 ✔ガジェット ✔女性向けカラー素材 ✔ミニマルアイコン ✔図解パーツ ✔装飾 ✔お客様の声パーツ これだけでLPが作れるようになるよ◎ 💾 保存して活用してね! 💬 コメントで「自分が一番意識したいポイント」教えてね! 初めまして! 🌷じぶん開花Webデザイナーのよこさんです🌷 私も育児中
よこさん⌇40代からのじぶん開花🌷Webデザイン

よこさん⌇40代からのじぶん開花🌷Webデザイン

10件の「いいね」

読まれるLPと読まれないLPの抽象的なレイアウトを比較し、LPの構成がユーザー体験に与える影響を示唆しています。
読まれないLPは、課題、商品説明、購入ボタン、実績などの情報が文脈を無視した順序で提示され、ユーザーの理解プロセスとズレていることを示しています。
ユーザーの心理��が「興味」「共感」「理解」「信頼」「行動」という線で動くことを示し、LP構成をこの流れに合わせることで読まれる率が向上すると説明しています。
読まれるLPと読まれないLPは何が違う?
LPは「ページ」ではなく「体験設計」。 読まれるLPをつくる人は、 構成・心理・コピー・デザインのすべてを“流れ“として考えている。 順番・意図・文脈を整えることが、 最も強力なデザインスキルです。 #LP #UXデザイン #情報設計 #UIUX #デザイン思考
HUNCHES|Web Design

HUNCHES|Web Design

7件の「いいね」

白い背景に、緑色の文字で書かれた自己紹介文です。ユーザー「のぴ」がTikTokユーザーで、stprリスナーとしてアンプタック様を応援し、アプリでの挨拶をしています。絵文字(👋😅📣🍅💚)とLemon8の透かしも含まれます。
なんだここ一旦挨拶をしようこんちゃ!どものぴです✋TikTokでも投稿などしてるんですけどなんか気に
よく分からないねぇ〜 #stprリスナーさんと繋がりたい #stprリスナーさん
のぴまる📣🍅💚

のぴまる📣🍅💚

7件の「いいね」

STUDIOで手が止まる本当の理由
STUDIOを触り始めたとき 「思ったより難しい…」 「自分には向いてないかも」 そう感じたことありませんか? 実はその原因は センスではありません。 多くの場合、足りないのは 判断する基準です。 ・どこから作るのか ・何を優先するのか ・どこを見ればいいのか このポイントが整理されるだけで 不安はかなり減ります。 STUDIOは センス勝負のツールではなく 考え方を整理するツール。 焦らなくて大丈夫です。 #STUDIO #ノーコード #Web制作初心者 #Webデザイン初心者 #フリー
前原彩人  |  わかるまで優しく教えるstudioの先生

前原彩人 | わかるまで優しく教えるstudioの先生

0件の「いいね」

【知らなきゃ損】LPをただの説明ページで終わらせない!アニメ動画で動く営業マン化 アニメ動画でユーザーの心をつかむ3つの心理トリガー 多くの企業が「LPを作ったのに成果が出ない」と悩んでいます。
その理由はシンプル。ただ情報を並べただけの“説明ページ”になっているから。 LPは文字や画像だけだと「なんとなく見て終わり」でスルーされがち。
そこで効くのが 心理学を応用したアニメ動画の仕掛け。
ほんの数十秒で「最後まで見たくなる」ページに変えられます。 ① “ザイオンス効果”で親近感を爆上げ 人は「繰り返し接触するもの」に親しみを覚える心理があります。
アニメ動画でキャラク
カプセルメディア┃アニメーション動画制作

カプセルメディア┃アニメーション動画制作

0件の「いいね」

想いだけでは伝わらない
どれだけ想いを込めても 伝わらない それは、気持ちが足りないんじゃなくて “主語”がズレてるだけ。 「どう話すか」「どう伝えるか」 大事なのは、 “相手がどう受け取るか” ペルソナの心の中にある言葉を 代わりに話すだけで、 伝わり方は一気に変わります リールは、あなたの気持ちを叫ぶ場じゃなくて ペルソナの気持ちを代弁する場所 その意識だけで、反応は変わります。
みよこ|はじめてのSNS発信講座

みよこ|はじめてのSNS発信講座

6件の「いいね」

🎶使えなかったので違う曲で😉
#ナムジュン #ナムペン #RM #김남준 #BTS
⟭ mugi ⟬

⟭ mugi ⟬

16件の「いいね」

🔸&を使わない文字連結🔸
【やり方】 ・=CONCAT(繋げたいセルを範囲選択) ・Enter 【保存】してマネしてみてね😊 。:+* ゚ ゜゚ あお|Excelで“自分時間”を増やす働き方 ˗ˏˋ がんばらなくても整う働き方ˎˊ˗ ▷ 手間をかけずに効率化🪄 ▷ Excelで叶えるゆとり生活🌿 ▷ 家事も仕事も仕組みでラクに🌷   在宅フリーランスママ💻 三児ママ|起業家サポート歴3年|累計2億円超に貢献 ほかの時短技はこちらから @あお|Excelで“自分時間”を増やす働き方 。:+* ゚ ゜゚ #excel #仕事 #仕事術
あお|Excelで“自分時間”を増やす働き方

あお|Excelで“自分時間”を増やす働き方

28件の「いいね」

短い糸、諦めないで!簡単につなげる方法
短い糸って 「もう使えないかな…」って思いがちだけど🤔 この方法なら キレイに繋げてまだ使える✨ ✔ 糸を無駄にしない ✔ 見た目もスッキリ ✔ ハンドメイドする人は覚えておくと便利 忘れないように 保存しておいてね📌 #コメ欄でゆるっと話そう #裁縫 #裁縫の裏ワザ #暮らしの賢い生活 #園芸と手作りマスター
SANA🧶🪡

SANA🧶🪡

1791件の「いいね」

【Excel】やってない?その入力かなり迷惑
あえて…? @あっこ|ワーママのExcel•PC仕事術 👈他のExcel仕事術はこちら 今回は改行された文字を分割する方法をご紹介! [手順]:改行を分割 1.範囲選択 2.データタブの区切り位置 3.上にチェックをいれて次へ 4.その他にチェックをいれてCtrl+J 5.改行されている部分に線が入っているのを確認 6.完了→OK [手順 逆バージョン]:改行した状態でつなげる 複数セルを1つのセルに改行してつなぐには「&CHAR(10)&」を使います! 例えばB3~E3を改行した状態で繋げたい場合、 1.別のセルに「=B3&
あっこ|ワーママのExcel•PC仕事術

あっこ|ワーママのExcel•PC仕事術

2480件の「いいね」

2本の線を綺麗に繋ぐ!
2本の線をつなぐとき ペンツールで調整しても なんか形がキレイに決まらないってことない? ⁡ Illustratorなら 「連結ツール」+「スムーズツール」で解決◎ 端をまとめて囲って、くっ付いたら スムーズツールでなぞるだけで 自然な線につながるよ ⁡ 保存してあとで試してみてね ⁡ #Illustrator初心者 #イラレ講座 #デザインTips #連結ツール #時短テク
フジ

フジ

11件の「いいね」

知っておきたい!袋文字のすき間をピタッと消す方法
袋文字のまわりにできる“すき間”、ちまちまパスで埋めるのは大変… コピーを変えるたびにやり直すのも面倒ですよね。 でもアピアランスを使えば一発で解決できます◎ ⁡ ▶︎ テキストを2つに分けてグループ化 ▶︎ アピアランスパネルで「新規塗りを追加」を2回押す ▶︎ 下の塗りを選択して「新規効果 → パス → パスのオフセット」を1pxで設定(角はラウンド) ▶︎ 「新規効果 → パスファインダー → 分割」を選択 ▶︎ アピアランスパネルで「分割」をクリックし、「塗りのないアートワークを削除」のチェックを外す ⁡ これだけで袋文字のすき間がピタッと消え、コピーを変えてもズ
フジ

フジ

26件の「いいね」

【後悔なし】コードレス電気毛布
大優勝アイテム🔥 ぽかぽかのまま作業ができる コードレス電気毛布✨ ここのメーカーさんは9箇所で発熱🔥 羽織った時に肩・お腹・背中・腰に 発熱が当たるのが優勝すぎる🏅 しかもレビーを書くと もう1つモバイル充電貰えるから 充電終わってもストック使って永遠に使用可能😂 厚みもあり、もふもふでめっちゃ気持ちいい💕 【アイテムの探し方🔍】 1. プロフリンクから楽天ROOMへ 2. 👉ROOM検索バーで【電気毛布】 3.👉「楽天市場で見る』から詳細チェック マラソン中はクーポン出てるよ♪ __________________________
にこ|家事ラクしたいズボラ妊婦

にこ|家事ラクしたいズボラ妊婦

113件の「いいね」

【100均材料だけで!】くるくるボトル
\赤ちゃん大喜び!!くるくるボトル/ ボトルを傾けると中のブロックがくるくる回るのが めっちゃ楽しくて喜んでたよ🙌💗 《 知育効果 》 ◽︎見る力が育つ(追視や注視) ◽︎観察力や集中力がつく ◽︎想像力が育つ ◽︎手指の筋力がアップ ◽︎興味関心・好奇心が育つ ◽︎カラフルだから視覚にも刺激がたくさん🌈 《 作り方 》 ①丸い割り箸をボトルの長さにカットしたら ストローの中に入れる ②片方のストローに切り込み入れてタコ足にする ③モールを3つ繋げたら ストローの先端に入れてくるくるきつめに巻く ④巻き終わりもストローに入れたら
まなりん | 0歳のカンタンゆる知育

まなりん | 0歳のカンタンゆる知育

42件の「いいね」

「永久保存版!皮膚科医激推しハンドクリーム5選」というタイトルと、ハンドクリームのボトルを持つ皮膚科医の女性キャラクターが描かれた表紙画像です。
「はじめに」という見出しの下に、手が荒れて困っている女性と、ハンドクリームを紹介する皮膚科医の女性キャラクターが描かれています。
「アトリックス メディケイティッドエクストラクリーム」という見出しの下に、薬用ハンドクリームのチューブが写っており、炎症を抑える成分と保湿成分が配合されていることが説明されています。
皮膚科医激推しハンドクリーム5選
◀︎皮膚科専門医ママ👩‍⚕️がママと子の肌情報を発信😊 手荒れしやすい人は 手をたくさん使う人 手をよく洗う人 わたしたち医療従事者や 介護職や飲食系など 手洗いと消毒薬の組み合わせは 手が乾燥してカッサカサになる😭 これからの季節に欠かせないのは ハンドクリーム🙌 ハンドケアには 水をはじく撥水性ハンドクリームがオススメ😊 お手頃価格のものから 医療現場で使われているものまで 5つをご紹介❤️ ゆうです 皮膚科医15年🌸 皮膚科専門医🌸 アンチエイジング専門医🌸 --------------------- 🔸 "皮膚科
ゆう先生|ママと子の肌を救う皮膚科専門医

ゆう先生|ママと子の肌を救う皮膚科専門医

436件の「いいね」

ヒメちゃんオリンピックへꉂ🤣𐤔 #オリンピック #スキー #jump
🐕🎀Nissy🍌🫧🐟

🐕🎀Nissy🍌🫧🐟

3件の「いいね」

【保存版!】停滞期からの脱出方法✨️停滞期のナゾと「リフィード」の魔法🔥
停滞期は気合では超えられない〜ダイエットの罪と代謝をハックする技術〜 💡インスリン抵抗性と脂肪の関係(DeepResarch) 💡動画生成カスタムプロンプト👇️ ・ダイエットで停滞期が発生する仕組みと回避方法を、ダイエット初学者(特に誤った方法で無理なダイエットをしている人)に分かりやすく説明 ・チートデイは何を食べても良い自分へのご褒美の日と誤解している人に、ReFeedについて分かりやすく説明 💡知識不足での16時間断食はおすすめしません(特に育ち盛りの人、持病を抱えている人) 👉️やり方を間違えると体調を崩したり、逆に太ります(特に血糖値スパイクに注意)😱 🔘どうやっ
oatmeal-17Kg😆

oatmeal-17Kg😆

1件の「いいね」

繋げてみた 2
編み物してると余計な事考えなくて好きなんだけど、仕事でイライラする事があり不貞寝する日が多くてあまり進みませんでした( ; ; )
koo

koo

1件の「いいね」

爪のキューティクルケアの4つの下処理ステップをまとめた画像です。ロングビット、プッシャー、サイドラインの整え方、Cカーブテクニックが図解されています。
爪のキューティクル周りをロングビットで整える工程を示しています。左角から右へ、そして左サイドを下へ動かす矢印が描かれています。
爪のキューティクルと薄皮をプッシャーで押し上げる工程。左キューティクルラインから後縁、右角、右キューティクルラインへと動かす矢印が示されています。
キューティクルの整える方法をシェアしますね
#キューティクルケア #セルフネイル #ネイルケア #ネイル初心者 #ネイル初心者
セン-ネイル💅

セン-ネイル💅

98件の「いいね」

三流 → 二流 → 一流
あなたのやり方はどれだった? ⁡ 同じIllustratorでも ″線の端を角でつなぐ方法″は3タイプ! ⁡ 一歩進んだやり方を身につけたい人は 保存してあとで試してみてね◎ ⁡ #illustrator初心者 #イラレ講座 #デザイン勉強中 #illustrator使い方 #デザインのコツ #デザインTips
フジ

フジ

6件の「いいね」

【受講生対談】なおなおさんPart2
たけち 動画レッスンはDM🙇

たけち 動画レッスンはDM🙇

0件の「いいね」

【たったの2段 グラニースクエアの作り方】
@lino.kagiami.crochet 👈他の編み図はこちら🧶✨ こんにちは、りのです🐶 今回は 大人気の一段•二段シリーズの モチーフと合わせても可愛い \グラニースクエアの作り方🌸/ の解説をしました🧶 つなげてミニカバンにしたり コースターにしたり、色々使えます🥰 こんなに簡単なのに 可愛くてお部屋にあったら ほっこりしちゃう😊♡ 皆ならなににする?🫣 作ってみたら感想教えてくれると嬉しいです🥰 𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷𖧷 このアカウントは、 \簡単かわいい小物レシピ×編み図解説/で ⚘編み図みな
りの 1分で読める✨かぎ針編み図ガイド🧶

りの 1分で読める✨かぎ針編み図ガイド🧶

120件の「いいね」

もっと見る