こんにちは、新しいスーパー戦隊にワクワクしているイクメンデザイナー榊原です。

さて、今回はPhotoshopでラフをいかに早く作るか！そのポイントをまとめてみました。
ここでいう［ラフ］とは俗にいう［たたき台］と呼ばれるもので、［構成要素を確認するワイヤーフレーム］や［画面遷移を確認するプロトタイプ］それから［プレゼンテーションのカンプ］とは違うものです。
（ちなみにイメージ画像はワイヤーフレームが貼付けられていますが…）

そのラフが必要になってくるのは、

・サンプリングの擦り合わせが終わった
・構成する要素が30％くらい決まっている
・トーン＆マナーがある程度イメージできている

現場が上のような状態になってきた時です。

こんな時、目の前にとりあえず形になったものがあると、各スタッフの頭の中にあるイメージの擦り合わせができ、展開に加速がつき、さらにはその後の議論のとっかかりになるかと思います。

そして、ここで必要になるラフとは、デザイナー目線の（格好が良い／見た目が良い）ものではなく、［その時点で出揃った意見や要素をまとめた”ほぼ全部入り”］のデザインの事を指します。
要するに、みんなで構成要素を足したり引いたり（たたける）できる、素材となるデザインです。

では、ここからは速攻でラフを作る時に押さえておくと良いポイントをまとめてみます。

 

1.イメージする

自分がこれから何を／何時間ぐらいで／どんな手順で作るのかをイメージしましょう。

 

2.グリッドを切る

何分割のグリッドでカラムを切るのかを決めてしまいます。
既存のフレームワークを使用するのであれば、そのほうが手っ取り早い場合もあります。

 

3.グレーのボックスでエリア分け

それぞれのエリアのボリュームを把握し、バランスを調整するために、シェイプなどでグレーのボックスを作成して置いていきます。
要素の種類や優先順位によってグレーの濃淡の強弱を付けておくと、その後の作業が進めやすいです。

 

4.決まっている要素を配置してしまう

ヘッダー／フッターの要素、ナビゲーションのメニューや、文言、バナーなど、既に決まっている要素を置いていきます。
この時は、厳密に配置していくのではなく、おおよその位置に置いていきます。

また、各要素のフォントや色の指定、メインエリア（［レコメンドエリア］や［打ち出しエリア］と呼ばれる、画像切替などをするイメージのエリア）などは後で詰めていくので、この時は手を付けません。

それから、足すのよりも引くほうが簡単なので、構成要素は多めに入れておくほうが良いです。
（「詳しくは→」よりは「詳しくはこちらへ→」にしておく。）

 

5.未確定な要素をダミーで配置していく

確定していない文言はダミーで入れておきましょう。
「この文言はダミーです、ここにはだいたい○○文字が入ります。」という文字列を繰り返すなどして。
全部が同じ文字数ではなく、何文字か減らしたり、間に濁点を入れるなどしておくと、実際のイメージがしやすいです。
また、キャッチコピーなどはそれらしいダミーの文言を自分で考えて入れておくと、全体をイメージしやすくなり、またコピーライティングの勉強にもなります。（たぶん）

 

6.最後に作り込む

上記までの手順が終わったら、残りのメインエリアの作り込みや各要素のブラッシュアップをします。
この最後に作り込む部分の事を考えながら、手順2から5のレイアウト作業をしておくと全ての流れがスムーズに進みます。

 

7.一旦手を止める

全ての作業が終わったら一旦手を止めましょう。
数時間後もしくは、次の日に最終的なブラッシュアップを行うようにすると、自分の作ったデザインを客観的に見る事ができます。

以上でラフを作る作業は終了です。
また、以下のポイントも押さえておくと何かと楽です。

 

【データを作っていく際に押さえておきたいポイント】

●レイヤーは上から順番に積んでいく
上から［ヘッダー］→［グローバルナビ］→［リコメンドエリア］など、ページの構成順にレイヤーを置いておくと良いです。

●不用なレイヤーは削除しておく
データが重くなってしまうし、他の人が見た時に目的のレイヤーを見つけづらいため。
写真をスマートオブジェクトにする場合も、元データをそのままスマートオブジェクトにするのではなく、配置するサイズの150%くらいにした元画像をスマートオブジェクトにしておくと良いです。

●カラーラベルを付ける
画像は黄色、ロゴなどのベクターは紫など、パッと見てすぐに分かるようにしておく。

●レイヤー名はカテゴリごとに付ける
「ロゴ＿〜」「PHOTO＿〜」などカテゴリごとにレイヤー名を付ける。
その際、英語で付けるよりも日本語で付けるほうがパッと見で探しやすく、誰が見てもわかりやすい。

●フォルダにまとめる
各エリアごとにレイヤーをフォルダにまとめておくと、後々修正／管理がしやすいです。

 

【普段から習慣にしておいたほうがよい事】

●良く使う要素はストックしておく
カスタムオブジェクトやアクションやブラシは普段からライブラリを揃えておく。

●素材のある場所や内容を把握しておく
最終的に撮影をする場合でも、社内にある素材集やオンラインサービスの各社の傾向は普段から把握しておくと便利です。

 

という感じで、基本的な事ばかりですが、以上のような事を押さえながら作業をすると、普段よりも効率良くラフが仕上がります。３倍早くなるかどうかは個人差がありますので、あしからず。。