2011年1月18日火曜日

メインコンテンツ内のテキストと画像の配置パターン

スポンサーリンク

メインコンテンツ内のテキストと画像の配置パターンについて。

テキストと画像が配置されるメインコンテンツ。
配置のパターンは意外と少ないものです。
今回はそのパターンを挙げてみます。


配置の基本


結局の所、テキストと画像が配置可能な場所は決まっています。
どちらかがどちらかの上下か左右へ配置するしかありません。

魅力的なページにする為には、細部に工夫をして定型的なデザインに見えないようにします。
具体的には画像を縦横ではなく斜めに入れたり、はみ出させたり。

結果として動きを感じさせる配置を行います。

とはいえ、HTML上の基本はやはり四角形で構成された単純な配置です。

配置パターン


以下に配置パターンを。
テキストに画像1つを想定しています。

パターン1

  • テキストと画像を上下に配置



ブログでは基本のパターン。
画像を大きく見せる事ができ、画像主体のイメージにもできます。

表示だけを考えるならばHTMLの順序のみで制御できるので、CSSを書く手間がなく非常に楽。
また、レイアウト崩れもまず心配ないでしょう。

パターン2

  • テキストと画像を左右に配置



WEBサイトでは時々利用されますが、ブログではあまり見ません。
画像もテキストも小さくなる反面、それぞれの関係性が明解で利用価値が高いといえます。

HTMLのみで表現しようとするとテーブルレイアウト(tableタグを使ったマークアップ)が必要。
ただし、文章量が調節できるならalignでもなんとかできます。

CSSを使う場合はfloatを使うか、positionかmarginを使います。
ブラウザ間の挙動が違う場合もあり、手法の選択と数値設定を慎重に行う必要があります。

パターン3

  • 画像をテキストの斜め上に配置



WEBサイトでもブログでも時々見かけます。
画像サイズにもよりますが、ブログの場合は画像を挿入するとこの形になる事もあります。

画像は小さくなり、小さな挿絵や図のような表現になります。
テキスト主体であれば、文脈の流れを断たずにレイアウトできるメリットがあります。

HTMLであればalign。
CSSであればfloatを使う事で表現できます。

パターン4

  • テキストを画像で挟む



こちらはおまけで変則的パターン。
WEBサイトやブログでもほとんど見かけません。

テキストも画像も細くなり、実用性はとても低い。
しかし、デザイン的には他との違いを演出でき、左右の画像の幅に変化を持たせる事で動きのあるレイアウトが出来るでしょう。

3カラムレイアウトなのでtableで組むか、floatやmarginやpositionを駆使しなければなりません。
単純ではなくなるので、作業的にはあまりお勧めできません。

結び


主に基本的なレイアウトのパターンを挙げてみました。
前述したように、基本パターンから派生させたり位置や画像自体に手を加える事でデザインに幅が生まれます。

逆に基本パターンだけでレイアウトを組めば、作業がはかどるはずです。
モジュール的に扱いやすく、多人数作業時のコーディング効率も上がるでしょう。

いろいろと変化をつけたくなりますが、極度に奇をてらったレイアウトは避けた方が無難です。
ユーザーがテキストなり画像なりで内容を把握できなればいけないのですから。
内容の理解を阻害するのでは、WEBサイトに期待している目的の達成が難しくなります。

補足

今回の挿絵もiPadのAdobe Ideasでつくりましたが、イメージどうりに出来ませんでした...。
指で細い線は非常に書きづらい。
練習で勘を養うしか無いようです。

スポンサーリンク

0 件のコメント :

コメントを投稿