リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。
実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。
この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。
ホバー表現を後から指示される
ツッコミ
- 後から仕様追加されると困るから先に決めて!
メモ
- 最近は凝ったホバー表現も増えている。後で付ければ良いかなとか思っていると、色を変える程度では済まない危険がある
細かいアニメーションについて後から指示される
ツッコミ
- 後から仕様追加されると困るから先に決めて!
メモ
- カンプでは1つに見える要素が実はバラバラにアニメーションするかもしれない
- よかれと思って勝手に実装すると、後で直させられる場合もある
- デザイナーがアニメーションをよく付けたがる部分は先回りして聞きに行くべし
- ハンバーガーメニューのトグル
- モーダル風ポップアップ
- ホバー表現
- SVGでできたアイコンの中身
実際のデータによって出現したりしなかったりする要素で、カンプ以外のパターンのマージンなどが決まっていない
ツッコミ
- これがない場合の余白はどうすればいい?
カンプよりも長いテキストが入った時の挙動が規定されていない
ツッコミ
- テキスト量に合わせて可変させるの? 省略して絶対決まった行数以内にしたいの?
テキストに合わせて可変してもよい場合
- 他の要素との揃えを上揃えにしたい? 中央揃えにしたい?
- 2行以上の時の行間（line-height）どうすればいい?
メモ
- 実装の仕様を固めるよりも、運用ルールを詰めて想定外の文字数は動作保証しない方が楽な場合もある
-
line-heightが変わると見た目のマージンも変化するので、せっかく揃えたmargin-bottomとかが再調整になる - テキスト量に依存しない縦方向中央揃えは
display:tabel; display:table-cell; vertical-align:middle;のあわせ技が必要だが、floatで実装してしまうと変更に時間がかかる
省略してカンプのレイアウト内に収める場合
メモ
- 単数行の省略表記はCSSだけで可
- 複数行の省略表記にはほとんどの場合JavaScriptが必要
カンプと違う縦横比の画像が入ったときの挙動が決まっていない
ツッコミ
- 枠の大きさが固定? 実際の画像のサイズから成り行き?
- 固定される場合、
background-sizeで言ったらcontainとcoverの挙動どっちにしたい?
メモ
- 実装の仕様を固めるよりも、運用ルールを詰めて想定外の画像比率は動作保証しない方が楽な場合もある
- imgタグ実装か、background-image実装かでできることに違いがある
- 将来的に
object-fitが使えるようになればimgタグでも背景と同じ挙動で実装できるようになる
- 将来的に
リキッドレイアウトで要素の可変する挙動が決まっていない
ツッコミ
- どの部分が広がるの? 広がらないの?
アニメーションするSVG要素の中身が、アニメーションの要件を実現できないパスになっている
ツッコミ
- アニメーションさせたい単位でパスを分割してほしい
長い時に途中から省略される要素で、省略するかどうかのしきい値が規定されていない
ツッコミ
- これ中身が短い時は省略する意味ないよね? どれくらいのコンテンツ量以上の時に省略させればいい?
バリデーションフォームのエラー文言の仕様が決まっていない
ツッコミ
- バリデーションの仕様は?
- フォームの下に出すの? どこかにまとめて出すの?
- サーバ実装だけ? フロントでも実装する?
Ajax部分のエラーメッセージが想定されていない
ツッコミ
- 取得できなかった場合は何かエラーメッセージ出さないの?
- メッセージを出す場合、それはどんなデザインになるの?
重そうなコンテンツなのに、ローディングのデザインが想定されていない
ツッコミ
- 何かかっこいいローディングの実装は必要?
- そのローディングのデザインはどうなるの?
レスポンシブレイアウトでPCレイアウトが固定幅設計
ツッコミ
- PC固定幅未満、SPブレークポイント以上の時は横スクロールバーが出るけどそういう仕様でいいんだよね?
- PCがリキッドレイアウトか固定幅かは大分作業見積り変わるよ?