はじめに

綺麗に見えるWEBサイトの共通点はなんだろうか？
自分が運営している個人サイトの改修をしているときに、ふとそんなことを考えました。

サイトにおける綺麗とは何を指すのか。美しい画像が配されていることなのか、情報が整理されていることなのか、それともユーザーが望むページにアクセスしやすいよう動線が綿密に設計されたものなのか――おそらく答えは人によってさまざまでしょう。ただひとつ、この要素だけを取ってこれが綺麗なサイトの条件だ、ということは不可能です。ただし、綺麗なサイトを構成する上で必要な要素を考えることは可能なはずです。

というわけで、今回はページの見た目だけでなく構造を語る上でも重要なWrapperという概念について語っていきたいと思います。
Wrapperがビシッと定まっていれば、それだけである程度綺麗になるし、デバイス毎のデザインも作りやすくなるというのが僕の持論です。

Wrapper（ラッパー）とは何なのか？

直訳するとWrapperとは「包むもの」という意味です。WEBサイトではもっぱらコンテンツを包む領域という意味合いで使われます。

例えばこのDigitalsolution mediaの場合、1920×1080のFullHD画面で見た場合、コンテンツの収まる幅（=Wrapper）を1250pxで制作しています。

ブラウザの幅が1250pxより狭くなった場合、このサイトでは、ブラウザの横幅に対して98％の比率を維持しながら縮小していきます。このとき、Wrapperの幅に対して画像や各コンテンツの大きさも変化していきます。そのため、見てほしいコンテンツが常に画面内に表示されます。

WEBサイトを制作する際は、このWrapperの存在が常に意識されます。同一ページにおいてWrapperを無視して箇所が複数あると、常にWrapperを守っている場合と比べ制作難易度が上がります。また見る側としても、Wrapperの外側にコンテンツがあると視線の移動が大きくなりストレスを感じながら閲覧するという危険性が生まれます。個人的な見解になりますが、Wrapperを設定し、その内部にコンテンツを配置するのがUXの面で優位であると思います。

Wrapperに忠実なサイト

「とは言ってもWrapperを意識しているサイトってどんなのかわからない」
「Wrapperが決まっていると横に広がりがなくてリズムが生まれず単調に見えるのではないか」

Wrapperを守ることを考えると、上記のような疑問が浮かぶかもしれません。
しかしながら、Wrapperを守りながら飽きさせない作りをしているサイトはいくつもあります。
ここでは実サイトをいくつか挙げながら少し解説をしていきます。

①アサルトリリィBOUQUET(ブーケ) アニメ公式サイト
ヘッダーとフッター、それとFVを除きコンテンツ幅は1100pxに設定されています。文章や登場人物の画像といったメインのコンテンツはすべてこの領域に収められています。あしらいのための画像は一部この領域外にありますが、画面を狭めたときに隠れても支障ないコンテンツのため問題ありません。

②デザイン住宅の株式会社ぶすじま建設
ヘッダーとフッター、それとFVを除きコンテンツ幅は940pxに設定されています。ひとつ、例外としてTOPの中段にこれまで手掛けた住宅の写真をほぼ画面いっぱいまで大きく配置していますが、この部分が画面を狭めたときなどに他のコンテンツに影響を与えたり、狭めたときに写真がブラウザの外に隠れたりしていないので問題ありません。

③Stripe
決済代行システムのユニコーンとして注目されているStripe（ストライプ）のWEBサイトもWrapperを忠実に守っています。基本的なコンテンツ幅は1040px、一部幅広な部分があって、そこは1160pxになっています。この広くなっているところはワンポイントとしてのみ使っているようです。当然、どちらのWrapperもコンテンツの外に文字や重要な画像は配置していません。

上記で上げたサイトはどれもWrapperの領域内に文字や画像といったメインのコンテンツを配置していますが、そのうえで飽きさせないデザインとなっています。このことから「Wrapperが決まっていると横に広がりがなくてリズムが生まれず単調に見えるのではないか」という認識は誤りであるということがご理解いただけたのではないでしょうか。Wrapperを守っていてもリズムを作ることは可能です。

