スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2016年9月22日

デザインに活かせる「色」の影響力

本文に出てくる9つの色に区切られたマスに、それぞれの色から連想されるもののイラストが描いてある。

色は、私たちが思っている以上に人の心や体の働きに影響を与えています。

あの人はなぜいつもあの色の服を着ているのか?
このお店のロゴにはなぜこの色が使われているのか?

「色」の持つ意味を知ることで、
デザインにおいて適切な色を選ぶことだけでなく、
人の心理やデザインの意図を知ることもできます。

色は、以下の4つの面から人に影響を与えています。

1.心理的影響
暗記力、回想力、認識力などの人間の能力を増す。
また、色にによって理解・学習能力を高めたり誘導ができる。

2.生理的影響
神経に影響を与えることで、血圧の上昇や降下を促す。

3.感情的影響
気分が明るくなったり、安心を感じたり、気分の変化が生じる。

4.文化的影響
文化は、人に基本的な価値観や感覚を与える。
文化によって色が人に与える印象も異なる。

今回は、9つの色が人間に与える影響をご紹介します。
では、それぞれの色の持つ意味と働きを見ていきましょう。

 

赤色の影響力

強いエネルギーをもたらす色

赤色は「活力・情熱・興奮」といった強いエネルギーをイメージする色で、
積極的なリーダータイプの人に好まれる色です。
また、やる気になっている時・元気がほしい時・自信を取り戻したい時・
自分をアピールしたい時など、エネルギーが満ち溢れているか補給したい時に
赤が好きになる人が多いです。

一方で、赤には「怒り・攻撃的・警戒心」といったネガティブなイメージもあります。
怒りや攻撃性も強いエネルギーのひとつ。
活力や情熱と同じ強いエネルギーが、ネガティブな表れ方をしたものです。

自己主張の激しい、目立つ色

赤はとても自己主張が激しく、小さくても目立つ色です。
そのため、信号機やパトランプ、消火器など、危険を表すサインとして利用されています。

赤は、血や肉・熟した果実の色であり、遠い昔から「生命に直結する」色でした。
そのため人は本能的に赤に反応するようなったと考えられます。
また、食欲や性欲といった動物的な生命力を高める色でもあります。

あたたかさを感じる色

赤は暖色の代表的な色で、あたたかみを感じる色です。
赤に囲まれた部屋では体感温度が2~3℃上がるという実験結果も報告されています。
これは交感神経が刺激され、脈拍と体温が上がり血流がよくなるためと考えられています。

寒気を感じる時や慢性的な冷え性対策に赤の効果を取り入れましょう。
冷えやすいお腹や足先には、赤の下着と靴下がおすすめです。

橙(オレンジ)色の影響力

陽気であたたかい、人間関係を促す色

橙(オレンジ)は赤と黄色が混ざった色で、
太陽や炎のような陽気であたたかい高揚感を表す色です。

橙が好きな人は、陽気で人付き合いがよく社交的で楽天的なタイプが多いです。
さびしがり屋やお人好しが多いのも特徴です。

楽しい雰囲気を作り、食欲を促す

橙色には消化、新陳代謝をよくする作用があり、食欲を促す効果があるので、
食欲がない日が続くなら食卓に橙を取り入れるといいでしょう。
キッチンや食卓に橙の色があると、料理も食事も楽しくなります。

カジュアルで親しみやすいイメージから、
飲食店のインテリアやWebデザインに使われることも多い色です。

不安や抑圧から解放する

橙のやさしくてあたたかい光は、血管や自律神経を刺激し身体を活動的にし、
恐怖やプレッシャーによる心の不安や抑圧を取り除く効果があります。

心が乱れている時や不安で押しつぶされそうな時は、橙の光を見れば、
心身のバランスを整えることができるでしょう。

 

黄色の影響力

希望と喜びを与える色

黄色は太陽の光にもっとも近い色で、
古代のエジプトやマヤ文明では太陽を表す色として崇拝されてきました。

黄色は明るい太陽のように人々に希望と喜びを与え、
楽しい感情を生み出す色です。

心理学的には、強い希望を抱いているときに鮮やかな黄色が気になる傾向があります。
また、希望をかなえるために乗り越えなけらばならないハードルがあるとき、
黄色+青や黒という高コントラストな配色を好む傾向があります。

知性を刺激する色

黄色は左脳を活性化させ知性を高めます。
理解力、記憶力、判断力が高まり、心の不安を解消します。

人前で話すのが苦手な人でも、黄色を使うと頭の回転が速くなり
会話をスムーズに運ぶことができるようになります。

甘え・自己アピールのイメージ

黄色はとても目立つ色で、危険を表すサインとして使われています。
自然界ならトラやハチの縞模様、人工物なら踏切や工事・立ち入り禁止の看板のように
黄色+黒は危険を表しているものが多いです。

また、自己アピールの強い人は黄色を好む傾向があります。
自分の方を向いてほしい=甘えの気持ちが強いときに黄色が気になります。 

緑色の影響力

バランスと安らぎの色

緑は暖色でも寒色でもない「中間色」で、もっとも刺激の少なく、
見る人に安心感と安らぎを与える色です。

また、情緒を安定させてくれたり、筋肉や骨その他組織の細胞を作る力を促進したり、
暖和効果があるので血圧を下げ、心身共にリラックスさせる効果があります。

癒しと成長のイメージ

緑は自然や平和をイメージさせ、自然がもつ癒しの効果をもたらします。
またスクスク伸びる草木のように、健康と成長をイメージさせる色です。

緑のネガティブな側面

緑は刺激の少ない色で、積極的で活発な人には好まれない傾向があります。
「保守的・受動的・マイペース」といった補色の赤とは正反対のイメージももつ色です。

青色の影響力

鎮静と抑制の色

青には鎮静作用があり、精神を落ち着かせる色です。
青の効果を取り入れれば、感情にとらわれず冷静に物事を判断できるようになります。

