TCDから全く新しい横スクロールデザインのWordPressテーマ「HORIZON」が登場しました。
「横スクロールのサイトをつくりたい」
「一味違う美しいギャラリーをつくりたい」
個性的なデザインにこだわる方はもちろん、ビジュアルコンテンツ（画像や動画）をメインに扱うサイトに最適なWordPressテーマです。写真スタジオやカメラマンなどのポートフォリオ、商品のショーケースなどにご活用いただくことを想定して開発いたしました。
本稿では、そんなHORIZONの特徴や機能概要についてご紹介いたします。
横スクロールサイトとは
そもそも横スクロールサイトというのは、文字通り、縦にスクロールしないタイプのサイトです。
まずはHORIZONのデモサイトをご覧になってみてください。マウスホイール（マウスの中心のコロコロ）を動かしても、トラックパッドで操作しても横にスクロールするように設計されています。
1ページ中に多くの情報を並べられる点や、複数のコンテンツを流れるように閲覧できる点がメリットで、PCで閲覧時は縦幅が短くなるので、少量のテキストでも美しいレイアウトでサイトを構築可能です。
あとは何より、閲覧時のインパクトも大きいです。他のサイトと違うモーションで差別化できる点も横スクロールサイトの大きな特徴といえるのではないでしょうか。
また、横長の写真や映像と相性がいいので、ビジュアルコンテンツのポートフォリオ、雑誌等のギャラリーサイト、商品のショールームのほか、アート作品の展示サイトなどとも親和性が高いでしょう。
ただ、実際に一から制作するのは簡単ではありません。横スクロールならではのデザインやスクロールの動き方を綿密に考慮する必要があるからです。そんな横スクロールテーマを誰もが簡単に制作できるように開発されたのが、今回ご紹介するWordPressテーマ「HORIZON」です。
横スクロールサイト専用のWordPressテーマ「HORIZON」
WordPressテーマ「HORIZON」では、美しい横スクロールサイトをスムーズに構築できます。横スクロールのためのデザインとアニメーションが随所に施してあるので、スタイリッシュで個性的なサイトが簡単に仕上がります。横幅が狭いスマホでは縦スクロールに美しくレスポンシブする仕様です。
横スクロールデザインのつくり方
デザインが一般的なものと大きく異なる横スクロールサイトですが、HORIZONでは用意されているレイアウトを複数組み合わせるだけでスムーズにつくれます。
完成イメージを見ながら一つ一つの雛形を埋めていき、並べていくだけです。画像（動画）やテキストを入れる箇所がアイコンで示されているので直感的に設定いただけます。
通常のページ（縦スクロールページ）はつくれないの？
HORIZONは横スクロールサイト向けのテーマですが、もちろん通常のページ（縦スクロールページ）も作成可能です。ブログやお知らせなどのテキストでの情報発信をメインとするページでは、一般的なサイトと同様に縦スクロールのページレイアウトで作成される仕様です。
他のページについてもスマホやタブレットなどの横幅の小さいデバイスでは縦スクロールに切り替わる仕様で、ユーザビリティをキープします。お問い合わせフォームのページやランディングページなども通常の縦スクロールページ仕様で作成可能です。
WordPressテーマ「HORIZON」の機能概要
ここからは、横スクロールギャラリーに最適化された「HORIZON」の機能概要をご紹介いたします。横スクロールならではのデザインやユーザビリティを意識した機能が満載です。
レスポンシブする横スクロールページがサクサクつくれる
まずは何より横スクロールページがサクサクつくれる操作性が特徴的です。コンテンツビルダーを使って組み立てていきます。
コンテンツブロックごとにレイアウトを選び、自由に並び替えや追加が可能です。サイト上では各コンテンツが横並びにセットされていきます。
画像スライダーは2種類、デザインコンテンツは6種類のレイアウトから選択できます。どこに何をセットできるか直感的に理解できるUIでスムーズに設定可能です。
画像スライダーのバリエーション
デザインコンテンツのバリエーション
スマホ環境では縦スクロールに
スマホ環境では、各所のコンテンツがスマートにレスポンシブして縦に並びます。
PCで横スクロール、スマホでは縦スクロールに変化する機能は、横スクロールサイトの制作を強力にサポートします。
目を引く心地いい横スクロールモーション
横スクロールページを作れるだけではなく、ユーザーの操作性と心地良さを追求したスムーズなスクロールモーションが適用される仕様です。綿密に調整された心地いい動きを体感いただけます。
さらに、要所要所でパララックス（視差）効果を適用し、動きにアクセントを加えることも可能です。PC環境では、画像だけでなく動画にも適用できるので、下記箇所のようにユーザーの目を引く個性的なスクロールモーションを演出できます。
上記箇所のように画像と動画のパララックスを連続して並べれば、より個性的な動きで訴求いただけます。
画像コンテンツを際立たせるギャラリー
HORIZONは画像を見せるためのテーマなので、美しいギャラリーもすぐに出来上がります。
このような複数のレイアウトを選択した上で、お好みの画像をセットアップすればOKです。管理画面でも画像の位置をプレビューしながらセットアップできます。
横長と縦長画像の組み合わせの6枚レイアウト
上記のレイアウトサンプルは縦幅の大きいブラウザで撮影したスクリーンショットです。HORIZONではどのブラウザサイズでも同じレイアウトで閲覧できるように画像のサイズが変動するリキッドレイアウトを採用しています。
各所に細やかなアニメーションが適用されるので、個性的で美しいギャラリーがすぐに完成します。
WordPressデフォルトの画像ごとのキャプションも自動で反映されるので、作品名や商品名をスムーズに美しく表現可能です。
横スクロールページでも安心のロード画面
コンテンツのボリュームが多くなりがちな横スクロールページの仕様上、その読み込みに時間がかかる場合もあります。HORIZONではロード画面機能で対策可能です。読み込み途中のページ崩れの隠し、ロードアイコンを表示します。
横スクロールのHORIZONでは、ロード画面が横にスライドアウトして消えるモーションを採用しました。
横にスクロールする動きと整合性を保ちつつ、スタイリッシュな動きでページを読み込みます。
横スクロールサイトをつくるならWordPressテーマ「HORIZON」
横スクロールサイトの特徴と、専用に開発されたWordPressテーマ「HORIZON」の機能概要をご紹介いたしました。他とは異なる個性の強いサイトデザインですが、 HORIZONを使えば簡単に作成可能です。
横スクロールの心地いい動き、モバイルデバイスでのレスポンシブ、画像を美しく見せるデザインなど、すべてHORIZONで実現できます。
写真家のポートフォリオやアート作品のギャラリーサイトなど、個性を際立たせたいサイトにぴったりのテーマです。オリジナリティ溢れる横スクロールサイトの制作にぜひご活用ください。
コメント