デザインコンセプト立案


デザインのレギュレーションなどの資料はこちらにおいてあります。


XDデータはこちら

▼サムネイルの元編集データが格納されているXDデータです。
CCでも共有しています。
▼各サイトページのデザインされたデータがXDデータです。
CCでも共有しています。

XDデザインスペック

見出しパーツ

【見出しのカスタマイズ】のclass名に「hd_custom01」を記述します。

h1見出し

h2見出し

h3見出し

h4見出し

h5見出し
【見出しのカスタマイズ】のclass名に「hd_custom01」「long」を記述するとフォントサイズが少し下がります。

h1見出し

h2見出し

h3見出し

h4見出し

h5見出し
【見出しのカスタマイズ】のclass名に「hd_custom02」を記述します。

h1見出し

h2見出し

h3見出し

h4見出し

h5見出し
【見出しのカスタマイズ】のclass名に「hd_custom02」「long」を記述するとフォントサイズが少し下がります。

h1見出し

h2見出し

h3見出し

h4見出し

h5見出し

ボタンパーツ集

【ボタンをカスタマイズ】にclass名「btn_custom01」を記述します。納品時にサイトに合わせて作成したボタンです(変更不可)。

※アイコンありの方は「ログインボタン」に使用しています。
【ボタンをカスタマイズ】にclass名「btn_custom01」を記述します。カラー選択 からアイコンなしを選択できます。
【ボタンをカスタマイズ】にclass名「btn_custom02」を記述します。納品時にサイトに合わせて作成したボタンです(変更不可)。

※CVボタンなど(目立たせたい)ボタンに使用しています。
【ボタンをカスタマイズ】にclass名「btn_custom03」を記述します。納品時にサイトに合わせて作成したボタンです(変更不可)。
※カテゴリを選ばせるボタンに使用しています。
【ボタンをカスタマイズ】にclass名「btn_custom03」を記述します。カラー選択 からアイコンなしを選択できます。
【ボタンをカスタマイズ】にclass名「btn_custom03」を記述します。カラー選択 から矢印の向きを変更できます。
【ボタンをカスタマイズ】にclass名「btn_custom04」を記述します。カラー選択 から矢印の向きを変更できます。

※主にヘルプページの遷移ボタンに使用中。
アイコンをつけることで、外部リンクを表す。

【ボタンをカスタマイズ】にclass名「btn_custom04」を記述します。カラー選択 から矢印の向きを変更できます。

※外部リンク以外の場合はアイコンを外す。

デザインパーツ(動画一覧パーツ)

ROWを3カラムに指定し、class名「thumb_row loop_row」を記述します。
「NEW」を表示させたいイメージのクラスに「new_img」を追記します。(イメージのクラスがthumb_img new_imgになります)

デザインパーツ(タグパーツ)

【タグ一覧】にclass名「tag_custom」を記述します。

デザインパーツ(アンカーリンク)

4カラムのROWに「anchor_row」を設定、hd_custom02クラスの見出しと、btn_custom03クラスのボタンとで構成します。

デザインパーツ(カルーセルパーツ)

お役立ち資料詳細用のカルーセルパーツです。
ROWに「w810_row shadow_all」のクラスをつけ、中にデザインパーツからカルーセルパーツを配置してください。

ヘッダーパーツ

第二階層(左側にH1、右側にイラスト)を配置する場合。
①ページ一覧のページ設定画面で「共通エリアの使用」から共通ヘッダーを使用するにチェックを入れる。
②一回ページ編集画面に入る。
③ページ編集画面から出て「共通エリアの使用」から共通ヘッダーを使用する、のチェックを外す。
④もう一度ページ編集画面に入って、個別でヘッダーのテキストやイラストが変更できることを確認する。
⑤テキストやイラストを変更する。
第三階層(左側にH1のみ)を配置する場合。
①ページ一覧のページ設定画面で「共通エリアの使用」から共通ヘッダーを使用するにチェックを入れる。
②一回ページ編集画面に入る。
③ページ編集画面から出て「共通エリアの使用」から共通ヘッダーを使用する、のチェックを外す。
④もう一度ページ編集画面に入って、個別でヘッダーのテキストやイラストが変更できることを確認する。
⑤ヘッダーのクラスに「third_page_custom」を追加する。(クラスにsub-page-custom third_page_customが入っている状態)
⑥ヘッダーの背景画像を変更する。
 PCの背景画像:第三階層MVSP@2x.png(設定:縦:中/横:右、背景を完全に覆う最小サイズ)
 SPの背景画像:第三階層MV@2x.png(設定:縦:中/横:中、背景を完全に覆う最小サイズ)
⑦左側にH1、右側にイラストが入っているROWのカラムを2カラム→1カラムに変更。
⑧H1テキストを変更して終わり。
第三階層 LP(SP時に右のイラスト画象が非表示)を配置する場合。
①ページ一覧のページ設定画面で「共通エリアの使用」から共通ヘッダーを使用するにチェックを入れる。
②一回ページ編集画面に入る。
③ページ編集画面から出て「共通エリアの使用」から共通ヘッダーを使用する、のチェックを外す。
④もう一度ページ編集画面に入って、個別でヘッダーのテキストやイラストが変更できることを確認する。
⑤ヘッダーのクラスに「moku_page_custom」を追加する。(クラスにsub-page-custom moku_page_customが入っている状態)
⑥ヘッダーの背景画像を変更する。
 PCの背景画像: もくもく会LP用MV背景@2x.png(設定:縦:中/横:中、背景を完全に覆う最小サイズ)
 SPの背景画像:  スマートフォン用の背景画象を設定する、からチェックを外す。
⑦右カラムのイラストのクラスを「mv2_img pcOnly」に変更する。
⑦H1テキスト、下のtextを変更して終わり。

フォームパーツ

【フォーム】にclass名「form_custom form_btn_custom01」を記述します。
【フォーム】にclass名「form_custom form_btn_custom01」を記述します。
row(行)のclass名に「form_row」を記述すると角丸になります。
ページTOPへ戻るボタン