【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
ペーパーレス化が進むいま、印刷物の地位は脅かされつつあります。そして皮肉なことに、Web上では印刷物を模したデザインが散見されるようになりました。
これまでも印刷物風Webデザインに取り組んでいるデザイナーはいましたが、CSS Gridなどの技術を活用すれば、以前より簡単に印刷物を模倣できます。
今回は、印刷物を再現したスニペット8選をご紹介します。実際の印刷物とはまた違った、Webならではの印刷物風デザインの魅力を体験してみましょう。
目次
この作品は印刷物の特徴を模倣して、画像に沿って文章を配置しています。
印刷物でよく見られる伝統的なレイアウトが、Web上でも再現できることがわかりますね。
トレーディングカードの袋をあけて、友だちと交換したり見せ合ったりするときのワクワク感を覚えていますか?
GSAPとJavaScriptを使ったこの作品では、トレーディングカードのようなデザインを再現しています。これならパックを開封するとき、カードを破いてしまう心配もありませんね。
トレーディングカードに続いて、こちらはレストランの伝票を再現した作品です。CSS GridとFlexboxを使って、以前は困難だったであろうレイアウトを軽々と再現しています。
油で汚れた伝票よりも、ずっと読みやすいですね。
音楽は曲そのものだけでなく、CDジャケットのデザインにおいても、多くのデザイナーにインスピレーションを与えてきました。
この作品では、サム・クックのレコード『ツイストで踊りあかそう(原題:Twistin’ the night Away)』を再現しています。
いつの時代も、手紙をもらうとワクワクする気持ちは変わりません。
この作品はJavaScriptとCSSを使って、紙の封筒を開く動作を再現しています。
最近では多くの人が、紙の新聞ではなくオンラインでニュースをチェックしています。紙の新聞とオンラインのニュース、両方のいいとこ取りをしているのがこの作品です。
CSS GridとAPIを駆使して、新聞のようなレイアウトで最新のニュースを伝えています。これなら誤った家に配達される心配もありませんね。
今でも街のいたるところでパンフレットを貰えますが、手に取る人は少ないはず。
バーチャルなパンフレットを使えば、見た目が美しいだけでなく、資源も節約できますね。
モバイルアプリでの支払いが可能になった今、クレジットカードは将来的に淘汰される存在かもしれません。しかし仮にクレジットカードがなくなっても、この作品は後世まで残るはずです。
マウスオーバーした際の、CSSトランジションを使った3Dエフェクトも印象的ですね。
今回ご紹介したコードスニペットからは、2つのことがわかります。
ひとつは、Web上で再現された印刷物風デザインには独特の魅力があるということ。もうひとつは、本来は手間がかかるリアルなオブジェクトの再現も、CSSとJavaScriptを活用すれば比較的簡単に実装できるということです。
印刷物には印刷物の、WebにはWebの魅力があります。しかしWebは、活躍の場を広げるために日々進化し続けていることが伝わってきますね。
(原文:Eric Karkovack 翻訳:Asuka Nakajima)
こちらもおすすめ!▼
バンクシーも再現!コードで作るハイエンドなアートワーク7選
Workship MAGAZINE
ICCプロファイルとは?Webデザインや印刷物を思い通りの色に仕上げよう
Workship MAGAZINE
無料でおしゃれな名刺を作成できるツール・テンプレート27選
Workship MAGAZINE