タブレットPCを意識した?パンフレットを開くような動きの横アコーディオン型サイト・横スライドサイト

最近海外のサイトデザインで縦割のアコーディオン型のデザインを良く見かけます。

その理由を少し考えてみたところ、前回の「PCデザインの新しいカタチ「タッチジェスチャー」を意識したUIデザインのまとめ」の記事と同様の理由で、将来的なタッチジェスチャーを意識したサイトや、現在その代表でもあるタブレット端末での使い勝手を考慮したサイトが多くなって来たからではないかと思いました。

タブレット上で通常のサイトを見る場合とはまた違い、パンフレットを開くような動きでユーザーがコンテンツを見て行くことができるのが、コンテンツ情報に優先順位があまりない場合のサイトや、ファッション系のサイト等グラフィカルな写真を印象的に見せたいサイトでは効果的のようにも思われます。

単なる横スクロースサイトやスライダーを全面に使ったサイトでは?と思うものもあるかもしれませんが、最近の横長サイトのトレンドの一つのようなかたちで参考になればとお思います。

個人的にはPCで見た時にどうなのか、など「今後はこのかたちのサイトがよい!」とは思いませんが、企画や提案時の一つの選択肢の参考としてみて頂ければと思います。

また国内サイトはあまりないように思われたので、どのようなサイトに最適かというポイントや、メリット・デメリットについて以下にまとめます。

タブレットを意識した横アコーディオン型サイト・横スライドサイトのポイント

向いているサイト

  • ファッション系サイトなどグラフィカルな写真を見せたいサイト
  • ページ数の少ないタブレット端末対象のキャンペーンサイト
  • コンテンツ情報に優先順位があまりない場合のサイト、作品集サイトなど

ターゲット層

  • PCやスマートフォンよりもタブレットを好む30代のハイセンスなユーザー

メリット

  • 高さの区切りがない分タブレット上で見やすい
  • 写真やグラフィカルな素材を印象的でダイナミックに見せることができる
  • パンフレットを開くようにコンテンツを見進められるユニークなUI

デメリット

  • IE対応は難しいかも
  • PCではあまり操作性が慣れない
  • スクリプトが重いのでデバイスのスペックが限られる可能性がある

タブレットを意識した横アコーディオン型サイト・横スライドサイト

タブレット上で折り畳まれたパンフレットを開いて行くように横にスライドしてコンテンツを閲覧できるサイト一覧です。

高さがウインドウサイズに応じて可変するものが多く、スライダーやスクロールで右へとコンテンツを読み進めることができるようなサイトのかたちです。

Woodwork

Woodwork
http://woodwork.nl/

abm

abm
http://www.abm.at/de/home

TRACK EM, FIND EM, KILL EM

TRACK EM, FIND EM, KILL EM
http://www.trackemfindemkillem.com/

Tim Roussilhe Portfolio

Tim Roussilhe Portfolio
http://timothee-roussilhe.com/

K2 – the largest digital agency in Poland

K2 - the largest digital agency in Poland
http://www.k2.pl/#!/en/main/

DOMDESIGN | Dominik Geisler | Mediendesign | Portfolio

DOMDESIGN | Dominik Geisler | Mediendesign | Portfolio
http://www.domdesignonline.de/

Pub Design Agencia de Internet

Pub Design Agencia de Internet
http://www.pubdesign.com.br/

Christian Elgvin Studios

Christian Elgvin Studios
http://www.elgvin.no/

Legendary Entertainment

Legendary Entertainment
http://www.legendary.com/

International day for mine awareness. On april 4 th lend your leg

International day for mine awareness. On april 4 th lend your leg
http://www.lendyourleg.org/

Second Story Interactive Studios

Second Story Interactive Studios
http://www.secondstory.com/

USA TODAY: Latest World and US News – USATODAY.com

USA TODAY: Latest World and US News - USATODAY.com
http://www.usatoday.com/

Verdi – Transformacao pelo Design

Verdi - Transformacao pelo Design
http://verdi.com.br/

Bicikli Fumic

Bicikli Fumic
http://www.biciklifumic.hr/

Corona Radiata

Corona Radiata
http://www.coronaradiata.com/

Darvan

Darvan
http://www.darvan.be/

Idea Exhibit | Share your ideas and let them grow.

Idea Exhibit | Share your ideas and let them grow.
http://ideaexhibit.com/

Creative Solutions for Print and Web Design | Octavo Designs

Creative Solutions for Print and Web Design | Octavo Designs
http://www.8vodesigns.com/

Dreamsdesign Creative Website Designing Company

Dreamsdesign Creative Website Designing Company
http://www.dreamsdesign.in/

国内の横スライドサイト

国内の横スライドサイトです。縦に並んだコンテンツ一覧の中にトピックス一覧が入っているものが多いです。

MIGHTY CROWN ENTERTAINMENT

MIGHTY CROWN ENTERTAINMENT
http://www.mightycrown.com/

間口一就 まぐちかずなりの、ウェブサイト

間口一就 まぐちかずなりの、ウェブサイト
http://maguchikazunari.jp/

横からメニューがスライドするサイト

横アコーディオン型サイト・横スライドサイトとは少し違いますが、サイドにメニューがスライドして表示されるようなサイトです。
こちらもタブレットで見る際に見やすいナビゲーションのデザインサの参考になります。

Cartelle | Interactive Studio

Cartelle | Interactive Studio
http://www.cartelle.nl/

DuJour

DuJour
http://www.dujour.com/

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事