こんにちは。リーン・サイト運営プラットフォーム「KARTE Blocks」のプロダクトマネージャーを務めている大東です。

KARTE Blocksは、タグを貼るだけでサイトのあらゆる要素をすぐに改修、素早く仮説検証を重ねて継続的なパフォーマンス向上を実現するプロダクトです。サイトをどこでも自由に更新、即反映することが可能で、思いついたアイデアをすぐに試すことができます。

今回はページエディター機能の改修を紹介します。デバイスのスクリーン幅やブラウザの解像度に合わせて最適な画像を表示する「レスポンシブイメージ」の設定が、さらに直感的に実施できるようになりました👏

複雑なレスポンシブイメージの設定も、コード編集いらず

レスポンシブイメージの設定方法は複数あり、それぞれの仕様や制限を理解することはハードルが少し高いかもしれません。

レスポンシブイメージの設定には以下の情報が必要です。 特に既存の画像要素から新しく設定するには、KARTE BlocksでもHTMLコードを編集して対応する必要がありました。

1. 最適な画像を表示する基準・条件
2. 画像候補

今回の改修で、レスポンシブイメージの設定もHTMLコード編集なく、簡単に実現できるようになりました。

1. レスポンシブイメージが設定済みの場合、その内容をGUI上に表示・そのまま編集可能に
2. 未設定の場合、簡単にレスポンシブイメージの設定へ切り替えが可能に
3. 設定方法に誤りがあれば、アラートでお知らせ

レスポンシブイメージを正しく設定することで、エンドユーザーのサイト利用体験も向上するため、ぜひ積極的にご活用ください🚀

既存の画像要素から、レスポンシブ画像を設定していく流れです

もし、不適切な設定内容があれば、アラートが出るようになっています。

※ 詳細な利用方法は、KARTE Blocksのサポートサイト記事をご覧ください。

モダンなpictureタグでの設定にも対応

レスポンシブイメージの設定で、近年主流になってきているのがpictureタグを使った設定です。従来の画像要素（imgタグ）とは異なるHTML構造のため、設定方法も異なります。KARTE Blocksでの編集時にも同様にHTMLコードの編集が必要でした。

今回の改修でpictureタグを使ったレスポンシブイメージの編集もさらに直感的に。 画像候補が一目でわかり、画像の出し分けを行うための画面幅の条件（メディア条件）なども対応関係を確認しながらサクサク編集できます🚗

優先的に判定して表示する画像順に並んでおり、ドラッグ&ドロップで並び替えることができます。

KARTE Blocksでは、今後もサイト運営・改善をもっと直感的に・スピーディに進めていただくため、プロダクト改善を進めていきます😊