カラム全体をリンクボタンにするデザインの事例と設定方法

こんにちは、デザイナーのオモトです。
今回はホームページ制作サービス「BiNDup」の新機能「カラムごとに個別の背景を設定」を使って、事例のカラムデザインを再現してみたいと思います！

カラムごとに背景色や背景画像を設定する方法自体は以前からあったものの、Dressを使うのがちょっと面倒で…。ブロック編集画面の方に設定できるようになったことにより、気軽にできるようになりましたので、この機会に使ってみてください。
サンプルデータも配布していますので、参考にしてみてくださいね。

カラムとは？

カラムとは、Webサイトを構成する段組みのことで、ページや画面を縦に分割する線のことです。
BiNDup上では、ブロック内（茶線）を縦に分割する線（緑線）を指しています。

カラムは、①ブロックエディタ＞ブロック設定＞カラム構成の「○カラム」で、設定でき、カラム数を増やすことによって縦列が増えていく仕組みです。最大５カラムに分割できます。

②が新機能の「カラムごとに個別の背景」を設定できるエリアです。

カラムの内容は、分割パーツで区切られた単位でカラムに分割されます。（エディタモードの場合）

ただのボタンリンクからカラム全体をリンクにするデザインへ、トレンドが変化

同じ「店舗ページ」への導線でも、リンクボタンが省略されたデザインに変化。

これまでは、ページへの導線を設置する際、どんな導線に対しても、「タイトル+ボタンリンク+イメージ写真」という組み合わせを使用するのが主流でしたが、最近ではリンクボタンが省略され、カラム全体を１つのボタンとする表現もよく見かけるようになりました。　
写真と写真の境めがくっついてると、まとまり感を感じやすい上、大きく感じるので臨場感があります。
ただし、この表現の欠点は、ボタンだということが分かりにくい点です。マウスオーバー時に何かしらのアクションを入れるなど、リンクであることを伝える工夫が必要です。

カラム全体をリンクにしているデザインの事例

ここからは、カラム全体をリンクにしているデザインの事例をいくつかご紹介したいと思います。

虎ノ門ヒルズ　レジデンシャルタワー

虎ノ門ヒルズ　レジデンシャルタワーのwebサイトでは、フッターメニューとして、カラム全体をリンクボタンにするデザインが使用されています。それぞれのテキストと背景の組み合わせにより、ただテキストを並べた時よりも、リンク先がどんなページかをイメージしやすくなっています。
サイトを見る

まるもち家

まるもち家のwebサイトでは、各店舗の紹介ページへの導線として、カラム全体をリンクボタンにするデザインが使用されています。
このように、導線にそれぞれの店舗の写真があると、よく店舗周辺を通りがかるユーザーがサイトを見た際に「あ、このお店見たことあるな」と気づいて、目を引く可能性が高いです。そうして気づいたユーザーはお店やブランドに対して、親近感を抱いてくれる事でしょう。初めて見る人でも映える写真であれば、「こんなお店なんだ！雰囲気いいな。近所にあるから今度行ってみよう」と興味を持ちやすくなるので、写真映えは大事なポイントです。

ちょっと細かい話ですが、本店のエリアを大きくし情報に大小をつける事で、さりげなく情報の流れにメリハリを入れているところなんかはプロの仕事だなと感じます。

サイトを見る

曽我農園

曽我農園のwebサイトでは、製品カテゴリページへの導線として、カラム全体をリンクボタンにするデザインが使用されています。一つ上のエリアにも定番商品への導線がありますが、雰囲気のある写真にすることにより、それとは区別する形で使用されています。
サイトを見る

ONE MEDIA Inc.

マウスオーバーでカーソルが「learn more」に変化する例

ONE MEDIA Inc.のwebサイトでは、ページ下部のおすすめページへのリンクとして、使われています。こちらは、マウスオーバーすることで背景画像が表示され、カーソルがLearn moreに変化する仕組みになっています。ミニマルなサイトデザインの統一感を維持しつつも、リンク先がどんなページかをイメージしやすくなっていて、さらには覗き見しているようなワクワク感まである、技巧を凝らしたUIに仕上がっています。

サイトを見る

カラムごとに個別の背景を設定する方法

今回は、ロゴ+店舗名を入れたパターンのやり方をご紹介します。

サンプルサイトを見る

用意する画像

まず、ロゴや店舗名など文字を入れた背景が透明な画像と、背景用の画像を用意します。背景が透明な画像に関しては、サンプルサイトデータでは、BiNDup内の画像編集ソフト「SiGN」で編集できるようにしてありますので、よければお使いください。
背景用の画像は、少し暗くしておくと、白い文字と重ねた時に読みやすくなります。

ブロックを編集

ブロック編集画面を開き、前述の透明な画像を２枚並べ、間に分割線を挿入します。そして、HTMLタグでリンクを示すコードを記述し、それぞれの画像を囲います。

ブロック設定のタブを開き、①カラム構成を２カラム、カラム間隔をゼロ、②コンテンツ幅100%、③カラム１に④背景画像を設定し、⑤右横のアイコンをストレッチに設定します。③を押してカラム２に切り替えて、同じように④⑤の設定をします。

Dressを編集

ブロック設定の左下、Dressテーマを使用にチェックを入れ、その他のテーマからブロックDressを作成します。リンクの範囲をカラム全体に変更し、マウスオーバー時の動きを設定していきます。

リンク

余白：60px
表示形式：フレックス（display:flex）

リンク：マウスオーバー

背景：背景色：#000000・不透明度20%（こちらの不透明度はお好みで）
不透明度：1
トランジション：1s all

リンク：マウスオーバー：画像

トランジション：1s all
変形：scale(1.1,1.1)

これで完成です。

まとめ

いかがでしたでしょうか！新機能をぜひ使ってみてくださいね。
idタグを調べる必要があったり小難しかったので今回は省きましたが、他の事例もBiNDupで再現できますので、よかったらチャレンジしてみてくださいね。

サンプルのサイトデータの配布

今回作成したサイトデータを以下より配布しますので、参考にしてください。