また、副交感神経が刺激され、脈拍や体温が下がり、痛みが緩和される効果もあります。

集中力をサポート

青は心身を落ち着かせ、長時間の集中力を助けるので、
単純作業や頭脳労働の場所で使うと効果的です。
集中力を乱さず、冷静な判断力で、飽きずに的確な仕事をすすめることができるようになるでしょう。

爽やかで信頼できるイメージ

青には「クール・爽やか・信頼感」といったイメージがあるので、
企業のWebデザインでよく使われます。
白との相性がよく、水や青空のようなクリアな透明感を表すことができます。

また、誠実さを感じさせる色なので、面接の時などに青い服を着ると効果的でしょう。

紫色の影響力

赤+青のバランスと癒し

紫色は「活発な赤」と「抑制の青」という正反対な2色が混ざった色です。
赤と青のように、ぶつかり合う2つの心が葛藤状態にあるとき、
両方の性質を持つ紫色が心のバランスを整えてくれます。

紫はよく欲求不満の色とか病的な色と言われますが、
本当は心身のバランスを整える癒しの色です。
心身が疲れてしまったときに紫の癒しを欲しているのです。

高貴な癒しの色

紫はスピリチュアリティを象徴し、セラピストやヒーラーが好む色でもあります。
遠い昔から宗教色として尊ばれてきた色で、
自分の潜在能力に気づかせてくれる色でもあります。

紫は深い瞑想に導き、潜在能力を引き出す色なので、
精神を集中したいときには紫を取り入れるといいでしょう。

紫のネガティブな側面

紫にはリンパ管や心筋、運動神経の働きを抑制する効果があるので、
スポーツで結果を出したい時には避けたほうがよい色と言えるでしょう。 

ピンク色の影響力

恋愛・しあわせ・思いやり

ピンクは、恋愛・しあわせ・思いやりなどのやさしいイメージをもつ色です。
恋に夢中の時や、幸せで充実している時、
また愛や幸せを欲している時などにピンクが気になります。

また、ピンクは心と体を若返らせる効果があり、
心を満たし人を思いやるあたたかさを与えてくれる色です。

甘さを刺激するのでダイエットに注意!

ピンクは味覚的な甘さを刺激する色なので、ダイエットのときには注意しましょう。
甘いものがとてもおいしく感じます。

黒色の影響力

強い意志や不屈さを感じさせる色

黒は、他の色に与える影響が強く、
色を組み合わせたときには黒のイメージが上乗せされます。

威圧感を感じさせ、力を象徴する色なので、
疲れていて、他人と少し距離を置きたい、と思ったとき、
外の世界から自分を守ってくれる印象の強い黒に惹かれると言われています。

また、黒には、弱さを隠して強く見せる効果があるので、
相手になめられたくない場面や拒否や拒絶を相手に与えたい場合におすすめです。

黒のネガティブな側面

黒はもともと恐怖の色でした。
それは、大昔を想像してみれば分かります。
夜になればあたりは真っ暗で、何も見えません。
野生の動物に襲われることも多く、おびえて暮らすしか手段はありませんでした。

つまり、黒は死と隣り合わせの色だったのです。
なので、黒は不安や恐怖を与え、人間の活動エネルギーを低下させ、
暗い気持ちになりやすい色なのです。

黒一色の空間に人間を置くと、各臓器の活動が著しく低下するといった
研究結果も出ていて、老化を促進させるとも言われています。

白色の影響力

 純潔・純真の色

白は、誠実さや上品な印象を与えるので
初対面の人に会うときなどは好印象を与える効果的な色です。

また、白の真っさらな状態は始まりや出発といったスタートを印象づけます。
白は役の色をひきだたせる効果のある色です。

綺麗に見える広告、商品のデザインなどは白地であることが多いです。
分かりやすい例として、フランス料理が綺麗に見えるのは、
基本的に真っ白な白い皿に色彩が鮮やかに料理を盛り付けているからです。

 

潔感のあるイメージ

病院などでは清潔感を重視し白が多用されます。

また、呼吸器系に作用し、呼吸を楽にする効果があったり、
切り替えの作用があるので前向きな気持ちになるパワーをくれたり、
白の軽いイメージは身体の不調も軽くしてくれます。

しかし、真っ白だと心が緊張し疲れたり、冷たさも感じさせてしまうため、
オフホワイトやアイボリーなどの方が清潔さを感じつつ落ち着きを得られます。

まとめ

ほとんどの人が、「色はただの色」としてしか見ていないと思いますが、
色は、こんなにも人の心や体に大きな影響を与えていたのです

この事実をを知ってから改めて身の周りのものを見ると、
理由があってその色が選ばれている事がわかりますね。

またその日選んだ服も、その日の感情に合った色を自然に選んでいたりもします。
一度身の回りの色を見てどんな影響をうけているか考えてみるのも面白いでしょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年9月2日

黄金比をはじめとする貴金属比で、より美しいデザインを。

in-the-precious-metal-ratio-including-the-golden-ratio-the-more-beautiful-design

揺るぎない美しさのルール、貴金属比とは?

皆さんは「黄金比」という言葉を一度は耳にしたことが
あるかと思います。
これは、「貴金属比」の一種です。

img-kiinzokuhi

nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を
白銀比、第3貴金属比を青銅比といいます。

よく聞く黄金比は、貴金属比の1つです。

全5種類ある「貴金属比」はどれらも総じて人に美しいと感じさせたり、
安心感を覚えさせるため、このルールにさえ則れば、
新米デザイナーでもプロに一歩近づいたデザインができます。

現代のWebデザインやDTPデザインなどのビジュアルデザインに
おいて、プロなら意識せずに守っているデザインの「比率」。

今日はその「比率」に目を向けて、
ルールに則って美しくデザインする方法をお伝えします。

黄金比

 

黄金比は、貴金属比の中でも最も広く知られ、古代ギリシア以来
「神の比」とも呼ばれ安定的で美しい比率であると言われています。

