Illustratorを使ったWebデザインのテクニック

Webで利用する16進数のカラーコードの仕組みを知る

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Webの世界で利用する色の仕組みである16進数のカラーコード、すなわち「Hex値」について、ご説明をしていきます。
講師:
06:02

字幕

このレッスンでは Web の世界で利用する色の仕組みである 16 進数のカラーコード すなわち HEX 値について ご説明をしていきたいと思います 今まであなたがデザインの仕事で使ってきた カラーコードは CMYK もしくは RGB の どちらかでしたでしょうか? CMYK であれば シアン マゼンタ イエロー ブラックの 4 つの色の組み合わせで フルカラーを表現しますし RGB はレッド グリーン ブルーという 光の三原色を使って色を表します RGB はレッド グリーン ブルーという 光の三原色を使って色を表します Web の世界では RGB を使うのですけれども その RGB を HEX 値と呼ばれる 16 進数で表現することがあります その RGB を HEX 値と呼ばれる 16 進数で表現することがあります 今からその仕組みについてご説明しましょう HEX 値は 6 桁の数字でできていて 使われる数字は 0 から F までの 16 種類です つまり ここにある 6 桁の中には 0 1 2 3 4 5 6 7 8 9 A B C D E F のどれかが入ります この 0 から F までの文字は 色の量を表していまして 0 がいちばん色が少ない状態 F がいちばん色が 多い状態だと考えてください さて 6 桁の数字のうち いちばん左の 2 桁は レッドの色の量を表しています 真ん中の 2 桁はグリーンの色の量 右の 2 桁はブルーの色の量です そして この 2 桁が 00 だと その色が完全に無い状態 FF だと他の色が混ざっていない 純粋な色の状態 MAX になっている状態だと 考えてください そして 1 から E まで 0 と F のちょうど間の 中間の文字が入っている場合は その色がどのくらいの量入っているかの 段階を表していると思ってください では今画面に黒い正方形が 表示されていますけれども この黒を表す HEX 値は 000000 です レッドが全く含まれていない グリーンも全く含まれていない ブルーも全く含まれていないという状態が 黒です 逆に白を表現したい場合は この数値を FFFFFF にします レッド グリーン ブルーの色が 全て MAX に 含まれている状態が 白になるというのは RGB の考え方と同じです では次にカラーピッカーを開いて もう少し HEX 値の仕組みについて 見ていきたいと思います ちょっとした Tips ですけれども ツールバーの下にある「塗りと線」のアイコンは キーボードの「D」を押すと いつでもデフォルトの状態に戻ります ここで「塗り」をダブルクリックして カラーピッカーを開いてください カラーピッカーの真ん中の一番下の所 この部分に 「#」が付いた 入力欄があります ここが HEX 値を入力する部分です まず試してみたいのは 純粋な赤を指定するということです 先ほどご説明した 知識を使ってやってみますと いちばん左の 2 桁がレッドを表している FF という文字が─ 色が MAX に入っている状態を 表しているということでした 色が MAX に入っている状態を 表しているということでした ということで今入っている文字を全部消して 最初に FF と入力をします これでレッドが MAX の状態─ フルで含まれている状態になります グリーンとブルーの色は必要ないので 00 00 と入力をします 全部で FF0000 となりました ここで Tab キーを押すと カラーフィールドの中で 純粋な赤の部分に移動します これで純粋な赤の指定方法が分かりました では同じ考え方で 今度は 00 赤は含まれていない FF グリーンが MAX で含まれていて ブルーは 00 無い状態 これを指定して Tab キーを押すと 今度は純粋なグリーンに移動します ブルーも同じです 0000FF Tab キー これで純粋なブルーに移動します この調子で全ての色の HEX 値を 暗記しなければならないかというと そういうわけではありません HEX 値で表現される色の組み合わせは 計算すると 16 の 6 乗 16 を 6 回かけるということですね そうすると 何と 1670 万色以上になってしまいます これを暗記するのは絶対に無理なので Illusreator に HEX 値の割り出しを お任せしたいと思います 左側のカラーフィールドから 自分が使いたい色をクリックすると Illustrator が自動でこの入力欄に HEX 値を表示してくれます この数値をコピペして CSS などに貼り付ければ そのまま色指定として 利用することができます 以上 このレッスンでは Web の世界で利用する 16 進数のカラーコード HEX 値についてお話をしてきました この色の指定方法はすぐにでも 試していただけることと思います

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。