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

関連記事

  1. Web関連

    ユーザーの希望に応える応えるECサイト

    市場規模の広がるEC市場皆さんはECサイトを利用したことはありますか…

  2. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコラム」

    ・コラムをたくさん書いて新規ユーザーを獲得したい・でも、書く時間が…

  3. Web関連

    なぜ無料なのか理解出来ない! 3DCGソフトblender

    ほんとにびっくりなんですが、恐ろしく多機能で全部入りの3DCGソフトb…

  4. Web関連

    WordPressをCMSとして活用するためのプラグイン Custom Post Type UI の…

    こんにちは! 先週「宇宙戦艦ヤマト2199 星巡る方舟」を見てきたSE…

  5. Web関連

    顔までも分かる!?DNAの可能性とは。

    はじめまして!映画が好きなコンサルの瀧川です。唐突ですが今回はDNA…

  6. Web関連

    ロボットも好みはやっぱりスリムでイケメン!

    こんにちはこの記事のタイトルと外見が似ても似つかないコーダーの須澤です…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    キャッシュレスの時代に備えて、キャッシュレス決済について知ろう!
  2. Web関連

    これぞクールジャパン!アニメビジネスの成功例をまとめてみた!
  3. DX関連

    DX(デジタルトランスフォーメーション)・デジタルシフトへの対応が必須となる理由…
  4. Web関連

    広告によるストレスを減らすネイティブ広告
  5. Web関連

    Kindle Paperwhiteを買ったので自慢させてくださ い。
PAGE TOP