悩み解決事例

エディターを使わず自由なレイアウトでコンテンツを更新したい

[全業種]

CMSを使うとデザインが統一できるのですが、似たようなページばかりになってしまいます。同じページの中でも、表現のバリエーションを増やしたいと思っているのですが、コンテンツの内容は都度変わるので、固定のフォーマットにするのは難しいと思っています。また、テンプレートを沢山開発して余分なコストをかけるのは避けたいです。サイト更新はHTMLの知識がないユーザーも行う事があるので、エディターを使ってHTMLを書く運用は難しいと考えています。エディターを使わずにサイトのデザインを統一しながら、自由なレイアウトでサイトを更新出来ないでしょうか？

その悩み、解決します

コンテンツ更新時に
自由にレイアウトを変更できるパーツを
好きな場所に配置できるようにします

基本構成のサンプルです。このサンプルでは、1行に最大4列入ります。
各列に、表示幅、見出し（内容、種類、位置）、本文（内容、位置）、画像（画像幅、位置）などが指定できるようになっていて、4列全体にかかる見出しが入力できるようになっています。すべての情報が入った状態です。

一般的なコンテンツの内容は、見出し、画像、本文、リンク程度です。これらのデザインや色、位置をレイアウトして変更したいと考えますが、情報として含まれるのはこれくらいですので、コンテンツの更新時に自由に変更できるパーツとして用意しておきます。

見出しの入力項目です。

各列の入力項目です。

最大4列分の情報を入れることが出来ます。

入力した情報とレイアウト設定の表示サンプルです。

画像の幅と位置を変えてみました。
最初の列を半分の幅にして、残り二つを各1/4幅。最後は非表示にしています。
見出しのタイプをそれぞれ変えて、見出し、本文、リンクの位置を左右中央で分けています。

これまでの設定を使った表示のサンプルです。

この方法は Bootstrap というcssフレームワークを利用しているためレスポンシブデザインに対応しています。スマートフォンで見た場合、1列が縦に表示されるので、一度の登録で、PC、スマホ両方に利用することが出来ます。

ワンポイント・アドバイス

基本的に一般的なCMSは
横に並んだレイアウトは不得手です。

基本的に、一般的なCMSは横のレイアウトは不得手です。それは大抵の製品はエディターを使ってコンテンツを更新しますが、横に並べる際は、レイアウト用のHTMLを記述する必要があるためです。

レスポンシブデザインが一般的になった今、レイアウト用のHTMLも非常に複雑になってしまい、専門知識が無いユーザーがそれらのHTMLを記述することは困難です。それを回避するため、固定のフォーマットにして各カラム用の入力項目を用意したりしますが、表現力に限界が来てしまいます。

この方法はパーツ単位にレイアウトをボタンの押下による設定で制御できて、本文にはエディターを使ってHTMLを書くことできますので、知識の無い方でもレイアウトを自由に設定して、自由にコンテンツを書くことできます。