Pulpfingers

Webデザイン３つの良いとこ : 3 Good Point!

1. 切り絵風Webデザイン
2. カクカクしたボーダーで囲む
3. 切り絵風を各所にデザイン。うまい。

私はWebデザインのココを見た！

• Tweet
• 

切り絵風がイカしてるWebデザインをレビュー。上からかぶせたり、本当に切り絵で画像を作っていたりと、切り絵なWebサイトはこう作るのかと参考になるWebデザインです。

切り絵風なサイト全体枠

サイトは全体がカクカクしたボーダーで囲まれています。今までもサイト全体をボーダーで囲んだWebデザインを観て来ましたが、このサイトのようにカクカクした切り絵のようにサイトが囲まれているWebデザインは初めて観ました。

実装方法は以下のように行なっています。

body {
background: url(images/right-border.png) repeat-y top right,
 url(images/left-border.png) repeat-y top left,
 url(images/background.png) repeat;
}

複数のbackgroundをサイトのトップ要素に当てることで実現しています。

サイトトップ要素であるbodyには上記のようにcssが設定されています。通常であればborderを設定すればすむことですが、カクカク感を出すために画像をあてて表現しているんですね。

左右と、メインの画像をここでは当てて、top_borderとbottom_borderは別に空要素を作って、position:fixed指定をして作られています。なるほどcssをうまく利用して切り絵風にサイト全体を囲っていたのですね。

コンタクトフォームが一枚絵

珍しい。コンタクトフォームが一枚絵で配置されています。上の画像はサイトで実際に使用されている画像。この画像をコンタクトフォームの一番上の要素のbackgroundに当てています。あとはコンタクトフォーム各所の高さや幅を合わせれば良いだけ。

切り絵風Webデザインは、本当に切り絵が作られている

切り絵風で綺麗だな、と思わせる箇所が沢山ありますね。フッターだったり、人物紹介だったり。

これ本当に切り絵の画像を作って、それを配置することで実現しています。

例えば上図はフッタートップの実際に使われている画像。世界観がうまく現れています。

これらは全てpngの透明処理をうまく利用して、Webデザインに組み込んでいます。特徴を捉えた画像処理が必要とされますね。

切り絵にするとサイト全体が可愛く表現されることにも今回改めて気づきました。切り絵風Webデザイン。勉強になりました。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•