こんにちは、さおり(@iropon30)です。
普段はインハウスデザイナーとして働いており、自分で制作したデザインを自分でコーディングするということをしています。
自分のデザインが完璧だ！と思ったことはないですし、まだまだまだな部分ばかりで悲しいですが、
そんな私の悲しいデザインよりも、もっととんでもない、すごいやばいデザインを複業でコーディングしたときの話をしてみます。
（自称）12年目デザイナーがつくったデザイン
普段自分がデザインしたものをコーディングすることがほぼほぼなので、人のデザインを見るのは参考や勉強になるので、
とても前向きに捉えていました。
だけどXDを開きまず「ん？」 これは…私がデザインしたほうがマシじゃないか？という思いが生まれました
そしてその不安はどんどん増えていきます。コーディングしながら発狂していました。これが12年目の人のデザイン…？
そんな私の発狂ポイントを共有させてください。
情報設計がなされていない
これはディレクターの仕事かもしれませんが、デザイナーもデザインする上で気づいたところは質問すべきで。
ページのデザインはあるのに、ヘッダーやフッターにリンクがない。このページどうやって入るねん！！なページがある。
クローリング対象のページにクローリングに必須な情報が入っていない…（いやこれもディレクターか？）
私がデザインするデザイナーだったら、一応必要事項くらいは調べるぞ…
デザインが…やばい（語彙力）
私もそんなに細かいところは気にしない。荒ぶるデザインをすることもあります。
しかし！次工程にコーディングがあることはわかる。
この方のデザインは、コーディングあるのわかってますかー？大丈夫ですかー？という感じ。
しかも「やったるで！」と思うデザインじゃない。なんせ私がしたほうがマシって思うくらいだから
たまに「グラフィックデザイナーさんがしたデザインは〜」とか言うのあるじゃないですか。
それを遥かに超える「やばいデザイン」見てしまいました。数年していてはじめてみました。
ストライプをリピートグリッドでつくっているが、ズレて白い線ができている（ディレクターさんもチェックしてよ…）
ガイドを引いているのに、コンテンツによってガイドからはみ出たりはみ出なかったりしている。（意図したデザインではなさそう）
画像に枠線がある・ないがある。意図しているのかと思いきや、各ページのヘッダーのヒーローコンテンツもページによって画像に枠線がある・ないが混在している。
ボタンの高さが小数点。しかも全部じゃない。点在している。68pxのところもあれば、73.46pxがあったりした…。
スライダー用の画像。ページャーのバレットがデザインカンプにはないが、書き出し用には入っている。
逆じゃない…？
日本語フォントがnoto sans だったり、游ゴシックだったりバラバラ。英語と日本語でわけるならわかるんですが…
しかも意図した感じじゃない。なんでこのブロックだけ変えた！？な部分が違うフォント。
透かし入りの画像を変更する時に、シェイプでマスクせず元画像をずらしてマスクしているので、本番画像を入れるとズレる…えっ、透かし入りの画像そのまま使わせるつもりなの！？ちゃんとコーディングする人のこと考えて…
これだと、画像変更とか言われるのもけっこう辛い。なにかいい方法知りませんか？
サイズ通りにシェイプされていない。そして画像のサイズがバラバラだったりする…どういう意図！？
そんなにページ数多くないのに、コンポーネント数が異常に多い。
グループ化みたいな感じでコンポーネントを使っている…あの、コーディング時のコンポーネント理解していますか？
いちいち解除してコーディングする＆コンポーネントとしてCSS書いていいか判断するの、疲れました…
「すべて大文字」を使っており、ページによって、PageNameだったり、pagenameだったり、PAGENAMEだったり、Pagenameだったりする。text-transform: uppercase; で対応は可能だけど、そこは統一しない？はじめて使ったよtext-transform: uppercase;
はじめてこんなデザインに出会った。貴重な経験だった。これ以上のこともあったけど、ざっと書き出してこれくらいあったんです。もうこの人のデザインはコーディングしたくない、そう心に誓った。
1回で判断するのは惜しいよね、もう1回チャレンジだ
この方のデザインはもうコーディングしたくない。そう心に誓ったはずなのに、なぜかもう一度することになる。
怖いもの見たさなのかわからないが、頼まれたのでやってみることに。
そして私はまた同じ後悔をすることになります。
前回もあった、250を超えるコンポーネント。今回はご丁寧にコンポーネントのアートボードがありますが、そこに259個もコンポーネントないですよ…数えたら20個くらい…えっ！？またグループ化と同じ意味合いで使っている…いい加減に…（ここで前回会社さんに報告したことは、デザイナーさんに連絡がいっていないのは想像できる）
はい！ヘッダーのコンポーネントですね。ありがとう…あれ！？ロゴズレてますけど…
最後にチェックして…一番最初に目に入るよ…
よくある、「多くの企業さんに導入いただいております」で会社のロゴ。会社のロゴにはレギュレーションがあるの知ってますか？なので、多くは白背景に置いているんです。なのに水色背景。しかもロゴがベクターデータでなく、透過されていないものもあるから「通過」で透過している。 あの…コーディングあるんですよ？mix-blend-mode つかったらいいかもだけど、これBtoBのLPです。企業ってまだIE使ってたりしますよ。コーディングしなくても、ここはわかっててー！！
とりあえず、まずロゴのレギュレーションから勉強してほしい。そしてここもすべてのロゴがコンポーネントになっていた。やばい。
パッと見同じ色、、と思っていたところが、違う色の30％だったり、50％だったりしていて、なんだこれ状態。
えっと…意図して透過するような部分、どこにもないですよ。
意図して違う色にしてたのだろうか…いやでも今までを見ると適当なんだろうな…
よしなにあわせました。全部確認しないといけないので、すごく手間ですよ！！やばいですよ！！
まとめ
今回、複業として仕事を受けたので、仕事を受けた会社の方には上記の内容を相談・報告しました。
だけど、デザイナーさんには報告内容が伝わっているかは謎です（きっと伝わっていない）
同じ会社だったら、先輩・後輩関係なく指摘すると思います。
ただ、フリーの人にひとりでされているプロの方にこういう指摘はしないなぁ…って。
そう思った時に、フリーランスというのは「きちんと指摘してくれる人」が近くにいないのはとても辛いな…と。
12年もやって、こういうことをしてしまう人だもの。。（というかこれで12年やってるのをドヤしている。）
きちんと言っていただける環境と学び続ける意欲、そして「本当にこれでいいのか？」を問いかけながら仕事をしていきたいと、トンデモデザインで再認識したのでした。