英語だと Golden Ratio 、世界で最も美しい比率との呼び名が
高いです。

この黄金比は自然界にも多く見つけることができます。

松ぼっくりのかさ、花びらの数、葉の生え方においても
すべてに黄金比を見つけることができます。

その比率は【 1 : 1.618 】(約5:8)からなります。

img-ougonhi

ひとつの線を a, b の長さで2つに分割するときに、
【 a : b = b : (a+b) 】が成り立つように分割したときの比
a : b のことであり、その値はどちらも【 1.618 】となります。

その調和された比率は、トランプカードなどの日常的なものから、
ギザの大ピラミッドからギリシャにあるパルテノン宮殿、
システィーナ礼拝堂内にあるミケランジェロの
「アダムの創造(Creation of Adam)」、
ヴァン・ゴッホの「モナ・リザ」などの芸術分野まで、
多数存在します。

最近ですと、名刺をはじめとした様々なカード類、
郵便はがきにも黄金比が用いられています。

Apple社のリンゴマークにも黄金比が使われていることで有名です。

Apple製品はiPhoneやMacBookなど、様々なデザインに
黄金比が用いられています。

世界共通で美しいと感じさせるのは、さすがのAppleと言えますが、
それらにもきちんと理由があったのですね。

シンプルながら美しい印象を与えるのには安定した比率が
用いられてるから、というのも大きな要因でしょう。

実際私たちの脳みそは、黄金比を利用している物体やイメージを
好むとされており、ほとんど無意識の反応をしています。

黄金比を利用してデザインを微調整することで、
脳により強いインパクトを与えることができます。

さて、実際に黄金比がどういった理屈で成り立っているか
ご説明しましょう。

黄金比は、図形にも適用することができます。

正方形を用意し、片方の長さを1.618倍にすることで、
美しく均等のとれた長方形「黄金長方形」を作成することができます。

正方形と長方形を並べることで、黄金比を表現することができます。

一番右の長方形に黄金比を適用することで、正方形の大きさが
次第に小さくなります。

それぞれの正方形の角を使い、アーチ状の滑らかなカーブ曲線を描く
ことで、螺旋状のライン(フィボナッチ数列)を描くことができます。

この数列は、0からはじまり、前の2つの数字を足すことで、
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144と連続して続きます。

photo-ougonhi

この美しい螺旋デザインは、ひまわりの花や、貝殻、台風、
シダの草など自然界でもよく見かけ、どれも魅力的に見えるもの
ばかりです。

白銀比

白銀比とは、黄金比同様によく知られている比率で、
日本で発祥した古くから日本建築で使われている比率です。

白銀比には2つの種類があり
大和比と呼ばれる【 比率 1:1.414 = 1:√2 】(約5:7)と、
第2貴金属比【 比率1:2.414 = 1:1+√2 】(約5:12)があります。

白銀比(大和比)

img-hakuginhi-1

白銀比(第二金属比)

img-hakuginhi-2

白銀比で構成された長方形は、長辺で2等分すると、
元の白銀比の長方形と相似になります。

もっとも美しい比率として西洋の黄金比、日本の白銀比と
言われています。

大和比が使われた身近なものと言えば日本の紙の規格で、
A4、B4といったサイズはいずれも白銀比を採用しています。

そのためこれらの規格は、A4を半分にするとA5といったように
折り返しても同じ比率が保たれるため、
美しさと便利さを兼ね備えた比率と言えます。

日本古来の建造物にも白銀比は積極的に使われており、
中でも法隆寺の金堂、五重塔は有名ですね。

黄金比がもてはやされる場合が多いですが、日本人向けの
サイトデザインや印刷物においては、白銀比(大和比)を用いた方が
日本人向けのレイアウトになりやすそうです。

青銅比(第3貴金属比)

青銅比は、【 1:(3+√13) / 2 】で表される比のことを指します。

比率がだいぶ難しくなってきましたね…。

言い換えれば、【 1:1:3.303】(約3:9)と言えます。

img-seidouhi

比較的身近な黄金比、白銀比と比べ名前すら聞いたことがない
という方も多いのですが、こちらも同じく貴金属比の一つに
数えられます。

デザインの現場ではあまり多用されていませんが、
デザイナーとして知識のひとつに持ち合わせていきたいですね。

白金比

白金比は、正三角形の底辺の1/2の長さとその正三角形の高さの比に
等しい定数です。

その比率は【1:1.732 = 1:√3 】(約4:7) となります。img-hakukinhi

別名プラチナ比とも呼ばれる比で、デザインに使える比率として
存在はするものの、青銅比同様あまり知られてはいませんが、
こちらも美しい比率です。

第二黄金比

黄金比に対して、第二黄金比という比も存在します。

近似値は【 1 : 2.618 】(約3:8) の比率です。

img-dainiougonhi

しかしこちらも青銅比、白金比と同様使用されているシーンは少ないですが、
あることは知っておけるといいですね。

貴金属比をレイアウトに使うためのツールいろいろ

レイアウトのグリッドや余白間、写真のサイズ、配置など、
あらゆるシーンで貴金属比、おもに黄金比や白銀比は活躍します。

ただ、数値が計算式で求めなくてはいけないため、ちょっと割り出したい、
というときでもいちいち計算機を叩いたりしなくては
ならないとなると、面倒です。

Web上で簡単に貴金属比各種を求めることができるツールを
いくつかご紹介しますので、ぜひお役立てください。

Get Ratio

tool-1

http://getratio.com/

Get Ratioは、任意の数値を入れるだけで黄金比を含む様々なパターンの
計算をしてくれるツールです。

幅と比率を入力するだけで求められるので、
無駄がなく分かりやすいのが特徴です。

Webデザイン「黄金比」計算ツール

tool-2

http://zapanet.info/blog/item/1298

こちらの「黄金比」計算ツールは、一カ所だけでも
任意の数値を入れれば、残りの幅を自動計算し
黄金比を割り出してくれるツールです。

