JIS(日本工業規格)で定められている色名について

こんにちは。
急に暖かくなりましたね。
衣替えで洋服の整理・補正・洗濯・収納・入れ替えなどの作業をすることがとても好きなのですが、今年は思い切って断捨離をしてみようかなと考え中です♪

さて、前回「慣用色名」について少しまとめましたが、続きを書く前に「色名」の表示方法について簡単にまとめてみます。

JISの基本色名

JIS(日本工業規格)で定められている基本色名。
有彩色(赤・青・黄・緑などの色味のある色)10種類、無彩色(色味を感じない彩度がない色)3種類。

有彩色の基本色名(10種類)

◆赤

 

◆黄赤

 

◆黄

 

◆黄緑

 

◆緑

 

◆青緑

 

◆青

 

◆青紫

 

◆紫

 

◆赤紫

 

無彩色の基本色名(3種類)

◆白

 

◆黒

 

◆灰色

 

JISの系統色名

系統色名は、基本色名に明度や彩度、色相に関する装飾語をつけて色表示したものです。様々な色の違いを表示することができます。
例)「こい(明度・彩度に関する装飾語)」「赤みの(色相に関する装飾語)」+「赤(基本色名)」

JISの慣用色名

親しみやすく、イメージしやすい色名「固有色名」の中でも、比較的よく知られている色名。
JISの慣用色名は現在「269色」(和色名:147色、外来色名:122色)制定されています。
「系統色名」は無機質な表現で、雰囲気やイメージが伝わりにくいことがあります。慣用色名の方は、色名からイメージが伝わりやすくなっています。
例)「つよい緑(系統色名)」→「エメラルドグリーン(慣用色名)」、「暗い黄赤」→「煉瓦色」など

慣用色名の一覧をつくってみた①

こんにちは。

ぬこ飼いデザイナー佐竹です。
新学期もスタートして、毎日お弁当をせっせと作っているのですが、マンネリ化してきたので新しい簡単レシピを探しています♪

さて、今回からしばらく「慣用色名(かんようしきめい)」についてまとめていきたいと思います。
色のイメージ(RGB値)は大まかなイメージなので参考までにご覧ください。
個人的には芥子色は良い色だな~としみじみ眺めてしまいます。
少しマニアックですが、色名を知るのも面白いですね!!

◆朱色 しゅいろ

 

硫化水鉄を原料とする鉱物顔料「銀朱」の色。現在の印鑑の朱肉の色。

◆バーミリオン

 

東洋と同様に西洋でも古くから硫化水銀の朱の原鉱と知られていた。人造朱は9世紀頃のアラビア錬金術師の発見といわれる。

◆珊瑚色 さんごいろ

 

さまざまな珊瑚色の中で西洋でも東洋でも装飾などで珍重されたのがピンク系。

◆茜色 あかねいろ

 

日本最古の植物染料の一つで、温帯アジア原生のアカネの根を原料とする濃い赤。

◆ワインレッド

 

赤ワインのような色を表す英語の色名。

◆紅梅色 こうばいいろ

 

紅梅の花のような色で平安時代、冬~春にかけての色として愛好された。

◆サーモンピンク

 

18世紀にできた英色名で「鮭の切り身」の色。

◆芥子色 からしいろ

 

カラシナの種子を粉にして練った練り芥子の色。英語では「マスタード」や「マスタードイエロー」と呼ぶ。

◆桜色 さくらいろ

 

山桜の花のような色で「紅染め」のなかで最も淡い色調。平安時代最も愛好された色名。

◆ボルドー

 

フランスの「ボルドー産赤ワイン」の英語の呼び方。19世紀には国際的に通用する色名に。

◆煉瓦色 れんがいろ

 

代表的な色は赤煉瓦の色で英語のブリックレッドにあたる。

◆ピーチ

 

16世紀の終わり頃から用いられた色名で英語の「ピーチ」、仏語の「ペルシャ」はどちらも「桃の果実の色」

Photoshopで共通パーツをリンク配置する方法

