紙のメタファとは?
紙のメタファのバリエイションには、以下のようなものがあります。
- 手紙、レター
- 段ボール
- 古紙(汚れたり、やぶれたり)
- ノート、ルーズリーフ、リングノート
- メモ書き、付箋
- 本、手帳
- タグ
そもそも、紙と文字というのはとても相性がよいものです。
また、ページをめくる、やぶれる、メモを残すなどアフォーダンスを利用しやすいので、工夫次第でいろんな表現ができる素材です。
みなさんも、紙をメタファしたサイトを作る際には、これから紹介するサイトでどのように、表現に使っているかを、参考にしてみてください。
01. Oliver James Gosling
レター風の背景をうまくリピートさせて全体的な世界観を演出しています。
![](/img/upload/1075.png)
02. Ximena Ruiz online portfolio
リングノート風のコンテナが、ページをめくるアフォーダンスを生み出しています。
紙テープで写真を止めているところがおもしろいです。
![](/img/upload/1076.png)
03. Carbonica
段ボールのような背景、すこし汚れたやわらかい紙などが、やさしい全体の雰囲気を演出しています。
![](/img/upload/1077.png)
04. Rx Monsters
バインダーというメタファもよく使う手法です。
![](/img/upload/1261.png)
05. Sprocket House
日本人はあまりやりませんが、海外ではやぶれて風化した紙をよく使います。
![](/img/upload/1262.png)
06. Wing Cheng
本のようです。質感がとてもきれいです。
![](/img/upload/1263.png)
07. FeedStitch
カッコいい♪。ハトメを視線誘導に使っています。
![](/img/upload/1265.png)
08. toby-powell.co.uk
くしゃっとした紙のテクスチャを背景に使っています。
![](/img/upload/1266.png)
09. Lionways
レター風のお問い合わせフォームです。
![](/img/upload/1267.png)
10. Blog Amuki
こちらもヘッダー部分に風化した紙を使っています。
![](/img/upload/1269.png)
11. Watersports Guru
風化した紙をコンテナに使っています。ヘッダー部分に、切手と消印のアクセントがおもしろいです。
![](/img/upload/1270.png)
12. KRITZEL
すこし紙をデフォルメして透明感ある質感を演出しています。
![](/img/upload/1271.png)
13. Online Portfolio of B. Candullo
ロゴにタグ、記事エントリーのボックスに紙の切れ端を使っています。
![](/img/upload/1272.png)
14. 20 Things I Learned About Browsers and the Web
Googleのサイトです。絵本風のレイアウトにより、ページを1ページずつめくるアフォーダンスが生まれています。
![](/img/upload/1273.png)
15. Blog.SpoonGraphics
段ボールを使ってロゴがかっこいいです。
![](/img/upload/1275.png)
16. Ek & Gren Reklambyrå
なぜか紙に見えます。
![](/img/upload/1426.png)
17. Sitotis
こちらはシステム手帳のをコンテナに使っています。タグがメニューになっています。
![](/img/upload/1427.png)
18. asapadvantage.com
レター風のお問い合わせフォームが封筒に入っています。
![](/img/upload/1428.png)
19. LiveMinutes
紙切れにメッセージが残されています。
![](/img/upload/1429.png)
20. Frisk Web. Karton Pomysłów.
段ボールがかっこいいです。
![](/img/upload/1430.png)
21. Peter Granfors
こちらは色が滲んだ紙ですね。この表現は新しい!。
![](/img/upload/1431.png)
まとめ
探してみると紙を使ったサイトは結構多いのにビックリしました。
紙を使ったサイトって全体的に「やさしさ」があってとても面白いと思います。
今回紹介したサイトそれぞれにも工夫があるので、
よく観察してみてください。
コメント