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

関連記事

  1. Web関連

    医療出版業界のWebコンバージョンアップ戦略

    ティファナは、業種を絞らず様々なクライアントとお付き合いをさせて頂いて…

  2. Web関連

    広告費をムダにしないために学ぶべき3つのこと

    今回は、費用対効果の高いネット広告について全3回に…

  3. SNS関連

    SNSマーケティング

    突然ですが、ラピュタ崩壊の呪文「バルス」の瞬間ツイートで世界新記録を更…

  4. Web関連

    検証の精度アップ&時間短縮に使える!便利な無料検証ツールまとめ

    Webサイトやドキュメントの検証って、淡々と同じ作業を繰り返したり、細…

  5. Web関連

    【ホームページ制作】薬事法NG? 気を付けたい化粧品の広告表現

    この冬、乾燥による肌荒れが悪化した経験…

  6. Web関連

    機械学習で進化した将棋界

    今回は機械学習について、とても興味深い事例がありましたので、ご紹介した…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ホームページの更新メンテナンスに役立つPDCAサイクルの基本について
  2. Web関連

    実例から学ぶ顧客ロイヤリティ向上のコツ
  3. Web関連

    遊びながらスキルアップ?楽しくデザインのことを学ぶ!
  4. AI関連

    AIサービスの登場により、さまざまな分野で人間は仕事を失ってしまうのか?
  5. Web関連

    動画制作のちょっとしたコツ
PAGE TOP