ライトプラン制作フロー

目次

ライトプランについて

新CMSを利用したライトプランは主にデザインパーツを使ってカンプの再現をします。
基本的にサイト内のページ構成は特別な指示がない限り変更しません。
また、CSSを記述してのデザイン調整も行いませんのでご注意ください。
プラン概要・フロー図の確認はこちら

作業のフロー

1. 事前準備

01

参照する資料（データ）の準備

手元に
①ディレクターから共有される制作管理用シート（指示情報・サイトマップ情報）
②デザイナーから共有されるカンプ
③デザイナーから共有されるデザインデータ（画像）
の3点を準備します。
  • 画像に関しては書き出しが後になる可能性もあります
  • 問題・不明点がある場合はディレクター、デザイナーに確認・相談を行うようにしてください。
02

制作管理用シートを確認する

制作管理用シートを参照して以下を確認します。
  • URLや原稿、その他シートに記載されている制作上の指示に不明な点はないか
03

画像を確認する

カンプ（Adobe XD形式）とデザインデータ（Googleドライブ）を見比べて以下の点を確認します。
  • 書き出し忘れがないか（足りない画像はないか）
  • 書き出しミスがないか（画像のサイズ・比率が違うなど）
    例）solutionの画像3枚のうち、1枚だけサイズが違っている
04

アカウントの基本設定と確認作業

以下の通り設定の確認や変更を行っていきます。

  • 制作ロックのONを定められた担当者（もしくはメインコーダー）に依頼します。
    （"Slackテンプレート"をご利用ください）
    業務委託の方へは、制作ロックをONにした状態でお渡ししますので、本作業は不要です。

  • 設定　＞　基本設定 より以下の設定を行います。
    ①「サイトの公開・非公開」を「公開中」に変更
    ② 「テスト公開モード」をONに変更
  • カスタムCSSの反映作業
    （設定　＞　ベースデザイン設定　＞　サイトのカスタムCSS　の画面で一度「保存」ボタンを押します）

2. ベースデザイン設定

01

ベースデザイン設定を開く

設定　＞　ベースデザイン設定
カンプの情報をもとに、ベースデザイン設定を反映します。
※変更したら一番下にある「設定を反映する」ボタンを押して反映させます
ベースデザイン設定初期値
  • デフォルト_ベースデザイン設定
02

カンプの情報を反映させる

デザインカンプと以下の情報を参照し、ベースデザイン設定に情報を反映させていきます。
メインカラー、サブカラー、アクセントカラー
カンプのカラーの定義を参照
  • カラーの定義
背景カラー①
#FFFFFF（固定値）
背景カラー②
#F4F4F4 　or　カンプの指示色
テキスト
カンプの情報もしくは指示された原稿を参照
ボタン
カンプの情報を参照
※ホバー時の挙動に関しては「透過」固定
余白
変更なし
タグ
カンプの情報を参照
シャドウ
カンプの情報を参照

3. 画像の登録・差し替え

01

ファビコン、OGP画像をアップロードする

ライブラリ　＞　メディア　＞　新しいイメージをアップロードする から
ファビコン、OGP画像をアップロードし、altを設定します。
02

ライブラリから画像を差し替える

ライブラリ　＞　メディア　＞　別のイメージに差し替える から
以下に挙げられている画像を差し替えます。
※差し替え画像と、どの部分に使われているかは下記の「差し替えが必要な画像」の一覧やファイル名を検索してご参照ください。

差し替えが必要な画像一覧

基本的に以下に挙げられている画像を差し替えていきます。
（案件によっては差し替える必要がないものもあります）
 

  • ロゴ
    （logo.png）
  • TOP MV背景
    （TOPmv用BG.png）
  • CTA背景
    （CTA_背景.png）
  • 下層MV背景
    （下層用メンビジBG.png）
  • TOP ABOUT部分の画像
    （img_top_service1@2x.png、
    img_top_service_2@2x.png、
    img_top_service_3@2x.png）
  • TOP POINT部分の画像
    （img_top_solution_1@2x.png、
    img_top_solution_2@2x.png、
    img_top_solution_3@2x.png）
  • TOPお知らせ下のセクション内ボックスリンク背景（ない場合もある）
    （company.png、recruit.png）
  • サービス機能紹介（下層）POINT部分の画像
    （img_003_onboarding@2x.png、
    img_002_ma@2x.png、
    img_003_onboarding@2x.png）
  • ページTOPボタン用
    （original.png）

 

ライトプランベース_差し替え画像一覧

03

差し替え以外の画像をアップロードする

ライブラリ　＞　メディア　＞　新しいイメージをアップロードする
こちらから新規の画像をアップロードすることができます。

下記のように差し替え以外で登録が必要な画像もあります。
新規で登録した画像には必ずaltを設定するようにしてください。

  • TOP MV背景（スマホ用）
  • セクション背景
