東京のWeb制作会社LIGLIGならできるおもしろいこと。殿堂入りシェア普段は主にWebフロントエンドを担当しているライターの内藤です。下記の記事にインスピレーションを頂きましたので、美しいだけではない”優れている”と思われるWebデザインについて、要点を簡単にまとめてみようと思います。僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください!」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。出展:コーダーに喜ばれるデザインの作りかたデザイナーからコーダーへ直接デザインが回ることもあれば、間にディレクターが入ることもあると思います。美しい・きれいなデザインであればあるほど、フロントエンド組も、よし、やってやろうじゃないか!と気合いが入るのは事実です。美しいだけでなく”優れた”デザインであれば、以下の様なメリットがあります。コーディングが楽になるのでフロントエンド組に優しい下流工程の作業効率が上がって納期も早くなるのでクライアントさんに優しい変なことをしなくて済むのでユーザにも優しいデザインになる(と思う)※3は、ページ読込が早くなるとか、見やすいとか、どんなブラウザでもきれいに見えるとか、そういう点です。この記事は、このうち1の部分に焦点を当てています。ディレクション・デザインといった上流工程をびしっと決めると下流工程が楽になり、2~3の副次的効果も出てくるのではないかと思います。実寸でデザインを単位はmmではなくpxにする実寸のピクセル数で作る最小単位は1pxでなんだ普通じゃんと思った方もいらっしゃると思うのですが、泣けてくることに、1のmm単位でのデザイン案というのが意外とあります。2は、最近あった案件で、幅が4,961pxというデザイン案でした。ディレクターさんからも特に幅の指定がなく適当に、とのこと。ディスプレイで見たときにユーザが読める文字の大きさなどがチェックできていないファイルなので、縮小率の調整は難しくて時間がかかります。ファイルサイズも大きくなるので、ファイルのやり取りにも時間がかかってしまいます。あとは、Illustratorなどで要素が小数点以下のpx数になっていることがありますが、これも作業効率を大幅ダウンさせる原因になります。できれば1ページ1ファイルで1ファイルに複数ページ入れない1ページを複数ファイルに分けない1は、修正の際に手間取ることになるので、やっぱり1ページ1ファイルがいいと思っています。いう場合は「1ページ1ファイルにしてもらえませんか?」とお願いすることにしています。2は、ランディングページのように、縦が10,000pxくらいあって画像盛り沢山だったら仕方ないかなと思うのですが、変な場所でちぎった1ページ分を複数ファイルもらうと、実装する際に時間がとてもかかります。実際に出会ったデザインで、1ページを複数ファイルに分けてあるのに、デザインの幅(px数)が全部違うという悪夢がありました。残念ながら、デザインは変更がきかなかったので、縮小率を変えて一所懸命合わせました。ページを分ける場合は、幅のpx数を合わせましょう。RGBで作る(PhotoshopやIllustrator)これもたまにあるのですが、CMYKでデザインが来てしまうことがあります。多くのページが出来てしまっている場合、RGBに変更するのが時間的に難しいですが、色はデザイナーさんやディレクターさんが思った色になりません・・・。Rhythm」の基本と実現方法でも紹介されていましたが、余白にこだわるデザインに最近出会いました。ところが、ガイドがない。メモ書き・仕様書がない。仕方なくPhotoshop定規ツールで測って実装したのですが、リテイクが10回を超えました。...というわけで、余白はできればメモ書きしてあると、断然作業効率がアップします。要素ごとにグループ分けレイヤに名前をつけるなんだ普通じゃんと思った方もいらっしゃるとは思いますが、1~3まで全部NGというデザインがたまにあります。切り出し作業をする際に、コーダ―がレイヤを整理します(しない場合もありますが)。これも1~3までが揃っているデザインは、断然作業効率が違います。部品はできるだけ各ページで統一するボタンなど部品はできるだけ同一のものを使うシャドウなどの効果も統一する1は、ページによって微妙にサイズを変えるなどはできたらやめた方が、最終的に見る人にとっても見やすいですし、作業効率もよくなります。2は、同一ページ内の並べて使うボタンなどでシャドウなどの幅や位置が微妙にずれていたりすると、それを修正しながら作業するのでとても効率が悪くなってしまいます。できれば別のファイル形式を埋め込むのをやめる一般的なのかどうかはちょっと分からないのですが、PhotoshopのpsdファイルにIllustratorのaiを部品として埋め込んであるデザインがありました。そのai部品がmm単位でCMYKだったりすると困ったことになります。できれば1つのファイルでは同一ソフトウェアのファイル形式が望ましいように思います。修正があった場合の作業効率アップが見込めるのではないかと思います。要素ごとにスライスのサンプルがあると望ましい先に紹介した部品統一と関係があるのですが、統一されていない場合に、どれが本当に意図したものなのか分からず、スライスの大きさに悩む場合があります。再度手直しして送ってもらう、指示してもらって修正してスライスする、どちらもあまり効率がよくないので、ボタンなどの部品に関しては、1つだけでいいのでサンプルとしてスライスを作っておくと、フロントエンド組の作業効率があがります。CSSで指定する要素ではフィルターなどを使わないテキストにするフォントや背景などで透過(アルファ)を使わない明度・彩度の補正を行わない乗算・オーバーレイなどを使わない特に3は完全にアウトです。1~2はフリーのカラーピッカーなどで色を取ることになるのですが、色の確認作業が入るため時間コストがかかってしまいます。できたらマウスオーバー画像サンプルも作るもちろん、デザイン作業は大変なのですが、マウスオーバー時の画像サンプルがなく、「アレをこうしてコレをこうして全部作ってください」という案件もあります。簡単なものであればいいのですが、殆どデザイナーと同じ仕事をしなければならないものもあります。どちらの仕事もできる人なら問題ないと思うかも知れませんが、コーディング期間は納期との闘いです。ここで、デザイン系の作業が入ってくると直接納期に響きます。できれば、1つだけでもマウスオーバー時のサンプルを作っておくと、フロントエンド組は喜ぶと思います。マウスオーバー画像のサンプルがあるデザインって素晴らしい!最後にもちろん、コミュニケーションで補える部分も多くありますので、疑問に思ったことや、ちょっとここは厳しいと思ったら、小さいことでも恥ずかしがらずにすぐに相談するというスタンスは重要だと思います。今回はこのようなコミュニケーションは前提として、最初からこうしておけばミスコミュニケーションも防げるのではと思うことを書いてみました。偉そうに思えたらごめんなさい。そんなつもりはありませんので許してください。コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)という記事も参考になるかも知れません。WEB業界を賑わすブロガー達が来たので、HTMLカルタで遊んだよ。LIGにもお越しくださった株式会社まぼろしのこうめさんのブログ記事にヒントを頂きました。めさんもLIGでの出来事を楽しい記事にしていらっしゃいましたので、最後にこちらもご紹介しておきたいと思います。株式会社LIGさんでまぼろしーるを貼りまくってきました!この場を借りましてお礼申し上げます。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。