デザイナーがSTUDIO構築する際に注意すべき二つの思考

2024年7月1日 18:37

みなさんこんにちは！

最近ですね～、STUDIOの制作依頼を受けているデザイナーから多くの相談を受けております！

なぜデザイナーがSTUDIO？・・・考えてみた！

今までの制作の流れ
ディレクター　→　Webデザイナー　→　コーダー

そしてこれからの流れ
ディレクター　→　Webデザイナー兼STUDIO構築

と、このように一工程減る。
つまり、納品までの時間が短縮される。
さらに、コーダーに依頼していた制作費を抑えることができる。

一石三鳥です！

悲しいながら、これが現実😢

しかし、「二兎を追う者は一兎をも得ず」で今までWebデザイナーとしてスキルを積み上げてきた方にとって、構築する際に大きな壁にぶち当たります。

それが「二つの思考」です！

先に結論からいうとこの二つになる。

Webデザイナーは平面、コーダーは立体

基本的にWebデザイナーはどのツールを使ったとしても、アートボードの上でデザインします。

そのアートボードは、一般的に使われているPCの横幅である1440pxを使用することが多く、たまに1920pxというモニターサイズもある。
スマホサイズの375pxのデザインをする場合もあり、多くても1440pxと375pxの2種類となっている。

縦幅はそれぞれです。
今回は例として縦幅10000pxとしよう。

（横：1440px）×（縦：10000px）という大きなキャンパスの上にデザインをするんですね。

ここで私が平面と表現したことを理解した人もいるかもですが、アートボードは動きません。

沢山のあしらいを施し素晴らしいデザインをしたとしても動かないんです。

ではコーダーは？？？？

立体といっても3Dではありません。
「動く＝可動」していく様を想定しながらプログラミングしているんです。

1440pxだとか決まった箇所のみではなく、検証ツールというのを使用して、1px単位でデザインが大きく崩れないかチェックしています。

PCの横長が、タブレットのようにほぼ正方形になり、そしてスマホの縦長になる。
デザインのように、二つを作成するのではなく、いかに一つのモノを上手く可動させるか重要なミッションなんです。

たくさんマークアップ（プログラミングすること）すればいいじゃん！
という方もいるでしょう。

しかし、沢山書けば書くほど読み込みに時間がかかり、表示に時間がかかる。
見えるまで時間がかかればユーザーの離脱に繋がりかねない。
そのような不親切なサイトは、グーグルの低評価につながり、結果SEOの順位低下に繋がる。

深いですよね～

さて、ここでです。
Webデザイナーが積み上げてきたのは、デザインスキルなので、もちろん立体的にみるスキルは持ち合わせていません。

当然です！！！

なので、デザイナーがSTUDIO構築する際に、PCまでは順調にできるんです。
でも、レスポンシブ（他のデバイスに合わせること）になったとたん、大きな壁にぶち当たります！

そこで事前に理解して欲しいことがあります。

私はよく「ルービックキューブ」を例にあげます。

正面から見たら一面しか見えないですが、角度を変えたら三面みることができます。

このように、ものごとを見る角度を変えることを「立体の視点」と私は呼んでます。
「メタ思考」という考え方も好きです。

例えば、レイヤー（層）というのがあり、同じ層にモノを置けばぶつかってしますのは、誰でも理解できるかと思います！

平面で考えていると、全てを同じ層においてしまいがちになるんですね。
そうすると、逃げ場のなくなったものはクシャと潰れてしまうことになる。

なので、違う層を使うことを考える。

このように、目の前のデザインを狭めたとき、つまり稼働したときにどのようになるのか想定しながら構築したらかなり楽になります。

多角的にみる。
立体的にみる。

ノーコードのSTUDIOですが、この二つでかなりの再現性が高くなるので、ぜひトライしてみてください！

この記事が気に入ったらサポートをしてみませんか？