1 of 31

水ナビSWELL

入稿マニュアル

2 of 31

基本方針:元記事をそのまま再現する

具体的には・・・

  • 「h2」「h3」等の見出しレベルをそろえる
  • 箇条書きパーツなど使っているところは、同様に箇条書きにする
  • 文字装飾されているところは、そのまま同様の文字装飾する
  • 小さな文字、グレーの文字もそのまま再現する�・・・・など

※画像については、元サイトで右クリック保存して新サイトで再アップロードで大丈夫です。

3 of 31

 タイトルについて

新規投稿で入稿をお願いします。

タイトルは「(自分のクラウドワークス名)元の記事タイトル」

でお願いします

【例】

「(crowd太郎)ウォーターサーバー【人気おすすめ10社】比較ランキング!宅配水の失敗しない選び方をアクアソムリエが解説」

4 of 31

 記事のURLについて

カテゴリーはこちらで指定したものを使用ください

(もし知らされていなければお手数ですが聞いていただけると幸いです。その際返信が遅ければ、仮で適当なもの選んで進めてください)

パーマリンクを設定。パーマリンクはURLの最後のスラッグと同様にする。

5 of 31

パーツについて

旧サイトで使われているパーツのほとんどは、新サイト(SWELL)において再利用ブロックとして保存されています。

対応するものを探して使用してください。

パーツ置き場:https://test-mizunavi.com/news/608-2/

※編集厳禁。このURLは再利用ブロックの確認用として使う

※作業をされる中で、基本的に通常パーツは使わないイメージです。ほぼすべて再利用ブロックを使っていただきます。

6 of 31

 作業の注意点

ブロックエディターは、エラーでブロックが壊れることがあります。

主に再利用ブロックで起きる現象です。

ブロックが壊れると修復の手段がないため「保存せずに画面を閉じる」以外に対処方法がありません。

そのため、こまめに更新ボタンを押して、もしもブロックが壊れたら保存せずに閉じる、という作業の進め方をしていただけると幸いです。

7 of 31

おそらくご存知な方が多いかと思いますが、再利用ブロックはここから使えます

8 of 31

【※要注意※】再利用ブロック使用の際は必ず「パターンを切り離す」

こちらもご存知かと思いますが、再利用ブロック使用の際は、必ず、まず「パターンを切り離す」をしてから利用してください。元のブロックが改変され、そのブロックが使えなくなってしまいます。

9 of 31

再利用ブロック内にないパーツについて

中には再利用ブロック内に存在しないパーツもあります。

こちらについては、似ている再利用ブロックや、テーブル、通常パーツなどを使用してできる限り再現していただければ幸いです。

10 of 31

メリット・デメリットボックスの再現について

こういった「縦に連結した形」のメリデメボックスはないので、

他のブロックで代替します。

「メリット縦」「デメリット縦」を並べて、「メリット縦」の下のスペースを0emにすることで縦に連結したメリット・デメリットパーツを作れます

11 of 31

メリット・デメリットボックスの再現について

「縦に並んだ形」のメリデメボックスを、

「横に並んだ形」のメリデメボックスに置き換えないでください

※縦のものを横にすると、レイアウトが変わってしまいます。これに限らず、レイアウトが変わる変更は基本NGです。どうしても変更したい場合はご連絡ください。

12 of 31

画像のサイズについて

場所によって、画像サイズが(画面全体の横幅を100%としたとき)「80%」で入っているところと「100%」で入っているところとあります。

こちらも元ページをそのまま再現するようにしてください。

パーツも同様に100%の場所と80%のところがあります。こちらも設定をお願いします。

13 of 31

ウォーターサーバーの料金等について

「水ナビ」では、料金等の情報はそのまま打ち込まず、ショートコードを入力してデータベースから呼び出す仕様になっています。

下記がショートコードをまとめたスプレッドシートです。

https://docs.google.com/spreadsheets/d/1nwnF0MlZI88tzFqwayQ_FbUYgrUjSQBoCnQ4jrSpzH0/edit?usp=sharing

14 of 31

ショートコードの使い方

【例】

コスモウォーター「SmartプラスNEXT」の月額料金(水24L使用)の場合

→[waterserver_data id="171" data="month_price_12_24"]と入力

→ページ上では「4,104円」と表示される