ただし注意しなければならないのは、Wrapperを意識していて作っていればすべて問題なくサイト上で再現できるとは限らない、ということです。当然のことながらスマートフォン、タブレット、パソコンでページのデザイン構成がまったく違っていればレスポンシブでの再現は不可能です。もちろん、コーディングする側として出来る限りの対応はしますが、どうにもできないときはどうにもできません。僕自身、自分のポートフォリオを作る際はその点を意識して作っています。

Wrapperを無視しているサイト

Wrapperを無視しているサイトには２種類あります。ひとつは無視したうえでデザインが破綻していないサイト、そしてもうひとつがデザインが破綻しているサイトです。前者は問題ありません、デザイナーとそれに応えるコーダー、どちらも非常に優秀で、見ていて背筋が伸びる思いになります。問題なのは後者です。探すとこのようなサイト、それなりに結構あります。

さて、ここでいう破綻とは「見られるデバイスを考慮していないがゆえに起こる画面上の崩れ」を指します。実在のサイトを出すと少し問題なので、僕の方で再現した画像を使って説明していきます。

これは画面幅いっぱいにコンテンツを配置したサイトの一部を切り取ったものです。画像が三枚、幅いっぱいに配置されていて、それぞれの画像にマウスをホバーすると文字が出てクリックすると別ページに遷移するという動きをとります。よく見る配置ですが、ブラウザを狭めていくと、下記のような状態になります。

おわかりでしょうか、それぞれの画像が重なり合ってしまい見せたい画像が隠れてしまっています。また真ん中の要素に至ってはホバーしたときに表示される文字が別の画像に覆われてしまっているせいで、文字が隠れてしまい、読めなくなってしまってます。これでは伝えたい情報を伝えることができません。

（雑談ですが、この配置を再現するテクニックとして、引き合いに出したサイトはposition:absolute;というcssプロパティと値を使用していました。このプロパティと値を使うこと自体は何ら問題ないのですが、一歩間違うとこのような破綻を招きかねないので使用する際は注意が必要です）

WEBサイトは紙面と違い、だれが、どのブラウザで、そしてどのような大きさで見ているのか不明です。そのため、縮めていったときにどうなるのか、逆に想定より広がった時はどのような形になるのか、制作時はそれ常にを考える必要があります。上記のようにWrapperを無視した構図を作っている場合は特に注意が必要です。箱の大きさが定められていないので、拡大縮小した際にどのような配置になるのか、各デバイスの幅ごとに考えに考え抜く必要があります。それができない場合はWrapperを無視したサイトを作るのは控えたほうが良いでしょう。

まとめ

• WEBサイト制作にはWrapperの概念を意識する必要がある
• コンテンツは特段の理由がない限りWrapperの中に収める
• Wrapperを守ると単調なサイトしか作れないは誤り
• Wrapperを無視する際は「なぜそれが必要なのか」を自分に問いかける

最後に

綺麗なサイトとは何なのかを考えていくと結局、文字、余白、情報の整理、ここらへんが上手くできていれば綺麗に見えるものです。それらをうまくまとめるのにWrapperは最適な考え方です。定めた大きさの箱の中に配置していくので当然、余白の設定、情報の整理、そして文字の設定にシビアになります。だからこそ、逆説的に見た目が整い、ユーザーとしても見やすいサイトが出来上がります。

WEBサイトは、サイトを運営することでお客様が何を達成したいのか、それを元に作られます。その達成目的は様々ですが、ひとつ共通することがあるとすれば、見にくいサイトはお客様から見られません。

弊社はデザイナー、エンジニアともに日々知識を蓄え、お客様の達成したい目標を叶えるためサイト制作に取り組んでいます
ご要望がございましたら、ぜひ弊社までご連絡いただきますようお願いいたします。