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

デザイン

おすすめ情報

2016年11月26日

便利?不便?ハンバーガーメニューって?

convenient-inconvenience-what-is-a-hamburger-menu
みなさんハンバーガーメニューって聞いたことあるでしょうか?
「ハンバーガーアイコン」、「ハンバーガーボタン」とも
呼ばれています。
マクドナルドやハンバーガー屋さんの
店頭に置いてあるメニューではなくて、
スマートフォンサイトやタブレットサイト、
PCサイトでもちらほら見かける
三本線のナビゲーションメニューです。

なぜハンバーガーメニューと呼ばれるのかというと、三本の線が
ハンバーガーに見える事からこう呼ばれるようになったそうです。
前まではドロワーメニューと呼ばれていたそうです。

どうしてハンバーガーメニューが生まれたのか

WebサイトはもともとPC(デスクトップ・ノートパソコン)と
いったデバイス向けに考えられてきたので、
スマホサイト・アプリの設計はPCのサイト設計が
ベースになって考えられています。
そのためPCサイトにて左右の2カラムでエリアを定義したものを、
同じようにスマホで再現しようとすると、
必然的に縦に配置するしかないのです。

この限られたエリアの中で要素を配置するためには、
要素を小さくするか削除する必要がありました。
そのアイデアのひとつとして、要素のアイコン化が
考えられました。
それでこの三本線のメニューが生まれたのです。

最近多くのサイトやアプリがハンバーガーメニューを使っていて
三本線はメニューという認識が浸透しているので
UIとしては正解だと思います。

ハンバーガーメニューの
長所と短所を挙げてみましょう。

長所

  • コンテンツの表示エリアを大きく獲得できる。
  • ボタン自体は小さくでき、文字も必要ないので
    どんな画面デザインでも、あまり邪魔にならない。

短所

  • スマホを持ったばかりの人は、メニューだとわからず
    離脱してしまう可能性がある。
  • 下層コンテンツの入り口がメニューの中にあり2タップの
    操作が必要になるので、めんどくさいと思われてしまう。

ハンバーガーメニューは、リテラシーの高いユーザーであれば
他サイトからの経験でそれが何かを理解できますが、
何も知らない人が見れば「3つの横棒が並んでいる」だけです。

興味本位でタップされることはあると思いますが、肝心の
「メニューを使いたい」というユーザにタップされることは
ありません。
ひと目でメニューとわかるデザインでなければいけないです。

ちなみにリテラシーとは読み書き能力。
また、与えられた材料を理解し活用する能力という意味です。

解決策は考えれる限り以下の3つかと思います。

  • ハンバーガーメニューにラベルをつける。
  • ヘッダー・フッターにメニューを配置する。
  • コンテンツ内にメニューを配置する。

ハンバーガーメニューに文字をつける

先ほども言った通り「3つの横棒が並んでいる」だけなので、
このアイコンが何を示しているのかを補足するというものです。
ハンバーガーアイコンに「メニュー」「MENU」
という文字列を添えるだけです。

デザイン次第では文字だけにする、つまりハンバーガーの
アイコンがなくても成立します。

しかし欠点があり、タップしないと中身が見えません。
PCのように画面を広く使えれば、メニューの中身を表示させて
サイト構造を伝えられるのですが、これがこの案の限界ですね。

ヘッダー・フッターにメニューを配置する。

この解決策は、さっきの文字を添える案の欠点だった
「タップしないと中身が見えない」も解消しているので、
ひとめでメニューとわかり、かつサイト構造を伝えられるので
メニューの目的を果たす意味では一番最適かと思います。

ただし、こちらの案にも「メニューが多い場合配置できない」
という欠点があります。もともとメニューの数は多すぎてもNGで、
人間が一瞬で視認できる数である、7±2個にすべきなので
多くても9個ほどかと思いますが、スマホの場合、
表示できても5個くらいかと思います。

コンテンツ内にメニューを配置する。

トップページにメニューを配置する案です。
こちらは、トップページをサイトの入口としての役割に
特化させる考え方です。

しかしこちらも欠点があり、ファーストビューが
メニューだけになってしまいます。
また、トップページのコンテンツ部分に配置されるので、
下階層へ移り変わるとメニューがなくなってしまいます。

そのため、ユーザはどこか気になるページに移った後に別ページに
移動したい場合、メニューのあるトップページに戻ってから
サイトを回遊するという動きになります。
また、ハンバーガーメニューにおいて、文字の有無や
枠線の有無でクリック率の検証をしているサイトがあるので紹介します。

https://ferret-plus.com/2672

こちらの検証結果を見る限り、3つの横棒に文字と枠線を
つけたものが一番クリックされるようです。

まとめ

安易にどんなサイトでも使うのではなく、
ユーザーがサイトを利用した時にどれだけ親切な
構造であるかが一番大事な事です。担当するサービスの目的、
ターゲットユーザのUXをしっかり考え、
最適なグローバルナビゲーションを
導き出していただければと思います。

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

