ペーパーデザインのWEBサイトを作るときに見るべきまとめ
2009年07月09日 公開
前回はフォームに焦点を合わせましたが、今回はサイトデザインの中でも質感がある紙を使ったデザインにのみ焦点を合わせてみることにします。
流れ的には
- インスピレーション43サイト
- 包装紙・和紙の無料テクスチャ
- Photoshopブラシ等
- CSS
- ペーパーデザインに合いそうな手書き風アイコン
- ペーパーデザインに合いそうな手書き風フォント
ちょっとボリュームがでかくなり過ぎてしまったので重いですが、まぁいつものネタ帳流ということで勘弁してください・・・。
ちょっとだけ急募
本当は昔CSSチュートリアルでペーパーデザインのやつがあったのですが、ブクマし忘れてたようでみつからなくてスイマセン・・・。もし、ご存知の方がいましたら追加したいので教えていただけると幸いです。また、そんな記事今から作ってやるよ！とか、昔書いたよ！っていう熱い方がいましたら是非是非お知らせ願います。すぐに追加させて頂きたいと思います。（クオリティ審査はあります）
※追記
Photoshopの欄で2件チュートリアルを追加（Twitter :2up_d氏）
とりあえずデザインのインスピレーションをガツンといっときましょう。
#1
こちら上部のフラッシュがクールですね。
#2
あらゆるパーツが微妙に動いていますね。
#3
レトロなミシンがまた良い味出してます。4角のポイントも見ておくと良いです。
#4
紙の質感がよくわかります。というか写真ですねこれ。
#5
完全Flash。コメントカードがひっくり返るとか色々と楽しみはありますね。
#6
メニュー部の荒れた紙の配置が結構素敵です。
#7
紙よりも着目すべきはソーシャルブックマークボタンの配置の仕方が素敵すぎるｗ
#8
質感のある紙デザイン。
#9
鉛筆で書かれたようなボードがいい感じ。
#10
肉厚のあるボリューム感たっぷりな紙質。
#11
手帳のようなスタイル。フッターのアバウトの表現がなんかかっこよすぎ。
#12
「お勧めデザイン」濃厚なデザイン。イラストを白カットして影つけるだけでも質感が得られるんだなぁと感心。フッターのラフ絵も好き。
#13
背景が完全にストライプ入りの紙。そこに手帳がのっかてるような感じ。
#14
凄く良い。Flashサイトですけど、比較的わかり易く、質感が伝わります。
#15
ヘッダーに濃厚な古紙を使用している。下はさっぱりしているけど、ヘッターから吸い込まれる力がありますね。
#16
アンティークな紙デザイン。背景がよりいっそう雰囲気をかもし出してくれてますね。
#17
ちょっと硬質なイメージ。白にするといっそうそう感じますね。フッターの重さ加減も素敵。あといつも思うのがフォームを鉛筆で書いたようにするとわかりにくいですよね。
#18
セロテープを沢山つかったデザイン。シンプルで個人的には凄く好き。
#19
かわいくてシンプルなデザイン。
#20
メニュー項目が紙で手書き風で目を引きます。というか手書きかな。うん。
#21
ダンボールに絵を描いた質感と、穴あけて顔出してる感じがユニーク！
#22
ヘッダーとフッターがダンボール。フッターの適当なアイコンも好き。というかここのブログ、普通に面白くて好き。
#23
かなりコンパクトに綺麗に収納しているようなUI。使いやすい。
#24
ラフな感じのフォントをうまく活用したデザイン。こういうの大好き。
#25
全体的に1ページできっちりカテゴリわけを見せる為にうまく紙を活用している感じ。ちょっと独特なサイトデザイン。
#26
コミカルなタッチのデザイン。影が灰色ではなく、黒を起用している点で他とは印象が変わりますね。地味にフルFlash。
#27
妙に高級感の漂うグラウンジペーパーデザイン。茶色の使い方がいい感じですよねぇ。こんなセンスが欲しいです・・・。
#28
紙と手書き風フォントの使い方が絶妙なデザイン。少し硬い感じを受けますね。
#29
A4サイズっぽい古紙に情報をすっぽり収めた感じ。シンプルでコンパクト。
#30
レンガに紙を貼ってるようにも見えるけど、フッターの草もあるしよくわからないデザイン・・・。
#31
写真とレシートが頭に残る・・・。プロフィールのページに現れるメニューとかも結構素敵ですね。
#32
Tumblerというところがポイント高い。
#33
１背景で囲ったデザイン。形はオーソドックスなブログ形式ですね。
#34
木目と紙と暗闇が素敵なデザイン。
#35
随所にギザギザペーパーを貼り付けたようなデザイン。
#36
木の板に貼り付けたような感じ。落書き風の絵が素敵。
#37
スライド部と背景が質感のあるペーパーデザイン。
#38
シンプルな背景を使って演出。
#39
タイトル部に重い古紙を利用したデザイン。手書き風フォントをうまく活用していますね！
#40
フッターがかなり好き。TwitterBirdの適当さ加減も結構好きですね。
#41
何故かはわからないですが僕の夏休みを思い出した。
#42
グラウンジペーパーデザイン。クリップの下に被ってるテキストが普通のテキストだったのもかっこいいなぁ。
#43
イラストが書かれた紙を切って、紙の上に置いたような感じのデザイン。結構シンプルで好きです。
続いて包装紙・和紙なんか無料テクスチャ素材をいっときましょう。
昔書いたまとめ。紙写真テクスチャも紹介してます。
フリーテクスチャがとにかくいっぱいなサイト。
こちらはちょっとクオリティの高いテクスチャが揃ってます。
こちらは種類が豊富！
tape brushes by ~Rozairo on deviantART
フォトショップブラシ。セロハンテープなんかが数種類詰まってます。
よごれた感じのフォトショップチュートリアルとブラシ
フォトショップのチュートリアルとブラシ。汚れた感じを作ったりするのに活用できるかも？
Browsing Photoshop Brushes on deviantART
色んなブラシがまとまってます。矢印風のやつとか使えそうですね。
Hand drawn layouts - hottest design trends - Talk Mania Forum
Photoshopチュートリアル。うっとりくる背景を作成するテクニックが掲載されています。
How to Create a “Worn Paper” Web Layout Using Photoshop
古紙を作る手順がわかり易く解説されています。
こちらも参考までに。
汚れたスプレーのようなphotoshopのブラシ14個
あと有名どころのCSS＋ｊQueryで画像に色々それっぽい装飾が出来るやつ。
Advanced CSS Menu
上と同じブログで紹介されているチュートリアル。ダウンロードも出来るので勉強の為に見てみるのも1つの手かと。
ペーパーデザインと言えば手書き風。
そこでハイクオリティ無料アイコンまとめ100パックから手書き風アイコンをチョイス。
mfayaz's Art Blog: FreeHand_ColorStroked icon pack
色のついた手書き風アイコン。
iconset "sketch'd up!" on the Behance Network
こちらも若干手書き風なアイコン。
GP iCons by ~myspace4art on deviantART
汚れた感じのアイコン。
Antique Icon update by ~paradis24434 on deviantART
レトロ風なアイコン。
Scratch Vector Icons - Web Design Blog
筆で書いたようなアイコン。
Free Vector Art & Graphics :: Paper Icons
ツヤのある紙アイコン。
Hand Drawn Vector Icons | Blog Theme Machine
木目にぴったりな手書き風アイコン。
120+ Handdrawn Vector Arrows
矢印などが豊富な手書き風アイコン。
Social Icons Made of Wood | webtoolkit4.me
木に書いたようなアイコン。
フリーで使えるいい感じの手書き風フォント特集（日本語も）
こちらは英語のみですが、一風変わったフォント。
一風変わった『ものすごく使いにくそう』なフォント15選
こんなところでしょうか。
本当は昔CSSチュートリアルでペーパーデザインのやつがあったのですが、ブクマし忘れてたようでみつからなくてスイマセン・・・。
もし、ご存知の方がいましたら追加したいので教えていただけると幸いです。
また、そんな記事今から作ってやるよ！とか、昔書いたよ！っていう熱い方がいましたら是非是非お知らせ願います。すぐに追加したいと思います。
あと、ペーパーデザインよりも手書き風に興味を強く持っている方は以下でたっぷり味わえるかと思います。
手書き風ウェブデザインまとめ
それでは、また。
Enjoy！
本当は昔CSSチュートリアルでペーパーデザインのやつがあったのですが、ブクマし忘れてたようでみつからなくてスイマセン・・・。もし、ご存知の方がいましたら追加したいので教えていただけると幸いです。また、そんな記事今から作ってやるよ！とか、昔書いたよ！っていう熱い方がいましたら是非是非お知らせ願います。すぐに追加させて頂きたいと思います。（クオリティ審査はあります）
※追記
Photoshopの欄で2件チュートリアルを追加（Twitter :2up_d氏）
紙デザインサイト43
とりあえずデザインのインスピレーションをガツンといっときましょう。
#1
こちら上部のフラッシュがクールですね。
#2
あらゆるパーツが微妙に動いていますね。
#3
レトロなミシンがまた良い味出してます。4角のポイントも見ておくと良いです。
#4
紙の質感がよくわかります。というか写真ですねこれ。
#5
完全Flash。コメントカードがひっくり返るとか色々と楽しみはありますね。
#6
メニュー部の荒れた紙の配置が結構素敵です。
#7
紙よりも着目すべきはソーシャルブックマークボタンの配置の仕方が素敵すぎるｗ
#8
質感のある紙デザイン。
#9
鉛筆で書かれたようなボードがいい感じ。
#10
肉厚のあるボリューム感たっぷりな紙質。
#11
手帳のようなスタイル。フッターのアバウトの表現がなんかかっこよすぎ。
#12
「お勧めデザイン」濃厚なデザイン。イラストを白カットして影つけるだけでも質感が得られるんだなぁと感心。フッターのラフ絵も好き。
#13
背景が完全にストライプ入りの紙。そこに手帳がのっかてるような感じ。
#14
凄く良い。Flashサイトですけど、比較的わかり易く、質感が伝わります。
#15
ヘッダーに濃厚な古紙を使用している。下はさっぱりしているけど、ヘッターから吸い込まれる力がありますね。
#16
アンティークな紙デザイン。背景がよりいっそう雰囲気をかもし出してくれてますね。
#17
ちょっと硬質なイメージ。白にするといっそうそう感じますね。フッターの重さ加減も素敵。あといつも思うのがフォームを鉛筆で書いたようにするとわかりにくいですよね。
#18
セロテープを沢山つかったデザイン。シンプルで個人的には凄く好き。
#19
かわいくてシンプルなデザイン。
#20
メニュー項目が紙で手書き風で目を引きます。というか手書きかな。うん。
#21
ダンボールに絵を描いた質感と、穴あけて顔出してる感じがユニーク！
#22
ヘッダーとフッターがダンボール。フッターの適当なアイコンも好き。というかここのブログ、普通に面白くて好き。
#23
かなりコンパクトに綺麗に収納しているようなUI。使いやすい。
#24
ラフな感じのフォントをうまく活用したデザイン。こういうの大好き。
#25
全体的に1ページできっちりカテゴリわけを見せる為にうまく紙を活用している感じ。ちょっと独特なサイトデザイン。
#26
コミカルなタッチのデザイン。影が灰色ではなく、黒を起用している点で他とは印象が変わりますね。地味にフルFlash。
#27
妙に高級感の漂うグラウンジペーパーデザイン。茶色の使い方がいい感じですよねぇ。こんなセンスが欲しいです・・・。
#28
紙と手書き風フォントの使い方が絶妙なデザイン。少し硬い感じを受けますね。
#29
A4サイズっぽい古紙に情報をすっぽり収めた感じ。シンプルでコンパクト。
#30
レンガに紙を貼ってるようにも見えるけど、フッターの草もあるしよくわからないデザイン・・・。
#31
写真とレシートが頭に残る・・・。プロフィールのページに現れるメニューとかも結構素敵ですね。
#32
Tumblerというところがポイント高い。
#33
１背景で囲ったデザイン。形はオーソドックスなブログ形式ですね。
#34
木目と紙と暗闇が素敵なデザイン。
#35
随所にギザギザペーパーを貼り付けたようなデザイン。
#36
木の板に貼り付けたような感じ。落書き風の絵が素敵。
#37
スライド部と背景が質感のあるペーパーデザイン。
#38
シンプルな背景を使って演出。
#39
タイトル部に重い古紙を利用したデザイン。手書き風フォントをうまく活用していますね！
#40
フッターがかなり好き。TwitterBirdの適当さ加減も結構好きですね。
#41
何故かはわからないですが僕の夏休みを思い出した。
#42
グラウンジペーパーデザイン。クリップの下に被ってるテキストが普通のテキストだったのもかっこいいなぁ。
#43
イラストが書かれた紙を切って、紙の上に置いたような感じのデザイン。結構シンプルで好きです。
包装紙・和紙テクスチャ
続いて包装紙・和紙なんか無料テクスチャ素材をいっときましょう。
昔書いたまとめ。紙写真テクスチャも紹介してます。
フリーテクスチャがとにかくいっぱいなサイト。
こちらはちょっとクオリティの高いテクスチャが揃ってます。
こちらは種類が豊富！
Photoshop
tape brushes by ~Rozairo on deviantART
フォトショップブラシ。セロハンテープなんかが数種類詰まってます。
よごれた感じのフォトショップチュートリアルとブラシ
フォトショップのチュートリアルとブラシ。汚れた感じを作ったりするのに活用できるかも？
Browsing Photoshop Brushes on deviantART
色んなブラシがまとまってます。矢印風のやつとか使えそうですね。
Hand drawn layouts - hottest design trends - Talk Mania Forum
Photoshopチュートリアル。うっとりくる背景を作成するテクニックが掲載されています。
How to Create a “Worn Paper” Web Layout Using Photoshop
古紙を作る手順がわかり易く解説されています。
こちらも参考までに。
汚れたスプレーのようなphotoshopのブラシ14個
CSS
あと有名どころのCSS＋ｊQueryで画像に色々それっぽい装飾が出来るやつ。
Advanced CSS Menu
上と同じブログで紹介されているチュートリアル。ダウンロードも出来るので勉強の為に見てみるのも1つの手かと。
グラウンジ＋手書き風アイコン
ペーパーデザインと言えば手書き風。
そこでハイクオリティ無料アイコンまとめ100パックから手書き風アイコンをチョイス。
mfayaz's Art Blog: FreeHand_ColorStroked icon pack
色のついた手書き風アイコン。
iconset "sketch'd up!" on the Behance Network
こちらも若干手書き風なアイコン。
GP iCons by ~myspace4art on deviantART
汚れた感じのアイコン。
Antique Icon update by ~paradis24434 on deviantART
レトロ風なアイコン。
Scratch Vector Icons - Web Design Blog
筆で書いたようなアイコン。
Free Vector Art & Graphics :: Paper Icons
ツヤのある紙アイコン。
Hand Drawn Vector Icons | Blog Theme Machine
木目にぴったりな手書き風アイコン。
120+ Handdrawn Vector Arrows
矢印などが豊富な手書き風アイコン。
Social Icons Made of Wood | webtoolkit4.me
木に書いたようなアイコン。
手書き風フォント
フリーで使えるいい感じの手書き風フォント特集（日本語も）
こちらは英語のみですが、一風変わったフォント。
一風変わった『ものすごく使いにくそう』なフォント15選
こんなところでしょうか。
本当は昔CSSチュートリアルでペーパーデザインのやつがあったのですが、ブクマし忘れてたようでみつからなくてスイマセン・・・。
もし、ご存知の方がいましたら追加したいので教えていただけると幸いです。
また、そんな記事今から作ってやるよ！とか、昔書いたよ！っていう熱い方がいましたら是非是非お知らせ願います。すぐに追加したいと思います。
あと、ペーパーデザインよりも手書き風に興味を強く持っている方は以下でたっぷり味わえるかと思います。
手書き風ウェブデザインまとめ
それでは、また。
Enjoy！