ページに抑揚をつける「背景切り替え」のデザインアイデア

こんにちは！
株式会社Rabeeでデザイナーをしています、nanamiです🌿

Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？

「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。

今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。

前後関係のあるセクションを繋ぐ「矢印型」

LPでよく見る形です。例えば、
「こんなお悩みありませんか？」→「それを私たちが解決します！」
というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。

Entry Pocket

これだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで
自然と視線が上セクションから下中央にフォーカスします。

REALIZE

セクションの下線全体が斜めに切り込んでいるタイプの矢印型

musuvime

吹き出しのような形状のタイプもありました 💬

全体で統一された世界観を作る「特定の形状型」

左から、斜線・波線・円

特定の形状を用いて切り替えるタイプ。
上の例以外にも、階段型や山型、ギザギザ線など、さまざまな形で区切るケースが見られましたが、特に多かったのが斜線・波線・円の３つのパターンでした。

UNITRUST

ページを通して全てのセクションが斜めの線で区切られています。
直線がシャープさと躍動感を表現していて、
真面目・フレッシュ・前向きな印象を受けます。

相談e-眠り

緩やかな曲線は、緊張をほぐしてくれるような暖かさを感じます。
不安を感じがちな病院や薬局のサイトに効果的かもしれません。

PACE LUCUA osaka

これくらい強めの曲線になると
安心感よりもポップさが出てきますね。

TALENT LIFE

写真の切り抜きや大きめの角丸など、
ページ全体で丸を基調にデザインされているので統一感があります。

Dream

丸を使用している箇所には殆ど全て
このサイトのプライマリーカラーと思われる赤が使用されていました。
色 × 形のインパクトが非常に強く、印象に残りやすいです。

切替にもメッセージを込める「テキスト型」

テキストの目立ち度はサイトそれぞれ

大きめのテキストを横幅いっぱいに広げて切り替えるタイプ。
多くのサイトが流れるアニメーションと合わせて使用していました。
はっきりしすぎた境目にしたくない時や、切替のあしらいにもメッセージを含めたい時に有効ですね。

七色高等学院

"Get to know Nanairo High School"（七色高等学院について知る）
というテキストが流れていました。

株式会社High Link

採用に関するセクションの下に "JOIN OUR TEAM."のテキスト。
背景色とのコントラストが強いと、明確な区切り感が出ます。

AZA CORPORATION

"LEAVE IT TO US FROM A TO Z."（AからZまで私たちにお任せください）

流れを一気に変えたいなら「横幅いっぱい写真」

セクションの間やセクションの背景として、画面幅いっぱいの写真が挿入されているタイプ。
背景色の切り替えだけでは足りない！もっとセクション間の流れをグッと変えたい、一息置かせたい、という時に効果的なのかもしれません。

株式会社昭和工業

スクロール途中で画面が写真のみになる瞬間ができるほどの
大きめの写真が挿入されているので、
かなりはっきりとした区切りになっています。

株式会社パラブル

写真の中に"RECRUIT"のテキストが入っていて、
セクションの見出しも兼ねているタイプのパターンです。

九谷焼の芸術祭クタニズム2023

写真に黒透明のレイヤーがoverlayされていて、
その上にコンテンツが重ねられています。
写真のエリアがまるまるセクションになっているタイプです。

自然な視線の流れをつくる「視線誘導ライン」

自然と線を辿ってしまう

セクションの「切り替え」という観点とは少し逸れてしまうのですが、背景のあしらいにおける手法として、読んで欲しい流れに沿うように描かれた線が使用されているケースもよく見られます。

ケアデザ

３つのカードを左から順に読んだ後、
自然な流れでMembersセクションに目線が動きませんか？

日清ヨーク株式会社 新卒採用サイト

こちらはかなりユニークなパターン。
人体の中の臓器が各セクションになっていて、
飲み込んだものが順に移動していくようなイメージの流れが表現されています。

さいごに

今回はWebサイトの背景に着目し、多く見られた切り替えの手法を分析してみましたが、その他にもWebデザインに対してリズムや抑揚を感じるのはどのような時なのか？を洗い出してみました。

• セクションごとに要素の色や背景色が違う

• セクションごとに異なる質感の背景が使用されている

• 要素の寄りが左右交互に振れている

• コンテンツ幅が一定ではない（大胆にとび出しているセクションがあったりする）

上記のような特徴があると、単調なサイトに抑揚・動き・メリハリが出るような気がしています。

ただし、あくまでサイト全体の統一感というのは維持しなくてはならない。そんな時大事なのが、サイト全体を通して要素の密度が一定（要素の集中具合と余白のリズムが統一されている状態）であることだと思っています。

サイト全体としての統一感はありながら、見ている人を飽きさせないような抑揚がある、そんなWebデザイン制作を目指したいなと思いました。

最後まで読んでいただきありがとうございました！