おすすめ情報

2016年11月6日

Webサイトのレイアウト

layout-of-website

Webデザインをしていく上で、
最初に考えなくてはいけないのは
レイアウト(配置)です。
ワイヤーフレームと呼ばれる
Webサイトの設計図面段階で
大まかなレイアウトは
決まってくるかと思います。
このレイアウトで
サイト全体の印象が変わってきてしまうので、
Webサイトの目的に合わせて
レイアウトを考えていく必要があります。
今回は最近のトレンドも交えて
各目的にオススメなレイアウトを
紹介していきたいと思います。

プロモーションサイト・キャンペーンサイト

商品やサービスの認知度を向上させたい!という
プロモーションのためのWebサイトでは、
サービス・商品の名前や特徴などを
インパクトづけるデザイン・レイアウトが必要です。
具体的には1カラムのレイアウトが
当てはまります。
最近の主流では
ビジュアルに特徴をもたせるため、
画面いっぱいに写真や動画をおくような
デザインが多くなっています。
こういったデザインの場合は
情報が多すぎるとインパクトが
弱くなってしまうので、
できるだけテキストはシンプルに、
伝えたいことを最小限に
まとめていく方がより効果的です。
また、最近ではこういったデザインに
プラスして、
パララックスや動画を入れ込んで
動的効果を適用しているものも
多くなっています。
デメリットとしては、
他のページへの誘導がしにくいため、
直帰率が上がりやすいことですが、
メインコンテンツに集中してもらえるためアピールポイントが伝わりやすく、
ターゲットにアピールしやすいという点では
問い合わせや商品購入などのコンバージョンに
つながりやすいとされています。
回遊率を重視するサイトには向いていませんが、
コンバージョン重視のサイトには1カラムの強みが活きます。
また、画像や動画を多く使用していくと
サイト全体が重くなってしまうので
構築時、そういった点も工夫が必要となります。
他にも、
フルスクリーンで1コンテンツを表示するような
フルスクリーンレイアウトも
最近では多く見られるようになりました。
スクロールでコンテンツを切り替えるなど
動的に繊維させることで
ユーザーに新鮮な体験をさせることができます。

ECサイト・ニュースブログサイト

このようなサイトでは、コンテンツ・情報量が
多いため、見易さを重視して
2カラムが今までは
主流でしたが、最近では
よりデザインを重視した1カラムなども
多くなってきています。
2カラムのメリットとしては、
ユーザーが自分に必要な情報をより早く
メニューバーから見つけてもらうことではありますが、
その分メインコンテンツのインパクトが弱くなってしまうので、
ターゲット層や、企業のブランディングを重視して
レイアウトを考えた方が効果的かもしれません。
また、スマホ対応を考慮するなら、
2カラムのレイアウトは、そのままだと
スマホでは見にくくなってしまうので、
1カラムになるようレスポンシブ化していく必要があるので
1カラムと比べると構築面では
工夫が必要となります。

ランディングページ(LP)

ランディングページ(LP)は、
先に述べたプロモーションサイト・キャンペーンサイト同様
1カラムのビジュアルにインパクトを持たせたものが
主流です。
ただ、ランディングページ(LP)は、
ファーストビューがとても重要視されおり、
ファーストビューによりインパクトを持たせるために
テキストも多く置かれている場合が多いです。
こちらに関しては、よりキャッチコピーなども
重要となってきます。
また、ファーストビュー内に「お申し込み」や
「購入」の導線(ボタンなど)が置かれているものが
多く見られます。
ページ内にもいくつかそのような導線を
繰り返し置いたりすることも多いです。

来店客を増やす店舗サイト

こういったサイトの場合は、
写真を大きく見せてインパクトを
重視するレイアウトが好まれます。
コンテンツが多いサイトであれば
メインビジュアルを大きく持ってきて
コンテンツ部分は2カラムにするような
レイアウトや、
コンテンツが少ない場合は
1カラムのシングルレイアウトが
多く見られます。
いずれの場合も、
誘導先となる電話番号や
予約機能などが
目立つように配置されているのが
特徴です。

ブランディングサイト

ブランドイメージを向上させることが
目的のブランディングサイトでは、
メニューバーは極力小さく、
写真を大きく載せるものが
主流です。
トップページには
その商材やサービスを表す写真を
大きく起用し、
ビジュアル訴求をし、
メニューバーはあくまでも
サブ的な役割の場合がほとんどです。
Appleのサイトが
代表的ではありますが、
ユーザーの興味を惹くような
キャッチコピーを
写真と一緒に掲載するのが
とても効果的です。

コーポレートサイト

