●トレンドの"シングルページ"もMuseで簡単に制作コードを書かずに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と出会うであろうユーザーの方にとって、この連載が少しでも手助けとなれば幸いである。
2014年11月25日食の安全・安心に注目が集まる今、「農」と「食」をテーマに、女性ならではの感性を生かしたはたらき方をはじめる女性が増えている。2012年10月、札幌で開講した社会人向けのスキルアップ・セミナー「実学!6次化リーダー養成塾 in SAPPORO」には、酪農家や飲食店オーナーなど、さまざまな分野で活躍する女性たちが集まった。農水省が仕掛け人となって全国各地で開催されるこのセミナーのテーマは「6次産業化」。農業などの1次産業と、2次(加工)・3次(販売)産業との垣根をなくそうという考え方で、ファーマーズマーケットのように生産者の顔が見える野菜を販売したり、地場産の食材を使った商品を提供する農村カフェを開いたりと、全国各地であたらしい取組みがはじまっている。子育てや食関係の仕事についた経験から、食の安全・安心を守りたい!という思いをもった女性が多く、セミナー参加者のひとりは札幌市内で「食育」をテーマにしたアンテナショップの開業をめざす。ほかにも、野菜ソムリエの資格を取得してフードコーディネートや食材販売の事業をはじめるなど、女性ならではの洗練された感性を原動力に、自分らしくはたらくライフスタイルが定着してきているそう。2013年1月には、東京でも新講座を開講予定!気になる人は、 公式サイト をチェック。(※東京版の詳細は、11月中旬アップ予定)【札幌近郊にお住いのWoman.excite 読者限定追加募集】すでに募集定員に達した「実学!6次化リーダー養成塾」ですが、今回、Woman.excite 読者限定で追加受講を受付します。■「科目2」開講日:11月10日(土)、11日(日)/24日(土)、25日(日) ※12月開校の「科目3」からのご受講も受け付けます。■開講場所:札幌大通り「ドリノキ」(南北線「大通」駅直結)■追加募集数:5名(Woman.exciteをご覧の女性の方限定)■お申込み方法:事務局のメールアドレス(info@notosoken.jp)まで、「お名前・メールアドレス・お電話番号・ご希望の参加日」をご連絡ください。※セミナー内容の詳細は こちらをチェック
2012年10月31日