CMSを導入したWebサイトで、出力項目によってレイアウトがガタガタになったりしませんか？
デザインではキレイに整ったものが作れたのに、いざCMSを組み込んで、データ入力をした後にページを見ると、データが入力されていない項目が歯抜けになっていたり、一部分だけ殺風景になっていたり、行頭がガタガタになったり・・。
それって実は、ワイヤーフレーム段階の設計が間違っている可能性が高いんです。
しかし、 「設計ミスだった」とはいえ、一度CMSを組み込んだ後にデザインから作り直すのは、相当な工数がかかってしまいます。
そんな失敗をしないために、今回は、CMSを導入したWebサイトで気を付けなければいけないことをご紹介します。
まずはじめに：動的な項目をしっかり理解しよう
まずは、動的な項目（＝CMS上で制御できる項目）の仕様をしっかり把握しましょう。
上記図の①～⑤がCMSで制御できる項目とします。
①大見出し
②画像
③小見出し
④本文テキスト
⑤ボタン
これらの項目が、
・任意項目or必須項目なのか
・画像の場合、サイズは固定or可変なのか
・ボタンや見出しは、非表示の場合、詰める or 空白を開ける どちらなのか？
これらを事前に把握することによって、考慮すべき箇所が変わります。
CMSの仕様が既に決まっている場合、必ず確認しましょう。
もしデザイン段階でそのあたりの制御がまだ未定の場合は、今後の運用も考慮したうえで項目の表示制御を策定することをおすすめします。
制御できる項目をすべて表示したパターンのデザインを作る
CMSで表示できる項目は、すべて表示させたパターンのデザインを作成しましょう。
デザインや設計段階で項目が漏れると、後あとレイアウトを組み替えるには多大な労力がかかったり、デザインのレイアウトが崩れてしまったり、様々な問題が発生します。
画像の表示位置でガタガタを防ぐ
例えば、下記の図のように左側の画像が任意項目だった場合、非表示にすると行頭がガタガタになってしまいます。
▼画像がガタガタの例
大見出しの文頭がガタガタだと格好悪いですし、文章も読みづらいですよね。
この問題を解決するために、２つの方法があります。
画像の位置を変える
画像の位置を右側に移動すると、非表示になっても、ガタガタになりません。
行頭も揃うので、大見出しも読みやすく、画面もスッキリして読めます。
▼画像の位置を変更したパターン
画像が無い場合、「no image」とする
もうコーディングが終わり、システムも組み込んでしまった！など、どうしても画像の位置が変えられないときは、画像が登録されなかった場合、「No image」ダミーの画像を表示させる方法があります。
こうすることで、レイアウトは一定に保たれますが、あまりに画像が少ない記事が多い場合は、「no image」だらけになってしまうため、おすすめしません。
▼no image を使ったパターン
改行でガタガタを防ぐ
ブログなど、日々新しい情報を発信していくコンテンツの場合、「NEW」マークや記事のカテゴリタグなどを付与する場合があります。
タグやアイコンの付与位置にも気を付けないと、下記のようにガタガタになってしまいます。そればかりか、タイトルが２行になってしまい、非常に見苦しいですね。
▼悪い例
表示数が可変のものは、１行に
すべての要素を１行で表示しようとすると、ガタガタになってしまいますので、下記の図のように、要素ごとに行を変えてみました。
日付とNEWマーク、タイトル、カテゴリタグをそれぞれ１行ずつ表示することで、それぞれの項目が非表示になたったり、表示数が変更になったとしても、レイアウトに大きく影響はありません。
最後に
いかがでしたでしょうか？
最近は、WebサイトにCMSを入れる事が当たり前になってきていますので、今までのことを考慮したWebサイトを制作しましょう！
