WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
こんな疑問にお答えしていきます。
サイトのレイアウトをCSSで調整すると使いやすさが向上するか検証
本記事の内容
- CSS（カスタムシート）でウェブサイトの使いやすさをもっと向上させたい
- ウェブサイトのレイアウト崩れを改善したらページのデザインは見やすくなる？
- 文字（テキスト）や画像（イメージ）の位置はCSSを使えば調整できるのかな
SEOに強いウェブサイトは例外なく「htmlマークアップ構造が完璧」です。マークアップとは「html言語」を記述する際に見出し・本文・メニューなどを最適なタグを使ってコーディングする作業を言います。
htmlマークアップは各掲載するコンテンツの役割を決める行為で、CSSはコンテンツ（見出し・本文・メニューなど）の見た目を変更していくための言語です。CSSの正式な名称はカスケーディング・スタイルシート。CSSはコンテンツの体裁やサイズを整えるために使われます。
しかし、CSSもマークアップにも明確な答えはありません。全ページで見出しタグ（h1）を何度も使ったり、役割がないタグ（divなど）を多用していなければ構造的に見れば正解です。最終的には検索エンジンのクローラーが判断するので回遊しやすいhtml構造なら上位表示されやすくなります。
レイアウト調整を加えた例
では、わかりやすいようにレイアウトが少し崩れたデザインをご紹介いたします。下記は記事タイトルとサムネイル画像の隙間が空きすぎている例です。下側にある記事のタイトルが上側に並ぶ記事のサムネイル画像と近すぎるため『タイトルと画像の関係性』がぱっと見で判断できませんよね。
カンタンに言えば「どのサムネイル画像がどのタイトルと紐づいているか」が一瞬見ただけではわかりません。
変更前のレイアウト
では実際にレイアウトをカスタムしていきます。具体的には「記事タイトルとサムネイル画像の距離を適切にとり、上側３つの記事と下側３つの記事の隙間を設ける」という部分的なバランス修正を行います。
サイト運営では「タイトルが１行〜２行の両方になる可能性」も考えないといけません。つまり、単純に『タイトルとサムネイル画像と近づけるだけではNG』です。今後の運営を考慮する必要があります。
下記のキャプチャ画像が実際にCSSでレイアウト調整を加えた後のデザインです。タイトルに対するサムネイルという位置付けがバラバラだったのでレイアウトに手を加えて全体のバランスをまとめました。
変更後のレイアウト
念のため横に並べて見比べてみましょう。
調整後は「タイトルとサムネイルに一体感」が出ましたね。些細ですが、重要です。
具体的には共通化されているタイトルのCSSの高さ（下方向のマージン）を抑えています。前任者のCSSでタイトルに縦幅（要素のハイト）の設定をしている場合もあるので必要に応じて上書きしていけばOK。
記事タイトルとサムネイル画像の隙間をうまくコントロールできたら、サムネイル画像周りのボーダー（線）を調整していくという流れです。サムネイル画像に下方向のパディングで余白を追加。そして最後に記事タイトルの上側にもパディングを与えて「レイアウト詰まり」を微調整しました。
まとめ
カスタムシートを使うとレイアウトを自由自在に組み直せます。ただ、共通化しつながら要素が複数に増えても影響を受けない「可変レイアウト」の工夫までも必要となってきます。また、先述した通り、タイトルが１行と２行の両方が入る可能性も考えたうえで可変的に柔軟なCSSを組み上げる考慮も忘れてはいけません。
さらにワードプレスの無料テーマなどCSSの実装状況によってはレイアウトが中途半端になっている場合もあります。また「記事タイトルが３行になった場合も考慮する」など想定する範囲によっても最適な方法は異なってきます。たとえばjavascriptを使って横一列の全記事の高さを同時制御したり、スタイルシートのみで柔軟に制御する仕様など実装レベルは担当者の技術力（デザインスキル）に左右されるはずです。
ちなみに有料テーマでも「h1（見出し）デザイン」が抜けていたり、h3だけデザインがないなどさまざま。もし足りていないデザインがあれば都度CSSを追加していきましょう。当チームでは追記用のCSSを記述して納品することも可能です。お困りであればまずはお気軽にご相談くださいませ。
補足
スクリーンショット先がなくなっており参照元を記述できておりません。場合によってはサイト側がリニューアルされた可能性も考えられるので本記事ではレイアウトの参考例としてご一読くださいませ。もし掲載に関する情報等があればフォームからご連絡をいただけますと幸いです。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