※ショートコード表にあっても、実際のページで機能しないものがある可能性があります。その場合はその部分を飛ばして入稿進めていただき、表示されなかった箇所をお教えください。

※ショートコードは、半角スペース一つでも入ると機能しなくなります。表示されない場合は、本当に表記が正しいかご確認をお願いします。

※IDについては、「id(MCM)」の列を参照してください

15 of 31

ショートコード化してほしいもの一覧

・月額費用

・水代

・レンタル料

・電気代

・初期費用

・別途メンテ料

・配送料

・配送スキップ料

・契約期間

・解約金

※元ページ内の表示はすでにショートコードを使ったものです。つまり、スプレッドシート内に対応する料金があるはずで、その料金のショートコードを入れていただければ基本的に間違いはありません。

※期間限定キャンペーンなど、料金がショートコードと違う場合はそのまま直接入力します(その場合、本文にもそのように書いてある場合がほとんどかと思います)

※「0円」を「無料」と表現している場合があります。この場合い、ショートコードは使わずに「無料」とそのまま入れます。

※そのほか、直接入力している箇所がある可能性もあります。ショートコードで再現できない場合は飛ばして入稿進めていただき、最後にお教えください。

※ショートコードを入れた結果、正常に表示されたものの元サイトの数値と食い違う場合、数字の直書きではなくショートコードのままにして、食い違っていた旨ご連絡ください。

16 of 31

ページ内リンクについて

同ページ内へジャンプするリンクです。こちらはそのまま再現していただけると幸いです。

ページ内リンクの設定の仕方は「#●●●(飛ばしたい箇所のID)」で大丈夫です。

17 of 31

【10/3修正】内部リンク(水ナビサイト内の別記事へのリンク)について

