デザインガイドライン作成|東京のWEB制作会社・ホームページ制作会社|株式会社GIG
デザインガイドライン作成
システム開発の流れ
デザインガイドライン作成
システム開発では制作するページ数が多くなるため、複数人のデザイナー、エンジニアが開発メンバーとして担当することは珍しくありません。そのため、制作するページごとのデザインに一貫性を持たせるため、またデザインに関して共通認識を持つために、GIGではデザインガイドラインを作成し、システム開発を行います。
デザインガイドラインとは、パーツおよびコンポーネント単位でデザインのルールを定義されたドキュメントのことです。
【デザインガイドラインの項目一例】
・配色
・ベースカラー
・サブカラー
・アクセントカラー
・その他背景やホバー時の色など
・フォントの指定
・書体
・サイズ
・色など
・見出しルール
・バナーサイズ
・アイコン
・ロゴのルール
・余白のルール
・禁止事項など
・アクションボタン
・エラー処理
・レイアウト(GRID)
パーツおよびコンポーネント単位でのデザインガイドラインがあることで、制作するページが多くなったとしてもデザインに一貫性を持たせることができるため、品質の担保が可能です。
デザインガイドライン作成
デザインガイドラインがないままシステム開発を進行してしまうと、複数名が関わるプロジェクトでは担当デザイナーやエンジニアによってビジュアルの変化が発生してしまいかねません
仮にボタンひとつとっても、「ボタンカラーは?」「ボタンサイズは?」「ボタンを並列させる場合のマージンは?」「ボタンを並列させる場合の順番は?」「ボタンのパディングは?」「ボタン内のアイコンはどうする?」「ボタンを押したときのアクションはどうする?」と様々な疑問が発生してしまいます。
また、情報過多な昨今はユーザーの離脱を防ぎ、サービスに没頭させるための適切なUIデザインが求められます。そのため、UIデザインの観点からも効果的なデザインルールを設け、デザインガイドラインとしてメンバー間で共通ルールを設けることは非常に重要なのです。
なおシステム開発は長期的なプロジェクトになることも多く、開発メンバーの変更や発注者側の担当者移動も起こりえます。そのため途中でプロジェクトに参画したメンバーにデザインルールを伝え理解してもらうためにも、デザインガイドラインはデザインの指示書として有効的です。
そして細かい仕様の確認や変更時も、エンジニアはデザイナーに都度確認することなく、デザインガイドラインを確認すればよいため、開発遅延の少ないスムーズな開発進行が可能になります。
デザインガイドライン作成
まず前段階で作成したワイヤーフレームをベースに、パーツごとのルールを策定します。またワイヤーフレームおよび情報設計から各ページに必要な機能がわかるため、複数ページで利用する機能がないかを精査し、コンポーネント化(ボタンや画像等のパーツの集合体)させていきます。
コンポーネント化することで、複数ページで必要な機能を一つひとつデザイン、コーディングする手間が省けるため、開発期間の短縮化が可能になります。
またデザインガイドラインとしてまとめられたドキュメントは、一度で完成するとは限りません。想定していなかったパーツデザインやコンポーネント化できる機能が出てくるため、その都度ドキュメントをアップデートし、デザインガイドラインのバージョンを管理していきます。
デザインガイドライン作成
企画、戦略立案、競合サイト分析、
RFP、要件定義、ペルソナ設計、カスタマージャーニーマップ作成など、
システム開発の流れの紹介です。
システム開発の流れに関連するページ
RFP、要件定義 、 見積もり(費用・開発期間) 、 企画(戦略立案・競合サイト分析) 、 ペルソナ設計、カスタマージャーニーマップ作成 、 情報設計(ディレクトリ設計)、ワイヤーフレーム制作 、 プロトタイプ実装、ユーザテスト 、 デザインガイドライン作成 、 システム設計 、 実装・開発、サーバ構築 、 レスポンシブ対応、内部SEO対策 、 広告プランニング、解析(Analytics、Search Console) 、 サイト運用、開発体制支援
デザインガイドライン作成
Webサイト制作、CMS開発、サービス開発、Webマーケティング、Webコンサルティングなど、
幅広くサービスを提供しています。プロジェクトの流れをご説明します。
-
STEP 01
ヒアリング・お見積もり
Webサイトの目的、ご依頼内容をヒアリングし、スケジュール、概算費用をまとめます。
-
STEP 02
仕様検討・要件定義
Webマーケティング施策、UI設計やサイトマップ、機能要件などを定義します。
-
STEP 03
Webデザイン・システム開発
デザイン制作、CMS開発(WordPress)、サービス開発などをおこないます。
-
STEP 04
保守・運用
Webコンサルティング、AWS運用、システム保守など全体的にサポートします。
CLIENT
クライアントのプロジェクトビジョンや現状の課題に沿って、システム開発、WEBマーケティング、
WEBコンサルティング、事業企画、採用支援など、最適なクリエイティブをご提供しています。
WORKS
コーポレートサイト制作、メディアサイト制作、WordPress開発、サービスサイト開発など、
web制作、システム開発、webプロモーションの事例をご紹介します。
CASE
Webデザイン、システム開発、Webプロモーションなど、最適な課題解決をおこなっています。
web制作、開発プロジェクトの裏側をインタビュー記事としてご紹介しています。