Museを使ったWebサイト制作ワークフロー

背景のグラフィックスを配置

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Muse上で新規のWebサイトを作成し、マスターにレイアウトの参考となるプロトタイプの画像を配置します。
講師:
00:05:32

字幕

このレッスンでは 新規の書類を作成してレイアウトの基本となる画像の貼り付けを行います。それでは 今 Muse が新規に立ち上げられて新規作成の画面になっています。これですね、実際に作っていくサイトのファイルを作ってそこに作成したプロトタイプの画像を貼ってレイアウトの比準にしようと思います。では まず新規をクリックします。そうすると新規サイト設定がでてきます。では 必要な部分を設定していきましょう。この中で一番大事になる所ですがこの部分です。標準では「可変幅」レスポンシブの設定となってますがこれを必ず「固定幅」の方にしておきましょう。「可変幅」になっているとブラウザの幅によってレイアウトが変わってしまいますが今回は厳密にプロトタイプを作ってその内容を再現していくという内容ですので必ず「固定幅」で作って全くプロトタイプと同じ形を目指して作っていきます。そしたらページ幅ですが初期状態で 960 となってるので今回はこのまま行きます。その他の分ですね。その他はとりあえず初期設定のままで OK です。では この状態で OK をクリックして新しい Website ができました。「ホーム」、そしてすべてのぺージの元となるマスターのページができました。 では プロトタイプの画像を貼って比準にするためにマスターのぺージをまず開けます。すると、この様な状態となっています。では、全体が見えるようにちょっと縮小しておきましょう。この部分ですが、この線の内側の部分がさっき設定した Website の中身になってます。では ここにプロトタイプの全体を一括して一枚の画像にしたものを貼り付けます。それでは このレッスンのアセットの中からDesign_Homepage.png ですね。このファイルをドラッグ&ドロップしてここに持ってきます。そしてクリックすると貼り付けが行われます。では Muse の上なんですが丁度この様にドラッグしてきて画像が左右の真ん中に来るとこの様な中心に線が表示されて 吸着されます。必ず左右のピッタリ真ん中に持ってきましょう。そうすると、この周りの薄いグレーの部分これは背景色がただでてるだけですが、それの内側の実際のコンテンツが配置してある部分が丁度この 960 pixel の内側になるように作ってあるのがわかると思います。ではこの上で一番上はぴったりとつけておきます。これでレイアウトの基準となる画像を貼り付けることができました。 ただこのままだと、あまりにもくっきりと見ているので後から作業中に貼り付けたものが後から実際にページを構成する画像なのかそれとも、このレイアウトの見本なのかわからなくなってしまうという危険があります。なので、この画像をクリックして選択してる状態でこの不透明度の設定これを下げておいて大体 30% ぐらいにしておきましょう。そうすると、レイアウトの見本にはなるものの明らかに薄い表示となっているのでこれは本番の画像ではなく参考に貼ってるほうだなと判断することができます。そしてこれ参考の画像なので何か作業している時に間違ってこれがずれてしまうとレイアウト全体がずれてしまいます。なので、このきっちりした位置にレイアウトが終わったら必ずレイヤーパネルを開けてそしてこの「レイヤー1」の中に今一個だけ画像を貼ってるだけなのでこのオブジェクト表示のオン、オフができます。では このオン、オフとオブジェクト名の中間にある部分これクリックすると鍵のマークがでてきてロックすることができます。必ずロックしておきましょう。ただこれロックしてしまうともうドラッグもできないですし不透明度なんかも変えられないので予め位置を決めて不透明度もちゃんと設定した上でロックをかけるとこうした順番で作業を行ってください。 マスターのページにこの画像が貼ってあれば実際のアクセス先となるホームの方にもこれが見えていて最終的に これはマスターの方でなしにしてしまえば表示されないと大変便利な状態になっています。それではこの状態を基本として作業を進めていきます。

Museを使ったWebサイト制作ワークフロー

HTMLを意識せずにデザイン性に富んだサイトを制作することができるMuseを使えば、ワークフローを整理することでより効率的な作業を行えるようになります。このコースではPhotoshopやInDesignを使ったプロトタイプの作成やTypeKitフォントの使用、グラフィックの配置や書式の設定、サイトのエクスポートに関するテクニックなどを学びます。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年07月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。