【BiNDup最新テンプレート】心地よく動いてクリックを促す。アレンジ術もご紹介

こんにちは！ホームページ作成サービスBiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。
今回は、10月に搭載するホームページ作成サービス「BiNDup」の追加テンプレートSiteBoxより、新しい２つのテーマについて、デザインのポイントやおすすめのぷちアレンジ方法をご紹介します！

新作テンプレートでは、新機能の「カルーセル」やシャッターを使用。
また、ビジネスコースで使える予約サービス「SmoothBooking」の利用を想定した予約サイトのテンプレートも含まれているのでおすすめです。

→テンプレートですぐにサイトが作れるノーコードCMS「BiNDup」を30日間無料体験

没入感にこだわったスマホファーストなテンプレート「PADDLE」

マーケティング会社のサイトを想定したテンプレート。最近のWebデザインのトレンドであるいい意味で極端な「スマホファースト」なデザインを取り入れ、PCだと一見見切れるほど大きなビジュアルとタイポグラフィーが印象的なサイトになっています。
プレビューを見る

さらに強いコントラストや余白を多めにとって没入感を出したり、要素を角丸にすることで、より今っぽいデザインに仕上げています。
また、今回からDressに搭載されたテキストの袋文字機能を使うことで、ビックテキストを圧迫感なく使いつつ、サイトにインパクトを追加しています。

ぷちアレンジ例：新機能の袋文字を追加してみよう

文字を袋文字にするには、「装飾＜縁取り」を選択すると可能です。
その際文字色は白など背景と同じ色に設定してください。
見出しのワンポイントに使うと、スタイリッシュな印象に仕上げることもできますよ。
※袋文字機能は、10月以降のバージョンから搭載予定です
※フォントによっては、袋文字に対応していないので要注意！

→テンプレートですぐにサイトが作れるノーコードCMS「BiNDup」を30日間無料体験

定番のミニマムデザインにクリックを促すアクションを詰め込んだ「ONO」

カフェを想定したテンプレート。どんな業種にもマッチする汎用性とクリックを促すホバーアクションが魅力的なデザインになっています。
プレビューを見る

見出しのあしらいに小さな数字を入れることで規則性が生まれ、よりミニマルさを増しつつ、デザインのアクセントになっています。
サイト上のあらゆる場面でマイクロインタラクション（細かなアニメーション）をするのが最近のWebデザイントレンド。このテンプレートではBiNDupの機能やDressを使ってどこまで再現できるのか限界に挑んでみました…！

このように、ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。
またギャラリー風のファーストビューは、サイトに訪れたユーザーを世界観に引き込む役割をしており、スクロールテリングを意識した作りにしています。

ぷちアレンジ例：お客様の声に導線を追加しよう

ここでは、お客様の声の各コンテンツ全体をリンクにする方法をご紹介します。
■下準備（ブロックエディタ）
各コンテンツの先頭にリンクを追加。テキストを「未入力」にし、リンク先を設定します。
※「商品名」のリンク先は必ず「未入力」状態にしてください。デフォルトでは「#」に設定されています。

ブロックDressの設定①「カルーセルブロック：スライドカラム」の設定
配置方法：相対配置（position:relative） ※この範囲内に限定するよという指示のイメージ

ブロックDressの設定②「リンク」の設定
幅：100%
高さ：100%
配置方法：絶対配置（position:absolute）
位置：左0px、上0px

ブロックDressの設定③「リンク：マウスオーバー」の設定
背景色：rgb(0,0,0,0.1)

他にもやり方がありますので、詳しくはこちらの記事をご覧ください。

クリックしやすくなる！複数の要素を含んだカラム全体をリンクにする設定方法

まとめ

今回ご紹介した２つのテーマには、それぞれ3つずつ想定業種やサイトの目的が異なるテンプレートをご用意しています。
また違った構成やデザインでの提案になっていますので、活用の幅が広がると思います。搭載までお楽しみに！

2023年9月9日から10月12日まで、新作テンプレートがセットになったお得な優待キャンペーンも行っております。ぜひこの機会にお申し込みください。

ホームページ作成サービスBiNDupのテンプレートをみるBiNDの制作事例を見る