入力が一カ所だけでもいい、というのが最大の特徴です。

黄金比のみとはなりますが、
見た目にもわかりやすく使いやすいですね。

Metallic Ratio

tool-3

http://voidism.net/metallicratio/

Web自体がシンプルで、計算ひとつするにしても
気分があがりそうですね。

Result部分の数値を変更することができ、自動で黄金比はもちろん、
白銀比を含むいくつかの比率で計算してくれます。

まとめ

今回は黄金比を初めとした貴金属比5つと、
貴金属比をデザインに取り入れる際に便利なツールをご紹介しました。

黄金比というと、数値の計算が大変…ととっかかりにくいと
感じられるかもしれませんが、上手にWebツールを併用して
デザインに取り入れていけるといいですね。

ちなみに、「日本人は正方形(1:1)も大好き」と統計も
出ていますので、貴金属比からははずれますが、
日本人向けのデザインでは正方形もおすすめです。

すべてのプロが比率をしっかりと求めてデザインしている
わけではありません。

むしろ、感覚的にデザインしたら貴金属比に近づいていくのが
プロでしょう。

これからデザインを学ばれる方は、まずは黄金比や白銀比、
正方形の比率の絶対的に美しいとされるルールに則って
デザインしてみると必ずある程度の高みまではいけるかと
思います。

ぜひ、ご参考ください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年8月24日

高解像度ディスプレイへの対応?

corresponding-to-the-high-resolution-displayoptimize-the-image

皆さんは高解像度PCをお使いでしょうか?
もしお使いでなくても、スマートフォンは
高解像度ディスプレイが定番ですね。

ディスプレイの構造

わたしたちが普段使用している、
PCやスマートフォンのディスプレイは
小さな点の集まりでできています。

点のことをピクセル(画素)と言い、
ディスプレイのピクセルはR、G、Bの3色に
いわゆる「RGB」カラーで光ることができます。

ディスプレイは、RGBの3色を組み合わせて
色を表現し、映像を出力しています。

ディスプレイの広さの単位には「インチ」が用いられ、
縦横の長さではなく、対角線で計測します。
なので、同じインチ数のディスプレイでも、
アスペクト比(縦と横の長さの比率)が違えば、
ディスプレイの面積は異なります。

ディスプレイ1インチ辺りのピクセルの密度をピクセル解像度と言い、
ppi(pixel par inch)で表します。
ppiの数値が高いほど、出力される映像は鮮明になります。

類似の単位で、dpi(dots par inch)がありますが、
こちらは1インチ中のドット数のことを指します。
ではドットとピクセルの違いは?という疑問が出てくるかと思います。

ドットとは、ディスプレイの物理的な点のことであり、
ピクセルとは、ディスプレイ上で光っている点のことです。
ややこしいですね…。

高解像度画像について

サイトを閲覧時、下図の左のような
モヤっとした画像を見つけたことはありませんか?

retina-img

この現象は、高解像度に対応させていない画像において
おこりえます。

やっぱりせっかくサイトを公開するのですから、
画像も綺麗な状態で見せたいですよね。

弊社デザイン部では現在、サイト制作において
高解像度ディスプレイへの対応を
意欲的に取り組んでおります。

画面解像度の物理値と論理値

話を戻して。
解像度とは、本来、密度のことを表していましたが、
ディスプレイの総ピクセル数のことも解像度と呼ばれています。
区別をつけるために、ディスプレイの総ピクセル数は
画面解像度と言います。

しかし、時代は進みもっとややこしい話に…。

AppleがiPhone 4で搭載したディスプレイは326ppiの高解像度で、
100dpi前後の一般的なディスプレイを大きく上回っており、
人間の目ではドットを確認することができないレベルという意味で、
Retina(網膜)ディスプレイと名付けられました。

Retinaディスプレイとは?

レティナディスプレイ(英語:Retina Display)は、
アップル社製製品のうち、高精細ディスプレイを
搭載したモデルに与えられる名称、
およびディスプレイそのものを指す名称である。
「Retina」は英語で「網膜」という意味で、
画素が細かく人間の目で識別できる限界を超えている、
ということから命名された。
引用 Wikipedia

さて、このRetinaディスプレイの登場により、
Webサイト制作時に大きな課題が発生します。

Retinaディスプレイが登場するまでは、
基本的に画面解像度の物理的な値と論理的な値は同じでした。

物理的な値とは、その名の通りディスプレイの物理的なドット数
(画面解像度が1920×1080ならば、
物理的な点が縦に1920個、横に1080個並んでいる)で、
論理的な値とは、ディスプレイに表示されているピクセル数
(画面解像度が1920×1080ならば、1920×1080pxの画像は
デスクトップの壁紙にピッタリと収まる)のことです。

画面解像度の物理値と論理値が等しい状態のことを
「ドットバイドット」と言います。

ところが、iPhone4では、ディスプレイのインチ数はそのままに、
物理解像度は640×960、論理解像度は320×480になりました。
(ちなみに、この論理解像度のことをポイントと呼んだりします)
つまり、従来のディスプレイでの1ドットのスペースの中に、
大きさが縦横半分のサイズまで小さくなったドットが2×2の4つ入りました。
それを1pxとして扱うことにより、フォントや画像の輪郭を
より鮮明に描写することが可能になったということです。

実際にこの高解像度画像は、
閲覧側としても見ていて気持ちがいいですね。

しかし、Retinaディスプレイでもないデバイスで
すべて高解像度画像を表示させていては、
サイト自体が重たくなって、ユーザーの離脱率を
高めてしまう原因になりかねません。

どこまで高解像度画像にするか

そもそもサイトの表示が重たい原因として、
閲覧側に考えられるのは、

  • インターネット速度
  • ブラウザの環境
  • コンピュータ自体の速度が遅い
    (プロセッサまたはメモリが狭い)

などです。

