デザインカンプとElementorの関係

こんばんは、鈴木です。
月に１回になった講師ブログですが、
しっかりと有益な情報を発信しますので今後ともぜひ読んでいただければ幸いです。

今回の話題はデザインカンプとElementor実装の関係です。

デザインカンプを作成する

1440pxを推奨していることと、1440px幅でしか考えないことは別問題

カリキュラムの中でデザインカンプはPC1440px、sp780pxで作成することを勧めています。
カリキュラム参照↓
https://ebc-works.design/topics/lesson6-16-n/

カリキュラムのこのページにも書いてある通りなのですが、主流は1920px表示です。

ではなぜ、1920pxではなく1440pxでデザインカンプを作成するのでしょうか？
その理由は、「1440pxがPC向けのデザインを考えるうえで、基準として使いやすい画面幅の1つだから」です。

あくまでもデザインの基準として1440pxなので、
【表示幅が1440pxだった時の場合の見え方をデザインしているだけ】です。
1440pxで作成したものが全てそのまま拡大されると思ってはいけません。

全幅とボックス幅の違い

では、何が違うの？というところで、
イメージしやすいのがElementorのコンテナで設定するコンテンツ幅の「全幅」と「ボックス幅」の違いです。

全幅で設定するもの：FV、画面の左右いっぱいに広げたいセクションで背景、コンテンツ等
ボックス幅で設定するもの：幅を指定でき、どれだけ表示幅が広がっても指定した幅のサイズを超えないセクション、コンテンツ

「全幅」は表示幅を100％として広がったり縮まったりします。
反対にボックス幅は指定した幅以上に広がった場合にその域を超えないという特性があります。
指定サイズより少ない表示幅の場合は小さくなります。
Elementorのデフォルトのボックス幅の設定は1140pxなので、
Elementorで実装することを考えてボックス幅を使用する際はこの1140pxという数値が基準になります。

具体例を参照していきましょう！

カリキュラムのLesson5で自己紹介サイトを作成したと思いますが、
そのデザインカンプには大切な基準がたくさん詰まっています。
このボックス幅の考えもそこには入っていて、デザインカンプに縦のガイドがいくつか入っていると思いますが、
適当に入れているわけではなく、実装を想定して入れています。

上記の画像の通り、余白やGapsの数値まで想定してガイドを入れています。
デザインカンプ幅：1440px
ガイド線：1140px（ボックス幅を想定）
ボックス幅より小さくなった場合の想定で左右に40px
横並びのコンテンツのGapsの行は中心から25px開けて合わせて50pxとる・・・などなど

1440px表示時を想定して作成している場合はこのカンプになりますが、もしこれを1920pxで作成した場合は、

このようになります。
ボックス幅は1140pxで固定し、左右の余白（背景も）だけが伸びたことになります。
もちろん、ボックス幅のサイズは自由に設定できるので1140pxでなければいけないということではないのですが、全幅にしないコンテンツはサイト全体を通して統一された幅にした方が美しく見えます。
参考サイトを検索した際に、そのコンテンツ幅はどれくらいなのかもぜひ注視するようにしましょう。
900〜1200pxぐらいが多い気がしています。
その範囲の中にあるのでElementorの1140pxも一般的な大きさだとわかると思います。

ここで大切なのは、デザインカンプの1440pxという数字そのものではなく、
そのデザインが異なる画面幅でどのように変化するかを考えることで、
あくまでも1440pxはデザインの基準であるということです。

またデザイン提案で出したものが1920pxで見える形だと勘違いされるクライアントもいます。
このデザインは1440pxで表示した場合の見え方だと説明あるいは注釈をつける必要もあるということを頭に入れておきましょう。

スマホのデザインカンプ

780px幅は実装時の2倍サイズ

多くの方がスマホのデザインを作成する際に気にしていない部分なのでここもぜひ覚えてください。

スマホのデザインカンプの作成サイズは780pxだとお伝えしましたが、
ここはデバイスの大きさによって今後変わってくる数値です。
時代によりスマホで表示される画面が大きくなってきたため、カリキュラムの推奨のサイズも750→780pxに変わりました。

今、折りたたみスマホも出てきています。iPhoneでも出てきましたね。
そうすると、表示サイズがもっと大きくなってきた場合にはそれに対応して
カンプの幅も変更になる可能性があるということです。

今回は780pxを基準に考えますが、実はスマホの表示サイズはおよそ1/2サイズです。
なので780pxサイズで作成しているカンプは最初からサイズを2倍で作成しているということになります。

倍サイズで作成する意味は、
・細部までデザインしやすい
・高解像度の画像素材を制作しやすい
などが挙げられると思います。

サイズを2倍で作成している、というのがミソなので、実装時は全てが1/2で実装します。

文字サイズも余白も全て1/2サイズになります。
なので実装ではどれくらいの数値が必要なのかを逆算して考えて作成しましょう。
例えば文字でいくと、実装で12pxの文字サイズになると結構小さいです。
ターゲットが40代以上の場合は最低15〜16pxぐらいと言われているのでターゲットによって最低文字サイズが変わりますが、少なくとも
13pxサイズの文字を実装したければデザインカンプでは13×2＝26px以上の数値を設定してあげる必要があります。

余白も20px取りたければ40pxをカンプ上で取る必要があります。
なお、実装時に文字サイズや余白の設定数値は0.5単位がないので偶数で設定しましょう。
ここのルールがわからない人もいますので必ず覚えてデザインカンプを作成していきましょう。

デザインカンプで実装のレベルや速さも変わってきます。
細かい部分まで設定し、いいデザイン制作を目指していきましょう。