Social Media Icons Widget Examples

フローティングのクリエイター向けドックからミニマルなフッターの列まで、実際のSNSウィジェットの設定を比較し、レイアウト、配置、色、アイコンの形、ホバーエフェクトによって同じウィジェットの印象がどう変わるかを確認し、サイトに合ったスタイルを見つけて、無料でオリジナルのウィジェットを作成できます。

縦型ソーシャルメディアアイコンウィジェットの例

クリエイターの主要なSNSチャンネルにワンタップでアクセスできるよう、縦型のフローティングドックを設置します。各プラットフォームのブランドカラーを使った角丸アイコン、ホバー時のツールチップ、軽いフライエフェクトで、モダンなアプリのような印象に仕上げます。

表示されているカスタマイズ

フローティング表示縦型Brand colorsTooltips

会社のフッターを落ち着いたプロフェッショナルな印象にするため、カスタムのスレートブルー系カラーを使ったアイコンのみの表示にします。右寄せとコンパクトなサイズで控えめに配置し、ホバー時には透明度がわずかに変化する演出を加えます。

表示されているカスタマイズ

アイコンのみカスタムカラー不透明度右寄せ

WhatsApp、電話、メールにワンタップでアクセスできる、サービス業向けのフローティングボトムバーを設置します。カスタムのグリーン系カラーを使った大きな円形ボタン、ツールチップのラベル、バウンドアニメーションにより、モバイルでも見つけやすく操作しやすくなります。

表示されているカスタマイズ

連絡先リンク下部にフローティング表示円形ホバー時にバウンド

ローンチページやイベントページに合わせて、ブランドイメージに沿ったダークテーマのソーシャルアイコンバーを配置します。正方形のアイコンとゆとりのある間隔に加え、ホバー時にはコントラストの高いブルーと拡大エフェクトを適用し、キャンペーンのビジュアルを邪魔せずに存在感のあるデザインに仕上げます。

表示されているカスタマイズ

四角形Custom colorsHover colorsホバー時に拡大

Discord、Reddit、Telegramへのリンクを、3Dスタイルのアイコンを縦に並べたフローティングサイドバーで表示します。ブランドカラーとホバー時の軽快なバウンスアニメーションで、ページをすっきり保ちながらクリックを促します。

表示されているカスタマイズ

3Dスタイル縦型Brand colorsスペースの幅

Jotformで、Webサイトへのアクセスを結果につなげましょう。リード獲得、決済受付、自動返信までを、1つのフォームで実現できます。送信されたデータはすべてJotformインボックスに集約されるため、フォローアップやお気に入りのアプリとの連携もスムーズに行えます。