いろいろなウェブサイトで使える汎用的なフレーム・ボックスデザイン集
最終更新日: Update!!
久しぶりのデザインブログですが、今回は過去にお送りしたウェブサイトで使える汎用的なパーツのデザイン集の続きを上げていきたいと思います。第4回のテーマはフレームということでコンテンツを囲うパーツのデザインをまとめていきたいと思います。
最近のトレンドでもある、周囲にうっすらとドロップシャドウがかかったタイプのフレームです。主張しすぎないデザインでギャラリーサイトにもマッチします。
2.太さと色が異なるボーダーを組み合わせたフレーム
太さもしくは色が同じというパターンはCSSで簡単に表現できますが、少し変化をつけると複雑になります。ただその分デザインも作り込んだ印象を与えることができます。
3.コーナーにポイントがついたフレーム
四隅の角にデザインのポイントとなる要素がついたデザインです。よりエリアが際立ち主張の強いデザインになります。CSSでは擬似要素を使いこなすことで表現できます。
本文オリジナルのコンテンツか引用してきたものかであるかは、著作権の問題上、明確に示しておく必要があります。クォーテーションマークがデザインのポイントです。
5.手書き風吹き出しフレーム
写真やイラストなどのイメージ素材に合わせて使いたいデザインです。CSSで少し工夫するだけで表現できます。
黒板をモチーフにしたデザインです。背景とテキストのコントラストが強いので訴求力も期待できます。手書きフォントなどと組み合わせると面白そうですね。
7.デザイン付きボーダーのフレーム
周囲のボーダーにデザインが付いたタイプです。実際にはデザインがついた背景にコンテンツ部分が重なる形になります。無機質になりがちな要素ですがこのようにポップな雰囲気を演出することもできます。
いかがでしょうか、上げてみると結構いろんなデザインができますね。今回もHTMLとCSSで作成したサンプルはこちらに用意しておりますのでご参考に。
シンプルなボックスよりのデザイン
サイトのデザインに馴染み、コンテンツをしっかりと見せる場合に使えるデザインです。シンプルながらもデザインのポイントになります。 1.シャドー付きボックス型フレーム


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

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

sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories