パーツ集について

パーツ集とは

サイト内で使用されているボタンや見出し、記事リストパーツや共通パーツ、調整用CSSをまとめたページです。
ボタンや見出しなどの複数デザインがあるパーツも一覧で確認ができるため、顧客がサイトを編集する際に参考にしていただくページとなっています。新旧CMSでパーツ集の扱いが変わりますので、その点も確認してください。

新CMSにおけるパーツ集の扱いについて

新CMSでの制作時には、パーツ集へパーツを格納する作業は基本的に行いません。
「パーツ集」というページ自体は納品物に含まれますが、あくまで顧客側で運用時によく使うパーツを保存して活用してもらうためのページとして存在することとなります。
新CMSでもパーツ集を作成するケース
  • ディレクターから格納指示があった場合は制作したパーツをパーツ集へ格納してください。
  • ライトプランには、パーツ集のページがデフォルト状態では準備されていません。
    アップセルなどで作成の指示があった場合は、ページを新規で準備し、パーツ集を作成してください。

旧CMSにおけるパーツ集の作成方法

旧CMSではサイトで使用するパーツをパーツ集へ格納する必要がありますので、以下内容に従って作成してください。

1. 見出しパーツ集の作成

トップページ・下層ページで使用した見出しクラス名を全て掲載します。
アイコン違い等は、カラーに分けで作成してください。また、カラーによってアイコンの種類が違う場合もパーツ集に掲載してください。
  • 独自クラスは必ず命名規則(「hd_custom0●」(●部分は連番)の形)に倣っている必要があります。
注意事項
  • 見出しが白文字の場合は。ページ編集画面上で行(row)の背景色を入れて視認性を高めてください。
  • サイト内のボタン表記が全て太文字の際は、パーツ集もそれに合わせページ編集画面上で太文字設定をしてください。
  • 必ず h1 〜h 5 サイズまで作成してください。
  • デザインによって見出しサイズがh3がh2より大きくなる場合も、パーツ集用に(デザインは変えず)トップ・下層ページで使用している状態で表示してください。

2. ボタンのパーツ集の作成

トップページ・下層ページで使用したボタンクラス名を全て掲載します。
サイズは S / M / L 必ず3種類を作成して、表示してください。
アイコン違い等は、カラーに分けで作成してください。また、カラーによってアイコンの種類が違う場合もパーツ集に掲載してください。
  • ボタンの独自クラスは命名規則に倣って必ず「btn_custom0●(●部分は連番)」と命名してください。
注意事項
  • ボタンが白文字かつ背景が透過の場合はページ編集画面上で行(row)の背景色を入れて視認性を高めてください。
  • SP / TABの時にS / M / Lサイズのどのボタンであっても、横幅が見切れないようにしてください。
  • サイト内のボタン表記が全て太文字の際は、パーツ集もそれに合わせページ編集画面上で太文字設定をしてください。

3. 記事リストパーツ集の作成

パーツ集ページにはデフォルトで記事リストパーツが配置されており、リスト型、カード型(1列・2列・3列)それぞれ掲載してあります。こちらはカンプで使われている・いないに関わらずそのまま全て表示させておいてください
また、あまり無い例ですが、カンプで使われている記事リストパーツに複数デザインがある場合も全て掲載し、それぞれリスト型、カード型(1列・2列・3列)を掲載させてください。
注意事項

納品する際はダミーページが削除される場合があり、表示させる記事が1件もないことがあります。
その場合は下の画像のように見出しだけが続く状態になりますが正の状態なので問題ありません。
表示させる記事がない場合でもデフォルトで表示されている記事リストパーツは削除しないでください。

記事が無い状態のパーツ集内、記事リストパーツはこのような表示になります

パーツ集作成にあたっての注意事項(新旧CMS共通)

新旧CMS問わず、以下の点に注意して作成してください。
注意事項
  • パーツ集にクラス名を表記する際は太字表記で記載をお願いします。
  • 見出し / ボタン / 記事リスト以外にも、特別なセクション(section)や特殊な動きのする行(row)、カラム(col)は記述を行ってください。
  • パーツ集上でも SP / TAB 時に崩れが出ないようにチェックしてください。
  • お客様はパーツ集からパーツをクリップボードで移動させることが多いので、コピーしても崩れないような制作が必ず行われている必要があります。(CSSでの装飾時の注意事項ですが、ここで判明することが多いです)
pagetop