水ナビ(https://mizu-navi.jp/ )サイト内の他の記事へのリンク

リンクの「mizu-navi.jp」の部分を「mcm-megumi.com/media」に置き換えてください。

【例】

https://mizu-navi.jp/water-server/flat-rate/

  ↓

https://mcm-megumi.com/media/water-server/flat-rate/

※まだ記事がなくつながらない場合もあります。後から記事ができるためそのままで構いません。

18 of 31

外部リンク(水ナビサイト外へのリンク)について

水ナビのサイト外に飛ばしているリンクです。

こちらはそのまま残してください。

19 of 31

リダイレクトリンクについて

「https://mizu-navi.jp/entry/~~」からはじまり「.php」で終わるリンクです。

これらのリダイレクトリンクは、「mizu-navi.jp」部分を「mcm-megumi.com/media」に変更してください。

【例】

https://mizu-navi.jp/entry/■■■■■■.php

 ↓

https://mcm-megumi.com/media/entry/■■■■■■.php

この際、もし.phpの後ろに「?id=POST_ID~~~~」などのURLが続いていた場合、「?」以降は無視してください。

※「?」も入らないように注意してください。

【例】

https://mizu-navi.jp/entry/■■■■■■.php?id= POST_ID_3242_main1

 ↓

https://mcm-megumi.com/media/entry/■■■■■■.php

20 of 31

Amazonリンクと楽天リンクについて

Amazonと楽天のリンクを付けている場合もあります。

こちらについては、アフィリエイトリンクを使用していたり、通常の商品リンクを入れていたりと、統一されていません。

こちらについては、通常の商品リンクを入れるようにしていただきたいです。

(Amazonや楽天でいったん商品を検索していただき、出てきたリンクを貼り付ける)

21 of 31

リンク全般に対する注意点

テキストリンクは、文字装飾の再現に注意してください。

青字にアンダーラインのものが多いですが、これは青字にアンダーラインでお願いします。

その他、

太字のもの、

青ではなくオレンジのもの、

青字でアンダーラインのないもの、

など様々ありますが、その書式に合わせてください。

22 of 31

入稿完了後は公開はせず、下書き保存で共有いただけると幸いです

23 of 31

※9月25日追記  口コミパーツは現在、使用不可です

「吹き出し」の再利用ブロックで代用してください。

※アイコンは、メディアの「icons」から性別のあったものを選択。

24 of 31

※10/12追記 キャンペーンパーツのショートコードの使い方について①

こういうパーツは「キャンペーンテンプレ 80%」という再利用ブロックを使用。

下記のようなブロックが出てきます。必ず「パターンを切り離す」実行。

この中で、下記3種類のキャンペーンはショートコードを使用します。

「新規」「乗り換え」「子育て(赤ちゃんCPやママパパCP含む)」

上記3種類以外は手作業で内容を埋めてください。

上記3種類に該当の場合は、5つあるショートコードの各部を編集していきます。編集箇所は、下記の2つです。

【1】ウォーターサーバーの名称

【2】キャンペーンのタイプ

25 of 31

※10/12追記 キャンペーンパーツのショートコードの使い方について②

▼【※①】に入れるウォーターサーバーの名称一覧 ※コピペして使用してください

アルピナウォーター アクアクララ

コスモウォーター クリクラ

エブリィフレシャス フレシャス

ハミングウォーター マーキュロップ

ワンウェイウォーター プレミアムウォーター

ピュアハワイアンウォーター 信濃湧水

サントリー天然水 うるのん

ウォータースタンド_ピュアライフ ウォータースタンド_アイコン

ロッカ

キャンペーンショートコードでは、下記の2か所を埋める必要があります。たとえば下記のような感じ

[キャンペーン_【※①サーバー名を入れる】 type="【※②キャンペーンタイプを入れる】_タイトル"]

▼【※②】に入れるキャンペーンタイプ一覧 ※文脈にあったものをコピペして入れてください

新規

乗り換え

子育て

※「期限」が設けられてないキャンペーンは「期限」自体不要なので、パーツ内から削除してください。

26 of 31

※9月27日追記  作業後の確認の仕方

「画面左上のメニューを開く」→「コードエディター」を選択

「ctrl+F」で「mizu-navi.jp」を検索。古いURLが出てくるのでチェックしていきます。古いドメインへのリンクはすべて消す必要がありますが、ただ消すだけだとエラーが出るので下記対応をお願いします。

・「mizu-navi.jp」の他の記事へのリンク

 →本スライド17ページを参照し対応

・画像を読み込むためのリンク

 →「test-mizunavi.com」へ同じ画像のアップロードと差し替え

・「https://mizu-navi.jp/entry/■■■■■■.php」というリダイレクトリンク

 →本スライド19ページを参照し書き換え

27 of 31

※9月27日追記  作業後の確認2

入稿完了後は、レイアウト等問題ないかのご確認をお願いいたします。

PC表示はもちろん、スマホから見る方が多いためスマホ表示の確認をお願いいたします。

ただし「デバイスコントロール」(PCとスマホで出す内容を変更する)を使うと修正工数がかかってしまうため、この機能は原則使用しない方針でお願いいたします。

28 of 31

※9月27日追記  画像の伸び縮みについて

左画像のようにPCでは問題ないのにスマホで見ると画像が縦に伸びておかしな比率になっていることがあります。

これは画像の「アスペクト比」が「カスタム」になっているために生じています。

直すにはアスペクト比を「元のサイズ」に変更してください。

※なぜか「カスタム」→「元のサイズ」にはいきなり切り替えられない仕様ですが、下記手順で「元のサイズ」に変更できます。

  ①「カスタム」→「正方形」に切り替え

  ②その後「正方形」→「元のサイズ」に切り替え

29 of 31

※10月3日追記  ポップアップ表示について

一部ポップアップのある部分もあるかと思います。

新サイトの方では、ポップアップは使わない予定です。

ポップアップ部分については、いったんそのままページ上に入れていただき、のちほどその旨ご連絡をいただけますと幸いです。

30 of 31

※10月3日追記  表へのリンク挿入について

「Flexible Table」モードだと、URLが入力できない現象があります。

###の箇所にURLを挿入しても、即時###で上書きされてしまうことがあります。

また「高度」の設定で別タブで開く(target_blank)もできなくなります。

こういった際は「Flexible Table」モードをやめて、通常モードに切り替えてください。

31 of 31

※10/12追記  画像へのaltタグ挿入について

画像は、普通に保存してSWELLテンプレに再投稿でOKです。

その際、大変お手数ですが画像にはaltタグ(代替テキスト)を挿入するようにしてください。

↓このツールを使用することで、そのページのaltが一覧表示されます。altが空の画像はそのまま空にし、altが入っている画像についてはコピペしてaltタグを挿入するようお願いいたします。

https://trickster.tools/image-alt-checker/