Flexible Canvas

自由なキャンバス

以前、「美しい余白の裏側にあるもの — Behind the Scenes.」という記事で、ブログ投稿がいかに簡単に組めるかという裏側をお見せしました。

ありがたいことに「どうやって作っているの？」という反響をいただき、今回はその発展編を少しだけ。

実は、ブログの記事だけでなく、Webサイトの顔である「トップページ」や「固定ページ」も、コードを一切触ることなく、直感的に組み替えられる仕組み（システム）を構築しています。

サイトも服を着替えるように、もっと自由に、軽やかに更新できる。 そんな編集画面の裏側を、今日はお見せします。

「作る」から「選んで並べる」へ

トップページのデザインを変更したり、季節に合わせてセクションの順番を入れ替えたりする作業。
通常であれば専門的なコードや複雑な設定が必要ですが、このサイトでは「ブロックを選んで直感的に入力するだけ」の設計にしています。

例えば、トップのメインビジュアル（HEROセクション）。
背景画像やメイン画像を選択し、キャッチコピーのバリエーションをラジオボタンでカチッと選ぶだけ。

レイアウトの崩れを気にすることなく、誰でも一瞬で美しいファーストビューを作り出すことができます。

ドラッグ＆ドロップで、ページの物語を入れ替える

このシステムのもう一つの魅力は、セクション（構成要素）の並び替えです。

「今日は新着ブログを一番上に目立たせたい」
「新商品のシーズンだから、HEROエリアの直後にギャラリーを持ってきたい」

そんな時も、編集画面で「BLOG」やその他のパーツをドラッグ＆ドロップで入れ替えるだけ。
まるでパズルを組み替えるように、サイト全体の「ストーリー（構成）」をその日の気分や目的に合わせて一瞬で変えることができます。

▲ 実際の編集画面。複雑なレイアウトも画像やテキストを入れ替えるだけで編集可能です。

デザインの美しさを保ちながら、更新にかかるストレスをゼロにする。

Webサイトは一度作って終わりではなく、生き物のように日々変化し、育っていくものです。 「ノーコードで自由に扱える仕組み」があらかじめ組み込まれているからこそ、私たちは迷うことなく、常に新鮮な言葉とビジュアルを届け続けることができます。

作り手のクリエイティビティを支える、裏側のとっておきの工夫のお話でした。