見出し画像

エンジニア目線でデザイナーさんに考慮してほしいポイント

普段デザイナーさんからデザインをいただいてフロントに実装していて、こういう点が考慮されていると開発がスムーズだなと思う点を挙げていきたいと思います。
この記事では、WEB制作の工程として「ワイヤー設計」→「デザイン」「プログラム設計」→「コーディング」→「CMS組み込みやプログラム実装」を想定しています。
ワイヤーが出来上がったあと、デザイン作成と、プログラム設計は並行して行われることが多いため、相互で情報交換がうまくいかない場合があります。そんな時、以下だけでも考慮されているととてもスムーズに開発を進めることができると思っています。

1.文字数が増えたときにどうなるの?

ボタンや見出しやタブetc. などで、可変のテキストが入る箇所について。短めのテキストでデザインされていると奇麗なのですが、テキストが増えて折り返した場合や、複数行で設定された場合はどうなるの?という時があります。そんな時、デザインデータに短めテキストのデザインと、長くなってしまった場合のデザインが両方入っていると、「こういうときどうコーディングするの?」のやり取りが省略できて、とても有難いです。

※そもそもの話をするとワイヤーの時点で可変のテキストについては最大文字数を確認してワイヤーに記載すべきだとは思います。

2.お問合せフォームなどのデザイン

お問合せフォームの指示書(ワイヤー)がだいたい入力画面のものしか作られないことがよくあります。必要な入力項目と必須項目の指示を元にデザインを起こしていただくのですが、
・入力エラー時のデザイン
・入力確認画面
・送信完了画面
これが一式そろって出てくると「さすが!」とうれしくなります。割と上記は忘れられている事が多いです。エラーの出し方などは裏側のプログラムとも関わってくるので、どんなエラーが発生しうるか、エラーを出すのはリアルタイムか?確認時か?なども一緒に詰めたいです。

※そもそもの話ワイヤーの時点でこれら一式作成するべきだとは思います。

3.デザイン時のフォントの選定

デザイナーさんはMacユーザが圧倒的に多く、エンジニアさんはWinユーザが多いかなと思うんですがpsdやxdを開くと「フォントがありません」のことが割とあります。具体的に言うと「ヒラギノ角ゴ」などはMacの標準フォントなのですがWinで再現しようとすると有料フォントを購入する必要があります。代替フォントでデザインを見ると行間サイズやマージンが違うので意図したデザインと違う見た目になることがあります。なのでコーディング担当がWinだかMacだか不明な場合は、なるべくなら無料のWebフォント(GoogleFontsなどPCにインストールできる)やWinもMacも使える游ゴシックでデザインされていたらベターかなと思います。
※デザイン上Macはヒラギノで見せたい!ということでの使用なら、もちろんそれでOKです。

と、いろいろ書いてきましたが、なるべくエンジニアが「?」で立ち止まらずに進められるポイントを書いてみました。
お互いコミュニケーションを取りながら仲良く円滑にいきましょう!

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