altの設定
  • alt設定
新規で登録した画像を選択すると、上記のようにaltの欄が空になっているので必ず設定します。
  • img、TOP、@2x、拡張子などを除く画像名をそのまま設定
    　上記の例ならaltは　service1　となります。
注意事項
altの設定はコーディングルールで定められていますので、ライブラリから画像をアップロードするタイミングで必ず行うようにしてください。SEOの評価にも影響を及ぼすため、全ての画像に対して設定が行われている必要があります。
また、ページ編集画面からの画像アップロードは禁止されています。
04

基本設定からファビコン・OGP画像を設定する

上記の手順で登録したファビコン、OGP画像を基本設定から設定します。
※ロゴ画像は差し替え済みなので対応不要です。
ファビコン
基本設定　＞　アイコン選択　＞　ファビコン設定
左下の「最近追加したファイル」から選択し設定します。
OGP
基本設定　＞　アイコン選択　＞　OGP設定
右下の「最近追加したファイル」から選択し設定します。

4. ブログの設定

01
ブログテンプレートの準備
ブログ　＞　テンプレート　＞
「デフォルトテンプレート」を以下のフローで詳細用のテンプレートに作り替えます。
（バージョンにより表示されている順番が異なる場合があります。）
02
使用できるパーツをコピーする
既存の「詳細ぺージ用」テンプレートに「編集」ボタンから入り、SNSボタンの行（row）をクリップボードでコピーします。
03
デフォルトページの設定を行う
「デフォルトテンプレート」のナビとフッターにチェックを入れ、「編集」ボタンからぺージに入ります。
編集画面内で以下の設定を行います。
  • 右上の 設定 ＞ ヘッダーの表示 のチェックを外します。

  •  1つ目のセクションに入っている2つ目の空の行（row）を削除します。

  • 「反映する」ボタンで保存します。

空の行の削除
04
先ほどコピーしたパーツを貼り付ける

  • クリップボードにコピーした行（row）を、1つ目のセクション内に配置します。
    （元々あった詳細ぺージ用のテンプレートと同じ状態を再現する作業になります）

  • 「デフォルトテンプレート」の名前を設定します。テンプレート名を「詳細ページ用」に変更します。

  • 「反映する」ボタンで保存します。

不要なテンプレートの削除
もともとある「詳細用」のテンプレートは不要なので削除します。

クリップボードによる複製

「クリップボード」機能を利用し、行（row）やセクションを含め、様々なパーツを複製することができます。
編集画面左側の「クリップボード」上に複製したいパーツをドラッグ&ドロップすることで、そのパーツを複製用に登録することができます。
 

クリップボード

 

5. ページ設定

01

ページ名、URLを設定する

サイト　＞　ページ一覧　＞　ページ設定
制作管理用シートのサイトマップ情報をもとに、ページ名、URLの変更をします。
※ページ一覧のページの並び順もサイトマップにあわせる。
その他の設定

ページ設定で変更できる箇所についてもここで行っていきます。

  • グロナビ表示の有無
    制作管理用シートの「グロナビ表示の有無」を参照。
    メニュー表示　＞　グローバルメニューに表示する

から変更できます。

02

サービス機能紹介ページのURL設定を行う

「サービス機能紹介ページ」はページのURLが以下のようになっています。
  • サービス一覧　→　service
  • サービス機能紹介　→　service/01

（「サービス一覧」ページは「■■追加コンテンツ用■■」の下層に入っています）

必要に応じて以下の変更を行ってください。

「サービス一覧」ページを使用しない場合
URLを下記にのように変更します。
  • サービス機能紹介　→　service
  • サービス一覧　→　service_list
「サービス一覧」ページを使用する場合

「サービス一覧」ページをドラッグアンドドロップで「サービス機能紹介」ページの上の階層に移動させます。

  • この作業により「サービス機能紹介」ページが第三階層となるので、パンくずの設定が必要になります。
    （不要な場合もあるので、制作管理用シートの「パンくず表示」の指示に合わせるようにしてください）
  • サービス一覧移動
  • パンくず
  • パンくず表示
  • パンくずリストの設定
    →ページ編集画面に入り、設定を選択、レイアウト設定の「パンくずリストを表示する」にチェックを入れます。
03

TD（タイトル・ディスクリプション）の設定を行う

サイト　＞　ページ一覧　＞　SEO設定
制作管理用シートの指示通りに変更すれば問題ありませんが、ブログページだけは注意が必要となります。
ブログページ
ブログページはタイトルの末尾にサイト名（株式会社〇〇など）が自動で入ってしまう仕様のため、会社名が重複してしまわないように適宜変更が必要となります。
例）ブログ一覧　→　ブログ一覧｜スマートな導入を実現する、株式会社〇〇のWebサービス: 株式会社〇〇
　　ブログ詳細　→　Webサービス｜株式会社〇〇のWebサービスの紹介です | 株式会社〇〇
04