こんにちは。
すっかり暖かくなりましたね。
ぬこ飼いデザイナー佐竹です。

今日は、Photoshopでパーツごとにファイルを分けて、リンク配置する方法をご紹介します。(ccからの新機能です!)
Fireworksで言うところの「ページ」機能のようなもので、全ページ共通項目を別の1つのファイルで管理してリンク出来る便利な機能です。

それでは、早速操作方法です。

リンク配置用のファイルを作成

デザインカンプのヘッダー部分をグループ化して、「header」などの任意の名前を付けます。
そのグループレイヤーを選択して、右クリック→「グループを複製」でドキュメントの「新規」を選択します。
作成した新しいファイルに「header.psd」などの任意の名前を付けて保存します。

リンクを配置

挿入したいファイルのメニューから「ファイル」→「リンクを配置」を選択

×マークがついた部分がheaderです。

リンクされたスマートオブジェクトとして配置されました。

リンク先データに自動で反映

リンク元のデータを変更すると、リンク先データに自動で反映されます。
タイトル文字の色を茶色に変更したところ、リンク配置先も茶色に代わりました。


↓ ↓

空白のレイヤーをサクッと削除する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
花粉シーズンも折り返しですね。
毎年この時期、子供と某マラソン大会のファンラン(1Km)に参加して、マスクをして走り、窒息寸前になってヒイヒイでゴールするのですが、今年は花粉がすごいので、マラソンはさすがに諦めました~。

さて、今日はPhotoshopの地味な機能を2つほどご紹介します。
一通りデザインカンプが整ってきて、レイヤーを整理しようと思ったときにバババッと使える便利な機能です。

Photoshopで空白のレイヤーを削除する方法

「ファイル」メニューの「スクリプト」→「すべての空白レイヤーを削除」

Photoshopでレイヤーの位置だけを固定する方法

レイヤーパネルの「ロックボタン」左側の十字のボタンをクリックします。
位置だけ固定した状態でマスクや効果をつけることができ、とても便利です。

いかがだったでしょうか。
空白のレイヤーは、私のように性格上気になって気になってしょうがないという方がいるのでは?と思います。
一発削除できたらスッキリしますよね!
レイヤーのロックは、動かさずにオブジェクトを編集出来て、かなり使える機能だと思います。
さっそく次の制作から使っていきたいと思っています。
これからもこのような便利機能をちょこちょことご紹介させていただきます♪

「トーンカーブ」で特定の個所のみの色調補正

こんにちは。
ぬこ飼いデザイナーの佐竹です。

娘がTVの影響で「カカリチョウ」を覚えました。
「シャチョウ」なら会社にいるよ。お母さんは「ヒラ」だよ。
と教えたらたいそう喜んでいましたよ。
しばらく会社ごっこが続きそうな予感です・・・

さて、今日は「トーンカーブ」の新機能(cs6以降)について簡単にご紹介します。

「トーンカーブ」機能は、ざっくり言うと線を上にカーブさせると画像が明るくなって、下にカーブさせると暗くなく機能です。
「明るさ・コントラスト」などの補正よりも自由度が高いです。
ざっくりすぎてすみませんっ!

今回は、特定の個所のみの色調補正をする方法です。
今までは特定の個所を補正するにはマスクする必要があったのですが、簡単に出来るようになりましたよ~!
それでは、操作方法です。

(1)「トーンカーブ」を選択

「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を選択します。
「属性」パネルに「トーンカーブ」が表示されます。

(2)ターゲット調整ツールを選択

「トーンカーブ」パネルの左上の「ターゲット調整ツール」をクリックしてオンにします。

(3)明るくしたいポイントを選択

今回はイチゴの断面だけを少し明るくします。
断面の一番明るい箇所を「ターゲット調整ツール」でポイントします。
続けて断面の一番暗い箇所をポイントします。
「トーンカーブ」パネルのポイント2点の間(四角く囲った部分)が明るくしたい色の範囲になります。

(4)ググっとカーブを調整

ポイント①~②の間の個所をマウスで選択して、「エイッ」と上に持ち上げます。

