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

Photoshopでのプロトタイプ作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshopを使って作られたプロトタイプのサンプルを分析しながら、細かくグループ分けを行うなどのポイントを解説します。
講師:
00:08:36

字幕

このレッスンでは Photoshop でのプロトタイプ作成例について解説します。それではこのレッスンのサンプルファイルを今 Photoshop で開いています。ちょっと大きくしてみるとこの様な形でもうページとして成り立っている内容となっています。レイヤーの部分見て頂くと根本的に、ページの背景となる部分そして、ほかのコンテンツといった形になっていてそれぞれの部分はかなりこのグループに纏められています。まずページの基本的な所ですが「イメージ」>「画像解像度」ちょっと見てみましょう。そうすると「幅」が 1024 pixel そして「高さ」が 1668 pixel となっています。高さはコンテンツの量によってどんどん変わっていくのですけど決めなければいけないのがこの「幅」の部分です。これを必ずプロトタイプの時点でどれぐらいにするか決めておきましょう。1024 pixel 一般的なパソコン向けWebsite のデザインの幅の数値と言えると思います。そして新規に0から作る際は「新規...」、ファイル作成で「幅」を先程の 1024 にしておきます。そして「高さ」なんですがこれはどんどん変わっていく可能性があるので仮で2000 ぐらいとかに設定しておきましょう。 そして「解像度」は必ず72 dpi ですね、これに設定します。そうするとこの様な幅でできてもし最終的に余ってしまうようであれば必要な部分だけ選択して「切り抜き」とやることで最適な高さにすることができます。また逆に高さが足りないという時には「イメージ」メニューの「カンバスサイズ...」の方ですね。これで この基準位置を、上の真ん中にしてここを基準にしてそして「高さ」を増やしてやることで下に新しい部分が追加されるとその様な動作になります。合わせて根本的にPhotoshop の設定なんですがPhotoshop の環境設定Mac の場合には Photoshop CC メニューの中の「環境設定」です。Windows の場合はこの「編集」メニューの一番下にあります。これの「単位・定規...」という所でソフト内で扱われる様々な大きさなんかの単位ここの「定規」の部分をpixel にしておきましょう。色々 ミリ表示とか初期状態ではミリ表示になっているんですがWebsite のデザインなので、必ずこれをpixel にしておきます。では細かい部分を見ていきましょう。この body というグループに全部纏まってます。 body というのは、この Website の中身のことを指します。そしてその中が更にHeader Main Footer と分かれてます。Header の部分がこの上の部分ですね。そして main の部分がこの真ん中の所。そして Footer は下の部分ですね。そして Header の所から見ましょう。Header を開けると更に グループ分けされています。このこまめにグループ分けしておくこれがかなり重要なポイントとなります。Header main Footer といった大まかな分類は勿論のこと更に Header の中でもこれを見て見るとロゴであったりそしてメニューの部分そしてこのメッセージの表示であったり背景の写真写真は1枚だけなので単体になってますけど複数のパーツで構成されてるものは必ずグループになってます。ちょっとロゴを拡大して見てみましょう。logo の中は実はこのロゴ自体は元々この部分だけなんですね。そして後ろにロゴが見えやすいようにこの様に黒い四角が置いてあります。そして 更にその下にあるmenu の所ですけどmenu も開けてみるとかなり細かいですね。メニュー全体の中に更に細かく パーツごとに分けられてテキストであったり更にその下の土台の部分こういったものが作ってあります。 そして message の部分なんかもテキストが入力されて実際にフォントであったりとか色分けなんかも作ってあります。それでは 下の main の所ちょっと見てみましょう。main の所は色は違うもののこの見出し部分と見出しとそして画像という、共通のフォーマットを持ってますね。それが 各々この様にグループになっています。では この中の1個ちょっと見てみると更に やはりこの中もグループ分けされていてまず このメインの画像これは単体の画像になっています。そして見出しの所、文字と そして文字の後ろにかかっている斜線こうしたパーツの部分も分けられてこの様に複数のパーツで構成されて一個になってるものは必ずグループとしてまとめてあります。この見た目のものは共通ですね。そして SNS のアイコンこういったものも個別の画像として置いてあります。そしてこの部分ここも本文の部分ですけどこの文字のスタイルごとに別々のテキストレイヤーになってバラで収めてあります。そして最後に Footer の部分ですね。一番下の部分ですがここも見た目シンプルですが実はかなり多数のパーツでできていて一番下のコピーライト表示が一個であるのと大きく見ると3分割されて更に見出しとか中の項目とかありますけどこの中の項目でも 1個の列ごとに別のパーツとしてグループ化されています。 そしてこの仕切り線あとは見出しの部分、これらがすべてバラバラの部品で入っています。ポイントとしては、今文字はすべてロゴ以外は選択可能なテキストレイヤーのままで入っていますしまた Photoshop 上で作業すればこうした素材なんかの元を作った上ですぐにレイアウトも試せるのでどっちみち こうした飾りの部分Photoshop で作ることも多いのでまたこの画像の切り抜きなんかもPhotoshop が使われますね。そういった所で一括して作業ができる良さがあります。とにかく、この中身のグループ分けこれをこまめにやるという所重点的に、このサンプルのファイル観察して見て下さい。

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

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

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

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

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

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