ホームページ作成者側に考えれる原因としては、

  • サイト上の画像を最適化していない
  • 容量が非常に大きいファイルが読み込まれている
  • コンテンツが非常に多い
  • フォントを多用している

などが挙げられるでしょうか。

もちろん上記以外にも多くの原因が考えられますが、
訪問者のパソコンやモバイルのプロセッサに
なるべく負担をかけないように、
コンテンツを最適化することが重要です。

高解像度用の画像に対応させる方法

方法としては、3つほど考えられますが、
それぞれメリットデメリットがあります。
構築時に何を優先させるか意識して対策しましょう。

  1. 読み込ませる画像の大きさを半分にする。
    メリット:簡単
    デメリット:画像修正の時はHTMLも
    触らないといけない場合がある。(管理がしにくい)
  2. JavaScriptライブラリを使う(今回はRetina.js)
    メリット:高解像度用の画像を用意するだけで、
    勝手に読みこんでくれる(管理しやすい)
    デメリット:読み込む画像の数が増えるので、通信量が増える。
  3. Media Queriesを使って高解像度用のディスプレイを判定。
    メリット:画面サイズにあった画像を読みこませることができる。
    デメリット:毎度高解像度用の画像を設定するのが面倒。

1.読み込ませる画像の大きさを半分にする。

2倍の大きさの画像をwidth、heightで、
もしくはCSSで表示サイズを半分に指定するという方法で
表示させます。
この方法は比較的簡単に使える方法なので重宝しますが、
高解像度用の画像と通常サイズの画像を変更するときは
HTMLも触って変更しないといけないので、
変更箇所が多い場合は少し対応が面倒になります。
向いている設計としては、どれを高解像度、
通常解像度で読み込ませるか確定している場合です。

2.JavaScriptライブラリを使う(今回はRetina.js)。

Retina.jsというライブラリーを使う場合でご紹介します。
まず、「Retina.js」のファイルをダウンロードします。
retina.jsのダウンロード

あとは、解凍したjsファイルを任意のフォルダにうつして
読み込むだけです。
タグはの直前に記述してください。

これだけで、例えば画像タグがあった場合に、
example@2x.pngというRetinaディスプレイ用の画像が
存在するかどうかチェックして、存在すれば表示して
くれるようになります。

なので、通常サイズの画像と高解像度用の画像と
2パターン読み込む事になるので、
retinaディスプレイのような端末には負担が増えてしまいます。
向いている設計としては、通常サイズの画像を基本として読み込み、
高解像度用の画像は選定して読み込む場合です。
また、どれを高解像度用に読み込むか決まっていない時も
簡単に変更できるので後々の修正がやりやすいです。

軽量化を意識してサイトを作る場合はこの方法がオススメです。

3.Media Queriesを使って高解像度用のディスプレイを判定。

Media Queriesでretina化判定して読み込む画像を切り分ける事が
できるので下記のように記載します。

きちんと通常サイズの画像と高解像度用の画像を
切り分ける事で通信量を抑えることができます。
しかし、背景で画像を読み込む際に毎度書くのは面倒ですね…

向いている設計としては、通常サイズの画像を基本として読み込み、
高解像度用の画像は選定して読み込む場合です。
ですので2番のJSを使うタイプの仕様と相性が良いので、
軽量化を意識してサイトを作る場合は2がおすすめです。

ここまでRetina画像の素晴らしさをお伝えしてきましたが、
最近手がけたWordPressリニューアル案件で、
見栄え重視で綺麗な写真をビッグサイズで
多用したが故に、サイトの表示速度が落ちてしまい、
結果離脱率を高めかねない事態に陥ったため、
急遽対策を施しました。

今回のサイトでは、1.読み込ませる画像の大きさを半分にする。
で高解像度画像を読み込ませていましたが、
残念ながらこの手法ではサイトが重たくなりすぎたため、
原点回帰し、すべて等倍画像で表示させるようにしたところ、
それにより、以下のように速度が劇的に早くなりました。

2倍画像使用時のサイト速度:12.24秒

rosegarden-0630-0731

等倍画像に戻した後のサイト速度:4.14秒

rosegarden-0801-0822

一概にすべてRetina対応させればいいという
お話でもないということがお分かりいただけたでしょうか。
今回のサイトでは、ロゴや小さなアイコンなどの、
画像がもやもやしては困るところのみRetina対応させましたが
画像を多用するサイトでは、部分的な対応をおすすめします。

まとめ

LTEが順次拡大しているとはいえ、
スマホの通信量はまだまだ気にかけられていますので
できるだけ軽い表示が望まれます。
制作再度としては綺麗な画像で提供したいところですが、
そのために読み込みに時間がかかって
ユーザーにストレスを与えてしまっては
せっかくの綺麗な画像も意味がありません。

すべてにおいて高解像度用の画像を用意するのは
あまり得策ではありません。
要所要所で用い、できるだけユーザーに負担をかけない
表示速度で提供できるよう、心がけましょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年7月25日

企業への求人応募をご検討中の方、是非ご一読を!

mainv-read-the-direction-of-you-considering-a-job-application

別の会社に転職したい!
Webデザイナーとして就職したい!
と思っているそこのあなたへ。

最近は弊社Webデザイナー職にもたくさんのご応募をいただいておりますが
デザイン部の採用担当として、どんな会社を受けるにあたっても、
是非ここは気をつけていただきたい、という点をお伝えします。

デザイナー職に限らず、あらゆる職種にわたって、
採用応募の際には参考になることも多いと思うので、
これから企業へ応募をされる予定がある方は、
是非ご一読ください。

1 応募メールや履歴書の志望動機欄には、
「御社を選んだ理由」を必ず記載すること。

履歴書
何通か履歴書に目を通す中で、
やはり定型文のようなものはよくあり、
読む側としてもさらっと流してしまいがちです。

また、そういった文章を書く方に限って、
複数の会社への応募されているケースが多いです。

