Muse CC 2015 導入ガイド[可変幅編]のベータテスト終盤戦です。来週中には間に合うようにしたいと思います。
今日は、「作業の進め方」に関するパートのダイジェストを掲載します。


Museは「マウスドラッグと数値入力だけ」でレスポンシブWebデザイン(可変幅)のページを作成することができ、HTMLやCSSの知識を必要としない画期的なツールですが、適当に触りながら試行錯誤する場合、「手順」を意識する必要があります。

「手順」が頭に入っていないと、作業中に手戻りが発生したり、面倒な手作業を強いられることがあります。マウスドラッグで自在にWebページを生成する高度なシステムでは、やむを得ないことで、ユーザー側が習得すべき知識だと考えてください。

例えば、ブレークポイントを設定する前にやっておく作業は以下のとおりです。
※レイアウトのデザインによって多少変わります。

一例:

STEP -1 カンプの設定
STEP -2 素材の準備
STEP -3 仮配置
STEP -4 余白の調整
STEP -5 グループ化
STEP -6 ブラウザーチェック


[STEP -1]カンプの設定
Webページのカンプをマスターページに配置します。透過設定が異なる2パターンのマスターページをコンテキストメニュー(右クリックで表示)で切り替えながら作業を進めます。
※カンプはPhotoshopやIllustratorで作成すると速いですが、Museのマスターページ上で作成してもかまいません。




[STEP -2]素材の準備
構成要素をワークスペースに配置しておきます。この段階では、ダミーでもかまいませんが、情報量(おおよその文字数、画像の比率など)は決めておきます。




[STEP -3]仮配置
マスター(カンプ)に沿って構成要素を配置していきます。レイヤーの順番は、ページをリニアライズ(線形化)したときの順番に合わせます。
※ページの最上部に配置した要素は、レイヤーの一番下に表示されます。




[STEP -4]余白の調整
Museのデフォルトは「可変幅」です。スクラバーをドラッグして、伸縮するレイアウトの崩れた箇所(予期せぬ空白が発生するなど)を修正しておきます。




[STEP -5]グループ化
構成要素をヘッダー、ナビゲーション、記事、サイドバー、フッターなどに振り分け、グループ化します。レイヤーをグループごとに作成して、要素をまとめます。
※ヘッダー、ナビゲーション、記事、サイドバー、フッターなどのグループは、カンプの段階で大まかに決めておきます。




[STEP -6]ブラウザーチェック
Museのデフォルト設定の状態で、破綻する箇所がないかチェックします。複数のブラウザーで確認し、問題があれば修正。この段階では、まだブレークポイントを設定しません。




次のプロセスは、「サイズ変更(なし/レスポンシブの幅/ブラウザー幅に合わせて拡大・縮小)」と「サイズと位置のコピー先」を計画的に使いながら、ブレークポイントを決めていきます。

ブレークポイントを設定しながら、試行錯誤すると、レイアウト内容によっては面倒な作業が発生してしまうことがあり、注意が必要です。
※固定幅レイアウトの場合は、逆に「最初にブレークポイントを設定」しておいた方が、スムーズに進みます。可変幅のページとは作業の進め方が変わります。


ブレークポイントの追加作業では、固定幅編で学習した「サイズ変更」と「サイズと位置のコピー先」がとても重要になってきますので、可変幅のレイアウトを学ぶ前に必ず習得しておいてください。



発売中:
Muse CC 2015 導入ガイド[固定幅編]
マウスドラッグだけでつくるレスポンシブWebデザインのワークフロー
電子書籍(EPUB)とレッスンデータ/講座ビデオ(40分)/価格:800円(税込)



Muse / Dreamweaver / Animate | Digital Creative Series
デジタルクリエイティブシリーズ



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

筆者:
Creative Edge School Books