これで断面部分が明るくなりました。

いかがだったでしょうか?少しおいしそうになりましたでしょうか(^^)
ちょっと変化が分かりにくかったかもしれませんが・・・
いろいろ試しながらリアルタイムで確認ができますので、エイエイッと試してみてください!

焦点領域選択でサクッと選択範囲

こんにちは。
ぬこ飼いデザイナーの佐竹です。
今年は花粉が多いですね~。
思い切ってゴーグルを買おうかと思い詰める今日この頃です。
その前に耳鼻科へ行こうよって話ですが・・・

さて、今日はPhotoshopCCの新機能を一つご紹介します。

画像の中で、ピントの合った部分だけ素早く選択する方法です。

従来のやり方では「自動選択ツール」で範囲選択していましたが、「焦点領域」という機能を使うと時間短縮が出来、後から細かく修正することも可能ですよ~。
それでは、操作方法です。

(1)「選択範囲」メニューから「焦点領域」を選択

「焦点範囲」で数値を変更しながら焦点範囲を調整する。
大まかな選択が出来たところで「OK」をクリック。

(2)選択範囲の調整

「選択範囲」メニューから「選択範囲を保存」を選択。
アルファチャンネルに保存されます。
「チャンネル」パネルから保存したアルファチャンネルを選択し、範囲を微調整します。
微調整ができたら、「チャンネルを選択範囲として読み込む」をクリックして選択範囲を追加保存します。

「レイヤー」パネルに戻ってマスクを追加したり、色調補正をします。

いかがだったでしょうか。
焦点の合っている部分があって、そこだけを色調補正・抜き出し等したい場合にとても便利ですね!

Googleアナリティクスのコンバージョン設定方法

こんにちは。まだまだ寒い日が続いていますね。ぬこ飼いデザイナーの佐竹です。

Googleアナリティクスには、お問い合わせや資料請求など、「サイトの目標」に対して、データを取得する「コンバージョン設定」という便利な機能があります。
平たく言うと、〇〇のページを閲覧したら(ページに到達したら)1カウント~として到達数、到達率を取得できる仕組みです。

Googleアナリティクスで設定可能なコンバージョンは、4タイプあります。

1、目標URL
2、訪問の滞在時間
3、ページ/スクリーンビュー数
4、イベント(サイト内での行動)

今回はこのうちの「目標URL」設定についてご紹介します。
設定の前に、お問い合わせ完了ページ(フォーム送信後に表示されるページ)を作成しておいてくださいね。このページのURLが「目標URL」になります。

1、Googleアナリティクスの「すべてのウェブサイトのデータ」メニューから【管理】を選択

2、アナリティクス設定の「目標」を選択

3、【+新しい目標】ボタンをクリック

4、【目標設定】で「テンプレート」ーお問い合わせを選択


※「テンプレート」を選択すると、標準的なビジネス目標を参考にできるため、具体的なコンバージョンを設定するのに便利です。

5、【目標の説明】で「目標の名前(リストに表示される名前)」「タイプ(到達ページ)」を設定

6、【目標の詳細】で[到達ページ]のURLを設定

7、[目標到達プロセス]を設定する

※必須ではありませんが、「完了までのステップ」として入力画面のURLを入力しておくと、離脱率も計測できます。

※Googleアナリティクスの「リアルタイム」-コンバージョンで、正しく設定されているか確認することが可能です。

Photoshopのスマートオブジェクトを使おう①

こんにちは。

昨日子供の作った紙でできたタンバリンを思いっきり踏んでしまい、どうごまかそうか悩み中の、ぬこ飼いデザイナー佐竹です。

今日はPhotoshopユーザーにはすでに常識になりつつある「スマートオブジェクト」について簡単にご紹介します。

取り込んだデータを、「やっぱりちょっと大きくしよう」と思うことってありますよね。

そのデータを、すでにいい感じに加工した後だった場合、また元画像を取り込んで処理しようと思いつつ、遠い目になる…Photoshopユーザーあるあるだったと思います。

