デジタルクリエイティブ・コラム

Museアカデミー( http://design-zero.tv/muse2016/ )のページは、ティザーページの公開から4回ほど大胆に作り変えていますが、今後もアップデートが続くため、レスポンシブWebデザインから、(デスクトップとスマートフォンの)2種類のページを作り分ける制作方法に変更しました。

2つのページを作成しなければいけませんが、レスポンシブWebデザインより速く、作業が完了します。情報のまとまりを入れ替えるような作業もカット&ペーストだけで済みます。

レスポンシブデザインの場合は、ブレークポイントごとの可変幅の調整、サイズと位置の調整などを計画的に進める必要があるため、レイアウトを大幅に変更する場合、かなり時間がかかってしまいます(といってもコーディングで作るよりは速いのですが)。

20160609-Blog-01-01

「ページの作り分け」では、「ワイドスクリーンで見やすいレイアウト、縦長の小さなスクリーンで見やすいレイアウト」の2つを考えながら進めていくだけなので、作業そのものはとてもシンプルです。
デスクトップとスマートフォンのページを並べて表示し、共有する要素(テキストや画像)は、隣のページにドラッグ(コピー)しながら同時に作成していきます。

20160609-Blog-01-02



Museアカデミーのようなシングルロングページは、最上部に配置されているメニューと各セクションを「縦スクロールの高速移動」で行ったり来たりする仕様になります。

20160609-Blog-01-03

スマートフォンで表示されるページでは、最下部にメニューがあり、各セクションごとにメニューに移動できるボタンが配置されています。

20160609-Blog-01-04

ページの最上部にハンバーガーアイコンを置いて、タップするとメニューが展開するという手法もありますが、スクロールしながら直感的に操作できる前者の方が使いやすいとの意見が多く、今回も採用しています。

メニューの折り畳み/展開は、項目数が多くなると、展開したメニューをスクロールしなければいけません。スマートフォンの場合、片手で持ち、親指だけで操作するシーンが多いので、最下部にメニューを置いて各セクションから移動できる方が、楽だと感じる人が多いようですね。


 
利用者のフィードバックを参考に、何度も改善しながら、ユーザビリティを高めていく作業では、レスポンシブWebデザインのブレークポイントを変更したり、固定レイアウト(ページ作り分け)に変更したり、メニューの構造を作り変えたり、と大改造の連続。

Museだからこそ、こんな大胆な作業も可能だと思っています。


長期運用のウェブサイトは、Dreamweaverを使うことになりますが、短期間にたくさん作らないといけないシングルページ(特設ページ、プロモーションページ、ランディングページなど)は、やはりMuseが便利。

Museアカデミーのページは、今後、レイアウトを簡素にしてレスポンシブWebデザインに戻るかもしれませんし、ページを分割して構造を変更するかもしれません。

「そんな作業は面倒だからやめよう」と妥協せずに、改善を続けられるのが、Museを採用する利点です。



Museアカデミー
Adobe Museを習得するための学習ページ。デジタルクリエイティブには、DreamweaverやAnimate、Photoshopなどの学習コンテンツがあります。
20160609-Blog-01-05


シンクゼロマガジンとは?

筆者:
Creative Edge School Books