Web制作・運用現場のための「課題解決」の教科書

デザインガイドライン

デザインガイドライン

目的

Webページの視覚表現、デザイン、レイアウトなどの統一

対象者

主に設計スタッフ、制作スタッフなどが利用

内容

Webサイトには、製品の外観写真やプロモーション用の画像など、ページ固有のデザイン要素と、ヘッダ、フッタ、ナビゲーション、見出し、ボタンなどサイト共通のデザイン要素があります。デザインガイドラインでは、サイト共通のデザイン要素、レイアウト、視覚効果など、画面に表示される視覚表現のルールについて定義します。ページ固有の要素でも、トップページのキービジュアルや各ページにあるバナーなど仕様を統一したい場合は、デザインガイドラインに記載します。

テキスト原稿開発のルールについては、デザインガイドラインに掲載する場合と、別に原稿開発ガイドラインを作る場合があります。別冊とするか否かは、事業部の担当者などWeb専門でない人がWeb用のライティングを行うか否かと、原稿書き起こしの頻度で決まってきます。

目次(例)
  1. 本書について
    • (a)本書の目的と位置づけ
  2. 共通レイアウトの定義
    • (a)基本レイアウトパターン
    • (b)共通エリアの表示ルール
      • ①ヘッダ
      • ②フッタ
      • ③グローバルナビゲーション
      • ④ローカルナビゲーション
    • (c)個別エリアの表示ルール
      • ①基本ルール(下層ページのルール)
      • ②トップページ固有ルール
      • ③●●ページ固有ルール
  3. 共通デザインの定義
    • (a)カラースキーム、ブランドルール
    • (b)デザインエレメントとデザインの統一度
      • ①見出しデザイン
      • ②ナビゲーションデザイン
      • ③●●デザイン
      • ④その他の画像パーツ(モジュール化されていないもの)
    • (c)個別デザイン作成ルール
      • ①画像作成ルール
      • ②音声・動画作成ルール
      • ③リッチコンテンツ作成ルール
      • ④PDF作成ルール
      • ⑤印刷用ページ作成ルール
    • (d)特殊デザイン要素
  4. 原稿開発ルール
    • (a)機種依存文字、代替表現、実体参照
    • (b)用字・用語
    • (c)現地語表記一覧(翻訳用語集)

基本レイアウトパターン

ローカルナビゲーション

次のページへ
この記事が役に立ったらシェア!
tweet88はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

クチコミ
情報が人から人へと口伝えにつたわること。 ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore