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

デザイン

おすすめ情報

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フォントも捨てたもんじゃなくなってきています!

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

おすすめ情報

2016年4月27日

スマホ最適化、よりよい手段、とれていますか?

Googleは2015年4月21日からスマホ最適化(モバイルフレンドリー)していないページは
これまでよりも検索順位が下がったり、上がらない恐れがあると公表しています。

これを踏まえて、スマホで閲覧したとき、従来のPC表示はだいぶ古い、のはみなさんご存知でしょう。

スマホ最適化の方法の中でGoogleが最も推奨しているのが、レスポンシブ・ウェブデザインです。

1. レスポンシブ・ウェブデザイン

「レスポンシブwebデザイン」とはどういう手法かというと、
デバイスをwebサイト表示の判断基準にするのではなく、
ブラウザの横幅サイズをwebサイト表示の判断基準にし、
ページのレイアウトデザインを柔軟に調整できる手法です。

現在一般的には、デバイス毎のレイアウトが違うHTMLファイルを
複数用意することが多いと思いますが、
「レスポンシブwebデザイン」では、1つのHTMLファイルを、
CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じて

ページのレイアウトデザインを調整できます。

レスポンシブ・ウェブデザインのメリット

1.PCサイトのコンテンツや素材が使い回せる

2.コンテンツを一元管理できるので、運用コストがかからない

3.URLが統一されるのでシェアしやすくなる

レスポンシブ・ウェブデザインのデメリット

1.jsやcssが多くなるため、サイトの表示速度に影響がある

2.デザインやレイアウトの融通が効かない

3.PCのユーザー導線を引き継ぐので、スマホならではの導線設計が難しい

4.スマホからPCサイトを見たい場合に容易には見れない

2. スマホ専用コンテンツを作成

スマホ最適化のもう1つの方法が、デバイス毎にWebサイトを用意する方法です。

PC用サイトとスマホ用サイトを用意する場合、
ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、
サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的な方法です。

PCサイトのURLを「www.aaa.com」とした場合、モバイルサイトでは
「www.aaa.com/sp/」のようにディレクトリを切る、もしくは「www.sp.aaa.com」
のようにサブドメインを設定するのが一般的な方法です。

スマホ専用コンテンツのメリット

1.スマートフォンサイト、PCサイト別々の設計が可能

2.デザインやレイアウトの融通が可能

3.サイトの表示速度をレスポンシブサイトよりも調整しやすい

スマホ専用コンテンツのデメリット

1.PCサイトとスマートフォンサイト両方の素材やコンテンツの用意が必要

2.運用コストが上がる可能性がある

3.URLが統一されない為、スマホからとPCからSNS上にシェアされた際に違うURLとなる。

以上を踏まえると…?

それぞれメリットデメリットはありますが、
Googleが明確な検索アルゴリズムを示した今、

1つのWebサイトで全てのデバイスに対応できるレスポンシブ・ウェブデザインは

大変理にかなった手法と言えます。

これからスマホサイトを作っていくのであれば、
メリットデメリットを加味した上で、選択していってください。

次に、マルチデバイスに対応していくために、最低限知っておきたい、

Googleが提唱しているスマホ最適化25のルールをご紹介します。

Googleが提唱しているスマホ最適化25のルール

1.CTAに一番目がいくようにする

サイトの中でも最も重要なCTAボタン(「会員登録」や「無料お試し」など)は、
ファーストビューやサイトの中心など、必ずユーザーの目に留まる位置に設置します。

2.ナビゲーションは簡潔明瞭に

モバイルにおいては、ナビゲーションのリスト数は最小限に留めましょう。

最近流行りのタップでナビがプルダウンしたりスライドしてくる、
トグルナビでのボタンのみの表示もオススメです。

3.ユーザーに優しいトップページ回帰

モバイルユーザーはヘッダーのロゴをタップした時にリンクが設置されていないと、
大きなストレスになるとの調査結果が出ています。
最低限、ヘッダーにはロゴ必須、フッターにもできれば入れて、
どちらもトップページへリンクするようにしましょう。

4.プロモーションはほどほどに

プロモーションや広告がCTRボタンに隣接している場合、ユーザーの気が反れ、
コンバージョンに繋がりにくくなります。

