STUDIO

ファーストビューで何を見せているか

左に「理想を叶えるWebサイトを、最速で公開。」という一文、右にはSTUDIOで実際に作られたサイトのサムネイルを斜めに敷き詰めたモザイクが置かれています。文字で機能を説明するのではなく、「このツールで作るとこういうものができる」を作例そのもので見せる構成です。ロゴのすぐ下に「ノーコードCMS 国内利用数No.1」のバッジ、コピーの下に「無料ではじめる」「製品資料をダウンロード」の2つのボタンが並びます。

発注者が持ち帰れる考え方

• 成果物を見せるのが最短の説明になる。制作会社・士業・工務店など「何ができるか」を言葉で説明しづらい業種ほど、実例を主役にしたファーストビューが効きます。
• CTAは2段構えにする。「無料ではじめる（今すぐ動く人）」と「資料をダウンロード（検討中の人）」を並べることで、温度差のある訪問者を取りこぼしません。BtoBサイトで最も再現しやすい工夫です。
• 装飾を減らすほど、写真とタイポグラフィの質が問われる。モノクロ基調・アクセントカラー控えめという構成は、素材の質が低いと一気に安っぽく見えます。ミニマルなデザインは「安上がり」ではありません。

制作面のメモ

このサイト自体がSTUDIOで制作されており、プロダクトの自由度をサイトそのもので証明する形になっています。スクロールに合わせた要素の出現やホバー時の微細な動きは入っていますが、いずれも読み進める邪魔をしない範囲に抑えられています。アニメーションを「入れるか入れないか」ではなく「どこまで抑えるか」で考えると、この水準に近づきます。

同じSaaS・ITの分類ではSmartHRやカオナビも掲載しています。