スマホ時代の流行・"縦スクロールサイト"に挑戦! - Adobe Muse体験記(13)

アイコンのリンク設定を変更する

必要なアンカーを打ち終えたら、その場所へとジャンプできるようにハイパーリンクを設定する。リンクを貼りたいアイコン画像をクリックし、【ハイパーリンク】のプルダウンを開くと【スマートフォン】のくくりの中に、先ほど打ったアンカーのリンクも追加されているのが分かる。この中から、各アイコンのリンク先に適応するものを選べば作業は完了だ。ハイパーリンクの基本編は、第6回をチェックしてほしい。

スマホからプレビューしてみよう！

これで「シングルページ」のデザインが完成した。ドキドキしながら、パブリッシュしてiPhoneから動作確認をしてみると……イメージ通りにリンク先へとスクロールされるようになっている!

この滑らかな動き、目指したセクションの手前でスッと止まる感触。そう、これが欲しかった!と思わず小躍りする筆者であった。ぜひ実際の動作などはこちらのデモサイトにて確認してみてほしい。(シングルページデザインで閲覧できるのはスマホからのアクセスのみ)

さらなるステップアップには「パララックススクロール」を

今回の筆者のWebサイトでは使用していないが、アンカーリンクの応用編として最後に紹介しておきたいのが「パララックススクロール」の機能だ。1枚もののWebサイトでは、スクロールをするに従って背景写真やアイコンが動いたり、文字が現れたりする「モーション」を駆使することも多い。この機能を「パララックススクロール」と呼び、近年のWebデザインのトレンドとなっている。

Museでは、このパララックススクロール機能にも対応しており、スクロールに合わせて絵や文字を指定した向きに移動させたり、透明度を変更したりすることが可能だ。オフィシャルサイトに分かりやすいチュートリアルが展開されているので、ぜひ参照してみてほしい。なお、サンプルデータをダウンロードして自分のPC上で開けば、パララックススクロールのページが実際どのように構築されているのか解剖して見ることも可能だ。

最後に

13回にわたりお届けしてきた「Adobe Muse体験記」。マイペースな連載であったが、これにて最終回となる。振り返ってみると、HTMLの知識がゼロの私でもMuseの力を借りながら、自身のWebサイトをリニューアルし、そしてスマホ最適化のサイトまで作ることができた。作業するたびに、Museの操作の快適さや、スピード感に驚きながらの連載執筆であった。

また、記事を制作する中で感じたのは、Museは今も急速にアップデート、成長を続けているソフトだということ。この連載を継続している間にも頻繁にバージョンアップがあり、インタフェースの改善や新機能の実装があった。それに加え、1年ほど前には英語でしか展開されていなかったチュートリアルムービーが、最近では吹き替えや字幕付きで見ることができるようになったこともうれしい変化のひとつ。チュートリアルムービーを見ながら、Museの勉強をしているのか、英語の勉強をしているのか分からなくなったものだが、それも今となってはよき思い出である……。

内容・サービス共に、ユーザー思いのアプリケーションへと進化をしているMuse。今後ますますそのユーザーの輪を広げて行くのではないだろうか。そして、現在Museを使っているユーザーの方、そしてこれからMuseと出会うであろうユーザーの方にとって、この連載が少しでも手助けとなれば幸いである。