会社の情報を伝えるコーポレートサイトでは
店舗サイトと同様、
レイアウトというよりも
その企業のイメージとなるような
デザインが重視されます。
トップページの目立つ場所に
企業理念やサービス価値を配置し、
ユーザーが求めている情報を
わかりやすく伝えることが
重要となります。
こちらもコンテンツが多い場合は
2カラム、3カラムと
いうレイアウトが多く見られます。

メディアサイト、画像検索サイト

主に記事がコンテンツとなっており、
その数が多い場合には
ブロック状(タイル)のコンテンツを
縦横に積んでいくようなレイアウトが
好まれます。
ウィンドウサイズに合わせて、
横に並んでいるコンテンツの表示数を
変えることができるので、
幅広いサイズのデバイスに
対応することが可能です。
また、オートロードなどによって
無限スクロールで表示ができるので
スマホで見てもストレスなく
見続けられることが
メリットとしてあげられます。
ただ各コンテンツが
さらっと読みながされてしまうので
画像などで目を引かせるような
工夫が必要となってきます。

固定サイドバー、固定ヘッダー

サイドバーやヘッダーを動かないように
固定したレイアウトも
最近はよく見られるようになりました。
メインコンテンツはスクロールできますが
サイドバーやヘッダーは固定されているため
常に表示された状態になります。

固定サイドバー

固定サイドバーのレイアウトはいくつかあり、
最初から動かないように
固定したタイプ、
一定の箇所までスクロールすると
サイドバーが固定されるタイプ、
スクロールに合わせて
追尾するタイプがあります。
いずれも、サイドバーが常に表示されているので
他ページへの誘導がしやすく、
サイト内を見回ってもらえるメリットがあります。
デメリットとしては、
サイドバーの場合、画面の一部が常に固定されているので
その分コンテンツの表示部分が少なくなってしまい、
ユーザーに伝わる情報量が
少なくなってきてしまうことがあげられます。
情報量が多いサイトには
あまり向いていません。

固定ヘッダー

こちらもサイドバー同様、
最初からヘッダーが固定されているタイプ
スクロールした後に別のヘッダーが現れて
固定されるタイプなどがあります。
FacebookやtwitterなどのSNSでも
固定ヘッダーが使われています。
ナビゲーションがわかりやすく、
サイドバー同様に他ページへの誘導がしやすく
ページの途中でも別ページにいけるため
直帰率改善の効果が期待できます。
特に1カラムのシングルレイアウトで
長くなってしまた場合などは
固定ヘッダーがあるとユーザーも
便利に感じるでしょう。
ECサイトなどの場合でも
固定ヘッダー内に「購入」ボタンを
設置しておくことで、
購入ボタンを探す手間が省け、
購入意欲にすぐに応えることができます。
固定サイドバーと違って画面を圧迫しにくく、
コンテンツ量が減っているような
意識も感じにくいのがメリットです。
ただ、スマホの場合ですと
画面領域が極端に狭くなり、
ストレスを感じることがあるので、
できるだけ幅を小さくして
インパクトを与えないよう心がけるか、
メニューの場合にはトグルナビにして
追尾させるようにするなど
画面領域を小さくしない工夫が
必要となってきます。

いかがでしたでしょうか?
以上Webサイトのいろいろな
レイアウトパターンについて
ご紹介させていただきました。
デザインとのバランスを考えつつ、
ユーザビリティを考慮したレイアウトを
考えていくことが
大変重要となります。
そのサイトの目的に適したレイアウトを
選び、
よりコンテンツを活かせられるような
サイトを作っていけるといいですね。

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

おすすめ情報

2016年11月4日

新人教育にお困りの方へ

if-you-need-help-to-rookie-education

Bigmacも第二創世記を迎え、
部署も増え、社員やスタッフも増え、
人が人を教える時期が来ています。
人を雇えば否応無しにやってくる、新人教育。

今回は、学生から社会人への第一歩を歩む、
若い世代の新人教育に目を向けて、お伝えします。

5つの教育方法

新入教育には5つの方法があります。

社会人(Adult person)として育てる
仕事人(Business person)として育てる
職業人(Professional person)として育てる
組織人(Organization person)として育てる
人(Person)として育てる

社会人(Adult person)として育てる

社会人とは、社会を生き抜く力を持った人のことです。
必要となってくる知識・スキルとしては、
マナー、法律、時事問題、その他一般常識、
公私のバランス、生活習慣、お金の使い方、
人間関係、権利と義務のバランス、心身の健康、
自己啓発等があります。

仕事人(Business person)として育てる

仕事人とは、ビジネスで収益を上げる力を持った人のことです。
必要な知識・スキルとしては、
財務知識、業界知識、人脈、実績、論理的思考力、
交渉力、文章力、企画力、提案力、問題解決力、
段取り力、判断力、構想力、行動力等があります。

職業人(Professional person)として育てる

専門スキルで顧客に貢献する力を持った人のことです。
必要な知識・スキルは、専門分野によって異なります。

