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

どのツールのプロトタイプを作成する?

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Museで実際にサイトを作る前にプロトタイプを作ることの意味と、どのツールを使うかの検討について解説します。
講師:
00:07:44

字幕

このレッスンではアイデアを元にMuse で Website を作るための基本的な流れについて解説します。Muse は HTML の専門知識がなくとも非常にデザイン性に優れた Website を簡単に作ることが出来る、それが売りのツールです。そして実際に Muse で作業を始める前にしっかりと準備をしておくことでよりスムーズにサイトを作ることができます。そのためのポイントを押さえておきましょう。では「アイデアから実際の形に」というわけでMuse で作業する前の大きなポイントを示していきます。まず「作成したプロトタイプを共有する」とありますが実際に Muse 上でいきなり始めるのではなくて事前にプロトタイプつまり使用する画像であるとかテキストそういったものを盛り込んで配置したプロトタイプを作る、これが大事です。その理由ですが、もちろんイメージ自体の試行錯誤という面もあります。実際に色々なパターンをMuse で実際に作るよりももっと簡単な手法で並べてみてどういった形が一番いいイメージになるかと試行錯誤をするのが1つと、もう1つは完全な個人の Website とかでない限りは他の人とその最終的なイメージを共有してそこから出る意見などを纏めながら作っていくそういう作業ができます。 特に人間の感覚というのはやはり主観的なものなので例えば綺麗とかかっこいいとか曖昧な言葉が使われてると最終形のイメージが人によって大きく違ってしまうということが往々にして発生してきます。そういったことをなるべく防ぐために具体的なものとしてのプロトタイプを作る。これは非常に大事なプロセスとなります。そしてそのプロトタイプを作る作業ですけどそれをどんなツールで行うかここも大切になってきます。あまりプロトタイプ自体を作ることが大変になってしまうと本末転倒ですしできればプロトタイプの時点で作った素材等をなるべく良い形で Muse に応用できるそうなってると非常に理想的です。ではどんなものが考えられるかざっと挙げると、こんなようなものがあります。まず「紙に手描き」といきなりかなりアナログな手法になりますけどこれがやはり馬鹿にできなくてなかなかパソコンのモニターに向かってると出てこない感覚が紙に手を使って描いてると出てきたりまたいろいろソフトな機能等を意識せずにやはり直感的に紙に描いていくとそういった作業でしか出てこない様々ないいアイデアも浮かんできます。この「紙に手描き」はちょっと別格扱いで色々なツールを使ってプロトタイプを作る、更に前段階プロトタイプのプロトタイプを作る手段として「紙に手描き」というのは非常にお薦めできる手法です。 そして次に挙げてるのがPower Pointよくプレゼンなんかに使われるツールですがPower Point も画像やテキストを簡単に配置するのに優れてるツールです。Power Point の良い所はやはりユーザー数の多さですね。おそらくここに挙げている各種のソフトの中では一番レベルの上下はあれど使えるというユーザーの方は多いと思います。なのでかなり、どんな方でも作れるというのとあと多くの人が持っているので例えば誰かが根本的な所で作ったものに少し誰かが手を加えるとそうした共同作業も比較的やりやすくなっています。ここまでがかなり多くの方デザインの専門家でないユーザーの方もやりやすい種類となります。そしてここから下は主に Adobe のツールですね。CreativeCloud 内のツールに入っていくのですがまず挙げてるのがIllustratorIllustrator ですね、もちろんデザインを作る上での素材づくりには非常に使われますしまた印刷物でもチラシであったりとかポスターみたいな1枚ものは特になんですがレイアウト等にも使われます。デザインを多少なりともやられてる方ではIllustrator を使うという実は非常に大きいのでまず Illustrator でプロトタイプを作るこれも良い点の1つです。 そして Illustrator と近い所でより Web 向けの画像制作にも使われている Fireworksこの辺りもほぼ同じような理由でプロトタイプの作成に用いても構いません。そして更に下に行くんですがIllustrator と並んで非常にデザインの定番ツールとして使われるPhotoshopIllustrator と Photoshop を比べた時に一番の違いというのはIllustrator はベクター形式の画像なのに対してPhotoshop はビットマップ形式最終的に Website で表示されるのはビットマップ形式の画像なのでそれを直に作れる細かくエディットできるという所で Photoshop はかなり使いでがあるかなと思います。実際、プロトタイプの作成にPhotoshop を使わなかったとしてもWebsite 作りの工程の中で必ずと言って良い程 Photoshop を使う局面は出てきます。なのであれば、最初からPhotoshop を使ってプロトタイプを作ってしまうというのはありですしまた Photoshop のレイヤー等をうまく利用すれば部品の切り分けなんかも非常に簡単にできます。 そしてもう1つ挙げているInDesignこれは主に多数のページを持った印刷物冊子や書籍などそういったもののデザインに使われるやはり定番中の定番ツールですがこれも印刷物中心のデザイナーの方には定番中の定番ツールとしてユーザー数が多いのとやはり複数のページを作りやすいという点では Illustrator や Photoshopよりも、ちょっと利点が大きいです。今は Illustrator や Photoshop も複数のアートボードを作ってそこに違うデザインを入れていくということはできるんですけどInDesign は初めから多数のページを持ったコンテンツを作るように設計されているのでそういう所である意味 Muse のサイト制作の考え方にちょっと近いという面もあります。そういった面で InDesign でプロトタイプを作るというのもお勧めできる方法の1つです。そして最後に挙げてるのがMuse 自身なんですがMuse の操作にもう慣れてる方はMuse 自体でプロトタイプを作ってしまうというのも決してなしではありません。もちろんこれがいいかなとなったらそのまま本番の制作に流れ込んでしまってもいいですしまた、あまり細かい設定などせずに大まかに作っていくのでも、最初から Muse で行うという手ももちろんありです。 こうした様々なツールを使うことが考えられますが大事なのはちょっと戻って作成したプロトタイプそのイメージをしっかり反映させてその上でもし複数人で見られる時にはそれを共有して、そうした合意の形成なども計りながら作業をしていくそういった所、しっかり押さえていく意味でも是非プロトタイプの作成を行って下さい。

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

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

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

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

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

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