【デザイナー】WEBのビジュアル制作で気をつけていること
自分はビジュアルのみを担当するwebデザイン制作に関わり始めて半年〜１年くらいになります。
初めて関わった際はエンジニアさんにとてもご迷惑をおかけしていましたが、数回ほどお仕事としてLPサイトなどを制作するうちに、
ようやく
・ある程度自分ルールができてきた
・実装される方への不都合が少ないデザインカンプを作成できるようになった
気がするので（気がするので）、この度振り返りとして簡単な内容になりますがnoteにまとめてみました✨
01.制作ソフトについて
自分は主に
・メインツールとしてFigma
・素材作成としてPhotoshopとillustrator
でwebのデザインを作成しています。
メインツールとしてエンジニアさんにそのまま共有することのできるFigmaにてデザインカンプを作成し、Illustratorで はパス素材を作成しています。
（他にも写真を加工する際はphotoshopを使用したり、イラストを書くときはclipstudioなんかを使用しています。）
02.制作するアートボードのサイズについて （PCとSP版）
PC版は W1366
SP版は W375
の幅でアートボードを作成しています。
下記には2020のトレンドサイズがまとめられています▼
トレンドだと、PC版については1000pxとされていますが、
自分はシェア率の多い1366を横幅にしています。
理由としては、ヘッダーなどのロゴを左右固定にしたい場合、1000pxの幅だとあまり左右固定かどうかわからなくなったり、また
コンテンツ幅の推奨は1000px前後、つまり
900px~1100pxとされている
ので、これらをカバーできるように1366pxで制作しています。
03.マージンについて
webのPC版は表示するモニター画面が大きいので、しっかりとマージンを取らないと見栄えが悪いものになってしまいます。
自分ルールでは
大きい固まりのコンテンツ同士は
・240px
同じ固まりのコンテンツは
・120px
・コンテンツ内は
・20px、40px~60px
くらい開けています。
もちろんデザインによっては様々ですが、
figmaのプロトタイプ機能を使ってスクロールしながら確認してマージンを調整するようにしています。
04.カラムについて
カラムはパッと計算できないので、調整しながら確認できるこのサイトを利用しています！
05.その他気をつけていること
主にLP制作についてですが
・コンバージョンボタンは大きく
・各コンテンツ同士の境目をわかりやすく
・見出しは目立つように
・行間は長文になると読みづらいので、文字サイズの2倍pxは確保する
・できるかぎりレスポンシブで想定できる挙動を考慮する
を気をつけるようにしています。
太字に関しては、デザイナーとして限度があるのでエンジニアさんと協力していいものを作っていきたいです。
いろいろご指導いただいた方に感謝です🙇♀️
これからもいろいろ勉強しながら頑張っていいデザインを制作していきたいと思います！