サンネットの強み｜デザイン制作ガイドライン

サンネットでは制作ガイドラインを設け納品のクオリティーを保てるようにしております。
基本的なガイドラインを策定するに当たり以下を考慮して作成しております。

１：わかりやすさ
社内のWEB担当者、制作会社にとって、わかりやすく、読みやすく、使いやすい制作ガイドラインを目標としてます。

２：運用に適する
たくさんのルールを作って満足するのではなく、Webサイトを運用する際にネックにならないような、制作ガイドラインを策定します。

３：2種類のガイドライン
最低限守るべき必要不可欠なガイドランを必須ガイドラインとし、従ったほうが望ましいガイドラインを推奨ガイドラインとしております。

以下制作にかかわる必須ガイドラインと推奨ガイドラインです。

◆０１　Webデザイン基本制作ポイント

　・　何のためのWebサイトなのかを意識する
　・　Webブラウザの仕様や設定の影響を受けるため
　　　基本（IE６・７・８、Firefox２・３）の環境に適応するサイトデザインとする
　・　Webページのサイズは可変であるため、ディスプレイサイズに影響を受けないデザインレイアウトとする

　・　利用者に負担をかけない工夫
　　　・Webページの構成を把握しやすくする
　　　・Webページの移動方法を分かりやすくする
　　　・ブラウザ環境を考慮する
　　　・通信環境を考慮する

　・利用者の心をつかむ
　　　・オリジナリティの追及
　　　・臨場感の追及
　　　・親近感の追及
　　　・信頼感の追及
　　　・プロモーション
　　　・リピーターの確保

　・セキュリティ
　　　・利用者の信頼の確保
　　　・Webサイトの管理
　　　・Webサイトの権利保護



◆０２　Webデザイン　レイアウトの基本

　■全体レイアウト
　・TOPページに情報を詰めすぎない
　・サブページは検索性を重視する
　・内部ページは可読性を重視する
　・利用者の環境も考えてレイアウトする
　・Webサイト全体の調和を考慮する
　・内容に合わせてレイアウトする
　・同階層のページデザインはレイアウトを統一する

　■情報レイアウト
　・情報をグループ化する
　・情報を区切る
　・情報をパターン化する
　・情報を揃えるレイアウト配置
　・情報にメリハリをつける
　・繰り返しによるデザイン手法でサイト内統一を図る

　■ロゴ
　・企業（既存）ロゴでブランドを強調
　・サイトオリジナルロゴによるサイトブランディング
　・サイト全体に適度に配置　（header・footer）

　■ボタン
　・大きさ、印象を統一する
　・文字の配置に注意する
　・カラーの統一

　■アイコン
　・大きさ、印象を統一する
　・シンプルで控えなものにする

　■バナー
　・凝ったデザインでサイト内のアクセントにする
　・サイト内のバランスを考慮したサイズ（大き過ぎない、小さ過ぎない）
　・サイト内カラーに考慮した配色

　■テキストリンク
　・テキストリンクだと分かるようなデザイン
　　（色・アンダーライン・マウスオーバー）

　■画像リンク
　・直感的にわかるデザイン
　・リンク先の内容が分かるような画像
　・リンクだとわかるようなデザイン
　・マウスオーバー時に画像を変える

　■タブ
　・現在地がわかるような優れた表現方法

　■サムネイル
　・ビジュアルに興味を引かす

　■ナビゲーション
　・基本、メインナビゲーションはヘッダー部分に配置する
　・メインの補助として、フッター部分に配置
　・サイドリンクとして配置

◆０３　目的別デザインレイアウト

　・ポータルサイト型の一覧性を重視
　・カタログ型で実用性を重視
　・イメージ中心でデザイン性を重視
　・動画、Flashでのエンターテイメント性の重視

◆０４　カラー

　■基本
　・色がもつ、イメージを大切にする　（暖色・寒色など）
　・サイトカラーの統一
　・Webサイトのカラープランを立てる
　　　・メインカラー
　　　・サブカラー
　　　・アクセントカラー
　　　・背景色
　　　・見出しカラー（大見出し・小見出し）
　　　・区切り線カラー
　　　・テキストカラー
　　　・リンクカラー（リンク・訪問済み）
　　　・強調
　・Webセーフカラーを使う
　・カラーのみで判断する仕組みは避ける
　
　■テクニック
　・Webサイト内をカラーで分類する
　・対比を表現する
　・表をみやすくするために行又は列によるカラー変更
　・色相による考慮
　・トーンによる考慮
　・色の乱用でサイト内の秩序を乱さない


◆０５　要素別デザイン

　■h1
　・header部分に配置
　・Webレイアウトを乱さないデザイン

　■その他見出し
　・利用者の興味を引く表現にする
　・文字の色、大きさで変化をつける
　・画像を使って表現する
　・背景色を変えてサイト内に変化をくわえる

　■文字・テキスト・段落
　・サイト内にテキストを適度に配置する
　・フォントサイズを設定する
　・行間を揃える
　・頭位置を揃える
　・ブラウザ依存に注意したfont選択
　・読みやすい色にする　例）黒の色を　#000000ではなく　#333333
　　　　　　　　　　　　　　　　　　　#ffffffではなく　#dddddd
　・長いテキストリンクを連続して使用しない。
　・区切りをはっきりさせる
　・背景色と同じ色は使わない
　・文章の周囲に適度な余白をつけ文章を読みやすく
　・むやみに改行をいれない
　・長い文章は中央揃えにしない

　■表
　・線の太さ、色、種類を設定する
　・デフォルトの線種のままにしない
　・罫線とテキストに適度な余白をもたす
　・文字の位置揃えは目的やデータ形式によって決める

　■写真
　・明るさとコントラストを調整する
　・画像サイズを半端にせず５px単位で調整する
　・必要な部分をトリミングする
　・陰による奥行を演出する