スマホ時代の流行・"縦スクロールサイト"に挑戦! - Adobe Muse体験記(13)
コードを書かずにWebサイトを作成できる画期的なWeb制作ソフト「Adobe Muse」。本レポートでは、このソフトを使い、自身のWebサイトのリニューアルを行うことを決意した著者(HTMLの知識ほぼゼロ)の体験をお伝えしていく。
前回、第12回では、スマホ最適化サイトの作成方法をお伝えした。続く今回は、欲を出してスマホサイトを「縦スクロールデザイン」へとレベルアップさせたいともくろむ筆者の作業工程をレポートしたい。
○スマホサイトと言えば、縦スクロールのデザイン
ここ1～2年、スマホ対応サイトでよく見かけるようになってきたのが、縦長のページ1枚で構成されている「シングルページ」、あるいは「縦スクロールサイト」、「ペライチ」などと呼ばれるサイトである。従来のWebサイトでは、リンクをクリックするとページが切り替わるところを、同一ページ内にすべてのコンテンツが並列されており、該当の場所まで自動スクロールでジャンプするというものだ。皆さんも一度や二度は目にしたことがあるのではないだろうか?
このような「シングルページ」のデザインをする場合、複数ページに分かれている内容を1枚にまとめるため、必然的にページは絵巻物のように長くなる。その下準備として、長いホーム画面をまずは用意するところから作業を始めよう。
デザインページでホーム画面を開いたら、ページ下部をドラッグして引き延ばし、縦長の画面へと変更する。フッターのコンテンツがある場合は、それも一緒に移動させる。
次に、各ページのコンテンツを見せたい順番に配置していく。筆者のWebサイトの場合、【top】、【profile】、【gallery】という順番で、元のスマホサイトから中身をコピー&ペースして並べていく。各コンテンツの間に特に仕切りなどは必要ないが、見やすいようにややスペースを空けておくとよい。
○アンカーリンクを設定する
中身を整えたら、各パートへジャンプできるように【アンカーリンク】を設定する。クリックするとページが切り替わる通常のリンクに対して、同ページ内での移動を行うリンクを【アンカーリンク】と呼ぶ。これまでは、1ページの中に長い文章が含まれているサイトで、目次から該当パートへリンクする目的で使われることが多かったが、最近ではシングルページのコンテンツ間移動に活用されるようになってきている機能だ。
Museでは、この【アンカーリンク】をボタンひとつで設置できるようになっている。デザインページで上部のバーを見ると、いかりのマークをしたアイコンがあるのが見えるはずだ。こちらを1回クリックしてから、ページ上のアンカーを置きたい場所をクリックしよう。
アンカーを打つ場所は、各コンテンツの切れ目である。「アンカー」とは英語で「いかり」のこと。まさにその名の通りで、スクロールを止めたい場所に、あらかじめいかりを下ろしておくというイメージだ。ちなみに、打つ箇所が多い場合は、先ほどのアンカーマークのボタンを複数回クリックすると、その回数分だけリンクボタンを持った状態でカーソルを移動させることができる。
クリックすると、【アンカー名を変更】というポップアップウィンドウが表示されるので、ここでアンカーの名前をそれぞれ【top】、【profile】、【gallery】、【contact】のようにコンテンツの名前に変更しよう。
従来のWebサイトでの「profile.html」「gallery.html」といったページの名前にあたる部分となる。
●リンク先へスクロールする"縦スクロールサイト"が完成!
○アイコンのリンク設定を変更する
必要なアンカーを打ち終えたら、その場所へとジャンプできるようにハイパーリンクを設定する。リンクを貼りたいアイコン画像をクリックし、【ハイパーリンク】のプルダウンを開くと【スマートフォン】のくくりの中に、先ほど打ったアンカーのリンクも追加されているのが分かる。この中から、各アイコンのリンク先に適応するものを選べば作業は完了だ。ハイパーリンクの基本編は、第6回をチェックしてほしい。
○スマホからプレビューしてみよう！
これで「シングルページ」のデザインが完成した。ドキドキしながら、パブリッシュしてiPhoneから動作確認をしてみると……イメージ通りにリンク先へとスクロールされるようになっている!
この滑らかな動き、目指したセクションの手前でスッと止まる感触。そう、これが欲しかった!と思わず小躍りする筆者であった。
ぜひ実際の動作などはこちらのデモサイトにて確認してみてほしい。(シングルページデザインで閲覧できるのはスマホからのアクセスのみ)
○さらなるステップアップには「パララックススクロール」を
今回の筆者のWebサイトでは使用していないが、アンカーリンクの応用編として最後に紹介しておきたいのが「パララックススクロール」の機能だ。1枚もののWebサイトでは、スクロールをするに従って背景写真やアイコンが動いたり、文字が現れたりする「モーション」を駆使することも多い。この機能を「パララックススクロール」と呼び、近年のWebデザインのトレンドとなっている。
Museでは、このパララックススクロール機能にも対応しており、スクロールに合わせて絵や文字を指定した向きに移動させたり、透明度を変更したりすることが可能だ。オフィシャルサイトに分かりやすいチュートリアルが展開されているので、ぜひ参照してみてほしい。なお、サンプルデータをダウンロードして自分のPC上で開けば、パララックススクロールのページが実際どのように構築されているのか解剖して見ることも可能だ。
○最後に
13回にわたりお届けしてきた「Adobe Muse体験記」。
マイペースな連載であったが、これにて最終回となる。振り返ってみると、HTMLの知識がゼロの私でもMuseの力を借りながら、自身のWebサイトをリニューアルし、そしてスマホ最適化のサイトまで作ることができた。作業するたびに、Museの操作の快適さや、スピード感に驚きながらの連載執筆であった。
また、記事を制作する中で感じたのは、Museは今も急速にアップデート、成長を続けているソフトだということ。この連載を継続している間にも頻繁にバージョンアップがあり、インタフェースの改善や新機能の実装があった。それに加え、1年ほど前には英語でしか展開されていなかったチュートリアルムービーが、最近では吹き替えや字幕付きで見ることができるようになったこともうれしい変化のひとつ。チュートリアルムービーを見ながら、Museの勉強をしているのか、英語の勉強をしているのか分からなくなったものだが、それも今となってはよき思い出である……。
内容・サービス共に、ユーザー思いのアプリケーションへと進化をしているMuse。
今後ますますそのユーザーの輪を広げて行くのではないだろうか。そして、現在Museを使っているユーザーの方、そしてこれからMuseと出会うであろうユーザーの方にとって、この連載が少しでも手助けとなれば幸いである。
提供：
