デザインをウェブサイトへ展開するために必要な準備

2021.05.19 ピックアップ
黒川

先駆でウェブサイト制作を行う場合、 先駆の強みである「仕組みづくり」にリソースを注力するため 基本的にデザイン業務は外注しています。

お客様からのご要望や先駆の解析力や過去のデータ・経験などから、 UIの希望などはデザイナー様へワイヤーフレームを通してお伝えできますが、 その他にもあらかじめデザインガイドラインを共有し、 作成の際に細かな点についてご確認いただくようお願いしています。

info21-1

単位について

例えば、ウェブデザインにおいては、 mm(ミリメートル)・px(ピクセル)・pt(ポイント)など 単位が複数存在します。

ウェブについては、幅やフォントサイズの単位の指定はすべてpxで統一をお願いしています。 (pxとは、シンプルに言うとデジタル画像を構成する最小単位を指しています。)

info21-2

数値について

また、数値に関しては、他に細かな点でもガイドラインを設けています。

単位の数値は基本的にすべて偶数でお願いしています。 理由としてiPhone・iPadなどのApple製のディスプレイは「Retina(レティーナ)」という 規格が採用されており、通常よりも解像度が約2倍となっているためです。

ユーザーはいくつもの種類のデバイスを用いてウェブサイトを閲覧しています。 その中のRetina対応ディスプレイにもきれいに対応するため、2で割れる偶数でお願いしており、 高品質なものを提供するため欠かせないお願いの一つとなっています。

info21-3

ロゴやアイコンへの対応

Retinaディスプレイといえば、他にも ロゴやアイコンは、Retinaディスプレイを考慮し2倍書き出し時でも劣化しないよう、 Illustratorではビットマップ(ラスター)形式ではなくベクトル(ベクター)形式を、 Photoshop時に、上記をご対応出来ない場合、スマートオブジェクトの利用をお願いしています。

同じ理由で、図や写真を利用する際にも高解像度のものを利用するようお願いしています。

お客様の利用するデバイスも考慮したサイズ指定

PCデザイン作成時の横幅は1280px。 これ以上大きいと一般的なノートパソコンの横幅よりも大きくなり、 作成いただいたデザインに対して修正や再計算などが発生してしまうので好ましくありません。

コンテンツエリアの横幅基準は960px。(背景画像などは1280pxでも指定可能) 他、読みづらくなることを考慮し、960px以外にも750pxや800pxなど 複数パターンを設定することも、もちろん可能となっています。

info21-4

画像に枠をつける場合には、便宜上画像はそのまま書き出すことも多く、 あとからの修正などにも対応するため、画像と枠は別レイヤーにて作成をお願いしています。

スマートフォンデザイン作成時のコンテンツエリアの横幅は320px。 読ませたいテキスト部分(本文のpタグ)の文字サイズは12、14、16px。 Google Chromeは可読性を維持するため、 10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっているため テキストサイズ10px以下は利用しないようお願いしています。

細部まで高品質を目指して

先駆では、このようなお客様からは見えない部分にも緻密に考え細部に徹することで、 スムーズなコーディングやより高品質なウェブサイトづくりを目指しています。

今後も時代や技術の変化、お客様の要望などに対応するため、 もっとよりよいデザインガイドラインを検討し、 これからもお客様へ「楽」「安心」「最先端」を提供していきたいと思います。

メールマガジン

ウェブの活用を見直してみたいけれど、専門知識ばかりでも良くわからない。 セミナーを受けても、なかなか手元で活かしきれない。 先駆の今にちょっと興味がある。

そんなあなたのために、 活用しやすい最新技術のTipsや、ウェブ解析入門など、様々なトピックを配信しています。 ぜひご登録ください。

PC・携帯端末どちらでも
お読みいただけます。

メールマガジンを登録する

過去のメールマガジンを
ご覧いただけます。

バックナンバーはこちら

お問い合わせ

ウェブサイト構築、ウェブを活用したシステムの開発、サイトのセキュリティ対策のほか、
Google広告・SNS広告の運用、ウェブサイト更新代行、サーバー・ドメインの管理など、
ウェブの活用について幅広くご相談いただけます。お気軽にご連絡ください。

お電話でのお問い合わせ042-659-2960 平日10:00~17:00
※セールス目的のお電話はご遠慮ください。

当サイト内で掲載しているサービスについて、ダウンロード可能な資料のPDFをまとめています。
なお、掲載している資料は提供可能なサービスのなかの一部となります。
資料の範囲に限らず、ご要望・ご予算に応じてオーダーメイドの提案も可能です。
※メールアドレス等の個人情報のご登録は不要です。

資料ダウンロード

※メールアドレス等の個人情報のご登録は不要です。