プロモーションのしすぎでユーザーの気をそらしていないか、今一度確認しましょう。

5.サイト内検索でユーザーを逃さない

目的が明確なユーザーはサイト内検索の利用頻度が高い傾向にあります。

最もコンバージョンに近いユーザーを逃さない為に、
サイト内検索バーは必ず設け、分かりやすい位置に設置しましょう。

6.最高の検索体験の提供

モバイルユーザーは、デスクトップユーザーよりも断然、
不必要なアクション、目的に到達出来ないままの複数ページ回遊等を嫌います。

①1ページ目に表示される結果と検索キーワードの関連性

②オートコンプリート

③誤字脱字の自動訂正

など、ユーザーにストレスを感じさせない、最高の検索体験を提供しましょう。

7.詳細検索機能の最適化

詳細検索機能でのイライラは、以下のケースで起こりえます。

①絞ったはずが検索結果がいっこうに減らない、
②絞った結果検索結果が0件になった
単に詳細検索機能を設置して終わりではなく、ソートの方法も都度見直していきましょう。

8.検索はフォーム入力前にスタートしている

カスタマー層が多岐にわたる場合や、商品数が圧倒的に多い場合には、
トップページのナビゲーションなどで、性別、欲しい商品のカテゴリ
(トップス、ボトムなどの大カテゴリ)、サイズなど、
2~3の質問を事前にリサーチ、反映させましょう。

その後のキーワード検索体験が、より心地いいものになります。

9.コンバージョンを急かさない

サイトに訪問したユーザーに購入や予約等のコンバージョン関連タスクをいち早く求めるのは、
多くの場合CVRを押し下げる原因となります。

初めて入ってきたユーザーには、吟味してコンバジョーンにたどり着けるサイト設計を心がけましょう。

10.会員登録無しで購入

購入したい!と至ったユーザーに対しても、会員登録必須となると
購入意欲が減退するという調査結果が報告されています。

初回購入ユーザーのためにも、「会員登録無しで購入」というオプションは
設けておくと親切です。

11.手元にある情報を最大限活用

ユーザーが登録を嫌がる理由の1つは、情報入力に手間がかかると、
ユーザーが登録を嫌がる傾向にあります。

登録済みユーザーには、同じ情報を度々入力させることの無いようにオートフィル機能を。

新規ユーザーには、登録の手間を大幅に削減する決済サービスを導入するなどして、
情報入力を手間取らせないようにしましょう。

12.クリック・トゥ・コール

複雑な情報や機密性の高い情報を取り扱う際には、
クリック1つで電話がかかるクリック・トゥ・コールボタンを設置し、
ユーザーに不信感を与えないようにしましょう。

ネットセキュリティに対する意識が高い現代において、逆行するようで意外ですが、

電話での登録の方が安心出来るというユーザーが非常に多いようです。

13.一手先を見越す

たとえ購入意欲がピークに達しても、時間の関係などによって
その時はコンバージョンまで辿りつかないケースが多々あります。

そんなユーザーでも時間の余裕があるタイミングで後々購入に踏み切れるように、
「買い物かごに入れる」「SNSでシェア」「メールで送る」などのオプションを用意し、
できれば「お買い忘れはありませんか?」などのアクションをこちらから取れると
ベストですね。

14.入力プロセスの最適化

スマホにおける文字入力は、デスクトップユーザーのそれよりも
大きく「面倒だ!」といん印象をユーザーに与えます。

「登録要項はこれ以上減らせない」という時でも、

①リターンを押すと次の項目に自動で移動

②番号入フォームには自動でナンバーキーボードを表示させる

など、プロセスに存在する無駄を徹底的に省きましょう。

15.入力メソッドの最適化

各入力項目に対して、最適なインプットメソッドが適用されているか、確認しましょう。

例えば年月日であれば年、月、日と別々に登録するのではなく、
一括で設定出来ればユーザーに苦労を感じさせません。

16.カレンダーのビジュアル化

特に予約商品を扱うサイトの場合、必ずカレンダーは数字だけでなく、
ビジュアルで見せるようにしましょう。

カレンダーアプリの起動でサイトを離脱し、
せっかくのコンバージョンを逃すケースも考えられます。

