CMSにデジタルマーケティング機能を統合。ライトワイヤード

CMS 悩み解決事例 | エディターを使わず自由なレイアウトでコンテンツを更新したい

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

[全業種]

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

その悩み、解決します

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

基本構成のサンプルです。このサンプルでは、1行に最大4列入ります。
各列に、表示幅、見出し(内容、種類、位置)、本文(内容、位置)、画像(画像幅、位置)などが指定できるようになっていて、4列全体にかかる見出しが入力できるようになっています。すべての情報が入った状態です。
一般的なコンテンツの内容は、見出し、画像、本文、リンク程度です。これらのデザインや色、位置をレイアウトして変更したいと考えますが、情報として含まれるのはこれくらいですので、コンテンツの更新時に自由に変更できるパーツとして用意しておきます。

見出しの入力項目です。

各列の入力項目です。

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

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

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

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

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

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

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

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

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

今、あなたがご覧になっているこのサイトも、この方法で更新されています

一見複雑そうに見えるかも知れない、あなたが今見ているこのサイトもほとんどのページがこの方法で更新されています。ページを作成する際にHTMLを編集することはほぼしていません。
ご不明な点はございませんか?

お気軽にお問合せください