超・初心者のAdobe Cloudデザイン制作

※記事が長いので目次を利用して、興味関心のあるところから読み進めてくださいね。

ランサーズのロゴデザインに使用するモックアップ(Mock-up)って聞いたことありますか？

コンペに参加したことある人や、これから参加しようと考えている方は必見の記事かもですね！？

私も今から6年ほど前の話ですが、初めてランサーズでロゴデザインコンペに参加し始めた時に、当選者はほぼ全員と言って良いくらいモックアップを提案していました。

もちろんロゴのコンペですので、ロゴそのものの提案なんですけど、当時私は美容師から転職したばかりで、モックアップという存在すら知りませんでした。

「何？このかっこいいグラフィックは？この人が作ったわけ？」

そのくらい無知でしたが、ある時に同じモックアップを見かけたことがきっかけで、その存在を知ることが出来ました。

今日の記事はそんな方に向けた超・初心者のロゴデザイン制作モックアップ編という感じでしょうか！？

私が見てきた限りですが、ロゴ制作の上手い人は、モックアップの見せ方も上手い！というのが共通項だった様に思います。

ロゴそのもののデザイン力というには、やはり初級、中級、上級そして有段者まで様々です。

コンペで落選が続く時の記事でも書きましたが、まずは当選者から学ぶ姿勢が大事です。

当選者やそれに続く、参加報酬を獲得した人のデザインは、どの方が当選してもおかしくないくらい接戦であることが多いと思いますので、当選者と参加報酬者のデザイナーを心から祝福し、なぜ当選したのかを研究することが重要だと思います。

・過去の記事を見てみる

・ランサーズのコンペで応募しても落選続きの時に落ち込んだ時の対処法

モックアップの話に戻りますが、mockupは、日本語で想定画像と表現される方もいる様です。

ネットで調べると、試作品の模型などと解釈されています。

他にも実物大の模型など。

モックアップをロゴデザインのコンペで使用する場合は、「実用化に向けて、想定画像もご提案いたします。」などと書くことが多いと思います。

実用化とは何か？

例えばですが、皆さんが起業するとします。

最初に事業内容やどういうマーケットで起業するのか？

コンセプトや自社の強みなどいろんなことを考えていくと思いますが、一通りの事業内容が決まったとします。

どういう市場でどういう企画でこれから勝負するのか？

ある程度の見通しが決まったら、ロゴの制作をしていく方が多いだろうと思います。

一昔前なら、ロゴの無い会社の方が多かったのですが、戦後に大成功した会社にはほとんどの場合、ロゴがあるので、今では、起業する＝ロゴを作る。

そういうカルチャーみたいなものが出来あがりつつあるのかも知れませんね。

そういう企業様方がクライアントとしてランサーズでロゴのコンペを開くわけですけど、白黒のロゴだけではやはりイメージが湧きにくいというか、現実味が無いというか。

そこでロゴデザイン＋想定画像がセットになって提案され、想定画像がロゴコンペの決めてになることすらあります。

・モックアップが決め手になってランサーズで当選した時の記事を見る

・ランサーズデビューして幸運にも２度目に当選したロゴを紹介します！

クライアントが求めるジャンルによって様々に変化するモックアップ

例えば、企業の業種がカフェの経営だったとします。

そしてそのカフェの強みはこだわりのコーヒー豆と焙煎です。

ここまで来れば、ロゴにコーヒー豆のイメージを盛りたくありませんか？

また想定画像のモックアップとしては、カフェのウィンドウにロゴマークが写っているイメージとかいかがでしょうか？

過去にランサーズで応募したコンペで実際に使用した提案画像を見てみましょう。

これはワードロゴデザインと言われるもので、ヤフーなどのロゴがそうですが、シンボルマークがないタイプのロゴです。

実際にこの時のコンペ内容がどうものだったかは覚えていませんが、このネーミングの語尾の数字0にコーヒー豆を想起させるデザインが入っているということは先ほど述べた様な趣旨だったのかも知れません。

ロゴはベクターで制作しますので、イラストレーターでの制作となります。

ベクターとラスターの違いについては過去記事を参照してください。

・過去の記事を見てみる

・イラストレーターIllustratorとフォトショップ何が違う？

ベクターで作ったロゴをランサーズの提案用画像として書き出す場合は、上図と同じ様にJPGで問題無いのです。

しかし本日のテーマであるモックアップの作成となるとJPGファイルでは不可能に近くなってしまいます。

私の場合は、提案用としてのJPGファイルと、モックアップ用のPNGファイルと２種類を書き出す様にしています。

これはもうお決まりのパターンです。

このサイトでアップロードしても、両者の違いはわからないのですが、モックアップを使用する時にはっきりとわかります。

PNGファイル、もしくは背景が透過しているPSDファイルのどちらかとなります。

試しに同じロゴをPNGで書き出して、アップしてみます。

いかがでしょうか？

上下２つの同じロゴデザインですが、ファイル形式が違うのがわかりませんよね？

この様にランサーズのクライアントからみても両者のファイル形式はさほど問題ではありません。

しかしモックアップを作る段階になると違いが出てきます。

次に出てくるモックアップは「今回にご提案したロゴをカフェのウィンドウにキリ文字シールを貼るとこんなイメージです。」と実際にランサーズのコンペで提案したものです。