17.入力エラー対策

1つの項目の入力エラーによってその他全ての入力データが消えてしまう、
なんてことをさせないようにしましょう。

各項目に明確なラベル(「PW」ではなく、「8文字以上のパスワード」など)を
張ることはもちろん、エラーを確認するとその場で通知するオート・バリデーション、
そして、万が一更新しても入力データをしっかりと保存してあげるなど、
入力エラーによるフラストレーションを極限まで下げるよう取り組みましょう。

18.エコと予測可能性

設計としては多く盛り込みたいところですが、入力項目は最小限に抑えましょう。

オートフィルを使って項目の手間を省ける場合(例えば郵便番号)には、
必ず利用し、どうしても数が減らせない場合には、
入力をいくつかのステップに分け、各ステップ及びその進捗状況を表示し、
ユーザーに現時点での立ち位置を把握させることが重要です。

終わりの見えない工程よりも、ゴールを明確にする方が、ユーザーを逃しません。

19.サイト全体をスマホに最適化

一部のみスマホ対応、それ以外はPC表示のまま、
という中途半端「混合型」のウェブサイトは、
かえってモバイルユーザーのUXを悪化させるという結果が出ており、
サイト全体をスマホに最適化させることが重要です。

20.ノー・モア・ピンチ

モバイルユーザーは、画面をつまんで(ピンチ)ズームアウト・インすることに
嫌気が差しています。

イライラを助長するだけでなく、ズームの過程でCTRボタンを
見逃している可能性も多く調査の中で指摘され、「ノー・モア・ピンチ」、
ズームアウトやズームインの必要の無いウェブサイトの制作を最優先させましょう。

21.画像の拡大

単純に画像を掲載するだけでは、ユーザーの購買意欲を最大化することは出来ません。

特にアパレル製品に関しては、
高画質な画像を拡大して閲覧出来るように表示するだけで、
ユーザーがより多くの情報を得られ、
結果としてコンバージョンの向上につながりやすくなります。

22.オリエンテーションの最適化

情報量が多く、通常の縦位置ではなく横画面での閲覧が最適な場合には、
ユーザーにポップアップでお知らせしてあげましょう。

一度に表示される情報量が増加し、
ユーザーにとってみれば大きなストレス解消ポイントにもなり得ます。

23.1画面にキープ

複数ウィンドウにまたがる操作は、ユーザーが本体サイトから離脱する危険性を高めてしまいます

同サイト内コンテンツを別ウィンドウで開くボタンの設置を避けることはもちろん、
ユーザーが他のウィンドウを開いて更に安い情報を探しに行くことのないように、
単一ウィンドウ内にクーポンや比較情報を設置しましょう。

24.「フルサイト」の表示はNG

モバイルサイトでよく、「フルサイトはこちら」といった文言を見たことはありませんか?

ユーザーが「モバイルサイト」と「フルサイト(PC版)」の2つのチョイスを与えられた際、
ユーザーは「モバイルサイトは情報がぎゅうぎゅうに詰められて見づらい」、
「フルサイトの方が(実際にそうではないが)たくさん情報が入っている」
と言った印象を覚えるようです。

「フルサイト」ではなく、「PC版」や「デスクトップ版」
といった表現で誤解を減らしましょう。

25.位置情報取得は慎重に

ユーザーの利用状況を理解する前に位置情報を取得し、
その情報に基づいたコンテンツを推奨するのは単なるおせっかいです。

あくまで位置情報はユーザー自身が入力することを前提に、
「地域限定情報をチェック」といったようなCTRボタンを用意しておくのが
効果的と言えるでしょう。

まとめ

SEOを狙うスマホ対応、どれだけ重要かがおわかりいただけたかと思います。

これからスマホ最適化させていかないといけないWeb担当者のみなさま、
選択可能であればGoogleのアルゴリズムにより強いレスポンシブ対応を選び、
Googleが提唱しているスマホ最適化25のルールをできるだけ遵守し、
UX(User Experience:ユーザエクスペリエンス…
ユーザが特定のサービスを使ったときに得られる経験や満足など全体を指す)
を高めていけるよう、最大限努力しましょう。