Googleでは2014年から新しいUX体系として、デバイスの違いを乗り越えて操作性に統一感を持たせ使いやすさを向上させた「マテリアルデザイン」を提唱。声かけだけではなく統一サポートサイトとして「Material.io」を開設し、情報共有や普及に努めています。このサイト内に、アプリにどんなカラーパレットを用いればいいのかを助ける新たなカラーツールが登場しました。 Color Tool - Material Design https://material.io/color/ アクセスすると、最初は下の方がグレーアウトした状態。ページのどこかをクリックすると…… ツールを使えるようになります。左側にページレイアウト、右側に「マテリアルパレット」が置かれています。 ページレイアウトは文字中心のものや画像が中心になるものなど6種類が用意されていて、「＜」「＞」で切り替え可能。今回は5番のレイアウト

無料の写真素材を扱うストックフォトサービスの中には、個人利用だけでなく、商用利用が可能なものや、クレジット表記が不要で完全フリーに使える写真も多く存在します。さまざまなジャンルのストックフォトサービスがSocial Media Todayによってリストアップされており、写真家が撮影した「作品」と呼べるレベルの写真や、食べ物に特化した写真、ヴィンテージ写真、ファッションに関係するおしゃれな写真など、検索サービスによって扱う写真の特色がさまざまなので、見ているだけでも楽しめます。 28 Places to Download Free Images for Websites and Blogs | Social Media Today http://www.socialmediatoday.com/marketing/28-places-download-free-images-websites

PhotoshopやLightroomなどで画像を手軽に加工できるプラグインパッケージ「Complete Collection」はプロの写真編集にも使われるほど高いクオリティで人気でしたが、製造元のNik SoftwareがGoogleに買収されたことで「Google Nik Collection」としてリニューアルし499ドル(日本では6万3000円)で発売されました。その後、数回の価格改定が行われたNik Collectionがなんと無料化されています。 Google Nik Collection https://www.google.com/nikcollection/ さっそく「Nik Collection」をインストールしてみます。上記ページ右上にある「Download now」をクリック。 今回はWindows 7マシンにインストールするので、「Windows」をクリック。 イ

優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整するカーニングを行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer – Design School https://designschool.canva.com/blog/kerning/ 文字と文字の間隔は、単純に同じ距離であれば自然に見えるというわけではありません。以下の画像では左側の「Type」の文字間隔が全て等しく、右側は同じではないのですが、実際に人間の目で認識されると自然に見えるのは右側になります。これは、それぞれの文字によって持っている「空間」の大きさに

単語を入力するだけでイメージにぴったりな画像を提示してくれ好きなカラーを直感的に探し出してカラーパレットやカラーコードを表示してくれるネットサービスが「Colores」です。 Colores http://colores.manugarri.com/ これがColoresのトップページ。単語を入力するテキストボックスがあるだけという超シンプルなデザインです。 例えば「tree(木)」と入力するとこんな感じでカラーパレットやイメージ画像をずらりと表示してくれます。 単語にぴったりの画像と、その画像に使われている主な色がカラーコード付で表示されるので、イメージにあうカラーコードをすぐに調べられるというわけです。 また、イメージに合うカラーパレットは正方形や…… 長方形で表示されるので、これをクリックすると…… Dribbbleというデザイナーのコミュニティサービスにジャンプ。入力した単語にぴっ

色の組み合わせによって人を信頼させたり安心感を与えたりすることが可能ですが、複数の色を使う場合に統一感のある組み合わせを生み出すのはなかなか難しいもの。「Paletton」は簡単な操作で直感的に色の組み合わせることが可能で、実際にウェブサイトに採用したらどうなるのか？ということもサクッと確認でき、HTML・CSS・LESS・XML・TEXT・PNG・ACO・GPLなどさまざまな形式で出力することも可能という、かなり使えるサービスとなっています。 Paletton - The Color Scheme Designer http://www.paletton.com/ ページにはカラーホイールと、その隣に選んだ色の組み合わせが見られるパレットが表示されています。 ホイールの上にあるボタンからピックアップする色の数や組み合わせ方を選ぶことが可能。初期設定では1色だけをピックアップするようになっ