文才が無くても、別に長く無くてもいいので、
「私は、こういった理由で御社を志望しました」
といった、内容が欲しいのです。

よく「志望動機」を書かれる方もいらっしゃいますが、
この二つは似て非なるもので、簡単に言い換えれば、
「他の会社への履歴書に記載しても通用する内容か」
と言えるのではないでしょうか。

採用担当からすれば、自社に興味を持ってくれているか否かで
だいぶ応募者への気持ちは違います。

恋愛に例えると分かりやすいかもしれませんね。
「あなたのここが大好きです!付き合ってください!」
とアピールされるのと、
「あなたのことはほとんど知りませんが、お付き合いして下さい!」
とアピールされるのでは、
普通の感覚の人なら、前者の方が
より好感度が増して好きになりやすい、ですよね?
違ったらすみません…。

さて、話を戻して。

2 面接に臨む前に、会社のことをしっかり調べて、
自分から聞きたい質問もいくつかピックアップしておこう。

面接

書類選考を無事突破したら、面接は書類選考以上に気構えてください。
自己PRももちろん大切ですが、会話のキャッチボールとなる
面接官とのやりとりは、それ以上に重要といっても過言ではありません。

たった数分の短い時間の中で、コミュニケーション能力も測られるからです。
頭が真っ白になった!なんて事態に陥らないためにも、
スムーズな受け答えができるよう、自分のことはもちろん、
会社のこともしっかり下調べしておきましょう。

会社のWebサイトやブログは、会社や社長の理念や、
会社全体や従業員の雰囲気が伝わりやすく、
是非目を通して欲しいページと言えます。

面接官からの予期せぬ質問に、
事前に会社の情報に目を通していたか否かでは
答えられる内容もだいぶ違うと思います。

自己PR、面接官からの質問まで終わったら、
いよいよ今度はあなたらからの質問のターンです。

意外ですが、多数の採用担当がこの、応募者からの
質問タイムを重視しています。
どんな質問がでるのか?
Webサイトを見れば済むような質問であれば、
本当に興味があって会社のWebサイトを見てきたのだろうか?
と色々な指標になるからです。

質問の内容もとても重要です。
その人がどういった類の質問を投げかけてくるかで、
働く上で何を一番重視したいかが一目瞭然だからです。

入ってから「聞いてなかった」とならないよう、
ぼんやりとしている福利厚生や、就業規則があれば
質問として投げかけましょう。

ただ、ひとつ注意して欲しいのですが、
「残業はありますか?月何時間くらいですか?
その場合残業代はきちんとでますか?」
といったマイナスな質問を深く掘り下げてしてしまうと、
面接官としても、「本当に熱心に働く意欲があるんだろうか?」
と心配になってしまうものです。
当たり前といえば当たり前ですが…。
労働者としてとてもしっかり確認しておきたい大切な面は
みなさんそれぞれあると思いますが、
そういった内容は、面接で聞くとしてもできるだけソフトに、
難しそうならメールでの確認にとどめるなど、
悪い印象を与えないようにしましょう。

3 自分の長所も短所も、素直に伝えよう

書類選考も面接も、自信のない人ほど
自分を大きく見せようとしがちです。
あなたには長所があれば、もちろん短所もあります。
きちんと両方を把握できていてこそ、
自分を客観的に見られる、よい人材とも捉えられます。

長所をアピールすることはとてもいいことですが、
きちんと短所も伝えた上で、その短所を
そうカバーしているか、といった改善策も
合わせて伝えられるとベストですね。

4 前職(現職)の不満を漏らさないようにしよう

中途採用の面接では、必ずと言っていいほど
「なぜ今の会社(前の会社)を辞めたい(辞めた)のか?」
という質問を投げかけられます。
この質問こそ、応募者の価値基準を推し量る、
最重要な質問とも言えます。
ここで前の会社の悪口を言う人は採用しづらいとも言えます。
なぜなら、「その不満を改善するよう、コミュニケーションをはかったり、
要望を伝えたり、十分な勉強をしたりしなかったのか?」
と捉えてしまうからです。

「自分がうまくいかないのは会社のせい、
だから自分の行動ではなく会社を変えてやる」という
責任を会社に押し付ける辞め方をしていると、
不満をにじませる回答になりがちです。

こういった人は、ほぼ必ずといっていいほど、
自社で採用しても、不平不満を漏らすケースが多いです。

確かに転職というのはなんらかの不満が結晶化し、
行動にうつすものというのはよくわかります。
が、不満を漏らす前に、きちんとその問題に立ち向かえ、
そしてどうしてもだめだったから転職を考えている、
という人材に会社は惹かれるものです。

「前の会社には多大なる恩を感じています」と
胸を張ってどうどうと言えるくらいの意気込みで、
面接には臨みましょう。

Webデザイナー職に応募する前に

man
さて、ここからはWebデザイナー職を希望される方へ
ご一読いただきたい内容になります。

1 ポートフォリオの提出

まず、一番大切にしていただきたいのが、
ポートフォリオの提出です。

やはり、応募者本人のデザイン力を
一目で把握できるのがポートフォリオなので、
そこから興味を惹かせるよう、
十二分にもこだわって、ポートフォリオはつくり込みましょう。

サイトでも、紙媒体でも構いませんが、
Webデザイナー職を希望するなら、
できることならポートフォリオサイトでの提出が望ましいですね。
HTMLの知識が乏しくても、
調べつつ作った、という意欲は買えるので、
是非トライしていただきたいです。

2 ポートフォリを全体を通して

また、ポートフォリオでは自分らしさを思い切り出してください。
ぱっと見て、「お?」と目に留まれば
企業側は自己紹介文などを読み込みます。
デザインの良し悪しは一瞬で判断できるので、
決して手は抜かないでください。

自己紹介文は、短く、単的にまとめましょう。
ポートフォリオ内での長文は読み飛ばされやすいです。
アピールしたい内容は、別途履歴書に記載するのが無難です。

