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

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

[shiro-coumarin]

紙物専門の俺にWeb案件が来たとき、端末によって表示が変わる、行末揃えや禁則処理やブラ下がり等の組版もムリ、正しいルビも振れないでしょ…と断り掛けたけど「紙っぽくしたい」と頼まれ引き受けた。そして地獄が始

[nakamura-kenichi]

判型が決まってないからな。それを軽々しくデザイン踏襲しようとするから、その道は既に死屍累々なんやで。やるなら見た目の以前に、そのレイアウトをレスポンシブで実現できるテクニカルスキルを身に付けんとやで。

[misarine3]

新人にこういう記事を書かせる文化のある会社はいい

[tallmen]

ページがあって面積がそれなりにある紙媒体と、通信が必要で小さいデバイス(スマホ)でよく見られるWEBは必然違うあしらいになるよなぁ。見た目のぽさを再現するのは楽しいが、本来の「デザイン」ではないな。

[ryotarox]

切り口が良いね。／「紙っぽさ」の比較として「紙っぽくなさ」「ウェブらしさ」も載せるとより面白いかも。／「紙っぽさ」だとスプリットレイアウトの事例もあるといいかも。PCとスマートフォン両方で紙っぽさを。

[peatnnuts]

重ねられるとコーダーからするとしんどい。予算と時間くれるならやってもいいけど大抵少ない。

[ydf]

紙っぽさ、というよりも、書籍っぽい雑誌っぽいページレイアウトとデザイン

[taruhachi]

ここだけの話、紙っぽさは紙の上で表現するから良いのであってWebに持ってこられると嫌な人です。

[paradisemaker]

この流れ、20年ぐらい前からあるけど、デバイス対応やスタイルの調整で工数かかる割に可読性も下がるので、提供者側の自己満だと思っている（へー、カッコいいですね！とは言われるけど、中身は読まれないサイトにな

[lainof]

雑誌等を電子書籍で読み慣れてる人にとってはどれも紙っぽさではないと思う。

[daaaaaai]

おもしろい。モバイルだとどうしているかとか気になりました

[localnavi]

良くまとまっていて参考にしやすいな／スマホでの見た目がー！というブコメが散見されるが、スマホで崩れるようなデザインは見当たらない気がする

[mventura]

逆にウェブの人が紙デザインやる時の難しさたるや。

[respectbookmark]

編集とクリエイティブが高度に調和した情報に触れたいものだ

[mineo-sec]

ウェブサイトってたくさんあるなあ

[miguhe25]

素材提供が少ない案件だとよくやる手法（フォントでごまかすとも言う）。LPとか業種によっては効果的だけど、固めの案件だと最近は障害者対応が必須なので、無難なレイアウトに落ち着きがち。

[nack1024]

色だよ

[aaasukaaa]

テキストを画像にしちゃえばまあ。SEOとかアクセシビリティとか考えるとどうしても限界あるのがWEB。でも紙と違ってアニメーションや適切なUIで導線設計できるのもWEB。そういうことをきっと沢山学んでいくんだろうな

[work996]

カラダCAMPの例はPERSONAL TRAININGという文字が読みづらい。ダークモードに対応とか考えると逆にLESSONの方が読みづらくなると思う。Webデザインにおいてはアンチパターンだと思う。

[ba2y]

好き

[maicou]

ほほう

[forcutie]

めちゃくちゃ良い。「紙っぽい」と表現するのも好き

[macplus2]

これクライアントからよく言われるが丁重にお断りしている。誰も得しない。

[shoh8]

マークアップの品質が上がるならいいんだけど、大抵は自己満足か、環境を限定したレイアウトになっちゃうんだよなあ。難しい。何度も訪れるサイトには向かない

[nakab]

雑誌が衰退することで、人類が得たエディトリアルデザインの知見は失われてしまうのだろうかと思った。

[ivory105]

予算（工数）の都合上こんなデザインはできんのじゃ…やりたいなら金を…

[cnsltnt]

こうして検索結果にはpdfリンクが並ぶのであった…

[osnq]

否定する理由はいくつもあげられそうだけどいいよねえ紙っぽさ

[yarumato]

“Webデザインの基本は「積む」。文字や画像が入ったボックスを、重ねることなく、縦に積んでデザインするのが一般的。あえて「重ねる」選択をしているデザインを見ると、紙っぽさ（Webらしくなさ）を感じる”

[gigausa]

さらにCMYKとか、印刷技法とか、インクと紙とか、はてはマージナルゾーンの話とか。デジタル写真と銀塩写真とか。色々はかどるね。

[masara092]

重なる系は表示サイズ変化で大変な事になるからだいたいやめたほうがいいし、読み上げ機能使える？

[flowing_chocolate]

電子ペーパーのでかいディスプレイって無理あるのかね。

[vndn]

『線で空間を区切るだけで、途端に紙の誌面っぽく感じる』hr要素みを感じてしまう…

[kyopeco]

めちゃくちゃいい。パワポとかでも参考になる。

[glizmo]

おもしろい

[GiveMeChocolate]

参考がたくさんあって良い。スマホとの両立難しいよね…

[at_yasu]

個人的には好き。タブレット端末とかだとなおさら。ただスマホで見にくくなったりしたらやだなぁとは思う。