webサイトを新しく作るときや改装するときにデザイナーが最初に行うのは、インスピレーションを元に表現したいスタイルを思い描くことです。この作業はインスピレーションが自然と湧くのを待っていると大変かもしれません。さらに、インスピレーションがたくさん湧いたとしても、それらを整った一つの形へとまとめ上げることができず苦労することがあります。
この「ムードボード」作成ガイドを最後まで読めば、サイトデザインの際にインスピレーションを得るのを簡単にして、そのコンセプトを使いやすい形へと変換できるようになるでしょう。また、最高のwebサイトを作る上でのアイディアを集めやすくなります。この方法はあなたの個人用サイトだけでなく、企業のホームページやクライアントから依頼されたサイト作りまで、どんなときでもきっとお役に立ちますよ。ムードボードを使ったサイトデザインは、色々なインスピレーションやアイディアを統合する最高の方法なのです。
ムードボードとは何か？
「ムードボード」とは、デザイナーが個人やブランドの「らしさ」を定義し表現するために使うデザインツールで、具体的には複数の写真やイラスト、映像を集めて組み合わせ、世界観を目に見える形にしたものです。
たとえば、あなたが自分用の個人サイトを作ろうとする場合を考えましょう。サイトデザインを考える前の下準備としてムードボードを利用すれば、ページの配色や文体を構成する要素といった視覚的な雰囲気を決めるときの役に立ちます。インスピレーションを相手に伝え、目的の顧客をサイトへ誘導するためには、サイトに統一感のある視覚要素を使用することが望ましいです。ムードボード作りで画像などの視覚要素を使う理由は、インスピレーションをターゲットである顧客に効果的に伝えることにあります。目指したい雰囲気やあり方を第一にしてこれらを視覚化することができれば、訪問者はサイト内のどのページからもインスピレ―ションを感じ取ることができるはずです。
サイトデザインでムードボードを使う理由
デザイナーがこの「ムードボード」を使うのには、いくつかの理由があります。最も大きな理由は、クライアントがあっと驚くようなインスピレーションを手早く集め、その後の作業をしやすくすることです。そのほかにも、カラーリングを決めるため、デザイナーが手がけたもののブランド性を強めるため、見た目の美しさを引き出すため、といった目的があります。
例として、パン屋さんのサイトデザインを請け負う場合を考えましょう。そのお店の雰囲気が、時代を感じさせる、居心地の良い、ヨーロッパ風の雰囲気を持っているとしたら、こういったテーマを思い起こすような画像を集めてムードボードに取り入れれば良いのです。出来上がったこのムードボードを元にwebサイトの配色、イメージ、美的感覚へのこだわりを反映させれば、クライアントを満足させることができるでしょう。
ムードボードの作り方
ムードボードの作成には、高い独創性が求められます。なぜならムードボードの形式には模範解答も不正解もないからです。
ムードボードをアナログで作る場合は雑誌の切り抜きなどを使ってコラージュにしたり、別々に思いついた複数の要素を組み合わせてアイディアスケッチを書いたりすることができます。デジタルで作る場合はIllustratorなどの画像編集ソフトだけでなく、PinterestやInstagramのコレクション機能を利用することも可能です。
この工程では、クライアントが思い描くインスピレーションやコンセプトといった言語化できない情報を切り取って、目に見えるカタチへと変換する必要があります。こうして作られたムードボードをクライアントとの打ち合わせで共有するのか、それとも方針を決めるときに使う個人用のツールにとどめておくのかは、デザイナーであるあなた次第です。
ムードボードの構成要素
画像：クライアントから見聞きした情報を元にしてあなた自身がビジョンを描き起こすよりも、既存の画像を使った方が手っ取り早いことをご存知でしょうか？今ではInstagramやPinterestなどからたくさんの画像を入手できますが、それらをどこかで公表しない限り、ムードボードに使用した画像の著作権などを気にする必要はありません。これは単なる内部プロジェクトに過ぎないのですから。ここではイラスト、ベクターファイル、ロゴ、アイコン、そしてもちろんあなたの描いたスケッチなど、何でもありなのです。
テキストの見本：伝えたいメッセージと関連するような引用、フレーズ、単語を選んでください。ムードボードに使用するテキストは、視覚的なインパクトを強めるために特定のフォントで統一しておくべきです。
配色：あなたの創造力と心の目を使って、デザインするもののブランド性や「らしさ」がはっきり分かるベストな配色を見つけてください。クライアントが既にブランドカラーを持っている場合はその色からスタートすればOKです。しかしそれだけでは数が少なすぎるので、テーマに合わせてそれらを補うようなサブカラーを見つけて下さい。選んだ色がweb上でどんな風に映えるかを想像するために、ムードボード上でそれらを組み合わせてみましょう。こうすることで、出したい雰囲気を表現する配色を正確な16進数へと落とし込むことができます。
形状とシルエット：草葉やツル、海の波のような自然由来の形状は平穏や安定を感じさせると言われています。多角形などの幾何学模様は、モダンで都会的な印象を与えるでしょう。高級感や贅沢感を求めているなら、フルール・ド・リス（ユリの紋章）、フィリグリーといったエレガントな曲線模様を試してみて下さい。
パターンとテクスチャ：上記と同様、違った種類のパターンやテクスチャをムードボードに加えて下さい。豪華な雰囲気を出したい場合はシルクや大理石のテクスチャを使うと良いでしょう。カジュアルで心地よいwebサイトにしたいなら、木目調や親しみやすいストライプ模様を試してみてください。繰り返しパターンによる模様は視覚的なエネルギッシュさや親しみやすさを作り出す上で、重要な役割を果たします。
ムードボード作りは無駄にならない
全ての要素を集めて並べ終わったら、構成や順序を考えながらそれらをムードボード上に配置します。ここでは伝えたいメッセージを視覚的に明確にするために、重要なテーマは大きな画像で、小さな画像はテキストとともに配置することがポイントです。相応しくないと思った画像やテキストを途中で思い切って捨ててみたり、魅力を感じるものがあれば取り入れて、新しい方向性を模索してみましょう。ムードボードの持つ最大の強みは「絶対」がないことです。ムードボードは最終的な完成品となるわけではないので、間違った答えもなければ、使えないものを産み出すのに無駄な時間を費やしてしまった、ということもないのです。
サイトデザインにムードボードを活かすことは、抽象的かつ流動的なプロセスです。これは一見、遠回りで骨の折れるムダな仕事にも思えますが、webサイトの目指す雰囲気を明確にし、そのブランド性を高めたりインスピレーションを得る上ではとても役に立つプロセスなのです。
おすすめ新着記事
おすすめタグ