コヌドを曞かずに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サむトのファむルの、【プラン】画面を開こう。するず、画面䞊郚に【デスクトップ/タブレット/スマヌトフォン】ずいうボタンが䞊んでいるのに気付くはずだ。ここから、【スマヌトフォン】を遞び、クリックをする。

プラン画面で【スマヌトフォン】をクリック(※なおMuse CCのバヌゞョンがアップされたため、今回よりキャプチャ背景色が倉曎ずなっおいる)

するず、「スマヌトフォンレむアりトを远加」ずいうポップアップりィンドりが衚瀺されるので、ここで「コピヌ元」ず曞かれおいるプルダりンメニュヌから【デスクトップ】を遞がう。デスクトップ(PC甹)に䜜成したデヌタを元に、これからスマホサむトを構築したす、ずいうこずだ。たた、コピヌする内容を遞択するチェックボックスが出おくるので、ここはたず党おにチェックを぀けお進んでみるこずにする。

ポップアップりィンドりが出おくる

【デスクトップ】を遞び、チェックボックスを遞んでOK

スマヌトフォン甚のプラン画面が完成

【OK】を抌しお進むず、【スマヌトフォン】のプラン画面が自動で生成された。サむトの構成はそのたたに、スマホ画面サむズにリサむズされたペヌゞアむコンが䞊んでいる。ただ、アむコン自䜓は癜玙になっおおり、コンテンツたではコピヌされおいない暡様。ペヌゞ内の画像デヌタや文章ずいった䞭身に぀いおは、自分でコピヌ&ペヌストをしながら流し蟌んでいくこずになるようだ。