<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/04/designbase-list.png" alt="" width="592" height="308" class="size-full wp-image-30899" /></p>
<p>ネットであらゆるサイトを見ていて、デザインやビジネスなどのインスピレーションを得ることもあるかと思います。そういったときには、インスピレーションを得た画像を保存しますよね。</p>
<p>画像をどこかに保存しておく手段としては、Evernoteであったり、Google Keepであったり、さまざまなツールがあると思います。</p>
<p>今回はそのうち、Dropboxとの連携によって画像を保存、閲覧できる仕組みを提供しているサービスのご紹介です。</p>
<!--more-->


<h3 class="header-label">気になった画像をChromeからDropboxへ容易に保存し、専用UIで一覧できる「Designbase」</h3>
<p>「<a target="_blank" href="https://designbase.us/">designbase</a>」は、<strong>DropboxとChrome拡張機能を組み合わせて、インスピレーションを得た画像を効率よくDropboxに保存、一覧できる</strong>サービス。</p>
<p>保存した画像は、専用のサイトで一覧することができるうえに、一般公開することも可能です。</p>

<h4 class="tips">気になった画像を右クリックメニューから保存</h4>
[caption id="attachment_30898" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/designbase-add.png" alt="" width="592" height="399" class="size-full wp-image-30898" /> 画像を右クリックして出てくるメニューからDropboxのフォルダに保存できる。[/caption]
<p>サイトを見ていて気になった画像があったら、画像を右クリックしてあらかじめ設定しておいたDropboxのフォルダを選択することで画像を保存しておくことができます。</p>

<h4 class="tips">気になった画像を一覧できる</h4>
[caption id="attachment_30899" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/designbase-list.png" alt="" width="592" height="308" class="size-full wp-image-30899" /> 保存した画像を一覧できる画面。[/caption]
<p>保存した画像は、Dropbox上だけでなく、designbaseの画面からも一覧できるようになります。また、この画面にはショートカットキーも用意されており、サクサク閲覧できるようにもなっています。</p>

<h4 class="tips">気になった画像を公開できる</h4>
[caption id="attachment_30897" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/designbase-setting.png" alt="" width="592" height="290" class="size-full wp-image-30897" /> 設定画面からMake PublicをONにすることで、フォルダを一般公開することも可能。[/caption]
<p>設定画面でフォルダごとに公開設定をすることができ、フォルダを一般公開することも可能です。</p>

<p>興味がある方は<a target="_blank" href="https://designbase.us/">designbase</a>へどうぞ。</p>


<h4 class="tips">使い方</h4>
<h5 class="tips">1.ユーザー登録</h5>
<img src="http://web-marketing.zako.org/images/2017/04/designbase-signup.png" alt="" width="592" height="252" class="alignnone size-full wp-image-30894" />
<p>まず<a target="_blank" href="https://inspire.designbase.us/signup">Sign Up</a>の画面から新規登録（無料）をおこないます。</p>

<img src="http://web-marketing.zako.org/images/2017/04/designbase-connect.png" alt="" width="592" height="328" class="alignnone size-full wp-image-30895" />
<p>登録するとDropboxとの連携を求められるので、【Connect Your Dropbox Account】ボタンを押して連携します。</p>

[caption id="attachment_30893" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/designbase-connect2.png" alt="" width="592" height="238" class="size-full wp-image-30893" /> 連携に成功すると、Dropboxに「designbase」というフォルダが作成されます。[/caption]

<h5 class="tips">2.Chrome拡張機能をインストール</h5>
<p>次にChrome拡張機能のインストールを進めます。</p>

<p><img src="http://web-marketing.zako.org/images/2017/04/designbase-chrome.png" alt="" width="592" height="230" class="alignnone size-full wp-image-30892" /><br />designbaseの画面左下に、画像のようなChromeアイコンがありますので、これをクリックします。</p>


<p><img src="http://web-marketing.zako.org/images/2017/04/designbase-chrome-setup.png" alt="" width="592" height="645" class="alignnone size-full wp-image-30891" /><br />次に開いたページの手順１のリンク先ページで、Chrome拡張機能をインストールします。</p>

<h5 class="tips">3.Tokenを設定</h5>
<p>拡張機能のインストールが完了したら、手順２に記載されている「YOUR TOKEN」の文字列を、拡張機能のオプション画面から開いた設定画面にコピー・アンド・ペーストします。</p>

<img src="http://web-marketing.zako.org/images/2017/04/designbase-chrome-option.png" alt="" width="592" height="200" class="alignnone size-full wp-image-30890" />
<p>拡張機能のアイコンを右クリックして、オプションを選択します。</p>


<p><img src="http://web-marketing.zako.org/images/2017/04/designbase-chrome-token.png" alt="" width="591" height="348" class="alignnone size-full wp-image-30889" /><br />するとTOKENを入力する画面が開くので、ここにコピーしたTOKENの文字列を貼り付けて、【Save or Update Token】ボタンを押します。</p>

<h5 class="tips">4.designbaseのサイト上でフォルダを作成</h5>

<p><img src="http://web-marketing.zako.org/images/2017/04/designbase-folder.png" alt="" width="592" height="216" class="alignnone size-full wp-image-30896" /><br />新たなフォルダを作成するには、designbaseのサイト上でフォルダを追加する必要があります。Dropbox上やローカルでフォルダを作成しても追加されないのでご注意を。また、このフォルダ追加時に日本語入力すると最初の文字が変換されずに勝手に確定されてしまうので、うまくいかない場合はまず冒頭にスペースを入れてから入力して、最後に冒頭のスペースを消すようにしてみてください。</p>

<p>さらにフォルダを追加するときは、Chrome拡張機能のオプションで、【Save or Update Token】を押すことでフォルダを認識させることができます。</p>
