パワポでデザインを作っちゃおう

# はじめに
初投稿なので簡単に自己紹介をします。
31歳になったころ「WEB業界へ入りたい！ディレクターになりたい！」とWEB未経験ながら必死に転職活動をして
希望通りWEB業界でディレクターになり7年半。
5年半はゴリゴリの受託案件を取り扱うWEB制作会社で「馬車うま」の様に働き、
ウェブクルーへ転職をして2年が経ちました。

今でも「馬車うま」の様に働いた経験を活かし、いかに作業効率を上げられるか
いかにこちらの意図をデザイナーやエンジニアに正しく伝えられるか
を考えて毎日仕事をしています。

そこで今回はその頃に体得した「パワポでデザインを作る技」を紹介します。
大した技でもないので特に期待しないでください笑

# 今回のこの記事を書こうと思った背景
前述した通り前職の現場は受託案件でした。大手通信会社のサイト制作・運用案件を50名ほどのチームで担当していました。

我々ディレクターとやりとりをする先方のWEB担当者はいるものの、さすがに大手企業ともなれば、実際に依頼主はそのWEB担当者よりもさらに先に、数えきれないほどいます。

何十回もに渡る「ここのデザインを修正お願いします！」
 「バナー100本よろしくお願いします！」

そんなのよくある話です。
いつしか回数は多ければ多いほど楽しくなっている自分に気が付いたりしたものです。
「ほら、また来たよ！！待ってた！マジ受ける！」
みたいな！いつしか慣れっ子になってました。

でもいつまで経っても慣れないのがこんな依頼です

**「なんとなくデザインが違うんだよな・・・」**

受託会社で働いていたディレクターの方なら何百回も聞いたことある言葉だと思います。
必死でイメージ聞いたり、要望をすり合わせたりなんとかしてクライアントの要望に合わせようとします。デザイナーさんも必死になって頑張ってくれます。

我々ディレクターもよく思うこの「なんとなく違う」これを明確にするためにパワポでデザインを作っちゃおうと思ったのです。
ある時、僕がクライアントから「なんとなく違う」そして僕も「なんとなく違う、なんかバランスが悪い」とモヤモヤをしており、先輩に相談したところ、その場で1分くらいでパワポでデザインに近い資料を作ってくれたことがありとても感動したのです。

僕はいつもこれをデザイナーさんと「なんとなく違うんだよね・・・なんだろ」「ここかなぁ・・・」と話をしながらデザイナーさんと一緒に悩みながら作っています。

# ではどんな資料かというと
完成系はこんな感じです
![fix.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/827583be-452f-a533-0572-79197c3dbc73.png)
※今回の投稿用に作成した資料で実務で使用した資料ではありません。

## ここからは架空の話になります。
※資料を作りやすい素材を元にしているので、実際にはこの悩みが伝わりづらいかもしれません。

### 今回の投稿用の資料を作成した人物がどんな状況だったのかというと
左側のデザインが挙がってきたときに、ディレクター（男）は「なんとなくデザイン気になるな・・・」と思いました。
「ん？もしかしたらバランス悪いのかな、数字ちょっと小さいのかも・・・？」

ただ、彼自身はそれが正しいのかも当然わかっていません。でもデザイナーさんも忙しいし依頼する前に本当にこれが正しいのか自分でも確かめたいのです。

### そこでパワポでデザインを作ってしまったのです
まずは実際にデザイナーさんに声をかけこの悩みを伝えてみます。
デザイナーさんは「うーむ、どんなんだろ・・・？」と悩んだ顔をしています。ただ、一緒に考えて、その場でパワポでデザインを作ってみるとお互いに気になっていた点に納得がいき、スムーズにデザイナーさんに意図を伝えることができました。
**これでデザイナーさんからの戻りも早くなり、その後の修正も発生しなそうです。**

# ではここから実際の作り方
**1.まずは該当箇所のキャプチャをパワポにペタっと貼り付けます。**
![peta.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/32f7e8e4-e3a9-c442-bb0b-5862ce5d4f08.png)


**2.とりあえずそのキャプチャをコピペして複製します。**
![copype.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/5fce065c-05f6-98af-ecb3-a3febaeacf5d.png)


