2018年7月2日

デザイン

超便利でおしゃれなmacのカラーアプリ、Sip

目次

  1. はじめに
  2. Sipとは
  3. できること
  4. セットアップ / 使ってみた感想
  5. まとめ

はじめに

今日は色を集めて、管理して、共有できるmacのアプリSipをご紹介します!

色というとブラウザの拡張機能から色を集める方や、adobeのcolor CC (旧kuler)などのWebサービスから色を取ってくる方など様々ですが、今回はmac専用のアプリで色を集めることができ、管理もでき、且つ共有することもできるものをご紹介します!

Sipをオススメする理由

Sipですが、何よりもシンプルで多機能なのが良いんです
どこからでも色を取ってこれるのはもちろん、ワンクリックでその色のHEXコードをコピーできたりします!

さらに色の奥深いところまで追求したい方には、オリジナルのパレットを作る機能やパレットの中の色を編集する機能、また作ったパレットを共有する機能なども備わっています。

ライトユーザーにもシンプルな作りで色を取ってきたり、デザインに反映したり、コードに反映したりするときに便利なほか、色を独自でカスタマイズしたい!というこだわりのユーザーのニーズも応えてくれるmacアプリです!

Sipとは

Sipとはpinterestやairbnb, apple, disneyなども使っているカラーツールです。

すでに冒頭で少しどういうツールか説明しているので、詳細はこちらのビデオからご覧ください!

Sip公式サイトより

Sipの公式サイト
Sip for Mac

Sipのコミュニティ
Sip Community

Sipのツイッター
@sip_app

できること

Sipでできることは大きく、9つあります。

  • Palettes
  • Multiple Colors
  • Color Dock
  • Snapshots
  • Custom Formats
  • Shortcuts
  • Editor
  • Touchbar
  • Sip Sync

それぞれ簡単に説明を交えながらご紹介します。

Palettes (パレット)

Sipのパレットでは、色を作ったり、管理したり、共有することができます。

メニューウィンドウからパレットを管理することができます。

また、メールでパレットを共有したり、いくつかのコードフォーマットでエクスポートすることもできます。


Sip公式サイトより

Multiple Colors (複数の色)

複数の色を選択するのもシンプルにできています。

を押しながら選択していくと、現在選択されているパレットに選択した複数の色が保存されて行きます。
を押しながら選択していくと、新しいパレットに選択した複数の色が保存されて行きます。


Sip公式サイトより

Color Dock (カラードック)

Sipでは、カラードックというものがあり、このドックに様々なパレットや色が保存されます。
違うタブやファイルを開かなくても良いので、作業しながらカラーを抽出したり、カラーを当て込んだりすることができます。


Sip公式サイトより

スクリーン上のお好きな端に取り付けることができます。
Sketchやテキストエディタなどお好きなソフトに色の情報を簡単に送る事ができます。

Snapshots (スナップショット)

カラーパレットを変更した後に、また元のカラーパレットに戻したくなったけど前の色がわからなくなった、という事はありませんか?

Sipでは、スナップショットという機能があり、定期的にパレットのデータを保存してくれています。
パレットのバージョン管理のようなものです。


Sip公式サイトより

どれくらいの頻度でスナップショットをとって欲しいのかを指定したり、ワンクリックでそのスナップショットに戻ったりする事ができます。

Custom Formats (カスタムフォーマット)

Sipでは様々なカラーフォーマットに対応しています。
また、カラーフォーマットを自分でカスタマイズしたり、新しく0から自分で作る機能まで備わっています。


Sip公式サイトより

スタンダードなカラーフォーマットを基盤として、独自のカラーフォーマットを作り出すことができます。

また、フォーマット名、クリップボードフォーマット、メニューフォーマットなど独自に設定可能ですし、そのフォーマットを共有することもできます。

Shortcuts (ショートカット)

キーを押しながらSip内のカラーを選択すると、Sketch, Illustrator, Photoshopなどのデザインツールに色を追加してくれます。また、Xcode, sublime text などの開発ツールにもHEXコードなどで色を追加する事ができます。


Sip公式サイトより

塗りとしても、ボーダーとしてもショートカット次第で色を入れる事ができます。

他のソフトからSipへもショートカットで色を送る事ができます。

Sketch, Photoshop, Illustrator, Xcode, Sublimeなど様々なソフトで使用する事ができます。

Editor (エディタ)

パレット内の色をエディタを使って変更する事ができます。

他にも、色に名前をつけたり、既存のパレットや色から新しいパレットや色を作ったりできます。


Sip公式サイトより

カラーバリューや彩度、明るさ、透明度などでも色を作っていく事ができます

Touchbar (タッチバー)

Macにタッチバーが付いている方はタッチバーから色を選択する事ができます。


Sip公式サイトより

Sip Sync (同期)

SipにはiPhoneのアプリもあり、iPhoneで色などを保存した場合もMacに同期され、保存されます。


Sip公式サイトより

現在は、iOSの開発は進められていないようなのでご注意ください。

セットアップ / 使った感想

アプリ自体は、USD9.99で有料です。(買い切り)
14日間のお試し期間があるので、とりあえず試してみたい方はそちらを使うと良いでしょう。

1. 公式サイトからダウンロードする

Sip 公式サイトの「Try it for free」ボタン、もしくは「Buy now」からアプリをダウンロードし、中身を解凍します。

開くと、こんな感じでカラードックがすでに出ています!

これはテンションが上がりますね!

一通りセットアップを終えるとあとは自由に使えます!

カラーピッカー

早速自分のパレットを作ってみます。

メニューバーのアイコンをクリックするとカラーツールが立ち上がり、色が選択できるようになります!

ブラウザ上でも、ツール上でもスラスラと色がとってこれるのが便利です!!

また、コピーしたあとは「ピッ」という音がなるので、選択できた事もわかりやすいです(特に複数選択時)

適当に複数選択して作りましたが、良いです!

カラーピッカー

メニューからパレットを切り替えたり、新しいパレットを作って見ます。

少しメニューのアイコンが小さいので、パレットのメニューを開こうとしているのに、カラーツールが立ち上がってしまうことなどもありましたが、インターフェース自体はシンプルでわかりやすいです!

色を変更する

パレット内の色を変更してみます!

beforeが下、afterが上に出てくるので、違いがわかりやすいです!

色のシャドウやハイライトを作るのに、今まで感覚でやっていた!みたいな方はこういう機能があると便利だな〜と思いました。

色をsublime textなどにコピー

色を + クリックでテキストエディタにコピーして見ます。

爽快!

カラードックからそのまま色を持ってこれるのは爽快です!

まとめ

以上、色を集めて、管理して、共有できるmacのアプリSipをご紹介しました!

有料のツールではありますが、カラードックなどはとてもおすすめです!
sublime textにそのままHEXキーが出てくるのは便利だな〜と思いましたし、ショートカットも豊富です!
ぜひ一度試してみてください。

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP