CMSを導入したWebサイトのレイアウトがガタガタにならないようにする方法│東京のWeb制作会社のWeb制作の関連コラム

Columnコラム

Webデザイン

CMSを導入したWebサイトのレイアウトがガタガタにならないようにする方法

CMSを導入したWebサイトのレイアウトがガタガタにならないようにする方法

2016/07/22
このエントリーをはてなブックマークに追加

CMSを導入したWebサイトで、出力項目によってレイアウトがガタガタになったりしませんか?

デザインではキレイに整ったものが作れたのに、いざCMSを組み込んで、データ入力をした後にページを見ると、データが入力されていない項目が歯抜けになっていたり、一部分だけ殺風景になっていたり、行頭がガタガタになったり・・。

それって実は、ワイヤーフレーム段階の設計が間違っている可能性が高いんです。
しかし、 「設計ミスだった」とはいえ、一度CMSを組み込んだ後にデザインから作り直すのは、相当な工数がかかってしまいます。

そんな失敗をしないために、今回は、CMSを導入したWebサイトで気を付けなければいけないことをご紹介します。

まずはじめに:動的な項目をしっかり理解しよう

まずは、動的な項目(=CMS上で制御できる項目)の仕様をしっかり把握しましょう。

569033193133b49b2b839dc84645e1ff84a6f179.jpg

上記図の①~⑤がCMSで制御できる項目とします。
①大見出し
②画像
③小見出し
④本文テキスト
⑤ボタン

これらの項目が、
・任意項目or必須項目なのか
・画像の場合、サイズは固定or可変なのか
・ボタンや見出しは、非表示の場合、詰める or 空白を開ける どちらなのか?

これらを事前に把握することによって、考慮すべき箇所が変わります。
CMSの仕様が既に決まっている場合、必ず確認しましょう。

もしデザイン段階でそのあたりの制御がまだ未定の場合は、今後の運用も考慮したうえで項目の表示制御を策定することをおすすめします。

制御できる項目をすべて表示したパターンのデザインを作る

CMSで表示できる項目は、すべて表示させたパターンのデザインを作成しましょう。
デザインや設計段階で項目が漏れると、後あとレイアウトを組み替えるには多大な労力がかかったり、デザインのレイアウトが崩れてしまったり、様々な問題が発生します。

画像の表示位置でガタガタを防ぐ

例えば、下記の図のように左側の画像が任意項目だった場合、非表示にすると行頭がガタガタになってしまいます。


▼画像がガタガタの例

kazumi_cms02.jpg

大見出しの文頭がガタガタだと格好悪いですし、文章も読みづらいですよね。
この問題を解決するために、2つの方法があります。

画像の位置を変える

画像の位置を右側に移動すると、非表示になっても、ガタガタになりません。
行頭も揃うので、大見出しも読みやすく、画面もスッキリして読めます。

▼画像の位置を変更したパターン

kazumi_cms03.jpg

画像が無い場合、「no image」とする

もうコーディングが終わり、システムも組み込んでしまった!など、どうしても画像の位置が変えられないときは、画像が登録されなかった場合、「No image」ダミーの画像を表示させる方法があります。

こうすることで、レイアウトは一定に保たれますが、あまりに画像が少ない記事が多い場合は、「no image」だらけになってしまうため、おすすめしません。

▼no image を使ったパターン

kazumi_cms04.jpg

改行でガタガタを防ぐ

ブログなど、日々新しい情報を発信していくコンテンツの場合、「NEW」マークや記事のカテゴリタグなどを付与する場合があります。

タグやアイコンの付与位置にも気を付けないと、下記のようにガタガタになってしまいます。そればかりか、タイトルが2行になってしまい、非常に見苦しいですね。

▼悪い例

kazumi_cms05.jpg

表示数が可変のものは、1行に

すべての要素を1行で表示しようとすると、ガタガタになってしまいますので、下記の図のように、要素ごとに行を変えてみました。

日付とNEWマーク、タイトル、カテゴリタグをそれぞれ1行ずつ表示することで、それぞれの項目が非表示になたったり、表示数が変更になったとしても、レイアウトに大きく影響はありません。

kazumi_cms06.jpg

最後に

いかがでしたでしょうか?

最近は、WebサイトにCMSを入れる事が当たり前になってきていますので、今までのことを考慮したWebサイトを制作しましょう!

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

関連コラム

Web制作初心者必見!見やすいレイアウト構造

text_totop