制作対象外のページ

ページ一覧内の「サイトカスタマイズの参考にご利用ください」下層に移動させます。
※「サイトカスタマイズの参考にご利用ください」の下層にあるページは非公開にしてください。
05

OGP設定を確認する

サイト　＞　OGP一括編集
から、変更したものがタイトルとディスクリプションに反映されているかを確認します。
もし反映されていない状態であれば「metaと同じ設定にする」のチェックを入れ直して反映させます。

6. 組み込み（パーツ配置、原稿反映）

01

WFを参照してパーツ配置を行う

サイト　＞　ページ一覧　＞　ページ設定　＞　ページ編集
からパーツを配置していきます。

WF（ワイヤーフレーム）はパーツの配置情報だけを参照するもので、
テキストに関してはほとんどがダミーの状態となっている場合が多いです。

原稿の情報が別途来ている場合には、そちらのテキスト内容を反映します。
（フロー6の04を参照してください）
  • 基本的にはデフォルトのまま制作できるパーツ配置となっていますので、
    パーツを追加、削除することにより、その指示に合わせていきます。
02

パーツ配置を行う際の注意点

編集画面でできるカスタマイズは行うことができます。
例）文字色、テキストサイズ、太字設定 etc...
セクション背景色の変更
カスタマイズ　＞　背景設定　＞　カラー　から行います。
※ライトプランではセクションの中のパーツを他のセクションに移動させたりしないでください。
  • セクション背景色変
OKな操作

  • セクションパーツの追加（こちらの「空白のセクションパーツ」以外を使用します）

  • デフォルトで配置済みのセクションの複製

  • 「デフォルトで配置済みセクション」 or 「追加したセクションパーツ」内でのパーツの複製、削除

03

個別に設定する必要があるページ

「料金ページ」のテキスト色を変更
初期費用と月間利用料の箇所にある、「10万円」はベースデザイン設定が当たらないため、手動で変更する必要があります。
こちらの文字色にはメインカラーと同じ色を反映させます。
  • 料金ページ変更箇所
「お問い合わせページ」にある電話番号の反映

  • 電話番号ありの場合
    ボタンの表示とリンク先の電話番号を変更します。

  • 電話番号が不要な場合 
    TELボタンパーツが入っているrow（行）ごと"目のアイコン"をクリックし、非表示にします。

  • お問い合わせページ変更箇所
04

画像 ＋ テキスト部分のデザインをサイト全体で揃える

TOPページの 画像＋テキスト のパーツをデザインカンプに合わせて別のものに変更することがあります。
また、背景色やbackground-imageを設定することもあります。
  • 変更前
  • 変更後
  • 「選ばれる理由」
  • 「サービス紹介ページ」
など、下層ページにも同じ構成が見られますので、調整したTOPページに合わせるようにします。
05

リンクの設定を行う

ボタンやテキストリンクにそれぞれ適切なリンク先を設定していきます。
デフォルトの状態では既に各リンクの設定がなされていますが、もし最初の状態とは構成が異なる場合は設定を行ってください。
  • 以下の「リンク設定時のルールについて」をご確認の上、ルールに沿った設定を行うようにしてください

リンク設定時のルールについて

リンクを設定する場合は以下の2点の設定を忘れずに行うようにしてください。

①外部サイトにリンクを貼る場合は「外部ウィンドウ」にチェック入れる。
②fO内のフォームと電話番号へのリンクにはイベント設定を入れる。
　（配置済みのパーツにはすでに適切なイベント設定がなされています）
 

イベント設定について詳しくはこちらをご確認ください。

06

原稿を参照してテキストの流し込みを行う

WFとは別に、原稿が共有されることがあります。内容を確認して対応箇所に反映させていきます。
※テキストに関してはWFよりも原稿を優先させてください。

テキストパーツの特性について

テキストを配置する際、既存サイト等からコピー＆ペーストを行うと、テキストに掛かっているスタイルや余計なタグを持ってくるという仕様があります。
そのため、流し込み等を行う際はメモ帳に貼り付けるなどして、プレーンテキストの状態のものを貼り付けるようにしてください。

SP編集画面での操作は行わない

仕様上の理由から、ライトプランにおいてもSP編集画面を使用した操作は行わないことになっています。
特別な依頼で、ディレクター or デザイナーからこの画面を使用した編集を依頼される場合、リスクを説明して本当に行うかを確認する必要があります。

  • スマホ編集