組織人(Organization person)として育てる

組織人とは、周囲と協働し、
組織で結果を出す力を持った人のことです。
必要な知識・スキルとしては、組織理解、規律遵守、
報連相、調整力、協調、役割分担、統率力、管理力、
信頼関係等があります。

人(Person)として育てる

所謂、人間力を持った人のことです。
人間力の定義は難しいですが、
感謝の気持ち、共感力、包容力、謙虚さ、信念、
責任感、ユーモア、好奇心、バイタリティー、
見識、自己変革等が必要になってきます。

どんな職種、どんな会社においても、
バランスは違えど、これら5つの能力が
きちんと備わった人員を育てる必要があります。

どの力も完璧でなくても構いませんが、
どれかが著しく欠如すると、
業務パフォーマンスを悪化させます。

例えば社会人として約束を守る。
遅刻や納期遅れは基本論外ですが、
1回遅れたぐらいでは社内での信用がたおち、
という事は少ないです。

その人が優れた職業人としての成果を上げられるのであれば、
時間に遅れた事実に目をつぶってもらえることもあります。

逆に職業人としてすばらしいスキルを持っていたとしても、
毎日出社時刻に5分遅れる、大幅な納期遅れが当たり前、
打ち合わせに毎回大幅に遅刻してくる、なんて論外です。
クビになってしまっても文句は言えません。

要はバランスが大切、ということですね。
逆の言い方をすれば、完璧でなくとも良いですが、
5つの力を満遍なく教育しなければなりません。

教育のシナリオ

最終的には全ての力が必要になりますが、
だからと言って、同時に教育していく必要はありません。
どの力から手をつけて、身に付けた力を、
どのように他の力に波及させていくか、
教育シナリオが大切になってきます。

筆者の新人時代に目を向けて

if-you-need-help-to-rookie-education-1
私が初めて入社し、
3年ほど勤めさせていただいたWeb製作会社では
社会人経験1年目の若輩者の筆者に対し、
実務を通してあらゆることを教えてくださいました。
重きが置かれていたのは、職業人として、だったと思います。

ただ、Web製作という専門分野に対応できるように
自然に身についていったのは、仕事人・組織人としての力。
私の場合社会人としての能力は、
そもそもある程度は身についてはいましたが、
より定着したと思います。

ここは社会人経験を重ねた人からは軽視されがちですが、
一般的な高卒・専門・大卒などの新人は、
こなしてきたのは仕事と言ってもバイト程度。
社員としてのマナーは身についていないと思った方がいいです。

ちょくちょく寝坊で5分遅刻する、
挨拶がなっていない、
プライベートがはっちゃけすぎて仕事に支障をきたす、
など、社会人としての基礎が全くなっていない新人もざらにいます。

仕事人・組織人としての能力は、否応無しにみにつきました。
やはり新人の頃はなかなか報連相が怠り気味だったり、
自分のスケジュール管理が甘かったりしたので、
教育者の方がつどつど指摘してくださったりして、
業務に支障が出ないようにしてくださりました。

社内でのメールなどの連絡のやり取りの中で、
仕事人としての基礎もだいぶ培われていましたし、
2〜3ヶ月のうちには、ある程度の段取り力や判断力、
伝達力、スケジュール管理能力などの
組織人としての力も自然と養われていました。
感謝してもしきれません。

職業人としての力は、教えもそうですが、
足りないスキルに対し、自分から貪欲に知識を求め、
探り、吸収していくことで身についていきました。

時には先輩社員の成果物を盗み見て、
圧倒的クオリティや成果をあげるまでの道筋を学んだり、
わからないことは答えが見つかるまでネットで調べたり、
どうすれば自分にもその力をつけられるか、
日々悩みつつ、試行錯誤を繰り返していました。
気づけば、新人の時よりも格段に高品質なものを、
短時間で生み出せるようになっていました。

さて、そうなると人としての能力は
どこで培われるのでしょう?

これについては、会社に勤めている過程で
上司や先輩へのご恩に対し、感謝の気持ちを表したり、
ある程度業務をこなせるようになってくると、
小さめの仕事から任せられたりしてくるので、
それに対する責任感であったり、
定期的な飲み会の場でのいつもとは違った
雰囲気でかわすやわらかな会話の中であったり、
あらゆるシーンで人としての能力は身についていきました。

よって、職業人としての力を主力で教わっていく中で、
その他社会人・仕事人・組織人・人としての計5つの力を
満遍なく教わる形になったのだと思います。

教育の循環

5つの力は独立しているのではなく、
どれも密接に関係し合っており、1つの力を伸ばしていけば、
他の力も必然的に伸びてきます。

