新着情報サービス制作実績WEBPAPERLOGOその他コラムFONTDESIGNRECREATIONその他Web用語メンバー紹介お問い合わせCOLUMNフロントエンドエンジニアに優しいデザイナーになりたいDESIGNWEBデザインとシステム、コーディング...会社さんによって色々なやり方があると思うのですが、現状分業で行っている弊社。デザイナーSUEがよくフロントエンドのYAVU氏にご指摘を受ける事柄をご紹介したいと思います。これを読み終わった頃には少し優しい自分になれているかもしれません。弊社は現在、デザインとコーディング・システム実装は分業で行っています。私SUEはデザイナーですので、クライアントからデザインのOKをもらい次第、データをフロントエンドエンジニアYAVU氏に引き継ぐ形となります。「コレどうなるん?」「...あっ。」とか「このページのデザイン、どうすんの?」「...あっ。デザイン上でクリアしているつもりでも見落としがちな確認画面のデザインやボタンのロールオーバー時の想定など。普段仕事をしている上で、YAVUさんにご指摘いただく項目を戒めがてら書いていきたいと思います。「あっ...」よくやります。OGPとはサイトをSNSにアップした時などに表示される画像のこと。先にデータ共有したほうがと思って...とかだと思います。キャッシュが残る可能性がこのOGPやファビコン、一旦キャッシュが残ってしまうと、差し替えてもなかなか新しいものへ変わってくれないことがあります。初期段階で準備しておきたいものの一つ。忘れていた場合は「10分で作ります!」と勢い良く言い放ち、切り出してお渡しするのが得策でしょう。余談)ちなみにすっちーは社内の私のあだ名です。由来はスチュワーデスではなく、新喜劇の方だと勝手に思っています。事実、社長にはすち子と呼ばれております。「あっ...」コレが本当に難しい...。WEBに携わることはや4年弱ですが、コーディングが大嫌い出来ない私にとっては、どうもそこら辺の想定が甘い。デザインを起こすのは通常PCでの想定で行っていきます。スマホ表示での画像が別に必要な場合などはその都度スマホ用画像を作っておいたり、トップのみ確認のためスマホバージョンのデザインカンプを作ったりしますが、メインはPCで設計していく場合が多いです。いうデザインでタイトルがお客様で変更できる更新型(CMS)のサイトだった場合。参考で、弊社のサイトを例に。サンプルテキストでは折り返しはしません。これがスマホになると...はいー折り返し大量発生。あーコレは想定していなかったーテキストがこちらで決められない、または増える可能性が大いにある場合、特に気をつけないといけない事柄です。頑張ってコーディング勉強しよう...ただいま、目下勉強中です。その奮闘記はまた後日、掲載していきたいと思います。「あっ...」これも本当に忘れがち。あるのは、ボタン自体が薄くなる(透過をかける)ものだとか、グラデーションの向きが変わる、ドロップシャドウがなくなってペコってへこむように見えるぐらいだと思いますが、これ以上に色が違うものに変わったり、アニメーションをつけたいなどの仕様がある場合は早めに伝えておくのがベスト。「あっ...」よくやりますよね。デザインを先方に確認いただく時、指定されたページはもちろん制作して確認いただくのですが、それ以外に必要である画面ってのもデザインが必要になります。下記でお間違いないでしょうか?」みたいな画面。全体のトンマナで整えたページをそっと横においておけば、コーディング時に確認に必要がなくなります。フォームに設定するメールアドレス。これはコーディングへ移行するときにはもう準備出来ているのがベスト。先方に確認を取って、これもデータの横に忍ばせたり、テキストファイルをまとめておくと作業がスムーズです。404エラーの画面もデザインしておくとベスト。どんなサイトであっても、何かしらのタイミングで表示される可能性のある404エラーのページは用意しておくほうがいいかと思います。基本はページのトンマナに合わせてデザインするのがベストでsが、納期や予算の都合によっては遊んでみるのもデザイナーの腕が鳴るところであります。フォームのメールアドレスに限らず、使用予定の各種SNSのURLなども、コーディングへ移るまでにクライアントへ確認して揃えておきたいところです。「あっ...」よくやりますね。