既に配置済みの画像を大きくできないのはなぜか?と言いますと、取り込んだ画像が「ラスター形式」画像なのが理由になります。

デジカメで撮影した画像なども「ラスター形式」になります。
四角いドット(ピクセル)で作られたファイル形式なので、画像を縮小したときにドット数が減って、拡大しても元のドット数を再現できないのが原因なのです。

CS3からは、「スマートオブジェクト」登場によりそんなあるあるも過去のものとなりました。

スマートオブジェクトとは

スマートオブジェクトは、配置またはペーストされた画像を、元の画質を保持したまま編集や拡大・縮小、回転、ワープが可能な機能です。
ccの最新機能も含めて、このスマートオブジェクトについてあれこれ、ご紹介していきます。

—————

それでは、まず配置したい画像を
(1)、はじめからスマートオブジェクトとして配置
(2)、配置後にスマートオブジェクト化したいとき

この二通りの操作をご説明します。

(1)はじめからスマートオブジェクトとして配置

1、「ファイル」メニューから「埋め込みを配置」を選択
図のようにレイヤーにアイコンが表示されればOK。

(2)配置後にレイヤーをスマートオブジェクト化したいとき

1、「レイヤー」パネルを開きます
2、スマートオブジェクト化したいレイヤーを右クリックして「スマートオブジェクトに変換」を選択(図参照)

※元データの容量が非常に大きい場合は、「これ以上大きくすることはない」というサイズまで縮小した時点でスマートオブジェクト化することでデータ容量をコンパクトにすることが出来、おすすめです。

Fireworksのデータをレイヤーを保持したままPhotoshopに引き継ぐ方法

弊社デザイナーの多くはFireworksで長年デザインカンプを作成していましたので、サイトのリニューアル等で図やテキストを引き続き使用したい案件も多いです。

Fireworksでデザインされたサイトのリニューアルは、Fireworksでやればいいかな、と思っていましたが、Photoshop cc の便利さに気付いてからは出来ればデータも引き継いでPhotoshopで作業したい!と思うのであります。

そういうわけで、以下、手順です。
※Fireworks CS6の機能です。

(1)Fireworksで引き継ぎたいファイルを開く

(2)「別名で保存」を選択

(3)「保存」ダイアログでファイル名を指定。ファイル形式は「PhotoshopPSD(*.psd)」を選び「オプション」ボタンをクリック。

(4)図のように設定し、OK→保存ダイアログでも「OK」

これで、Photoshop用データに変換されました。
ちなみにページ機能を使っていた場合は、各ページごとに別名保存します。

FireworksからPhotoshopへ


もう何年も前になりますが、Fireworksの開発終了が発表されました。
webデザインカンプ作成の作業効率がとても良く、長年Fireworksを愛用してきた身としては少なからずショックを受けました。

元々PhotoshopユーザーでしたがFireworksを使うようになってからは、ほとんどPhotoshopは使う必要がありませんでした。
しかし、Photoshop ccを使用してwebデザインカンプを作成するようになりしばらく経ちましたが、webに特化した機能を色々調べてみると、「もうFireworks要らない」というレベルで圧倒的に使いやすく進化していたのです。

Photoshop ccは、スライスも必要ないのです。なんということでしょう。
しばらく使っていない間に、地味に着々と進化を遂げていたようです。

こんな素敵すぎるPhotoshopの便利機能を次回から少しずつご紹介してきます。

UDフォント

漢字・ひらがな・カタカナを組み合わせる日本語は他に類を見ない複雑な言葉で、日本語フォントも様々な書体が販売されています。

日本語フォントをデザイナー目線で大まかに分類すると、二種類に分類できます。

1、読みやすいフォント(可読性)。
2、見やすいフォント(視認性)。

何が違うのかな?と思いますよね。
1は、長文を読んでいて疲れないような「文字を読ませる」時用の文字。
2は、看板やページタイトル・見出し用、パッと目につきやすい印象に残る文字。

という考え方になります。
2の「見やすくわかりやすいフォント」の、今とても人気がある文字を簡単にご紹介します。

***