このように、新人というのは
根気強く育てていく必要がありますが、
新人で通用するのはせいぜい1年までです。
それ以降は否応無しに「できて当然」と
社内全体が思います。
1年経ってもさっぱり使い物にならなくても、
周りはがカバーしてくれたりするかもしれませんが、
おそらくその状態が3年も続けば、
左遷、降格、悪くすればクビでしょう。

筆者の場合も、2年にかかるか、という頃からでしょうか。
その頃から、新人教育を任されるようになっていました。

つまり、教育者はずっと教育者ではなく、
新人もずっと新人ではありません。ありえません。

教育者から教わったことを新人だった社員は
次の新人に教え、その新人もまた成長し、
また次の新人に教え…と、教育は循環していくのです。

if-you-need-help-to-rookie-education-2
このフローを確固たるものにできるかどうかで、
会社の成長スピードは大きく変わります。
かつ、社長や経営陣は会社を離れ、もっと金額の大きい、
会社の成長に繋がる仕事をとってきたり、
製作の教育者であればその分業務を任せられる、
信頼のおける社員が育っていることになり、
よりディレクション業務や高品質な成果物に
時間を割いたりできるわけです。

新人に「任せる」

さて、新人教育で最初に問題となるのは、
業務品質についてです。

OJT(On-the-Job Training、
オン・ザ・ジョブ・トレーニング)とは、
職場の上司や先輩が、部下や後輩に対し
具体的な仕事を与えて、その仕事を通して、
仕事に必要な知識・技術・技能・態度などを
意図的・計画的・継続的に教育し、
修得させることによって全体的な業務処理能力や
力量を育成する活動である。

「このレベルの新人に、
このクライアントの仕事を任せていいのだろうか…」
こういった悩みに、教育者の方は何度となく
ぶつかってきたはずです。

OJTと言えば、聞こえは良いですが、
レベルが低い新人に仕事を任せると、
お客様に迷惑がかかることになります。

お客様とのやりとりや品質を落とせない仕事を振り分けて
教育機会として活用することは、
会社としては、好ましいことありません。

一方、管理職や教育係が真面目であればあるほど、
業務品質を問題視してしまう傾向にあります。

いわゆる筆者もそのタイプですが、
結局品質を落とせないから自分がやろう、
では、新人の学習機会が減ることになってしまいます。

どうしても新人教育でしばしば陥るジレンマですが、
結論としては思い切ってOJTを行うしかないと思います。

製作業務で言うなれば、クライアント業務ではない
製作物や教育者の製作物のテイストを真似た模倣などは
あくまで「練習」にすぎず、
「本番」は初期の製作実務や営業であれば社外で行われます。
「本番」であるお客様とのやりとりのほうが、
気づきのインパクトが格段に大きくなります。
練習だけでは人は育ちません。

弊社では、ベンチャーということもあり
即時「本番」にぶち込まれますが、
筆者個人としては、より早い成長スピードを期待でき
新人には逆境であると言え、
素晴らしい環境であると思っています。

上司が新人を解き放つことをためらい、
社内での練習に終始していてはいけません。
気づいた頃には「がんばらない社員」が
出来上がっていることでしょう。

上司がやるべきは、適度な練習と、
本番で失敗したときに、それが会社にとって
致命的な失敗にならないよう、
いつでもフォローできる準備をしておくことです。

教育者・教育者・幹部は新人教育の現場に
今一度目を向け、失敗は失敗として受けいれ、
教育の循環フローを作り、時にはフォローできるよう、
気を配っていきましょう。

最後に

新人教育でお困りの方、
少しはご参考になりましたでしょうか。
新人の成長は、会社の成長、
ひいては自分の成長にも繋がります。

現在新人の方がもしお読みでしたら、
少し耳に痛い記事だったかもしれませんね。
筆者もまだまだ完璧な教育者とは言えませんが、
現在新人の方もいつかは教える立場になる時がきます。

社会人、厳しいこともたくさんあるかと思いますが、
へこたれず、1日も早く「新人」を卒業できるよう、
頑張ってくださいね。

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

おすすめ情報

2016年10月30日

色の置き方を考えてみよう

consider-the-placement-of-colors

ホームページを見ていると、
この配色綺麗だなと思うことはありませんか。
色によって、
デザインの第一印象を左右されることは多いです。
私自身も思っていた雰囲気と違うと、
行き詰ることもありました。
ですが、ちょっとしたコツがあれば
配色に悩むことは少なくなります。
今回は配色について書いていきたいと思います。

色相環

「赤→橙→黄→緑→青→藍→紫→赤紫→赤」と
円状に並べたものが色相環と呼ばれます。
一度は授業などできいたこと、
見たことがあるのではないでしょうか。
この色相環を使い、色を選んでいきます。
とても簡単なルールなので
初心者のかたもすぐ覚えられると思います。

配色について

補色色相

色相環上で向かい合う色です。
例えば、青と橙などあります。
純色のまま使うと
目に痛いきつい色合いになりますが、
トーンに変化をつけることにより、
対立が和らぎます。
また、ダイアード配色とも呼ばれます。

