デザイナーの方へ

ウェブサイトのデザインデータを作成する、デザイナーさんへのお願いです。

確認用jpgについて

完全なデザインデータは納期までにお送りいただくこととなりますが、全体のデザインが確定した段階で、確認用のjpgを先行してお送りいただけますと助かります。
コーディングや、CMSの構築で、実現困難な箇所を事前にチェックできるためです。

使用アプリケーションについて

ウェビングスタジオではSketchを利用していません。Adobe PhotoShop、もしくはAdobe IllustratorのCS5以降での納品が望ましいです。

解像度について

PhotoShopでカンプを作成される場合は、最近の高精細ディスプレイ(Retina)対応のため、解像度200%以上での作成をお願いします。一般にWebサイトのカンプは、横幅1280ピクセルくらいで作成されるので、倍の2560ピクセルとなります。
Illustratorを使用した場合でも、リンク先の画像は200%でご用意ください。

デバイスフォントとWebフォントについて

ブラウザで表示したときの、パソコンの基本の文字のことを「デバイスフォント」と言います。また、最近はデバイスフォント以外の文字を外部から呼び出すことができます。これを「Webフォント」と言います。
画像テキストではなく上記の文字を利用する箇所は、コピー・ペーストで流し込むことになるので、アウトラインはかけないでください。

bootstrapについて

ウェビングスタジオでは「bootstrap」というフレームワーク(よく使うパーツをまとめた制作の足場セット)を使って制作をすることがあります。
http://getbootstrap.com/

bootstrapを利用する場合は、以下のデザイン制限があります。

文字・ボタンなどのカラー
以下6色までです。6色以下になっても構いません。
文字色 / キーカラー / サブカラー1 / サブカラー2 / サブカラー3 / 警告
段組の余白
段組の両端の余白は「15px」、段組間の余白は「30px」になります。
どうしてもスマホで余白を詰めたい場合は、半分(8px/16px)にすることはできますのでご相談ください。
各段組の幅
基本的に「パーセント」になります。
デザインの切り替えポイント
以下の通りです。大きな画面に対応することはまずありません。
Nexus 7などの縦とスマホ(767px以下) / iPadなどの縦(768px) / デスクトップ・ラップトップ(992px) / 大きな画面(1200px以上)

ベクター形式のテンプレートがあるので、これらを流用してもらうと早いと思います。
http://bootstrapuikit.com/

共有する?

このエントリーをはてなブックマークに追加