使用しないセクションやパーツについて
案件によって、原稿やワイヤーフレームを確認すると、デフォルトで配置されているコンテンツを一部使用しないことがあります。
そのような場合は基本的にパーツを削除してしまうのではなく、目のアイコンをクリックして非表示にすることをお勧めします。（クライアントが後から使用する可能性があるため）
案件ごとに担当ディレクターに使用しないパーツの扱いを確認するとよいでしょう。

7. 共通エリア：ヘッダー、フッター設定

01

ヘッダーの設定

サイト　＞　共通エリア一覧　＞　共通ナビ　を操作します。
電話番号の反映
カンプまたは制作管理用シートから電話番号を参照し設定します。
  • 電話番号ありの場合
    ボタンの表示とリンク先の電話番号を変更します。
  • 電話番号が不要な場合 
    TELボタンパーツの"目のアイコン"をクリックし、非表示にします。
お問い合わせ・資料ダウンロードボタンの変更
ボタンのテキストに変更などがあった場合は変更していきます。
02

フッターの設定

サイト　＞　共通エリア一覧　＞　共通フッター　を操作します。
リンクリストのページ名変更
ページ名やURLの変更があった場合、最新の状態に反映させます。
col（カラム）の幅の調整
カンプを参照し、デフォルトの状態と差異がある場合、編集画面で変更を行っていきます。
この幅の調整はcol（カラム）の境界線を左右にドラッグすることで可能です。
※pxでの設定はできないので、%での設定となります
  • colの幅変更
コピーライトのテキスト変更
コピーライトのテキストを反映させます。

8. 共通パーツ：CTA、コピーライト設定

01

CTAの設定

サイト　＞　共通パーツ一覧　＞　CTA　から操作します。
テキストの反映
原稿 or カンプを参照し、テキストを反映させます。
色の変更が必要な場合はそちらも合わせて設定します。
ボタンの変更
デフォルトの状態から変更点があれば反映させます。
電話番号の反映

  • 電話番号ありの場合
    ①ボタンの表示とリンク先の電話番号を変更します。
    ②営業日時のテキストを流し込みます。

  • 電話番号が不要な場合
    電話番号の箇所を行（row）ごと削除します。

02

コピーライト（フォーム用）の設定

サイト　＞　共通パーツ一覧　＞　コピーライト
から、コピーライトのテキストを反映させます。

9. フォームの設定

01

プライバシーポリシーのURL変更

サイト　＞　入力フォーム一覧　＞　編集　＞　オプション設定　＞　規約設定
デフォルトの状態ではサイトコピーしたアカウントの情報を引き継いでいますので、
制作しているアカウントのプライバシーポリシーページのURLに変更する。
※制作対象のフォームのみ変更（LPなど対象外のものは対応不要）
  • フォームの設定
※変更を行った場合は必ず「保存する」ボタンを押して反映させてください。

10. セルフチェック

01

セルフチェック

STEP 2〜9の手順を再度確認し、作業の漏れがないかのセルフチェックをしていきます。
02

ブラウザチェック

以下のブラウザで正常に表示されるか確認を行っていきます。
  • Chrome
    PC表示（1440px）、Android（画面幅393px（ベーシックの確認環境はAQUOS sense5GとRedmi Note 11））
  • Firefox
  • Edge
  • Safari
    PC表示、iPad Pro（1024px）、iPad（834px）、iPad（768px）
    iPhone8 Plus（414px）、iPhone8（375px）
    iOS実機を所持している場合は、実機で表示確認を行ってください。
デザインチェック・サイトチェック依頼のタイミング
デザインチェックやサイトチェックは（FB対応を含め）1次納品時に完了している必要があります。
余裕を持ってチェックや修正対応を行うことができるように、ペースを調整しながら作業を完了させるようにしてください。

11. デザインチェックの依頼

01

デザインチェックを依頼

セルフチェックを行った後、担当デザイナーにデザインチェックを依頼します。
FBが発生した場合は対応します。
02

完了の報告

サイトチェックが完了したら、組み込み者から担当ディレクターに完了報告を行います。
担当ディレクターからFBを受けた場合は対応します。
この後、担当ディレクターからお客様へ一次納品が行われます。

12. 顧客FB修正とサイトチェックの依頼

01

顧客FB修正

一次納品後、お客様からFBがあった場合にはディレクターから指示がありますので、それに従って修正を行ってください。
顧客FBが何もなかった場合には、その旨が担当ディレクターから伝えられますので、02のサイトチェックのフローに進んでください。
02

サイトチェック

FB修正完了後、サイトチェック担当者を確認し、サイトチェックを依頼します。
（業務委託の方は、福原・高橋にメンションをつけてご連絡をお願いいたします。）
FBが発生した場合は対応します。
03

完了の報告

サイトチェックが完了したら、組み込み者から担当ディレクターに完了報告を行います。
制作フローに戻る

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.