毎週、アームズスタッフが様々な視点でお届けしている「Engineers' Blog」。
今回が初投稿となります、ハヤマです。どうぞ宜しくお願いいたします。
私はもともと紙媒体を中心としたグラフィックデザイナーでしたが、様々なお仕事に携わる中でWeb案件の需要が増えていることを感じ、Webサイトの構築に少しずつ興味を持つようになりました。
現在はアームズにて、デザイン兼フロントエンドを担当。先輩方のフォローをいただきながら、日々奮闘しています。
今回ですが、「フロントエンドの視点から見たデザインデータの確認事項」についてお話しします。
まずはじめに
コーディングを担当する時、“これって、ブラウザの幅を広げたらどうなるんだろう？”、“掲載内容が変わった時は、このレイアウトの見栄えを保持できるかな…”
そういったデザインデータだけでは読み取れない「？」って、あると思います。
（もちろん、デザイナーとエンジニアの間で事前に漏れなく意図を共有できていれば問題ないのですが…）
それらの「？」は、構築を開始する前に無くしておくべきですよね。
そのためにも、
デザイナー：データを制作する時点で意識し、考慮しておきたいこと
エンジニア：データを受け取った時点でヒアリングすべきこと
上記精度を高めて、お互いの仕事を円滑にすることが大切だと感じています。
…さて先ほど、私の業務担当を「デザイン兼フロントエンド」と申しました。
そうです、自戒の念を込めてこれを書いています（笑）。
ここでは自分の実体験をもとに、実作業の中で陥りがちだった事項をまとめました。
その1：画像と文字列を横並びにした時のレイアウト破綻はないか
文字列のボリュームによっては、スマートフォンなど特定のデバイスにてレイアウトが破綻するおそれがあります。
（例えばiPhone 8やiPhone XSでは問題なく表示されていても、iPhone SEでは崩れる、など。）
今後入力されるテキスト文量が制限しかねる場合は、レイアウトを再度検証する必要もあります。あらかじめ、レイアウトを保証したい最小幅のデバイスで表示ができるかどうかの確認を、デザイナー・エンジニアの相互で意識付けたいですね。
その2：テキスト文量が増えた場合の挙動はどうなる？
例えば現状の原稿では1行での表示しかなくても、今後複数行相当の文字列が入力される可能性がある場合、どちらの場合にもレイアウトが崩れないように実装する必要があります。
レイアウトによっては、必要に応じて“実装の際表示領域からはみ出した文字列は「三点リーダー」を付与して省略する”など、処理方法も、実装段階ではなく事前に共有できると良いと思います。
その3：配色のカラーコードは無駄に増やしすぎていないか？
目で見てほぼ相違ないくらいの差であれば、むやみに複数のカラーコードを多用せず同一のものを使用した方が、コーディング時の設定や突然の色変更修正が容易です。
AdobeのIllustratorやPhotoshopを使用している場合は「CCライブラリ」で管理したり、内部的に共有するためのガイドラインを作成しておくとわかりやすいです。
私はグレースケールのバリエーションを増殖してしまいがちなので、気を付けたいところです…。
おまけ：IllustratorによるSVGにマスクを使用していないか？
こちらは完全にデザイン制作時の注意点なのですが、SVGでイラストやアイコンを作成する際、配置元のベクターデータにて「マスク」を使用したままSVGを書き出すと、マスクが無視された状態で（非表示にしておきたかったオブジェクトの部分が露呈された状態）プレビューされてしまいます。こちらを回避するには、マスクは使用せず、不要なパーツは分割・拡張で切り離して削除しておく必要があります。 あからさまなものであればコーディング時に気付くことができますが、ささいなものだとデザイナー本人しか気付けないこともあるため、注意が必要です。
最後に
フロントエンドに携わるようになって、エンジニアの視点から、自身のデータ制作の甘さを身をもって痛感することが増えました。
また逆に、フロントエンド担当として「デザインデータ受領の時点で確認できていたらよかった…」と思うこともあります。
デザイナー・エンジニアそれぞれがスムーズに進行するためにも、デザインデータから読み取る「先見力」をもっと高めていきたいと思います。
