Croppyとは

Croppy(クロッピィ)は、Webデザイナーのための「ソーシャルスクラップブックサービス」です。
気になるデザインのサイトがあれば、Croppy に URL を入力するか、Croppy のブックマークレットをクリックするだけで、今見ているサイトの一部をブラウザ上で切り抜いてスクラップすることができます。

気になるパーツを見つけたらブラウザ上で切り抜けます / 切り抜いたパーツを一覧にできるWebサービスです

Cropする(記事を投稿する)には

新しい記事を投稿するには、Twitter または Facebook アカウントでログインする必要があります。

Croppyサービス利用規約 に同意の上、ページ右上の Twitter または Facebook ボタンをクリックし、それぞれのアカウントでログインします。
ログイン後、ページ右上に [追加する] というボタンが表示されますので、そちらをクリックすると新規追加ページが表示されます。

以下のフォームにURLを入力して、Croppyにページを追加してください。

URLを入力して追加するには、ログイン後上記のテキスト入力フォームに気になるデザインのサイトの URL をペーストし、[追加] ボタンをクリックしてください。

ブックマークレットから追加

ブックマークレットを使ってサイトを追加するには、こちらのページ にあるブックマークレットを予めブラウザのブックマークバーにドラッグして追加しておいてください。

[Crop this!]をクリック

そして、気になるページを見つけたら、ブラウザのブックマークバーにある [Crop it!] ブックマークレットをクリックしてください。

「新規Cropの追加」ページ

「URL を入力して追加」フォームに URL を入力するか、ブックマークレットをクリックして少し待つと、「新規 Crop の追加」ページが表示されます。
ここで、先ほど見ていたページで切り抜きたい部分(ロゴやヘッダーなど)を指定し、「なぜ Crop しようと思ったか(なぜ切り抜こうと思ったか)」を入力します。

タグはオプションですが、半角カンマ区切りで入力しておくとあとで自分の Crop を探すときに役立ちます。
※タグはあとで変更できませんので、慎重につけてください。

すべて入力し終わったら、[次へ] ボタンが緑色になってからクリックします。

画像の一部の切り抜き

次のページでは、先ほど指定した URL のページ全体のイメージが表示されます。(画像が完全に表示されるまで少々お待ちください)

切り抜きたい部分の左上から右下にドラッグすると、このようにドラッグした部分だけが明るくなります。
明るいエリアが切り抜かれるエリアです。

長方形の端の■部分をドラッグしてサイズを変更したり、キーボードの十字キーを押して位置を微調整できます。
切り抜きたい場所がうまく選択できたら、[完了] ボタンをクリックします。

※この時「Twitterに投稿する」にチェックが入っていると、Twitterに「コメント URL via @Croppyorg」という形式のツイートが流れます。

投稿された記事

投稿が完了したら、投稿された Crop のページが表示されるはずです。

うまく投稿できないときは

Croppy は現在、Flash や @font-face が使用されたページをうまくキャプチャできない場合があります。

指定されたサイトをキャプチャできなかった場合

キャプチャ出来なかった場合は、このように緑の枠内にアップロードフォームが表示されます。

Windows をお使いの場合は、Crop したいページを表示した状態で PrintScreen キー(大抵キーボードの右上あたりにあります。ノートPCでは [Fn] キーを押しながらでないと効かない場合が多いです)を押し、Photoshop などのソフトにペーストし、PNG(24bit)形式で保存してください。
この時点では切り抜かなくても構いません。

Mac をお使いの方は、command+shift+3 キーを押し、デスクトップにできた PNG 画像をアップロードしてください。

このファイルを選択し、[次へ] ボタンを押してください。
次のページで必要な部分をドラッグし、[完了] ボタンをクリックすると投稿できます。

色彩分析の利用方法

投稿された Crop のページを表示すると、ページの中ほどに「色彩分析」という項目があります。
ここには、Crop されたイメージに含まれる、トップ25(最大)の色が並んでいます。

カラーチップ

各色のカラーチップ部分をクリックすると、その色について詳しく知ることができます。

色詳細ページ

色詳細ページでは、

  • その色の関連色(現在は補色のみ)
  • COLORlovers(外部サービス)を利用し、その色を含む配色例を調べる
  • relColors(外部サービス)を利用し、関連色や類似色を調べる
  • Dribble(外部サービス)を利用し、この色を含むデザインを探す

ことなどができます。
色詳細ページの機能は今後追加していきます。

フォロー機能の利用方法

フォローボタン

フォロー機能を利用するには、自分以外の方が Crop した記事を表示してください。
サイドバーのユーザーアイコンの下に [フォローする] ボタンが表示されるはずです。
[フォローする] ボタンを押すとそのユーザーをフォローできます。

フォロー新着

フォローしたユーザーの新着記事は、ログインした状態でグローバルナビゲーションの下にある フォロー新着 から確認できるようになります。

お気に入りの利用方法

ご自分で投稿した Crop であるか、他の方が投稿した Crop であるかに関わらず、Crop をお気に入りに入れることができます。

お気に入り

Crop の詳細ページを表示し、☆をクリックすると、☆が黄色に光ります。
これでお気に入りに追加されました。

お気に入り

お気に入りに追加された記事は、ログインした状態でグローバルナビゲーションの下にある お気に入り もしくは、トップページ等に表示されるサイドバーの「お気に入り」リンクからたどることができます。

キャラクターについて

クロッピィ

サイドバーに出演しているキャラクターは「クロッピィ」といいます。
新人Webデザイナーの女の子という設定で、Croppy の 公式TwitterアカウントFacebookページ を切り盛りしています。

イラストは、イラストレーターのま〜るさんに描いて頂きました。
ま〜るさんのポートフォリオサイトはこちらです。

イラストレーター・ま~るWEBサイト

自分で投稿した記事を削除するには

自分で投稿した Crop の記事ページを表示し、ページ右下にある「この記事を削除」をクリックし、[OK] ボタンを押すとその記事が削除されます。

問題のある記事を通報するには

問題のある記事を発見した場合、ページ右下にある「この記事を通報」をクリックすると通報ページが表示され、そこから通報を行うことができます。

※通報のあった記事は、確認のうえ非表示または削除処理をさせて頂きます。処理は手動で行なっているため確認に時間がかかる場合があり、また必ずに削除されるとは限りませんのであらかじめご了承ください。

退会するには

単に Croppy を今後利用しない、Twitter の認証を解除したい(勝手にツイートされたくない)というだけでしたら、Twitter の 許可した連携アプリの一覧 ページより Croppy の右側にある [許可を取り消す] をクリックしていただければ Twitter の認証が解除されます。

Facebook でログインされた場合は、アプリ設定 ページの Croppy の右側にある ☓ ボタンをクリックしてください。

Croppy に登録されているユーザー情報も含めて完全に抹消したいという場合は、ログインした状態で 退会申請フォーム より退会申請を行なってください。