見出し画像

デザインのプロセス。どんな考えで作ってるかのアウトプット

こいしげ＠這いあがるアウトプット

どうもこいしげです。

今回はデザインプロセスについて書こうと思います。
これからデザイン学ばれる方や、
非デザイナーにも教養として参考になれば嬉しいです。

ちなみに今回こいしげの言うWEBデザイン作成は、ほとんどPhotoshop作成ですが、
もっと上流の見立てで言うとレイアウトと作成の手順です。

ここからプロセスの話をしていきますが、
その前に

こいしげXやってます。
今回はXで投稿した画像を例にして説明となります

Xでの短文や画像では伝えづらい部分の、
舞台裏みたいな感じです


投稿した内容についての簡単な説明

２つの投稿は
チャットGPTからテーマをもらって自主練し、作成したものを、デザイン投稿とプロセス説明を別日で投稿しているものです。

腕が鈍らない為と、日々のトレンド確認のためで、野球選手の素振りやキャッチボールみたいな感じです。
今回作成したものはサイトのファーストビュー画像です。


使用しているデザインツールについて

WEBデザインはかなり幅が広いので何を用いているか
説明しておきたいと思います。

最近のWEBデザインの見た目は、
１つの画像背景を

バン！って貼り付けて文字をhtmlで書いていくものが主流ですが、

基本こいしげはPhotoshop作成、
さらにいえばセールスに特化したLP(ランディンページ)がメインです。
ゴリゴリにPhotoshopを使って、その創作画像を貼り付けていくことの方が多いです。


もちろんhtmlでも書きますし、コーティングは好きですが、
工程や納品速度考えるとあんまり必要がない事の方が多いので、だいたい画像貼り付けですかね。


その分、ただイメージが湧くような画像配置だけというのはあまりしません。
浮いた時間で、そこに時間を投下できるためです。

ここでいうプロセスとは

デザインは、なんでそうなっているか説明できないとただのアート

とデザインの師匠から聞かされています。
ようするに、すべての配置つまりレイアウトにも、
画像をわざわざ複数使ってのことも意味があるものです。
言語化で説明できないとなりませんよ。っていうこと。

ここで言うプロセスとは、その辺の考え方のことです。
クライアントさんにも、なんでこういったデザインにしたかなどは説明を入れたりします。


といっても、
Xで投稿した画像でどんな意図で作ってますよー。くらいはおおよそ伝わるかもしれないですね。のでここからは少し補足追加をしていく感じです。


引き算としてデザインをする

もうちょっと踏み込んだ作っていく段階のプロセスを文章にしてみたいと思います。
もしかしたら、人によってプロセスというカテゴリから逸脱している範囲もあるかもです。


基本的には、一番見やすいものから、どんどん引き算しています。
メインレターが100なら、サブレターが70みたいに引いていく形です。
もっと細分化するとキリがないので、ざっくり説明としておきます。

文字配置を終えた後に、
レターに見合うかつメインを引き立てる相乗効果的な
背景やアイテムを配置すると言う流れです。

要するに主役が何なのか決まっていないと全部崩れてしまったり、見当違いになり得るような組み立て方です。

効果的なものってなに？ってことですが、
蕎麦屋なのにうどんの写真は使わないですよね。
さらにもっと考えると
WEB業界なら、ネットワークのイメージできるものを補足画像としたりってところです。

ネットワークのイメージ
↓こうゆうの


画像選びも大切な仕事。僕たちは視覚情報の秀逸さは知っておく方が良いと思う。


ちょっと前提の話で、
見る側、ユーザー側の話を挟みます。ユーザーというよりヒトの持つ視覚能力の話です。

僕たちは犬や猫を見分ける力がありますよね。
犬と猫の違いを言語化で説明はしずらいけど、ぱっと見て、
なんとなく。とか、っぽいよね。というものを瞬時に理解する事ができる能力です。

なので、そのらしさや、一瞬でも目に映るものは情報がありさえすれば画像の中に含めるようにします。
例えば告知するものがPhotoshopを使う人向けであれば、パソコンを含めた人物写真を使う。とかですかね。

写真の中にいる人物だけでも例を出せば、ターゲット層に見合う40代の部長っぽい人になっているか、など年齢や服装など、細部まで選ぶ要素が色々とありますよね。

今回のXであればエコ＝植物
みたいな印象づけをしていたり、家庭内へのエコの取り入れということで、洗濯カゴを持った主婦らしい女性を選択した。と言う事です。

微調整したら完了

最終的に合わせてみて
より、人の目線を誘導できそうな状態は何か
を調整していきます。


作り出しでいえば、
最初にそのメインレターだけで配置します。
注意事項としては、
メインのカテゴリによってプロセスが異なる点ですかね。


最初に配置してみるものがメインレターなのか、
商品画像なのか異なるということです。

例えば
スクールやセミナーなど、文字を読ませたいサービスの売り込みであればメインレターが主役です。
ジュースや服など、物販の場合であれば、最初に決めるべきもの、つまりメインは商品の写真となります。


要するに
いまから作るものは文字を読ませたいものなのか、写真を見せたいものなのかは判断するべきってことですかね。


今踏まえたものでもう一度プロセスの説明画像を見てもらいつつ、配置していった順番が図のようになります。



まとめると、

  • 主役決めて、そこから主役より目立たないようにサブコンテンツを配置していく。

  • 画像内に含まれるものは全て意味合いがキチンとあるようなものにする。

  • 最後により視線を誘導させるための微調整を行う。


あんまり具体にすると
とても大きなボリュームになりそうなので、
一度この辺で締めたいと思います。

Xでの自主練投稿は続けて行きたいと思ってるので、
気が向いたら見てもらえると嬉しいです。
また、
ここでのプロセスの考えはこいしげ的なものです。もっと色んな意見交換や、違う考えもコメあるととても勉強になり、なお嬉しいです。

おおよそ2500文字。
内容が内容だけに、もっと画像多くした方がわかりやすいかもなと
毎回の記事ごとに学ばせていただいています。

最後まで読んでくれてありがとうございます。
それでは

次回は1/28（日）の23:59までに1記事上げたいと思います。

いいなと思ったら応援しよう！