Adobe Museでレスポンシブなwebページを一からデザインする方法を学習します。

このチュートリアルで作成できるレスポンシブなwebサイトをご覧ください。このwebページをご覧いだだき、レスポンシブな要素が、デスクトップ、タブレット、スマートフォンの各ブラウザーで、サイズの違いに対応してどのように変化するかをよくご確認ください。 

このレスポンシブなwebサイトを実際に作ってみることができます。Responsive Web Design (Muse) Creative Cloudライブラリを開いてください。「保存」をクリックして、自分のアカウントにライブラリのコピーを作成します。スターターファイルを参照するには、レスポンシブwebデザインのスターターファイルリンクをクリックし、コンピューターにダウンロードしてください。

Creative Cloudライブラリフォルダーにアクセスできない場合は、Museのライブラリとしてコンピューターに素材をダウンロードすることができます。Responsive Web Design (Muse).mulibファイルをダブルクリックすると、自動的にMuseでファイルが開きます。その後は、Museのライブラリ(ウィンドウ/ライブラリ)パネルで使用できます。

注意:ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。

レスポンシブなデザインの確認(1:18)、プロジェクトファイルへのアクセス(2:48)

サイトプランを構築する

新しいサイトを作成し、プランモードでサイトプランを設計しましょう。サイト用に作成するページを計画して名前を付けたら、ページタイトルを追加します。 

webおよび印刷用のレイアウト(00:20)、最終的なページデザインの確認(2:10)、サイトプランへのページの追加(2:27)

マスターページを設定する

マスターページを作成すると、webサイトのすべてのページに共通のデザイン要素を適用できます。webサイトデザイン全体で使用する段落とグラフィックスタイルを追加します。 

マスターページを開きモジュールを確認(00:18)、マスターページ要素の確認(00:55)、マスターページのデザイン(1:25)、生産性に関するヒント(2:24)

フッターを作成する

webサイトにレスポンシブなプロパティを持つフッターを作成し、スタイルを設定します。ソーシャルメディア用のアイコンを追加し、ロールオーバーステートを定義して、ユーザーがアイコン上にマウスを置くときの目印にします。自分のサイトから他のwebページを開くために、フッターアイコンにハイパーリンクを設定します。メニューウィジェットを使って、サイトのナビゲーションを定義します。最後に、他のウィジェットを使ってフッターにフォームを追加します。

フッターエリアの定義(00:09)、フッター要素の追加(00:39)、ロールオーバーステートの定義(2:32)、ハイパーリンクの追加(4:03)、フッターへのナビゲーションメニューの追加(5:30)、フッターへのフォームの追加(7:02)

ヘッダーを作成する

webサイトにレスポンシブなプロパティを持つヘッダーを作成し、スタイルを設定します。サイトロゴとボタンを追加し、整列機能を使ってレイアウトを調整します。ヘッダーにサイトナビゲーション用のメニューを追加し、その外観をカスタマイズします。

ヘッダーエリアの定義(00:12)、ヘッダー要素の追加(00:31)、ページメニューナビゲーションのカスタマイズ(1:42)

マスターページにレスポンシブな要素を追加する

ピン留めや他のレスポンシブな設定を使って、ブラウザーのサイズが異なる多様なデバイスでも、適切にページ要素が表示されるようにします。デザインにブレークポイントを追加し、ブラウザーのサイズに対応して変化するレイアウトを管理します。レスポンシブなツールを使って、様々なレイアウトでサイトがどのように見えるかをプレビューします。ページ要素を調整し、様々なブレークポイントで最適に表示されるようにします。

レスポンシブなレイアウトのための要素のピン留め(1:18)、ブラウザーでのデザインのプレビュー(3:34)、ブレークポイントの追加(4:19)、様々なブレークポイントのための要素の位置変更(7:27)

レスポンシブメニューを追加する

デスクトップ、タブレット、スマートフォンのブラウザーで適切に表示するためのメニューをデザインおよびレイアウトします。ヘッダーとフッターの要素の構成方法を説明します。広いデスクトップから狭いスマートフォンへの画面サイズの違いに対応してメニューを変化させ、メニューアイテムも調整します。

タッチ式メニューの追加(00:52)、レイヤー作成によるページ要素の構築(3:32)、タブレットおよびスマートフォンレイアウトのみでのレスポンシブメニューの表示(5:29)

スマートフォンの画面用のレイアウトを作成する

スマートフォンレイアウト用のブレークポイントを追加します。デスクトップやタブレットよりも画面が小さいスマートフォンブラウザー上で適切に表示されるよう、ページ要素を縦方向のレイアウトに再構成します。

小さいレイアウト用のフッターコンテンツの最適化(1:02)、ブレークポイントの追加(3:00)

トップページを作成する

サイトのトップページデザインを仕上げます。テキストと画像に調整を加えてレイアウトを微調整し、ブラウザーに対応してコンテンツが適切にサイズ変更および拡大縮小されるようにします。追加のロールオーバーステートを定義し、ページの他の部分にナビゲートしたときのユーザーの操作性を強化します。

ヘッダーおよびフッターの個別のブレークポイントの定義(00:52)、レスポンシブなホームページ要素の追加と確認(2:14)、ロールオーバーステートおよび拡大縮小の設定の確認(7:19)

webサイトを仕上げてパブリッシュする

webサイトのデザインを仕上げ、個々のページにブレークポイントを追加する使用例を確認します。これは、マスターページ上のブレークポイントとは異なります。また、その他のデザインテクニックを学習します。ディスプレイに最適化されたレイアウトが表示されるように、コンテンツの表示をコントロールする方法、小さい画面で読みやすくするためにテキストを拡大する方法、ブレークポイント間でフォーマットとレイアウトをコピーする方法について説明します。

最後に、確認のためにサイトを共有またはライブでパブリッシュするためのオプションについて説明します。

ブレークポイントの確認(1:00)、レスポンシブなレイアウトのための画像調整(2:36)、様々なブレークポイントでのテキストのフォーマット(4:26)、パブリッシュオプション(6:42)
05/15/2019
The Royal Studio
このページは役に立ちましたか。