Web関連

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

0

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制作初心者必見!見やすいレイアウト構造

0

健康診断を行う理由と未来前のページ

SiriとOK Googleはどっちが優秀か、ティファナでやってみた。(OK Google編)次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    モバイルファーストで、ターゲットユーザーにあったWebサイトを作成しよう!

    平成が終わり新しい元号に変わるまで、数えられる程になってきました。…

  2. Web関連

    動画を長く見てもらうために、例をもとに考える。

    最近、スマートフォンを買い換えようと思い、auの製品ラインナップのペー…

  3. Web関連

    採用サイトで学生が1番気になっているところとは!?

    今年から8月以降が採用の選考開始になりましたね!最近はどこの会社も採…

  4. AI関連

    気付いてますか?ビジネスで愛されるタブレット端末

    世の中はタブレット端末で溢れている今や当たり前になったタブレット端…

  5. Web関連

    ネットゲームから学ぶゲーミフィケーション

    こんにちは!ゲーム大好きなデザイナー熊倉です。さてみなさんは、インター…

  6. Web関連

    スマホ広告を出す前に押さえておきたい3つのポイント

    こんにちは、コンサルの横山です。「歩きスマホ」での事故が年々増えてる…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?
  2. AI関連

    あらゆる業界の人材不足解消にAIは「特効」となる
  3. Web関連

    Web広告のバナーは「つかみ」のキャッチコピーで決まる!?
  4. Web関連

    Webにもつながる、オタク御用達のニュースアプリを使ってみた。
  5. AI関連

    人工知能がレコメンドを加速する、AIマッチングサービスをご紹介
PAGE TOP