読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

さようなら、サイドバー。

メディアの骨格

重要すぎるサイドバーが死んでしまった

サイドバーはもはや過去のものになってしまった。というか、サイドバーはもう死んでいる。サイドバーはその名の通りウェブサイトにとって「傍(かたわ)ら」的なコンテンツの置き場だった。事実、マークアップするときに<aside>が使われることが多いのも、このサイドバーである。

しかし考えてみれば、その名前の割にはサイドバーは重要でありすぎた。Adsenseなどのバナー広告を貼るサイト運営者にとっては、サイドバーの上部の「レクタングル(大)」が何よりも効果的な配置であったし、サイトの回遊を促すカテゴリやタグの一覧、PVランキングなどもサイドバーに置かれてきた。

おそらく、多くの人がその死を直視できないのも、いまだにそのような重要性を保てていると信じているからだろう。しかし、サイドバーは死んでいるのである。その死亡原因は、すでにお分かりだとは思うが、スマートフォンの隆盛である。スマホがサイドバーを追いやってしまった。私が管理権限を与えられているとあるサイトでは、モバイル率が90%以上になってしまった。

どうすればよいのか。

f:id:sthmdnss:20160528150611j:plain

領域としてサイドバーは死んでも、その中の要素までを無くすわけにはいかない。以前、「あえてレスポンシブしないという合理的な選択」という記事を書いたが、それはこの問いへのひとつの解である。しかし、モバイルデバイスに最適することがSEO的にプラスになることからも、やはりマルチデバイス対応はもはや避けられないといえる。求められているのは、新しい設計思想だ。

blog.phiyard.net

「真っ二つ」を避ける

「新しい設計思想だ(キリッ*1」 とは、言ったものの、具体的に「これ」といえるほどの解答は持っていないし、おそらくは、まだWebデザイン業界としても模索中という段階なのだと思う。なので、この記事ではいくつかの方法からひとつを紹介するにとどめたい。

いくつか方法があるなかで多く共通していることは、「コンテンツ領域をmainとsideを真っ二つに分けるようなことはやめよう」という方針だ。「真っ二つ」というのは、このはてなブログをデスクトップで見たときのような状態を指している(余談。はてなブログはカスタマイズ性の高さが魅力だが、HTMLのベースまでは変えられないので拡張性に限界がある)。

 ワンページレイアウトの長所を取り入れる

では「真っ二つ」をやめてどうすればいいのかというと、ワンページレイアウトでよくやることをやればいい。これは例を見た方が早いので、最近リニューアルが進んでいるBBCのサイトを見ていただきたい。半透明の青で網かけした部分が、<section>でマークアップされていて、このなかで個々の要素がさらにグリッドに沿って配置されている(わかりやすくするためにBootstrap 3の用語で言い換えると、この<section>の役割は <div class="container">と共通している)。

f:id:sthmdnss:20160528164839p:plain

横並びの要素がモバイル時には<section>ごとに整列されることで、「真っ二つ」を回避し、サイドバー的なものを存在させながらもそれが下に追いやられてしまわないようになっている。アメリカのメディア、 Vox.com | Explain the news なんかも、こういうレイアウトを採用している。<section>ごとに切るというのは、「横いっぱいの画像表示」とも相性がいいというメリットもある。

今後書く予定の記事

優先的に書いて欲しいというのがあったら、コメントください。

  • パネル(カード)レイアウトの必然性
  • モバイルファーストにとどまらないモバイルオンリー
  • 960 Grid Systemの復権?
  • 「雑なスクロール」の存在〜下の要素ほど見られないわけじゃない〜

関連

blog.phiyard.net

*1:古かったらごめん