デザインパーツの拡充を行いました
2024年9月3日
いつも弊社サービス「ferret One」をご利用いただき、ありがとうございます。
このリリースノートでは、デザインパーツの拡充についてご紹介します。
今期はCMSのデザインを進化させていきます
今回のリリース内容
サイト編集・LP編集で使える新しいパーツを、12個リリースしました。
これまでだとCSSやJavascriptを調整しないと表現できなかったデザインや動きを、ノーコードで構築できるようになりました。
リリースされたパーツ一覧
単体パーツ
①色の濃淡が自動で変化する「グラデーションボタン」
![](https://ferret-one.akamaized.net/resized_images/66d157792f4b7f2eaf769d03/original.{"image_content_type"=>"png"}?utime=1724995449)
＜パーツが追加された場所＞
単体パーツ > ボタン（その他） > グラデーションボタン
＜おすすめの使い方＞
CVに繋げるために、ページの中で目立たせたいCTAとして活用するのがおすすめ。
＜注意点＞
ボタンのメインカラーの透明度を変化させる形でグラデーションを表現しています。そのため、元の色が薄いと変化がわかりづらくなります。
また、色の変化はゆっくりとした動きですが、1ページに多用すると煩わしく見える可能性もあります。
②ボタンから矢印が独立＋ホバーで動く「矢印ボタン」
＜パーツが追加された場所＞
単体パーツ > ボタン（その他） > 矢印ボタン
＜おすすめの使い方＞
下層ページへの遷移に、デザイン性のあるボタンを配置したい時
＜注意点＞
丸い部分の背景色は、テキストのフォントカラーと連動します
③記事リストを横スクロールできる「記事リスト スクロールつき」
＜パーツが追加された場所＞
単体パーツ > ボタン（その他） > 矢印ボタン
＜メリット＞
画面の横幅を有効活用し、縦方向のスクロールを削減、ページのバランスを保つことができます。事例一覧やブログ一覧などでおすすめです。
＜注意点＞
カードの高さをバランス良く揃えるため、中の記事リストには行制限がかかっています。
④サービス導入の流れの説明にピッタリ！「フローテーブル」
![](https://ferret-one.akamaized.net/resized_images/66d1b8ee42ebbc1099e1348e/original.{"image_content_type"=>"png"}?utime=1725020398)
＜パーツが追加された場所＞
単体パーツ > その他 > フローテーブル
＜おすすめの使い方＞
サービス導入方法や商談フローなど、ステップごとに何をするのかを一覧化させたい時に
＜注意点＞
テキストが多い場合、全体の幅が横に広がって読みづらくなります。
文字数を絞ったり、細かく改行を入れるなどの工夫が重要です。
⑤シンプルな表の作成がかんたんに！「表 デザイン1」
＜パーツが追加された場所＞
単体パーツ > テキスト > 表デザイン1
＜おすすめの使い方＞
シンプルな表をつくりたいときに便利です。
＜注意点＞
通常機能の中で、枠線のカラー・背景カラー・テキストカラーが変更可能です。
複合パーツ
⑥ホバーすると文字が浮かび上がるボックスリンク「エフェクト付き1」
バナーへのエフェクトとしても使えます
＜パーツが追加された場所＞
単体パーツ > ボックスリンク > エフェクト付き1
＜おすすめの使い方＞
・人の人名＋顔写真を使った訴求をしたいとき
・バナー形式のCTA
⑦ホバーすると背景画像がズームアップするボックスリンク「エフェクト付き2」
＜パーツが追加された場所＞
単体パーツ > ボックスリンク > エフェクト付き2
＜おすすめの使い方＞
ボタンより優先度高い導線を置きたい時（ボタンに比べてリンクエリアが広いため）
＜メリット＞
ウェブサイトに動的な要素を追加し、より洗練された印象を与える効果が期待できる
⑧ホバーすると背景色・テキストカラーが変化するボックスリンク「エフェクト付き3」
＜パーツが追加された場所＞
単体パーツ > ボックスリンク > エフェクト付き3
＜おすすめの使い方＞
他に優先して訴求させたいコンテンツをがある場合、それを邪魔しない、「一歩引いたボックスリンク」として使うことがおすすめです。
＜メリット＞
動きが出る一方で、ホバーしない限り自ら主張することもないため、「一歩引いたボックスリンク」として使える
⑨訴求ポイントにアイコンを添えて伝えられる「アイコン+テキスト」
＜パーツが追加された場所＞
単体パーツ > テキスト > アイコン+テキスト
＜おすすめの使い方＞
「こういう課題はありませんか？」や「サービス導入すると得られるメリット3つ」など、端的に分かりやすく説明したいセクションで使うのがおすすめです！
＜おすすめポイント＞
アイコン部分は、今年追加された「アイコン」パーツの100種類以上のフリー素材から選べるので、非デザイナーでも様々な表現を広げられます！
セクションパーツ
⑩行カラムの中央揃え＆幅固定がかんたんに！「サービス詳細3」
＜パーツが追加された場所＞
セクションパーツ > 商品・サービス > サービス詳細3
＜おすすめの使い方＞
希望のカラム数では、必要な情報の表示がピッタリ収まらないとき
＜おすすめポイント＞
例えば左のような「上3項目・下2項目」の表示をしたいとき、これまでの仕様だと「下段を2カラムにする（幅が均等にならない）」「下段を3カラムにする（左に詰まってしまう）」ため、見栄え良い実装がCSSを書かないと困難でした。これをノーコードで実現できるようになります。
ご利用いただけるお客様
- 2023年4月以降にご契約いただいたお客様
- CMSのアップデートを実施していただいているお客様
利用可否を確認したい場合は、管理画面より以下をご確認いただくか、こちらからお問合せください。
ウェビナーのご案内
詳しく聞きたい！という方に向けてウェビナーもご用意しております。
8月にリリースされた「ロゴスクロール」についてもセットで解説します。複数回開催しますので、ご興味ある方はぜひご参加ください。
まとめ
今回はCMSの今後のアップデート予定とデザインパーツの拡充についてご紹介しました。
今後も使いやすいferret Oneを目指して参りますので、引き続きどうぞよろしくお願いいたします。