類似色相配色

色相環上で隣ある3色を使います。
例えば、青、青紫、紫といった組み合わせです。
バランスのとりやすい色合いですが、
色相の幅が狭く、
単調となってしまうため、
トーンで変化をつけることにより、
色にメリハリがつきます。
類似色相配色で、
黄に近い色を明るく、
青紫に近い色を暗くすると、
花や海などの自然の色の並びに近く、
調和して見える配色になります。
このような色の調和を
「ナチュラルハーモニー」と言います。
また逆に、黄に近い色を暗く、
青紫に近い色を明るくすると、
「コンプレックスハーモニー」と呼ばれます。
慣れ親しんでいない色合いのため、
目新しい配色となります。

3色配色

色相環上で等間隔の位置にある3色のことです。
例えば、赤、黄、青です。
色相環上を正三角形にとるので、
バランス感のある配色になります。
また、トライアドとも呼ばれます。

分裂補色配色

3つの色を使います。
1つの色の補色の隣り合う色が使われます。
例えば、青なら黄と橙です。
初心者が使いやすい組み合わせとなります。
また、スプリットコンプリメンタリートも呼ばれます。

4色配色

二重補色色相配色とも呼ばれ、
補色色相配色にあたる2色の組み合わせを
2つ使い、4つの色を使います。
例えば、青と橙、
赤と緑の4色を組み合わせたものです。
もっとも難しい組み合わせといわれています。
また、テトラードとも呼ばれます。

5色配色

色相環上を5等分し、
正五角形の頂点、5色の配色のことです。
全体を満遍なく使うことにより、
バランスをとりつつも元気で明るい雰囲気の
色合いとなります。
3色配色に白と黒を足したものも
5色配色と呼ばれます。
また、ペンタードとも呼ばれます。

6色配色

色相環上を6等分し、
正六角形の頂点6、色の配色です。
5色配色より1色多くなったので
更にカラフルになり
賑やかな雰囲気の色合いとなります。
こちらも4色配色に白と黒を足したものも
6色配色と呼ばれます。
また、ヘクサードとも呼ばれます。

頭の中に色相環があれば、
この色の場合は…とすぐ思いつくはずです。

やっぱり難しい…

思いついても、いくつもの色を
組み合わせることは難しいと思います。
そのような時は、
無料の配色ツールを使ってみるのも手かもしれません。

Coolors
https://coolors.co/
スペースキーを押すと、
自動的に5色配色をしてくれるサイトです。
作られた色をロックすることや
調整することも可能なので、
自分の理想の配色を見つけることができます。
スペースキーをポンポンと押すだけでも楽しいです。

LOL Colors
http://www.lolcolors.com/
4色で構成された配色パターンを集めたサイトです。
それぞれのカラーコードも確認することができます。
また、いいねをつけることもでき、
人気順に並べ替えることもできます。
4色の配色で悩んだ際には
ぜひ活用してみてはいかがでしょうか。

NIPPON COLORS
http://nipponcolors.com/
日本の伝統色を知ることができるサイトです。
伝統色を一目でわかるだけでなく、
サイト自体もとても素敵なので
見ているだけでもとても楽しく勉強ができます。
カラーコードも確認することができ、
マンセルカラーシステムも
立体的に表示され確認することができます。

まだまだ他にも無料の配色ツールがあります。
是非色々探して、
自分にあったサイトを見つけてみてください。

まとめ

いかがでしょうか?
色の配色はコツさえわかれば、
とても楽しい作業だと思います。
デザインはもちろん、
身近なファッションやインテリアにも
活かすことができるのではないでしょうか。
それだけでなく、
色によって気分や状況を表したりします。
人の気分さえ変えてしまうので
不思議なものだなと思います。
また、目の錯覚で感触は引っ込んで見えたり、
重さの感じ方が変わったりと、
色によって日常生活にも影響されているのだなと
改めて色の大切さが分かりました。
私自身まだまだ配色に関して
足りない部分があるので、
この記事を機会にもう一度勉強したいと思います。
様々なサイトを巡り、
あっ、この配色綺麗だなと思ったら是非、
よくよく観察して、参考にしてみてください。

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

おすすめ情報

2016年10月7日

Illustratorを効率よく使おう!

lets-use-illustrator-efficiently

Bigmacでは、Webデザインでは主にPhotoshopを
使用していますが、ここ最近印刷物やロゴの制作なども多く、
Illustratorを使用することが多かったので、
Illustratorの基本的なことから
効率良くIllustratorを使う方法まで
初心者向けにまとめていきたいと思います。

Illustratorとは?

IllustratorとPhotoshopの違いの記事でも書かれていますが、
Illustratorとは、アドビシステムズが提供している
イラスト制作や印刷物(DTP)制作をメインとした
有料のデザイン制作ソフトのことです。

