【Webデザイナー必見】感動したWebデザインデータ

公開日：2022/03/15

【Webデザイナー必見】感動したWebデザインデータのサムネイル画像

今まで出会ったコーディングがしやすいWebデザインを紹介します！
Webデザイナーの方、またコーディングをしている方にもとても刺激になる内容になります。

筆者は今まで実装者として様々なデザインデータをもとにコーディングをしてきました。
（デザインとしては自社制作のデザイン、また外注のデザインです。）

定期的に実装者（コーダー・フロントエンド）とデザイナーで話し合う場を設けますが、大体このような意見を聞くことがあります。
「コーディングの事を考えてデザインしてよ」

つまり「コーディングしにくいデザインデータ」です。
なぜか、深く掘り下げていきます。

コーディングしにくいデザインデータの3つの理由

Webデザインが終わった後はもちろんコーディングがあり、デザインデータを元にコーディングをしていきます。

コーディングに適していないデザインデータでは、実装者（コーダー・フロントエンド）が質を確保する為にデザインデータの意図を汲み取り、「よしなに」対応することが必要になってきます。最大のデメリットはよしなに対応する為の工数でしょう。

また、実装者のコーディングのスキルレベルが低い場合、またデザイン力があまり無いとよしなに対応もできず、そのままコーディングを進めてしまい、出来上がったものは質の悪いWebになってしまう可能性が大いにあります。

また、素敵なアニメーションを付与する時間も確保することも可能です。

前置きが長くなりましたが、早速感動したデザインデータの作り方を図解しながら紹介していきます。

よくあるメインビジュアルの背景画像をレスポンシブまで考えてコメントを記載しています。
デザインカンプが1200pxで作られているとしたら1200pxより画面が大きい場合はどうするかが考えられています。

こちらもレスポンシブに関するコメントです。PCのデザインカンプでヘッダーの要素がパンパンの場合、スマホ幅になるまで改行したり、ぎゅうぎゅうになったりどうしてもデザインが崩れてしまいます。
崩れることを想定して、代替案を提案しています。

こちらもレスポンシブに関する事。スマホカンプの状態で横幅いっぱいのとき、カンプ以上の画面幅の時はどうするか、大きめのデバイスのことも考えてコメントされています。

クリックしたら要素が表示されるアコーディオンです。よくありがちなのが、開く前のままのデザインしか無く、開いたあとのことを想定していない場合が多いですが、こちらはアコーディオンが開いた時のUIも提示してくれています。

マウスオーバーしたらどのようにアニメーションするかを説明しています。また、アニメーションに関してはデザイナーより実装者のほうが詳しい場合が多いので、おまかせする旨も記載があります。

クリックしたら検索の入力欄が表示される場合です。こちらもユーザーが行動した場合を想定してパーツが用意されています。

いかがでしたでしょうか。
今まで出会ったデザインでとてもコーディングしやすかったデータを紹介しました。
コーディングしやすいデータというものはコーディングの経験・知識が無いとなかなか難しく、いきなり完璧なデザインデータ作成することは厳しいです。

また、コーディングしやすいデザインデータを作っていたつもりが、実はそうではなかったという事は往々にしてありえます。

何がコーディングしやすいというものは個人で違う場合があるので、
一番のおすすめは会社内・チーム内でデザイナーと実装者が集まり、どうやったらコーディングしやすいかをお互い話し合う事です。

ポイントとして普段からコミュニケーションをとって相談しやすい環境を作っておくのがとても大事だと思います！