また、得意なジャンルで勝負してください。
がんばったという意欲は素晴らしいと思いますが、
多岐に渡らせたあまり中途半端になってしまった
作品集を見せらせるより、
一部に特化してクオリティの高い作品集という方が
断然高評価です。
自分の得意なジャンルで勝負してください。

3 ポートフォリオに掲載する作品数

ポートフォリオは、形だけあればいいのではありません。
中身こそ重要です。
どういった作品を、どれだけ載せられるかに
勝負はかかっています。
デザイン学校を卒業しているなら、
ある程度の作品数はあるかもしれませんが、
採用担当としては、授業以外で
どれくらいデザインを手がけているか、
という点も重視したいところです。

やはり、デザインが好きで仕方ない!
という方はそもそもの作品数も雲泥の差ですし、
そこはできる限り多く掲載していただきたいですね。

ただし、点数稼ぎのためといって、
工事中のページや、未完成の作品は掲載しないよう、
注意して下さい。
どうしても足りなければ、少ないコンテンツで
いかに魅力的に見せるか、
レイアウト力で勝負しましょう。

4 Web以外の作品も載せよう

採用担当としては、Webサイトだけでなく、
応募者個人がどれくらいクリエイターとしての
素質があるのかも見たいところです。
イラストや映像作品など、Webには関係のなさそうなものも
自信がある作品なら是非掲載しましょう。
ただし、載せすぎは
「本当にWebデザイナーになりたいんだろうか…」
と思われてしまいがちなので、
掲載点数のバランスは重視しましょう。

5 掲載作品について

せっかく作品を厳選して掲載するのですから
その作品の詳細や背景なども、簡潔明瞭に載せたいものです。

  • デザインのキャプチャや写真
  • URL
  • 制作期間
  • 使用ソフトや素材
  • 共同作品の場合はどこを担当したか具体的に記載
  • テーマやコンセプト

など記載できれば、充分でしょう。
長々書きすぎると、読み飛ばされやすいので注意してください。

余談:筆者の場合

脱線しますが、筆者の場合、新卒の頃と中途の頃で、
採用への応募にあたっては、複数回ポートフフォリオを作っています。
学生時代どっぷりと美術やデザインに浸かっておりましたので、
作品数はかなりたまっていましたが、新卒の頃は
Webの作品数はそのなかでも1割にも満ちませんでした。

だいぶ厳選はしましたが、それでも
A3クリアファイルがパンパンになるくらい
たくさんの作品を詰め込んだ結果、
掲載点数は100点をゆうに超えていました。

それはそれで、見る側は飽きるよな…
と今になっては気恥ずかしい思い出ですが、
無事前職で採用していただけた時には、
上の方から、「ポートフォリオ見たよ、期待してるよ」
と言われ、嬉しくなったと同時に、
たかがポートフォリオ、されどポートフォリオと、
しみじみ実感したのを覚えています。

中途の時は、
よりWebサイトのみに特化して
ポートフォリオを作り直しましたので、
ポートフォリオとしての構成は荒削りでしたが、
自分のなかでクオリティを保てていると推せる作品たちで
勝負ができたと思っています。

が、やはりポートフォリオというものは、
過去の作品を載せるものなので、
見返せばどんなものでも
だいぶ気恥ずかしいものではありますが・・・。

まとめ

bill
いかがでしたか?
これから求人に応募される方の参考に少しでもなれば幸いです。
ポートフォリオを作られる予定のあるデザイナーの方は、
是非「自信を持って見せられる!」と太鼓判がおせるくらいに
クオリティと自分らしさを追求して、
素晴らしい1冊を作り上げてくださいね。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年5月31日

Webフォントを使って、ワンランク上のサイト作りを!

Webフォントを使って、ワンランク上のサイト作りを!

Webデザイナーの方なら、MS Pゴシックやヒラギノ角ゴシックなどから
一歩踏み込んだフォントでWebを作りたいと思いますよね。

従来のフォントだと選択肢が制限されていましたが、
CSS3からはWebフォントが利用できるようになっています。

元来、Webブラウザは端末にインストールされているフォントを呼び出し
文字を表示します。

端末のフォントでは、Webデザイナーが意図しないWeb表示がなされてしまい、
フォントに関するWebデザインにも制約が生じてしまいますよね。

フォントを画像にして表示するという手はありましたが、
文章修正のメンテナンス、文章の検索、SEO面で問題があります。

そこでWebサーバー上にフォントファイルを置き、
Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントと言えます。

従来のフォント指定について

OSごとに標準搭載されているフォントを見てみましょう。

Windows 8 / 7 / Vista メイリオ
MS ゴシック
MS 明朝
Windows XP MS ゴシック
MS 明朝

MacOS X 10.5以降

ヒラギノ角ゴシック ProN
ヒラギノ明朝 ProN
ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
MacOS X 10.4 ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
iOS HiraKakuProN-W3
HiraMinProN-W3
Android 4.0 モトヤLシーダ3等幅
モトヤLマルベリ3等幅

制作時にフォントにこだわって、多彩なフォントを自由に使ったとしても、
エンドユーザーのPCにフォントのデータが無いため表示が変わってしまい、
意図しない表示がされ、残念な結果になってしまうことが多々あります。

この問題の解決手段として策定されたのがWebフォントです。

フォントのデータをネットワーク上に置き、
サイト表示の際はそこからフォントのデータをダウンロードして使用するため、
ユーザーの環境に左右されることが無くなります。

改めて、Webフォントのメリット、デメリット

Webフォントを使用するメリット

  • ユーザーの環境に依存せず、インストールされていないフォントも表示できる。
  • 画像ではなくテキストなので、検索エンジンのクローラーに情報を拾ってもらえ、SEOに有利。
  • 修正、更新がテキスト打ち直しだけなので簡単。
    Photoshopなどのアプリケーションに頼らなくていい。
  • Retinaなどの高解像度ディスプレイでも綺麗に見える。
  • レスポンシブ対応が容易。

