<p class="thumb"><img src="http://web-marketing.zako.org/images/2016/11/cycles.png" alt="cycles" width="592" height="371" class="alignnone size-full wp-image-30682" /></p>
<p>サイトのプロトタイプを作成し、ユーザーテストをおこなってフィードバックをもらい、修正後に今度は承認をもらうという一連の作業を、まだまだメールやチャットでおこなっていて非効率だと感じることも多いのではないでしょうか。</p>
<p>今回ご紹介するのは、そのプロトタイプがウェブ上にあるとき、スクリプトを埋め込むだけでウェブ上で直接コメントし、やり取りできるようになるサービスです。</p>
<!--more-->

<h3 class="header-label">ウェブサイト上で直接フィードバックできる「Cycles」</h3>
<p>「<a href="https://cycleshq.com/" target="_blank">Cycles</a>」は、<strong>サイト上に直接フィードバックコメントを追加し、そのフィードバックに対してのやり取りをおこなえるようにするサービス。</strong></p>
<p>スクリプトを追加するだけで、メールやチャットなどのやり取りを省いて、視覚的にコミュニケーションを取れるようになります。</p>

<h4 class="tips">デモ動画</h4>
<iframe width="660" height="371" src="https://www.youtube.com/embed/DBmSD_6q1co?start=005" frameborder="0" allowfullscreen></iframe>

<p><a href="http://web-marketing.zako.org/cycles-test" target="_blank">こちらのお試しページ</a>でも試すことができます。</p>


<h4 class="tips">ページ上でフィードバックできる</h4>
[caption id="attachment_30688" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-feedback.png" alt="フィードバックしたい範囲を選択してコメントを残せる。" width="592" height="383" class="size-full wp-image-30688" /> フィードバックしたい範囲を選択してコメントを残せる。[/caption]
<p>サイト上でフィードバックしたい箇所を選択することで、その場所にコメントを残すことができます。</p>

<h4 class="tips">フィードバックの済管理ができる</h4>
[caption id="attachment_30686" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-done.png" alt="フィードバックに対して済未済の管理ができる。" width="592" height="353" class="size-full wp-image-30686" /> フィードバックに対して済未済の管理ができる。[/caption]
<p>個々のフィードバックに対して完了したかどうかを管理することができます。</p>

<h4 class="tips">ページ単位の承認もおこなえる</h4>
[caption id="attachment_30687" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-approve.png" alt="プロトタイプのページの承認をおこなえる。" width="592" height="549" class="size-full wp-image-30687" /> プロトタイプのページの承認をおこなえる。[/caption]
<p>すべてのフィードバックに対する作業を完了したら、ページを承認することができます。</p>
<p>右下のボタンを押し、【Approve page】を押すことで、承認作業が完了します。この時、すべてのフィードバックが完了しているかどうかを画面で確認できるようになっています。</p>

<h4 class="tips">メール通知も可能</h4>
[caption id="attachment_30685" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-notifications.png" alt="指定したメールアドレスへの通知も可能。" width="592" height="390" class="size-full wp-image-30685" /> 指定したメールアドレスへの通知も可能。[/caption]
<p>新しいコメントが付いたとき、ページが承認されたときには、アカウントのメールアドレスとともに任意のメールアドレスへ通知できるようにもなっています。</p>


<h3 class="header-label">設定手順</h3>
[caption id="attachment_30691" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-new-project.png" alt="まず新しいプロジェクトを作成。" width="592" height="308" class="size-full wp-image-30691" /> まず新しいプロジェクトを作成。[/caption]
<p>Cyclesのトップページから【Get started】ボタンを押してアカウントを作成し、まずはプロジェクトを作ります。プロジェクトは１つまで無料で作成できます。プロジェクト名は日本語でも大丈夫です。</p>

[caption id="attachment_30690" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-script.png" alt="スクリプトのコードが発行される。" width="592" height="386" class="size-full wp-image-30690" /> スクリプトのコードが発行される。[/caption]
<p>プロジェクトを作成すると、プロトタイプのサイトに埋め込むJavascriptコードが発行されるので、これを ＜head＞～＜/head>の間に設置します。</p>

[caption id="attachment_30689" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/cycles-button.png" alt="サイトの右下にボタンが表示される。" width="592" height="285" class="size-full wp-image-30689" /> サイトの右下にボタンが表示される。[/caption]
<p>スクリプトの設置が完了すると、プロトタイプのページの右下に青いボタンが表示されます。このボタンをクリックすることで、フィードバックなどの作業を開始できます。</p>

<p>興味があるかたは<a href="https://cycleshq.com/" target="_blank">Cycles</a>へどうぞ。</p>

