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

その下準備として、長いホーム画面をまずは用意するところから作業を始めよう。デザインページでホーム画面を開いたら、ページ下部をドラッグして引き延ばし、縦長の画面へと変更する。フッターのコンテンツがある場合は、それも一緒に移動させる。

次に、各ページのコンテンツを見せたい順番に配置していく。筆者のWebサイトの場合、【top】、【profile】、【gallery】という順番で、元のスマホサイトから中身をコピー&ペースして並べていく。各コンテンツの間に特に仕切りなどは必要ないが、見やすいようにややスペースを空けておくとよい。

○アンカーリンクを設定する

中身を整えたら、各パートへジャンプできるように【アンカーリンク】を設定する。クリックするとページが切り替わる通常のリンクに対して、同ページ内での移動を行うリンクを【アンカーリンク】と呼ぶ。これまでは、1ページの中に長い文章が含まれているサイトで、目次から該当パートへリンクする目的で使われることが多かったが、最近ではシングルページのコンテンツ間移動に活用されるようになってきている機能だ。Museでは、この【アンカーリンク】をボタンひとつで設置できるようになっている。