Webフォントを使用するデメリット

  • Webフォントのデータを読み込むための時間がかかる。
  • 無料の日本語Webフォントは種類が少ない。
  • 日本語Webフォントは欧文のみのものに比べて重い。
    ※容量を削減するために、必要な文字のみを読み込む「サブセット化」で
    フォントファイル自体を軽量化することも可能です。

Webフォントは敷居が高そう、、とお思いの方に

Webフォントは難しいと思われがちですが、きちんとした手順を踏めば、
さくっと導入できます。

これを期に、フォントからサイトの雰囲気を変えていきましょう!

欧文の所はおしゃれにしたいなら、Google Fontsがおすすめ!

必要なフォントを選んで、出力されたタグをコピペするだけで、
欧文Webフォントが使用できます!

日本語はありませんが、欧文書体が幅をきかせているため、
欧文のタイトルに使いたいなどであれば、こちらの方法が手軽です。

google font

google font

日本語のWebフォントは??

Google Fontsで調べるとわかりますが、全て欧文対応のものです。残念です…。

が、日本語Webフォントとして、Googleが提供している日本語のWebフォント、
Noto Sans Japaneseが『Google Noto Fonts』というプロジェクトで無料で公開されています。

Noto Sans CJK JP

Noto Fonts CJK JPとは、Googleとadobeが共同開発をしたフォントです。

コンピューターで表示できない文字がある場合、
文字の代わりに小さい四角(□)が表示されることが多いですが、
Googleではそれを「豆腐」と呼んでおり、
Webから取り除くためにNoto(no more tofu)フォントを作ったそうです。

さすが、GoogleとAdobeが共同開発したフォントだけあって、
すっきり整っていて、よみやすさ抜群です。

困ったらNoto Sans Japanese、と思っても間違いではありません。

Noto Sans Japaneseを簡単に導入

CSSファイルに、以下のようにインポート文を追加すれば、
urlに指定されているCSSファイル経由でNoto Sans Japaneseを読み込みます。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

これだけで、あらゆる端末で同じフォントを、
しかも日本語で使えるようになるのです。
素敵ですね。

Noto Sans Japaneseをより軽く使用するため、サブセット化する

先ほどの方法でももちろん大丈夫ですが、
全ての漢字やウェイトなどを網羅しているため、少し重くなりがちです。

表示が重たくてストレスを与えてしまう、という事態を回避するため、
フォントファイルを軽量化させてしまいましょう。

1.「Noto Sans」をダウンロード

「Noto Sans」をNoto Sans CJK JP よりダウンロードします。

Noto Sans CJK JPを検索、ファイルをダウンロードしてください。
noto font

2.サブセット化のためのソフトをインストール

下記のサイトから「サブセットフォントメーカー」「woffコンバーター」を
インストールください。

http://opentype.jp/subsetfontmk.htm

http://www.forest.impress.co.jp/library/software/woffconvert/

3.サブセット化してWebフォントのファイルサイズを軽量化

サブセット化とは、普段使うものだけを抜き出す作業です。

「第一水準漢字+ひらがな+記号」この辺りを抜き出せば
普通のwebサイトであれば十分です。

以下から、代表的なフォントに格納する文字です。

https://drive.google.com/file/d/0Bza38quoCtHqM004SE1QUVlNLWc/view

1. サブセットフォントメーカーを起動し、インストールしたファイルを指定します。

サブセット

2.「作成後フォントファイル」で軽量化したあとのフォントファイルの保存場所を指定します。

3.「フォントに格納する文字」の箇所へ、先ほどダウンロードした文字をコピペします

4.「作成後、WOFFコンバーターを起動する」にチェックを入れて、「作成開始」ボタンをクリック。

5. 変換後のフォントファイルが1MB以下になっていることを確認してください。

4.woffコンバーターを使用し、拡張子をwoffに変換

フォントにもそれぞれの環境で対応したファイル形式があるので、それぞれ変換してやります。

先ほどのサブセットフォントメーカーできちんと変換されていれば、
そのままwoffコンバーターが立ち上がります。

サブセット

1.「変換前ファイル」でさきほど軽量化したフォントを指定します。

2.「変換後ファイル」で拡張子を変更した後のファイル名を指定します。

3.「EOTファイルを生成する」にチェックを入れて、「変換開始」をクリック。
※EOTファイルはIEでも表示させるためのフォントファイルです。

5.サイトに日本語Webフォントをインストール

これで日本語Webフォントのサブセット化は完了しました。

あとはサイトに日本語Webフォントをインストールすれば表示されます!

軽量化したWebフォントをディレクトリーに配置し、CSSにフォント指定のコードを書きます。

@font-face {
   font-family: "NotoSans";//好きな名前で設定
   font-style: "normal";
   font-weight: 400;
   src: url("./assets/fonts/NotoSansCJKjp-Regular.otf") format("opentype"),
   url("./assets/fonts/NotoSansCJKjp-Regular.woff") format("woff");  
}

太字を使いたい場合は、font-family: "NotoSansCJKSC;と指定すると使うことができます。

@font-face {
   font-family: "NotoSans";
   font-style: "normal";
   font-weight: 700; //変更
   src: url("./assets/fonts/NotoSansCJKjp-Bold.otf") format("opentype"), ;
   url("./assets/fonts/NotoSansCJKjp-Bold.woff") format("woff");  
}

このサブセット化の方法を覚えれば、Web上に転がっている商用可などの日本語フォントを、
ストレスフリーにサイトに導入できます!

ぜひ覚えてくださいね。

まとめ

いかがでしたか?Webのフォントは紙媒体に比べて遊べない、とお思いのあなた。

技術の進歩でWebフォントも捨てたもんじゃなくなってきています!

ぜひワンランク上のサイトデザインに、ご活用ください。

このエントリーをはてなブックマークに追加
メルマガ登録