また、
Illustratorでは以下のようなことができます。

・印刷物(DTP)制作
・ロゴデータ制作
・イラスト制作
・Web制作(デザイン制作)

Photoshopでは点の集合体で画像を表現するのに対し、
llustratorはベクター画像と呼ばれる、
点座標や線の方程式で画像を表現しています。
そのため、拡大・縮小しても画像が荒れることがないので、
ロゴデータやイラストデータを制作するのに適しています。

余談ではありますが、IllustratorやPhotoshop、
名称が長いので、
「イラレ」や「フォトショ」と呼ばれております。

Illustrator使用時確認したい設定

では、Illustratorを使用する際に、
最初にやっておくといい設定などを
挙げたいと思います。
Webなのか印刷物なのかで
設定が変わってきますので注意しましょう!

環境設定

[編集]→[環境設定]で
様々な設定をしていきます。

単位の設定

[編集]→[環境設定]→[単位]

印刷物では用紙サイズなどミリメートルを使うことが多いです。
比べてWebではピクセルを使用するので
以下のように設定しましょう。

Web:全てピクセル
印刷物(DTP):一般、東アジア言語のオプションはミリメートルに、
線や文字はポイント

一般の設定

[編集]→[環境設定]→[一般]

キー入力
Web:1px
印刷物(DTP):0.1mm

ガイド・グリッドの設定(任意)

[編集]→[環境設定]→[ガイド・グリッド]

こちらはガイド機能やグリッド機能を使用するのであれば
設定しておくといい項目となります。

Web:グリッドの項目の単位をpxに。
グリッド・分割数の数値は任意で問題ありません。
ピクセルグリッドを表示にもチェックしておくと便利かも!
印刷物(DTP):単位がmmになっていれば問題ありません。

ワークスペースの設定

IllustratorやPhotoshopには
ワークスペースという機能があります。
これは、あらかじめ想定されるような作業
(Web、トレース、レイアウトなど)をするにあたり
操作しやすいようにパネルやツールの
表示・並びを切り替えてくれる機能です。
特にWebの場合は、
ワークスペースをWebにして
作業を進めていくといいでしょう。
こちらを元に自分の使いやすいように
パネルを配置・表示していって、
オリジナルのものを保存することも
できるので、ぜひぜひ活用してみてください!

新規ドキュメントを作成する際の設定

制作を開始する際に、まずは新しくドキュメントを作成しますが、
その際に確認しておきたい点があります。

カラーモードの設定

Web:RGB
印刷物(DTP):CMYK

RGBとCMYKに関しては、
こちらの記事で詳しく書かれています。
RGBとCMYKの違いとは?

ラスタライズ効果

Web:スクリーン(72ppi)
印刷物(DTP):高解像度(300ppi)

プレビューモード

Web:ピクセル
印刷物(DTP):デフォルト

以上で各種設定は終了です。
制作前にこのような設定を
しっかり行っていくことで、
効率よく作業を進めることができたり、
入稿時のミスを防ぐことができたりするので
ぜひ参考にしてみてください。

Illustratorのショートカットキー

Illustratorを使用する際、
ショートカットキーを覚えておくと
格段に作業効率があがります。
覚えるのは難しいかもしれませんが、
使っていくうちに自然と覚えていきますので
なるべくショートカットキーを使って
作業していくといいでしょう。

以下様々なショートカットキーを
Windowsを基準に紹介させていただきますが、
Macの場合ほとんどがWindowsのCtrlキーを
Commandキーに変えていただければ
大丈夫です!

画面表示

スペースキー:手のひらツール
スペースキー + Ctrl:拡大ツール
スペースキー + Ctrl + Alt:縮小ツール
Ctrl + +:画面中心に向かって拡大
Ctrl + −:画面中心に向かって縮小
Ctrl + 1:100%表示
Ctrl + 0:アートボード表示
Alt + Shift + Ctrl + Y:オーバープリントビュー
Alt + Ctrl + Y:ピクセルプレビュー
Ctrl + Y:アウトライン・プレビュー表示の切り替え
Ctrl + ¥ : グリッドの表示・非行事切り替え
Ctrl + U : スマートガイドの表示・非表示
Ctrl + R : 定規の表示・非行事
Tab : ツールバー・パレットの表示・非表示切り替え
Ctrl + 5 : ガイドを作成
Ctrl + : : ガイドを表示/非表示

ツール切り替え

