今や欠かせない「スマホ最適化サイト」を"コピペ"で作る! - Adobe Muse体験記(12)

●PCサイトのデータでスマホサイトを構築
コードを書かずにWebサイトを作成できる画期的なWeb制作ソフト「Adobe Muse」。本レポートでは、このソフトを使い、自身のWebサイトのリニューアルを行うことを決意した著者(HTMLの知識ほぼゼロ)の体験をお伝えしていく。

■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)
【レポート】4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)
【レポート】Webサイトの構成がボタンひとつで完成! 自分のサイトの「プラン」を作る - Adobe Muse体験記(3)
【レポート】コード記述不要の直感的な操作! Webサイトにアイコンをレイアウトする - Adobe Muse体験記(4)
【レポート】カンタン操作でpsdファイルをそのままレイアウト! Webサイトに画像を配置する - Adobe Muse体験記(5)
【レポート】ページ間リンクからパブリッシュまでサクサク進行! サイトの形を整えてみた - Adobe Muse体験記(6)
【レポート】色指定はスポイトツールで! Webサイトを"絵"のようにデザインする - Adobe Muse体験記(7)
【レポート】写真やイラストを魅力的に見せる「Lightbox」をコードを書かずにラクラク設置! - Adobe Muse体験記(8)
【レポート】マウスオーバーの効果も手軽に設定! 画像をキレイに見せる「Lightbox」を設置する - Adobe Muse体験記(9)
【レポート】GoogleマップやTwitterボタンが約5分で設置可能!各種ウィジェットを手軽に導入する - Adobe Muse体験記(10)
【レポート】GoogleマップやTwitterボタンが約5分で設置可能!各種ウィジェットを手軽に導入する - Adobe Muse体験記(11)

第11回をもって、無事にWebサイトは完成した。……が!まだまだMuseの魅力は奥が深い。という訳で、番外編として今回は「スマートフォンサイト」の作成の様子をレポートしたいと思う。○Webサイトのスマホ最適化も、Museにおまかせ!

スマホでネットを見る機会や時間が増えてきている昨今、どうせWebサイトを作るならば、PCからもスマホからもきれいに見えるサイトにしたい。そう思う人は多いと思う。しかし、簡単に「スマホ最適化」とは言うものの、実際にどうやって「PC用」と「スマホ用」のサイトを作ればいいのか、はたまた、その表示をどうやって切り替えるようにプログラミングすればよいのか。これらはコーディング知識のない初心者にとっては未知の世界である。

かくいう筆者も、HTMLの知識は皆無。しかし、そんな筆者のことを、Adobe Museが救ってくれた。Museならば、同一アドレスのままPC/スマホサイトをそれぞれ用意することができる。しかも、各ユーザーのアクセスしているデバイスを認識し、最適なページに自動切り替えされるようにしてくれるのだという。

○スマホサイトを「プラン」する

まずは、完成しているPCサイトのファイルの、【プラン】画面を開こう。すると、画面上部に【デスクトップ/タブレット/スマートフォン】というボタンが並んでいるのに気付くはずだ。ここから、【スマートフォン】を選び、クリックをする。

すると、「スマートフォンレイアウトを追加」というポップアップウィンドウが表示されるので、ここで「コピー元」と書かれているプルダウンメニューから【デスクトップ】を選ぼう。デスクトップ(PC用)に作成したデータを元に、これからスマホサイトを構築します、ということだ。また、コピーする内容を選択するチェックボックスが出てくるので、ここはまず全てにチェックをつけて進んでみることにする。

【OK】を押して進むと、【スマートフォン】のプラン画面が自動で生成された。サイトの構成はそのままに、スマホ画面サイズにリサイズされたページアイコンが並んでいる。ただ、アイコン自体は白紙になっており、コンテンツまではコピーされていない模様。ページ内の画像データや文章といった中身については、自分でコピー&ペーストをしながら流し込んでいくことになるようだ。

●最小限の作業でスマホサイトが完成!
○コンテンツをコピー&ペースト

いったん【プラン】画面に戻り、再び【デスクトップ】の表示に切り替えたら、デスクトップ版の【Aマスター】を開く。そこで「Ctrl(command)+A」のショートカットキーを押すと、ページ内の要素が全て選択されるので、続けて「Ctrl(command)+C」を押してコピーする。そして、再び【スマートフォン】用の【Aマスター】へと移動し、「Ctrl(command)+V」でペーストをする。

先ほどコピーした要素が、ページの中にペーストされた。しかし、当然ながら縦長のスマホ画面にはうまくフィットしていない状況。画面におさまるように適宜、ドラッグや縮小を行い、画面におさまるように手を加えていく。

リサイズができたら、同様に他のページも作業を進める。Lightboxのスライドショーを埋め込んであるギャラリーも、メッセージフォームを配置したコンタクトページも、そのまま丸ごとコピー&ペーストでOKだ。

○スマホサイトでもマスターを活用しよう

順調にコピペ作業を進めていた筆者であったが、【profile】ページへの作業中に一瞬手が止まってしまった。トップに配置されているイラストが大きすぎて、文字を入れるスペースがないのである……。

プランページに戻って見てみると、【profile】のページにはどうやらデスクトップ版と同様に【A-マスター】が適用されているようだ。横長のPCスクリーンでは、左側にイラストが入ってちょうどバランスが取れていたが、スマホにはその配置は適さない。そこで、【profile】ページには【A-マスター】ではなく、イラストを取り除いた状態の【B-マスター】を適用することにした。

このようにスマートフォンサイトの構築においても、マスターページの機能を理解することでスムーズに作業ができるので、ぜひ覚えておいてほしい。なお、マスターページの基本機能については第4回でも解説している。

○リンクを修正する

全てのページコンテンツがそろったら、最後の仕上げ、「リンクの修正」である。現時点では、まだリンクの設定が【デスクトップ】のままになっているため、【スマートフォン】に変更をする。この作業を忘れると、せっかくトップページはスマホ最適化ページで表示されても、リンクをクリックすると再びPC用のページに連れ戻されてしまうため、注意が必要だ。

【ハイパーリンク】をクリックすると、ここに以前はなかった【スマートフォン】のリンク先が自動で生成されているのが分かる。ここから該当のリンクを選び、各アイコンのリンク先を修正していく。作業が完了したら、サイトを保存し、いつもと同じようにパブリッシュしてみよう。(「パブリッシュって何だっけ……」という人は第6回をチェック!)

○スマホからアクセス!

こうして、ついにスマホサイトが完成!さっそく自身のiPhoneからアクセスしてみると、ちゃんとスマホバージョンのデザインで表示されている!ギャラリーページのスライドショー、およびコンタクトフォームも問題なく動作していることが確認できた。

また、同じURLにPCからアクセスすると、こちらはデスクトップ版のデザインで表示されている。PC/スマホ版の自動切り替えが機能していることに、テンションの上がる筆者であった。

ちなみに、実際のサイトの様子も確認していただくことができるようになっている。スマートフォン版を確認したい場合はお手持ちのスマホからアクセスしてみてほしい。

スマホ最適化に成功して気分のよくなった筆者は、またしても新たな挑戦をしてみることにした。それは、今流行の「縦スクロールサイト」を作ることである。Webサイト自体が1枚の縦長の絵巻物のように構成されており、アイコンをクリックすると、そのリンク先までビューンとスクロールされるというものである。これまた、どうやって作っているのか筆者にとっては未知の世界。でも、きっとMuseならできてしまう気がする……そんな根拠のない自信だけを頼りに、次の作業へと突入したのであった。

果たして話題の「スクロールサイト」を実装できるのだろうか。次回へと続く!