Tokyo Q Studio

Web制作・WordPress・BootStrap・DTM制作・SEO対策

コーダーに喜ばれるデザインの作りかた | Webamb | ウェブ アンブ

デザイナーのやっつけ仕事の後って大変です(笑)
1〜2pxずれてたりでカンプから治さないといけない場合があります。
まあ、やってからの方が結果速いんですがね。
と言うことで最低横幅、カラムのガイドだけでも引きましょう!
カンプ作るのにも役に立ちます!


iPhoneから送信

コーダーに喜ばれるデザインの作りかた

 

コーダーに喜ばれるデザインの作りかた

 

僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください!」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。
そこで、今回はコーディングする人が喜ぶようなデザイン方法をご紹介します。
思いついたものだけ羅列するので、コーダーの方で「こんなデザインだと嬉しい」「こういうデザインは爆発してほしい」などありましたら教えてください!
デザイナーさんはこれを見て、少しだけコーダーさんを意識したデザインにして貰えたら嬉しいです。

 

デザイン

Design = Architecture

デザインによっては少しの変化でコードが凄くシンプルになる場合もありますし、また冗長的になる場合もあります。
コードをシンプルにしてくれるデザインはモジュール化を意識しているデザインです。

例えば以下のようなボタンがあったとして、ページによってこれだけの種類があったとします。


デザインパターンの異なるボタン

用途によって多少の変化は出るのはしょうがないとは思うのですが、実際に全く同じ用途で使われているのにも関わらず、ページによって微妙な違いがあり、特に意味もないのにそれを完璧に再現するよう求められるケースがかなりあります。

上記の画像で言えば右端の2つのボタンです。ほぼほぼ同じで用途も同じなのに、ページによってborderの色がちょっと違うケースです。

「これは恐らく間違いだろう」と色を統一しても、デザイナーさんから返ってくるのは「ここだけちょっと色が違うんですよ」です。

なんの為にそうしているのか、そのコスト(運用面含め)に見合ったお金をユーザーが落としてくれるのか、それが説明ができないような場合は、極力共通のモジュールを利用し、それを使いまわすようにしましょう。
その方がデザインも速くできる気がするのですがどうなんでしょう?

Webにおけるデザインは決してビジュアルデザインの事のみを指しているわけでは無いと思います。
ユーザーが使いやすかったり、あるいはこちらの意図するコンテンツに誘導するようなデザインであったり、”設計が多分を占めています。
もちろん高速化や、実装のコストパフォーマンスも意識するべきで、何の意図もなくコーダーの負担を増やすような実装は避けるべきです。

ちょっとした配慮でコーダーの負担を減らす

続いてはカンプで「おーい」って思われないためのちょっとした配慮をご紹介します。

テキストについて

テキストにカラーオーバーレイで色を付けないようにしましょう。
クリックで色が取れないので、手間がかかってしまいます。


テキストに指定された色と実際の色が違う
130624_03
カラーオーバーレイでの指定は色とるのがめんどくさいです。

透過画像について

透過画像を覆い焼きカラーや乗算で表現しないでください。
テクスチャなどが敷かれた背景の上に覆い焼きカラーとか乗算してると書き出しができません。
コーダーさんはどうしようもないので、場合によっては作りなおしてもらうことになってしまいます。


特殊な効果のかかったテキスト。

背景を消すとこんな感じに。これだと書き出せません。

余白

無意味に余白のサイズをばらつかせないで、均等な余白を意識しましょう。
感覚で配置されてるのか、似たような箇所で23pxであったり、17pxであったりちょっと意図がわかりかねる箇所もあります。
デザインにおいても余白は共通であったほうが美しい場合が多いです。


謎のバラ付き。見た感じも少し気持ち悪いですね。

スマートフォンサイトの場合

カンプのサイズ

Retinaディスプレイを考慮して倍のサイズで作成してくれると嬉しいです。

画像やフォントなどのサイズ

Retinaを考慮し、倍で作る場合には画像のサイズは割り切れる数字にすると素敵です。もちろんフォントサイズもその方が嬉しいです。
たまに16.84pxとか端数が出てくるケースがあるのですが、Webの最小単位は1pxです。