**3.修正箇所をひたすらトリミングしてパワポ上でデザインを作っていきます。**
3-1.まずは2つあるうちの1つのキャプチャ画像から特に今回触らない部分をトリミング
![tori.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/f2688f0f-7437-5e66-0e1c-a176e079dee5.png)→→![tori2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/9e52a197-5299-4a50-c850-26814541ca35.png)


3-2.もう1つのキャプチャ画像から今回触る部分をトリミング
![tori2.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/1f8f696c-4aac-3f6c-0048-6f7d3ef36dab.png)


3-3.またここで一回キャプチャをコピペして複製しましょう。
![copipe2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/f5e27c12-ee8e-83d8-985d-809616959e14.png)
※何枚も複製しておくと後ほど便利です。


3-4.より細かくトリミングを繰り返してパーツを作成していきます。
![tori3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/33783d70-d4d2-1244-a480-7a78634d6939.png)
※分かりづらいかもしれませんが、左側の枠線だけトリミングしています。


3-5.複製されたキャプチャ画像からそれぞれのパーツをさらに作っていきます
![hosidake.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/cfce4879-999f-5f7f-da2b-21270c6b38b9.png)
ほしだけ～

![gyousyadake.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/accc91bd-b926-be66-27ed-c8cc9345553b.png)
業者だけ～


**4.ここからはちょっとづつデザインを整理します。**
掲載されている画像を見るとちょっと分かりづらいのですが、複製されたキャプチャ画像から作られているのですべて別画像としてパワポ上にはデータが配置されています。こんな感じです。
![barabara.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/136e2900-04dc-7fc1-6603-c3b791bc526b.png)


4-1.それらをまずは組み合わせてデザインを組み立てていきます。
まずは枠線と順位を配置し、順位の横幅を拡大しました。
![hosihikinobasi.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/9daf0fe3-40e2-964c-0a43-7ff5fd0b9091.png)


4-2.次に右側に業者のパーツを配置します。もうここまでくると終わりが見えますね。
![gyousyanobasu.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/b4fac226-2675-0c61-a615-c1ea277d0768.png)


4-3.ラストは右側の枠線だけパーツ作り忘れたので、元のキャプチャをもう一度コピペをして右側の枠線だけトリミングします。
![migidake.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/053d67da-94cd-1d8d-a500-4c1d484f8336.png)


4-4.右側の枠線も配置していったん完成です！
![kumiawase.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/389e2d9d-0316-f886-3402-23736580818f.png)

**5.できたんですが、ちょっと数字がでかいですね。微調整フェーズに入ります。**
5-1.「Snipping Tool」でこんな感じで数字だけを切り取ります。
![snipping.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/e7babca3-cc0f-10ca-0ee8-6ba21d1802f8.png)


5-2.切り取った数字たちを全選択して縮小します。
![syukusyou.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/cc771384-30cc-c5bb-ed2e-bc348cebd2b6.png)


5-3.図形の正方形ツールで四角を5つ作り数字の上に配置します。
![sikaku.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/40587a50-4236-d89d-6ebf-fa79e6735789.png)


5-4.最後にスポイントツールで色を塗りつぶりして
![sikakunuru.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/c764d4d8-2272-1097-63e8-b5cba35d5670.png)


5-5.あとは切り取った数字たちを前面配置とし数字を乗せたら今度こそ！完成！
![kansei2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537553/6f75e110-c895-a55e-9fad-75d5deb69560.png)


あとは必要に応じてコメント入れるだけですね！


# 最後に
こんな感じでパワポ使っているディレクターの方はすでに多くいらっしゃるかと思いますが、初めてこの操作を1分足らずで先輩ディレクターに見せられた時、ああ、こうすれば「なんとなく」や「不安」がクリアにとても感動した記憶があるので、もし「なんとなく違う」「ここが違う気がするけど正しいか分からない」で悩んでいる方は、こういう活用術でデザイン依頼するためにある程度そのポイントを見つけてはいかがでしょうか。

これを元にあとはデザイナーさんがきれいに配置してくれます。もちろん、ここまで作らず依頼することもたくさんあります。
ただ、一度、悩んだらデザイナーさんと実際にパワポでデザイン調整しながら相談してみてください。案外解決策がすぐに見つかったりします。あと結構デザイナーさんに「すごい！」と感動されますよ笑
慣れてくると今回の資料であれば1-2分で完成しますしね。

最後にメリークリスマス。
サンタさんからプレゼントをもらえることを楽しみにベッドに靴下を下げて寝ます。