初心者向け講座早見表
前回のWeb系コラムではWebサイトをレイアウトする際の情報の優先順位についてお話しました。
今回は、ギャラリーのように写真をたくさん見せるレイアウトについて、具体例を見ていきたいと思います。
cssにおけるfloatというプロパティを使うと、写真や文章等の情報を簡単に横方向に並べることができます。
ネットショップやギャラリーなど、多くの写真を使用するWebサイトでは、様々な色が使用されている写真を目立たせるため、通常はボタンなどの色をあえて目立たせず、背景の色も白や黒などの無彩色を選択することが一般的です。
背景色に赤色や青色などの色を使用すると、写真自体の色が背景色の影響を受けて、別の色に見えてしまうこと現象が発生する可能性が高くなります。ですので、特に商品画像などでは実物の色とディスプレイ上の色を極力近くさせるために、白や灰色や黒などの、無彩色を背景色として選択すると良いです。
例えば上記のサイトでは、
白背景を活用することで商品の色が目立つデザインになっています。
黒い背景色は、写真家やデザイナーのポートフォリオなどによく使われる背景です。
背景が黒色なので、写真を明るく見せることができます。
文字の色は灰色を使うことが多いです。白色を使うとコントラストが強すぎてしまうと感じられることがあるためです。
最後に、写真に重ねられているアイコンについて見てみましょう。
上記のサイトでは、商品画像自体が白背景でトリミングされており、その上に矢印のアイコンを重ねて表示するデザインを使用しています。
このようにデザインすることで、商品背景の白色とのコントラストができ、商品画像と矢印の双方を目立たせることが可能となります。
この背景は濃い目の茶色で、無彩色ではありません。しかし、白色で商品画像との間に細枠が設定されています。これにより、茶色自体の効果を受けにくくすると同時に、矢印アイコンや商品画像とのコントラストをつけることに成功しています。
以上、多くの写真を効果的に表示するレイアウトについて、3つの例をご紹介いたしました。デザイン時の参考としていただければ幸いです。
（担当：斉藤 万幾子）