UDフォントとは?
UD(ユニバーサル・デザイン)のコンセプトに基づいたフォントのことをUDフォントと言います。モリサワUD書体やイワタUDフォントなどが有名です。

特徴を挙げると…
  ・高齢者や障害のある方にも見やすい
  ・読み間違いしにくい、小さくしても潰れにくい
  ・シンプルで美しい


フトコロを広く、シンプルに。アキを確保して潰れを少なく。(下)

などです。
単純に、きれいな文字であるという点でも人気がありますが、個々の文字がしっかり検証されているという安心感がありますよね。
ただ、視認性(見やすさ)と可読性(読みやすさ)を両方満たすのは難しことなのだそうです。
そのため、UDフォントは「視認性」の方を重視して作られているそうです。
実際に使われているのは、例えば公共交通機関・商業施設のガイド表示や、商品のパッケージなどで使用されているそうです。

そんなにきれいな見やすい文字なら、自社のwebサイトにUDフォントを使いたい、と思われる方もいらっしゃると思いますが、ブラウザで表示できるフォントについては、語りつくせぬ複雑なお話があれやこれやありますので、次の機会に書かせて頂こうと思います。

グリッドデザイン

グリッドデザインとは、平たく言うと「グリッド」(格子)を使って「画面を縦横に分割し、要素や余白を配置するデザイン」です。

グリッドに沿って配置された画像や文字は、色々なパターンで配置されていたとしても規則性を持っている為、統一感があり、読みやすくなります。
印刷にはグリッドは反映されませんので、ぱっと見ではラインに沿って文字や画像が配置されていることは分かりませんが、構成に明確な「理由」を持つことになるのです。

明確な「理由」を持つことで、デザイナーは迷わず効率的に作業を進めることができます。
ボリュームのある印刷物など、複数人数で制作している場合にも、統一感が保たれて作業もしやすくなります。

WEBのデザインはもちろん、構築にも「グリッドカラムレイアウト」という手法があります。
今やweb業界の常識となった「レスポンシブサイト」作りを効率化させることができる優れものです。
cssという言語で記述して、画面の幅によって柔軟にレイアウトを変えていくことができます。

良い事尽くめのグリッドデザイン・グリッドレイアウトですが、当然のことですがデザイナーが適切な配置をすることや、見る人の視線の運びを計算することなど、しっかり考えなければならない部分もあります。何も知らないで、見た人に「なんか落ち着くレイアウトだな~」と感じてもらえることが最終的な目標なのです。

黄金比

「ものの形、デザインはセンスとか感覚によって生み出されるもの…」
一般的によく言われる言葉です。
しかし、デザインを勉強すると、「基礎知識をベースに、ある一定のルールやセオリーを活用して作り出すべきもの」などと言われることが多々あります。

私自身も「法則」「セオリー」のような言葉は大好きです。例えば「シンメトリー」なんて言葉は大好物です。
今回は、そのなかでも代表的な「法則」である【黄金比】を少しだけご紹介します。

***

「1:1.618」という近似値で表される自然界の中から発見された数学的法則です。「自然界」というのは…例えば、ひまわりの種・松ぼっくりのかさ・オウム貝、さらには台風、DNAなどの螺旋形などに見られるそうです。

「数学的」と言われた時点で読み飛ばしたくなりますが、つまりは「なんかすごく美しいらしい比率」です。古代から使われ、ダ・ヴィンチの「モナ・リザ」などの絵画の構図や、ピラミッドや凱旋門など多くの歴史的建造物に使われたとも言われています。

現代では、Twitter・アップル・ペプシなどのロゴデザインに使われているらしいです。
黄金比ちょっと長いな…と思った場合は「白銀比」というものもあります。コピー用紙のA4、B4などのサイズがこれに当たります。白銀比のそのほかの例としては「法隆寺」の構図と言われています。

「調和を生み出す比率」。何か神秘的でさえあります。
いつか…私自身もデザインに取り入れてみたいような気がします。
佐竹作のデザインで気になる構図があったら、ぜひ「もしや」と深読みしてみてください…。