デザイン制作の進行イメージ

デザインの生産性と品質を保つため、制作のポイントや注意する点を記載しています。

備考

• 記載内容は一例となります。プロジェクトの要件やスケジュールに基づいて参考にしてください。
• 前提： 以下の場合を想定しています。実施すると、プロジェクト全体の進行がスムーズになります。
  • プロジェクト：
    • 大規模なプロジェクトの場合
    • 長期的な運用や改修を見据えたプロジェクトの場合
  • 体制： 複数の会社や担当者が関わり、分担して作業する場合

はじめに

CMSのデザインでは、再利用可能なコンポーネント設計思想でデザインをすること、プロトタイプをきちんと作ることが重要です。

プロトタイプによって、デザイン段階で画面遷移を含めたサイトの最終系の認識合わせをすることができ、スムーズにプロジェクトを進めることができます。

コンポーネント化の一例

• ヘッダ
• フッタ
• 見出し
• ボタン
• 記事の一覧
• 一覧に表示するカードUI
• ページネーション など

資料の確認

事前に以下を確認してください。

• ページリスト（サイトマップ）
• 画面設計書、ワイヤーフレーム

確認ポイント

ページリストから「CMSテンプレート化する動的ページ」か、「静的なページ」なのかを確認します。

ページ単位の確認

• 「CMSで出力する項目」と「そうでないもの」を確認します。
• なかでも、「CMSのエディタ入力（HTMLで出力する項目）」は運用に関する考慮が必要なものとなりますので後述します。
• CMSで出力する項目においては、「パターン違い」や「要素の有無」での表示がどうなるか等も確認します。

1. 基本的なポイント

画像	画像の書きだし範囲が分かるようにしておきます。とくにテキストを含めた画像やOverlayがある場合、コーディング担当者に連携しやすいようにしましょう。 レイヤーをグループ化して分かりやすい名称にします。 XDの場合、書きだし対象に設定します。
その他	テンプレート化するページでパターンによる表示が異なる場合は、1枚に全パターン入れるようにします。

2. プロトタイプの作成

プロタイプには以下を含めます。

リンク設定	リンクには画面遷移先が分かるようにリンク先を設定（内部リンク・外部リンク問わず） クリック可能な範囲が分かるように設定
状態管理	状態管理、transition、アニメーションなど変化した場合のデザインや挙動が分かるようにデザインします。 Hoverのデザイン Disabledのデザイン Overlayのデザイン（スマホのハンバーガーメニュー、モーダル、ポップアップなど） オンオフ切り替えがあるデザイン（checkbox / radioなど）
その他動きのある要素	スライダーの挙動 パララックス など
フォーム	エラー時の表示 確認画面の表示 送信後の表示

作成したプロトタイプをクライアント含めた案件チーム内で共有し、確認します。 共有設定やツールによっては、コメント機能を活用してフィードバックや修正を効率的に行うこともできます。

3. デザインガイドラインの作成

デザインガイドラインを作成してコーディング担当者に連携します。デザイン内のアートボードにまとめるか、別途資料を作成します。

以下は記載内容例です。

デザインルール	フォント情報一覧 見出しを含めたフォントサイズルール フォントファミリー Webフォントの場合：使用フォントのURLやライセンスについて記載 Webフォントを使用しない場合：Win/Macのデバイスフォントを記載 配色（使用カラー）一覧 レイアウトパターン、ルール 余白に関するルール 画像素材のライセンス その他スタイルガイド など
コンポーネント一覧	サイト内で共通で使用するUIをまとめます。 ページタイトル 見出し ボタン リスト（ニュースリストなどの一覧） カード型UI ページネーション Article（コンテンツ詳細ページ）内で使用する各パーツ など
対応デバイス	スマートフォン、パソコン、タブレットなどから対応する端末 デバイスによる表示出し分けルール ブレイクポイント

4. その他の注意点

よくあるデザイン工程の修正・追加依頼は事前に確認しましょう。

確認ポイント

• 404ページ、ローディング表示のデザイン作成
• faviconの作成
• 一覧表示：0件の場合の表示をどうするか
• コンポーネント単位：要素（画像や説明文など）がないパターンを考慮する必要があるか
• 画像：パソコンとスマートフォンで同じ画像を表示するか、違う比率の画像を表示するか
• WYSIWYGエディタに当てるデザインを作成するかどうか