Adobe Colorリリース記念。デザインをする時の色選びに役立ちそうなツール

最近めっきりデザインをする機会が減ってきていますが、サイトのメンテナンスなどのちょっとした作業をする時やデザイン依頼をする時など「色」の指定をしなければならない機会はチョイチョイあります。

だいぶ前ですが「色選び」は、センスなのか、誰でもできるのかという議論がありましたが…
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ
Adobe kulerを使った誰にでもできそうなWeb配色

今日は、僕が利用している&ちょっと導入してみたいツールをご紹介します。

Chroma

これは、以前ブログでも紹介したかもしれませんが、名前が似ててややこしいですが、Chromeのプラグインです。

Chroma

サイトの修正作業などでコーディングしながら色を作りたい時にとても重宝しています。
基本色のカラーコードを入力して、HSBベースのスライダーで調整でき、特に色調の違いで色のパターンを作ってくれる横軸はかなり便利です。こういった色味はなかなかデザインツールだけでは作成できません。

使いたい色をクリックするとHEXでコピーされるので、そのままエディタにコピペできるという手軽さもいいです。
個人的には「#」はいらないですけど…
chroma

Adobe Color

Adobe Color

先日リリースされたアプリです。正確には、Kulerがバージョンアップしたんですが。
このバージョンアップで、iOSアプリがリリースされました。
iOSで撮影した写真から色を抽出して、カラーセット(テーマ)を作成し、共有できます。
PhotoshopCCであれば、Adobeクラウド経由で共有できますし、それ以外でもメールやSNSからも可能です。

写真 2014-10-07 2 31 39
こんな感じで、写真から色を抽出してくれます。

撮影した際に、自動でカラーセットが生成されますが、気に入らない色があれば、修正も可能です。
デザインをする際に、メインとなるイメージがある場合など、全体の色みを合わせたい場合に便利かと思います。
また、普段からよさ気な色使いをしているものを撮影して、テーマをストックしておけば、デザインをする時の色選びがスムーズになるかもしれません。

Kulerはあまり使っていませんでしたが、今回のアップデートでテーマ作成という行為が実生活に落とし込まれた感があります。
普段から意識して「色」という視点で周りをみるようになれば、デザインのセンス向上にもつながるかもしれませんね。

以上、彩りあふれる秋にちなんで「色」にまつわるお話でした。

【改訂版】アクセス順位を調べるのによさ気なアプリーRankGuru SEOのご紹介

先日、「ペンギンアップデート3.0の影響は?そんな時にすぐに答えられる、アクセス順位を調べるのによさ気なアプリ」というタイトルで、検索順位を測定してくれる、iPhoneアプリをご紹介しましたが、もっと良さげなアプリを見つけたので、改訂版として、再投稿します。

RankGuru SEO – Sandra Paoloni

これは、Macのアプリです。有料(500円)ですが、かなりいい感じです。
基本的な用途は先日ご紹介したRanking SEOと同じで、サイト毎のキーワードに対する検索順位を表示してくれます。

便利・・・というか当たり前の事ですが、デスクトップアプリですので、操作性は高いです。わざわざ、プラグインを買わなくても、簡単にキーワードの登録もできます!
タスクバーに常駐して、決められた時間毎に検索結果を集計してくれます。

seo

また、CSVで吐き出すことも可能です。

グラフィカルな表示はできませんが、そもそも検索順位が分かれば済む話なので、まったく問題ありません。

Google以外にもYahoo!やBingなども集計可能です。

この手のデスクトップアプリって、Windowsですと割と高額だったりするイメージですが、この値段でこれだけの機能が揃っていれば、まったく文句はありません。

まさに神アプリです。これでサイトの定点観測がすごく楽になりました。

寒い冬はこたつでjavascriptを始めよう。iphoneで気軽に体験できるプログラミング学習

app01

ついに雪降りましたね。寒いです。我が家は諸事情によりこたつは出していませんが、こたつたまりませんよね。
こたつでうたた寝する幸福感とその後から襲ってくる罪悪感。最高です。

そんなこたつで罪悪感を感じる事なく、プログラミングの勉強ができるツールがリリースされたのでご紹介します。
codecademyというプログラミング学習サイトがあるのですが、その iphoneアプリです。

HOUR OF CODE APP

codecademyはご存知の方も多いかと思いますが、PCのブラウザ上で問題に答えながらプログラミングの勉強ができるサービスです。ステップバイステップで勉強が進められるので学習の導入用としてとてもいいサービスです。
そのiphoneアプリなのですが、データ型、変数、条件分岐など基礎的な部分を簡単な問題に答えながら進められます。

英語なんですが、それほど難しいくないと思います。
入力も、ほぼ選択式になっているので、簡単です。(でたらめに選んでも答えがあってしまいますが…)

あまり詳しい説明がでないので、ちょっとあれなんですが。
ゲーム感覚で、気軽にjavascriptのさわりを学べるので面白いと思います。

ゲーム感覚でHTMLやCSS、JavaScriptが学べる「Dash」を試してみた

昨日あたりから、テック系のブログなどで話題になっているオンラインでWeb制作に必要な技術が学べるアプリ「Dash」を試してみましたので、そのレビューをば。

この手のアプリは割と好物で、見つけたら片っ端から試しては、途中でやめて(忘れて)…を繰り返しています。
このDashはどうでしょうかって、それは、僕の根気しだいですね。

さて、Dashですが、少し試してみましたが、けっこう面白いです。
プロジェクト毎にスライドを見ながら課題をクリアしていくと、プレビュー画面でサイトができあがってきます。
Dash

当然、スライドは英語ですが、短いセンテンスで書かれているので、割と理解できました。
たぶん、ある程度HTMLの知識がある人だったら、問題ない程度の英語レベルでしょうし、HTMLが分からなくても中学校程度の英語力でも十分理解できると思います。

クリアしていくと、習得した「スキル」がもらえるようになっています。まさにゲーミフィケーションですね。
さわりしかやっていませんが、進めていくと、モバイルとか、html5とか今風のコーディングスキルが学べるので、おもしろそうです。
ブラウザ上ですべて完結しているのもいいですね。モバイルとかでも使えるのかな?

ちょうど、最近社内に新しいスタッフが入ったので、社内研修として使ってもいいかもしれないなんて思っています。
Facebookなどへの共有機能もありますので、グループで始めれば、挫折しないで最後まで学べるかも。

個人的にも最近しっかり勉強ができていないので、英語の勉強がてら、試してみようか。

ってか、placeholderって知らなかったし。

Dash

twitterがリリースした「vine」という動画共有アプリが面白い件

ちょっとタイミングを外してしまったのですが、twitterがリリースした「vine」という動画共有アプリが面白かったのでご紹介します。

動画アプリというか、ストップモーションアプリと言った方が正確かもしれません。
アプリを起動して、写真の部分をタップするとその時間だけ写真を記録してくれます。
それを何度か繰り返していくと動画が完成するという仕組みです。

できた動画はtwitterやFacebookで共有する事ができたり、vine自体も動画共有SNSになっていますので、面白い動画をシェアしたり、フォローしたりもできます。

実際に作ってみたのがこれ。
iphoneを固定して少し真面目にストップモーション的に作ってみました。

※vine自体には動画の埋め込みコードがなかったのでyoutubeにアップしてあります。

動画の出来は別として、動画を作る行為がとても面白いです。
ピタゴラスイッチの「こんなことできません」みたいですね。

twitterといえば、先日大規模なハッキングの被害にあったようですね。
残念ながら僕のアカウントにもパスワードを変更しろというメールが届いていましたorz