V : 選択ツール
A : ダイレクト選択ツール
P : ペンツール
Enter : ペンツールの描画を終了
Shift  +   + : アンカーポイントの追加ツール
– : アンカーポイントの削除ツール
Shift + C : アンカーポイントの切り替えツール
T : テキストツール
¥ : 直線ツール
M : 長方形ツール
L : 楕円形ツール
B : ブラシツール
N : 鉛筆ツール
U : メッシュツール
Shift + E : 消しゴムツール
R : 回転ツール
Shift + R : ワープツール
C : はさみツール
G : グラデーションツール
W : ブレンドツール
I : スポイトツール
Shift + O : アートボードツール(CS3から)
Q : なげなわツール
P : ペンツール
E : 自由変形ツール
O : リフレクトツール
S : 拡大・縮小ツール
K : ライブペイントツール
Z : ズームツール
Shift + K : スライスツール

図形描画

スペースキー + ドラッグ : 描画位置の変更(図形描画中のみ)
Alt + ドラッグ : 中心位置から描画(長方形・角丸・楕円形・多角形ツールのみ)
ドラッグ中 ↑ または ↓ : 角丸の調整・角の増減(角丸・多角形・スターツールのみ)

配色

F6 : カラーパネルの表示
Shift + X : 塗りと線を入れ替え
/ : 塗りまたは線をなしにする

レイヤー

F7: レイヤーパネルの表示
Ctrl + L : 新規レイヤー作成

オブジェクト・配置

Enter: 移動(オブジェクト選択時のみ)
Ctrl + D : 直前の変形を繰り返し
Ctrl + Z : 前の処理を取り消す
Ctrl + Shift+Z : 取り消した処理をやり直す
Shift + Ctrl + M : 移動
Alt + Shift + Ctrl + D : 個別に変形
Ctrl + J : パスの連結(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + Alt + J : パスの平均(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + 7 : クリッピングマスクの作成
Ctrl + Alt + 7 : クリッピングマスクの解除
Ctrl + ] : オブジェクトを前面に
Ctrl + [ : オブジェクトを背面に
Ctrl + Shift + ] : オブジェクトを最前面に
Ctrl + Shift + [ : オブジェクトを最背面に
Ctrl + C : コピー
Ctrl + F : 前面(Front)へペースト
Ctrl + B : 背面(Back)へペースト
Ctrl + Shift + V : 同じ位置へペースト
Ctrl + G : グループ化
Ctrl + Shift + G : グループ解除
Ctrl + 2 : 選択項目をロック
Ctrl + 5 : 選択項目をガイドに設定

文字

Ctrl + T : 文字パネル表示

カーソルを文字間に置いて
Alt + ← または → : カーニング20/1000em動かす

文字列を選択して
Alt + ← または → : トラッキング20/1000em動かす

文字を選択して
Ctrl + Shift + > : 文字を2pt大きくする
Ctrl + Shift + < : 文字を2pt小さくする
Alt + Shift + ↓ : ベースラインを2pt下げる
Alt + Shift + ↑ : ベースラインを2pt上げる

段落を選択して
Alt + ↑ : 行間を2pt減らす(横書きのみ)
Alt + ↓ : 行間を2pt増やす(横書きのみ)

以上、主に使用するものを挙げましたが
他にも様々なショートカットキーがあります。
また、カスタマイズでショートカットキーを
登録することもできるので
効率よく作業ができるように
一度見直してみてください。

イラレがおもーいとき・・・

Illustratorを使って作業をしていると、
はじめはさくさく動いていたはずなのに、
だんだんと動きが遅くなってきて
作業がなかなか進まない・・・・!
という事態によく陥ります。
そんなとき、少しでも動作を軽くするための
方法をご紹介させていただきます。

リンクされたEPSに低解像度の表示画像を使用

Illustratorで画像を配置する際、
多くの場合はepsに変換したものを使用するかと思います。
このepsをプレビューの際に低解像度で表示するという設定です。

[編集]→[環境設定]→[ファイルの管理・クリップボード]
こちらで
「リンクされたEPSに低解像度の表示用画像を使用」に
チェックを入れましょう。

フォントプレビューをオフ

[編集]→[環境設定]→[テキスト]
こちらで
「フォントプレビュー」のチェックをはずします。

使用する画像ファイルをできるだけ実寸サイズに

illustratorで画像ファイルを配置して使う場合、
配置する画像ファイルを実際に使用する実寸サイズ(100%)に
しておいたほうがパフォーマンスが良いです。
当初の予定していたサイズより後からも大きいサイズで使用したかったり、
画像をトリミング拡大して使いたいケースもあったりするので、
ちょっとだけ余裕を持たせて、使用予定の実寸サイズよりも
少し大きめの画像サイズ(110%~120%)にすると
いいと思います。

これだけでもだいぶ改善はされるかと思いますが、
それでも多く画像を配置していたりすると
限界があります・・・・
そんなときはCtrl + Yでアウトライン表示で
作業をすると、
文字の入力などはスムーズになります。
また最近は画像を配置するのを
ある程度形が出来上がってからにしたりしています。
動作が遅くなるだけで
作業効率がぐっと下がってしまうので、
気をつけて作業していきたいですね。

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