Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

コーポレートサイトや店舗サイトで「ご依頼の流れ」「来店の流れ」「ご相談の流れ」といったページを見かけることがあります。このような「○○の流れ」ページは、初めて依頼や来店をされる方に向けフローを掲載し、イメージや安心感を抱いてもらう・問い合わせへ繋げる、といった役割があります。

サービスの提供を業務内容としている業者の場合はお問い合わせから契約～納品までの流れを

整体院やエステなど施術をサービスとしている店では来店から施術、お会計までの流れなどを紹介することが一般的です。

今回は、そんな多業種で使える「○○の流れ」で使える汎用性の高いレイアウトパターンを紹介していきたいと思います。

パターン1

ベーシックなタイプのレイアウトデザインです。「STEP」はラベルのようなワンポイントのあしらいにすることで、シンプルでありながらメリハリも効いたデザインに仕上がります。

パターン2

交互にフローを置いたレイアウトデザインです。オリジナル性を演出する時におすすめのデザインですが、賑やかな印象を与えるレイアウトでもあるので参考例のように5つ程度のフローに効果的なレイアウトです。また、間延びする印象も与えてしまうため、画像の比率は「横長」にすると収まりが良くなります。

パターン3

パターン1をもう少しシンプルにしたデザインです。参考例は写真を丸型にしていますが、四角い形状の写真でも活用できるレイアウトです。親しみやすい・可愛らしいデザインにしたい場合は丸型の写真を、ベーシックなデザインにしたい場合は四角形の写真といったように、作りたいデザインのテイストに合わせて写真の形状を変えてみると良いでしょう。

パターン4

フローごとの説明文章を用意することが難しい・コンパクトにまとめたい、といった場合はブロックを横に並べたレイアウトをおすすめします。

参考例はこれまでのパターンと同様の文章を入れているためブロック単体が縦に伸びていますが短い文章であればシンプルにまとまった印象のレイアウトに仕上げることが可能です。

パターン5

画像を配置しない場合や、シックなテイストに仕上げたい時におすすめのレイアウトになります。画像という補足情報がない分、フローはわかりやすい文章に校正する必要があります。士業系や制作会社といった業種には効果的ですが、店舗のような業種は写真が入ったフローレイアウトがおすすめです。

パターン6

画像と文章の位置を交互に変えたレイアウトデザインです。「STEP」の見出しのデザインを変えたり、フローごとに矢印をつけたりなど、汎用性の高いレイアウトですのでWEBサイトのテイストにあわせて制作してみると良いでしょう。

まとめ

いかがでしょうか。今回はフロー系デザインのレイアウト6パターンを紹介しました。今回の記事では詳しく触れていませんが、いずれかのレイアウトを取り入れつつ、見出しのデザインを変えたり色を変えることでまた一風変わったデザインに仕上げることができます。

業種や業界を問わないベーシックなレイアウトデザインになりますので、どんどん試してみてくださいね！今回もご一読いただき、ありがとうございました！