Webデザインで「紙っぽさ」を出す方法を考えてみる

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋

今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！

はじめに：「紙っぽさ」とは？

私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。

たとえば、以下のようなデザインは私にとって「紙っぽい」例です。

どうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。

その①：文字が「組まれて」いる

最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」をただ横向きに並べるのではなく、上端が揃うように文字組みが考えられている。

ブラウザの開発者ツールで確認してみると、「NO.」の文字の上には4px、右には5pxの余白を取っていました。

空間の微調整によって、目には見えない「水平」「垂直」のラインをきっちりと揃えていくことが、エディトリアルデザインっぽさにつながるようです。

こちらのサイトでは、タイトル部分の文字がアーチ状になっていました。

実装時は画像で書き出す必要がありますが（正確にはSVGのパスに沿って文字をのせることもできるようですが）、こうした一工夫で、Webではなく紙っぽい印象が強まりますね。

その②：写真の上に文字が重なっている

こんなふうに、写真やイラストの上に文字が重なっているデザインを見ると「雑誌っぽい！」と感じます。

Webデザインの基本は「積む」こと。文字や画像が入ったボックスを、重ねることなく縦に「積んで」デザインするのが一般的です。

だからこそ、あえて「重ねる」選択をしているデザインを見ると、紙っぽさ（Webらしくなさ）を感じるのかもしれません。

こちらは数字も文字も写真の上に重なっているレイアウトの例。デザインのあしらいとして、綺麗に機能しています。

また、写真に限らず、上のように色の境目に文字が重なっているだけで、なんとなく雑誌っぽさが感じられる例も。ある要素に対して「重ねる」配置にすることが重要そうです。

その③：文字が縦書きになっている

一般的には横書きで書くところを縦書きの文章にすると、それもひとつの「紙っぽさ」になりそう。

以下のサイトは使っているフォントもあいまって、よりエディトリアル感が出ているように思います。文字のジャンプ率が高い（非常に小さな文字を使っている）ことも重要なポイントかも？🕵

その④：文字が中央揃えになっている

今まではあまり意識していませんでしたが、中央揃えも「紙っぽさ」の要素のひとつのようでした。こちらの例では、文字数の多いタイトルが中央揃えになっています。

Webサイトでは、長い文章は左揃えにすることが多いです。なぜかというと、中央揃えにすると、画面幅が変わったときにレイアウトが崩れやすいから。ここであえて中央揃えを使うことで、雑誌らしさを感じられます。

画面幅が変わってもレイアウトが崩れないようにするには、最初に一行あたりの最大幅（＝最大字数）を決めておき、オーバーしないように改行を入れていく必要があります。手間は少しかかってしまいますが、印象に残るデザインになりますね。

その⑤：「紙っぽい」フォントが使われている

「紙っぽい」の定義は色々ありそうですが、私は「墨だまり」のある文字を見ると紙の素材っぽさを感じます。墨だまりとは、文字の交差する部分にある墨がたまってできた滲みのこと。

線が交差するところが直角ではなく、少しふくらんだ形になっている。こうした書体が使われていると、自然と背後に紙の存在が想像されますね。

こちらのサイトで使われているフォントは「A1ゴシック」。少しくすんだ背景の色も手伝って、質感のある紙の上に文字が乗っかっているように感じられます。

さらに、こちらは「秀英にじみ明朝」を使った例。インクのにじみが再現された文字の形が良いですね。ディスプレイなのに厚みがある。

その⑥：要素を罫線で区切っている

調べていく中で、複数のパーツを「罫線」を使って区切っているデザインをいくつか見かけました。

「番号」と「見出し」「本文」「写真」の間に、まっすぐ罫線が引かれています。線で空間を区切るだけで、途端に紙の誌面っぽく感じるのは私だけでしょうか？

横向きに入る罫線も良いですね。GINZAやPOPEYEを思い出す、マガジンハウスの空気感があります。

直線ではなく、波線を使っているパターンもありました。要素を縦向きに分割することで、雑誌っぽさのあるレイアウトになりますね。

その⑦：背景に紙のテクスチャーを敷いている

背面全体が一気に「紙」になる方法。雑誌らしさのエッセンスというよりも、現実の紙に寄せる方法です。

こっちはテクスチャーを超えて、もはや本当の紙！スクロールすると紙がめくられていくアニメーションも楽しいです。

その⑧：四隅をきっちり埋めるレイアウト

何かのブロックを作るときに、その四隅をきっちりと埋める形でパーツを配置しているレイアウト。これも「紙っぽさ」として映るように思います。

以下の例では、左上と右上は画像で埋まっていて、左下に日付、右下には「Design Training」の文字。全ての角に視点をとどめるポイントがあります。

その⑨：文字のジャンプ率を高くする

「その③：文字が縦書き」でも少し言及しましたが、使われている文字のジャンプ率の高さに比例して、雑誌っぽさは強くなる気がします。

こちらのサイトの見出し上にある「2023.04.25」の文字は11px。このサイズになってくると「読ませる」ための文字ではなくて、装飾としてバランスを取る意味合いのほうが大きくなってきます。

こちらも、記事タイトルの文字が28pxに対して、カテゴリを表記する「エッセー」の文字は12px。思い切ったジャンプ率でした🔍

さいごに

「紙っぽいWebデザイン」に注目して色んなサイトを見比べてみました。お楽しみいただけたでしょうか？

今回見てきたような「紙っぽい」デザインを通して、Webデザインにあまり馴染みが無かった方、今は紙モノだけが好きだと感じている方にも、ぜひWebに興味を持っていただけたら！と思います🥳

参考一覧

文中で引用させていただいたサイトはこちらです。

・ ・ ・

今回は以上です！お読みいただきありがとうございました🥳