端数を出さないように、拡大縮小などで大きさを変更しないようにしましょう。

CSS3

CSS3の表現力を奪わないようにしましょう。
細かい微妙なテクスチャは実際スマートフォンサイトでは潰れてよくわかりませんし、装飾はなるべくCSS3で済むようにデザインしましょう。複数の画面サイズで回線の弱い端末では高速化も重要なポイントです。
ただ広範なグラデーションなどの場合はむしろ画像より重くなっちゃう場合もありますので注意

マルチデバイスの場合はある程度妥協する

複数デバイスでのピクセルパーフェクトなデザインは諦めて下さい。
可変を前提としてデザインしていただくと嬉しいです!

さいごに

色々とコーダーが嬉しいことを書きましたが、あまりそれにとらわれすぎるとデザインの表現力を制限してしまうと思うので、「あーここコーダーさんめんどくさそうw」って思いながら、それでもどうしてもそうしたい理由がある場合にはそのデザインにしちゃっていいと思います。
デザイナーさんもコーダーさんも役割がどんどん変化していっている昨今、仲良くやっていけたらいいですね。

  関連記事

  • IEに深刻な脆弱性発覚、XPにはパッチも発行されず
    さてさて、XPの断続的攻撃が始まりました。 IEが悪いのかOSが悪いのか… Web関係者は声に出さずともお分かりでしょう(笑) XP以降が良くなかったのも原因の一つ… 7はイイけど重いかな。 8はまだ ...
  • no image
    Lumuは、iPhoneに差し込んで使うカメラデジタル露出計
    これプロよりアマに流行ると思います。 iPhoneから送信 Lumuは、従来のアナログ露出計に代わるiPhoneのヘッドホンジャックに差して使う小さくて賢い露出計だ。フォトグラファーは専用のLumuア ...
  • HTML 直書きよりはるかに早くブログを書ける Markdown 記法厳選5つ | Simple Living
    http://shirose.jp/2013/12/mark… マークダウンかぁ… メール投稿に適用できないかな… まぁこのBlogは一言メモだけなんだどね(笑) iPhoneから送信
  • Grid 日本語版
    レスポンシブルについて教科書の様な説明がなされています。 お洒落な感じで(笑) ものすごく分かりやすく、順序も分かりやすい。 参考に! http://maepon.github.io/grid/
  • 健康状態もチェックできる「iWatch」は10月発売?
    ほんまかいな!? iPhone6と同時期かぁ… 欲しいですなぁ〜! http://www.gizmodo.jp/sp/2014/…
  • スクリーンショット 2014-11-04 16.27.46
    BootStrap3.3がリリース。・・・4.0が近々リリースだと!!!?
      目次1 10/29にBootStrapが3.3にバージョンアップしていました。2 Onward to Bootstrap 42.1 Yahoo!翻訳でやってみるとw3 前へつまみ革4にと ...
  • iPhoneからホームボタンがなくなる(かもしれない)特許をアップ ルが取得
    筆感的な感じなんでしょう。 http://www.gizmodo.jp/2013/03/… iPhoneから送信
  • OS Xアプデ
    OS X 10.8.3アプデでBoot CampがWindows8正式対応|Mac
    Windows8対応ですか。 最近になって7が欲しくなりましたw http://weekly.ascii.jp/elem/00… iPhoneから送信
  • Apple、次期「iOS 8」で高品質ハイレゾリューション・オーディオ再生&入力に対応?ハイレゾ音源対応インイヤーヘッ ドホンも開発中??
    そういう事でしたか… 大賛成です! 良い音で聴くことをお勧めします。 何故ならもともと良い音で録音しているんだから、そのままの音を聞いて見たいと思いませんか? 圧縮するだけでアーティストが伝えたい音か ...
  • Adobeから流出したパスワードでよく使われていたものトップ100 が公開される
    http://gigazine.net/news/20131… パスワードベスト100って(笑) 結構簡単なのが多いんですね。iPhoneから送信