久しぶりのデザインブログですが、今回は過去にお送りしたウェブサイトで使える汎用的なパーツのデザイン集の続きを上げていきたいと思います。第4回のテーマはフレームということでコンテンツを囲うパーツのデザインをまとめていきたいと思います。

シンプルなボックスよりのデザイン

サイトのデザインに馴染み、コンテンツをしっかりと見せる場合に使えるデザインです。シンプルながらもデザインのポイントになります。

1.シャドー付きボックス型フレーム

最近のトレンドでもある、周囲にうっすらとドロップシャドウがかかったタイプのフレームです。主張しすぎないデザインでギャラリーサイトにもマッチします。

2.太さと色が異なるボーダーを組み合わせたフレーム

太さもしくは色が同じというパターンはCSSで簡単に表現できますが、少し変化をつけると複雑になります。ただその分デザインも作り込んだ印象を与えることができます。

3.コーナーにポイントがついたフレーム

四隅の角にデザインのポイントとなる要素がついたデザインです。よりエリアが際立ち主張の強いデザインになります。CSSでは擬似要素を使いこなすことで表現できます。

特例なコンテンツに使えるフレーム

通常のコンテンツとは少し違いを出したい場合に使えるデザインです。使うシーンは決まってしまいますが、使いどころでは存在感を発揮します。

4.引用コンテンツを示すフレーム

本文オリジナルのコンテンツか引用してきたものかであるかは、著作権の問題上、明確に示しておく必要があります。クォーテーションマークがデザインのポイントです。

5.手書き風吹き出しフレーム

写真やイラストなどのイメージ素材に合わせて使いたいデザインです。CSSで少し工夫するだけで表現できます。

デザイン要素の強いフレーム

デザイン的にインパクトが強く、コンテンツよりもフレームのデザインとして見せたり、訴求を高めたい時に有効です。

6.黒板風デザインのフレーム

黒板をモチーフにしたデザインです。背景とテキストのコントラストが強いので訴求力も期待できます。手書きフォントなどと組み合わせると面白そうですね。

7.デザイン付きボーダーのフレーム

周囲のボーダーにデザインが付いたタイプです。実際にはデザインがついた背景にコンテンツ部分が重なる形になります。無機質になりがちな要素ですがこのようにポップな雰囲気を演出することもできます。

いかがでしょうか、上げてみると結構いろんなデザインができますね。今回もHTMLとCSSで作成したサンプルはこちらに用意しておりますのでご参考に。