この様なモックアップを作る時にはJPGでは出来ません。

ではどの様にしてモックアップを作ってるのか見てみましょう。

まずは企業イメージに合わせたモックアップを選びます。

モックアップはほとんどの場合フォトショップのPSDファイル形式となっています。

日本製や海外のものまで数多くの有料・無料のモックアップが存在します。

上図のカフェのイメージは無料のものだったと記憶しています。

「無料・モックアップ」という検索ワードや、「free mockup」でググって見てください。

たくさん見つかると思いますよ。

図はフォトショップのファイルを開く画面をキャプチャしたものです。

フォトショを起動して、ファイル→開く→青く選択されているモックアップファイルをクリックします。

末尾の拡張子が「.PSD」になっているのがお分かりでしょうか？

※モックアップファイルはフォトショップを持っていなければ開ませんので注意してください。

私のモックアップが管理されているフォルダーを見るとわかりますが、この様に業種に合わせたモックアップごとにフォルダーをたくさん作って整理整頓しています。

ランサーズに参加していく内に、様々なジャンルの職業に対応できる様モックアップの種類も増えていったわけです。

コーヒーカップというファイルを選んでいますが、この上にはコースターというモックアップもありますので、カフェを起業しようとしているクライアント向きですね。

それでは次のモックアップ作成のプロセスを見てください。

開いたばかりのフォトショップファイルは、エクストラがオンになっていますので、画面の様に、表示→エクストラ→クリックすると画像に縦横ラインが入っていますが、これが消えます。

右側の赤枠は、このファイルがフォトショップファイルで出来ており、複数のレイヤーがあることがわかります。

またレイヤー１１の赤枠がスマートオブジェクトであることもわかります。

レイヤー１１という文字の左側にサムネイルがありますが、その長方形のサムネイルの右下にさらに小さな長方形があります。

ここをクリックしてスマートオブジェクトを操作していきます。

レイヤー１１の中に表示されている赤枠の部分がスマートオブジェクトと言われるものです。

この赤枠のサムネイルですが、チェックの模様になっているのがわかりますか？

これはpngファイルやpsdファイルで背景が透過しているという事です。

この時点でjpgの様に背景がある画像は使えないことになります。

背景は透明で透過したファイル形式、つまりpsdかpngということになります。

スマートオブジェクトについての詳しい説明は、Adobeの公式ページで見ることができます。

以下は公式サイトの情報です。

記述されている様に、非破壊ということで、既存のモックアップのロゴを書き換えてもスマートオブジェクトなら既存のファイル全体を書き換えぜずに、ロゴの部分のみを書き換えることが可能となります。

スマートオブジェクトをダブルクリックするとどうなるでしょうか？

もう一つのファイルが開きました。

タブを切り替えながら、先に開いたファイルと、スマートオブジェクトとして、後に開いたファイルを認識しながら作業を進めます。

この図は、元のモックアップファイルにあったもので、コーヒーカップの側面に入っていたワードロゴです。

上部の右にあるタブの名前がレイヤー11.psdになっています。

つまりモックアップファイルのレイヤーの一部がスマートオブジェクトとして別のファイルで管理されていることになります。

ここを新しいワードロゴに書き換えて保存します。

タブが切替わっている事を意識しながら読み進めてください。

新しいタブは上部の赤枠の左側の「レイヤー11.psd」でしたが、次に現在の赤枠の「cafe-202.png」に切り替えています。

隣のタブの名前をクリックすると画面が切り替わり、別のウィンドウで作業できる様になります。

この画面の中央赤枠は新しくモックアップに挿入するロゴです。

Macではコマンド＋Aですが、全てを選択して、新しく使うロゴをコピーします。

タブの切替に注意を払って見てください。

今度は、タブの名前が「レイヤー11.psd」に切り替わりました。

そうです、スマートオブジェクトの画面に、新しいロゴをはめ込んだ状態です。

スマートオブジェクトのサイズが小さかったので、新しいロゴも縮小して、枠に収まる様に調整した状態です。

※そして、この段階でスマートオブジェクトを保存しなければ、モックアップとして反映されませんので注意してください。

そうこうしている間に完成しました。

こちらです。

上部の左赤枠を見てください。

このタブは最初に開いたモックアップ画面です。

cafe-cups-01.psd

という名前のファイルです。

右下のレイヤーを見ると何も変更されていないことがわかります。

変更されたのは、スマートオブジェクトの中身だけです。

しかもスマートオブジェクトには新しいレイヤーが一つ増えただけで、デフォルトの画像などはそのまま残っています。

では、この完成したモックアップをクライアントに提案する様にJPGファイルで書き出して見ましょう。

コースターもついでに作って見ました。

 

まとめ

いかがでしたか？

ランサーズにこれから参加して見たいと考えている方や、参加していても中々ロゴが当選しない方などには参考になるかも知れませんね。

過去記事なども参考にされながら、諦めないで頑張ってください。

現在、AdobePremiereProの映像編集シリーズを動画解説で収録しているところなので、そちらが落ち着いたら、この記事も動画で解説できたら良いかな？なんて考えています。

私自身もブログや動画でいろいろわからない事を勉強してきたので、これからは少しでも役に立てそうなら恩返ししていこうと考えています。

本日も最後まで読んでいただいて誠にありがとうございます。