CSSで印刷物風デザインを再現したスニペット8選。紙のデザインはWebにも活かせる

ペーパーレス化が進むいま、印刷物の地位は脅かされつつあります。そして皮肉なことに、Web上では印刷物を模したデザインが散見されるようになりました。

これまでも印刷物風Webデザインに取り組んでいるデザイナーはいましたが、CSS Gridなどの技術を活用すれば、以前より簡単に印刷物を模倣できます。

今回は、印刷物を再現したスニペット8選をご紹介します。実際の印刷物とはまた違った、Webならではの印刷物風デザインの魅力を体験してみましょう。

1. 紙の記事風デザイン

この作品は印刷物の特徴を模倣して、画像に沿って文章を配置しています。

印刷物でよく見られる伝統的なレイアウトが、Web上でも再現できることがわかりますね。

2. トレーディングカード風デザイン

トレーディングカードの袋をあけて、友だちと交換したり見せ合ったりするときのワクワク感を覚えていますか？

GSAPとJavaScriptを使ったこの作品では、トレーディングカードのようなデザインを再現しています。これならパックを開封するとき、カードを破いてしまう心配もありませんね。

3. 伝票風デザイン

トレーディングカードに続いて、こちらはレストランの伝票を再現した作品です。CSS GridとFlexboxを使って、以前は困難だったであろうレイアウトを軽々と再現しています。

油で汚れた伝票よりも、ずっと読みやすいですね。

4. CDジャケット風デザイン

音楽は曲そのものだけでなく、CDジャケットのデザインにおいても、多くのデザイナーにインスピレーションを与えてきました。

この作品では、サム・クックのレコード『ツイストで踊りあかそう（原題：Twistin’ the night Away）』を再現しています。

5. 封筒風デザイン

いつの時代も、手紙をもらうとワクワクする気持ちは変わりません。

この作品はJavaScriptとCSSを使って、紙の封筒を開く動作を再現しています。

6. 新聞風デザイン

最近では多くの人が、紙の新聞ではなくオンラインでニュースをチェックしています。紙の新聞とオンラインのニュース、両方のいいとこ取りをしているのがこの作品です。

CSS GridとAPIを駆使して、新聞のようなレイアウトで最新のニュースを伝えています。これなら誤った家に配達される心配もありませんね。

7. パンフレット風デザイン

今でも街のいたるところでパンフレットを貰えますが、手に取る人は少ないはず。

バーチャルなパンフレットを使えば、見た目が美しいだけでなく、資源も節約できますね。

8. クレジットカード風デザイン

モバイルアプリでの支払いが可能になった今、クレジットカードは将来的に淘汰される存在かもしれません。しかし仮にクレジットカードがなくなっても、この作品は後世まで残るはずです。

マウスオーバーした際の、CSSトランジションを使った3Dエフェクトも印象的ですね。

おわりに

今回ご紹介したコードスニペットからは、2つのことがわかります。

ひとつは、Web上で再現された印刷物風デザインには独特の魅力があるということ。もうひとつは、本来は手間がかかるリアルなオブジェクトの再現も、CSSとJavaScriptを活用すれば比較的簡単に実装できるということです。

印刷物には印刷物の、WebにはWebの魅力があります。しかしWebは、活躍の場を広げるために日々進化し続けていることが伝わってきますね。

（原文：Eric Karkovack　翻訳：Asuka Nakajima）

こちらもおすすめ！▼