ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

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

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

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

デザイン

おすすめ情報

2017年2月25日

トレンドカラーの決め方

how-to-decide-trend-color

よくテレビなどで
「今年のトレンドカラーは…」
と耳にすることも多いのではないでしょうか。
大体の方は
「今年はこの色が流行るのか」
などと、特に思うこともなく聞き流しているはずです。
しかし、ここで疑問を感じる人がいるのではないでしょうか。
毎年変わるトレンドカラーを
いったい誰が決めているのでしょうか?
今回はトレンドカラーの決まり方と、
今年のトレンドカラーについて記事を書いていきたいと思います。


トレンドカラーとは?

「トレンドカラー」つまり流行色のことです。
流行色は、ある一定の期間に
集中して流行る色相や色調のことを指します。
よくファッション雑誌で
トレンドカラーをファッションの流行色として
取り入れられていたり、
webサイトのデザインで取り入れられていたりします。

春夏、秋冬と2回に分けて発表されています。
また、今年のトレンドカラーとして
発表されていたりもします。

実は2年前から決まっている!

毎年変わるトレンドカラーですが、
国際流行色委員会(インターカラー)という国際組織により、
実は2年前から決まっています。

国際流行色委員会とは

国際流行色委員会は
インターカラーとも呼ばれている、
非営利の色彩情報団体のことです。
各国1団体ずつから構成されており、
ファッションを用いる流行色を選定しています。
加盟国は、アメリカ、イギリス、イタリア、韓国、
スイス、スペイン、タイ、中国、デンマーク、ドイツ、
トルコ、日本、ハンガリー、フィンランド、
フランス、ポルトガル(2016年12月)となっています。
日本、フランス、スイスは発起国となっており、
1963年に発足しました。
加盟各国が提案色を持ち寄り、
6月に春夏カラー、
12月に秋冬カラーを決めています。
2年前に決めているので、
どこよりも早く情報が決まり、
ファッション流行色情報の中心となります。
そして、その話し合いを持ち帰り、
日本の代表団体である「日本流行色協会(JAFCA)」が
シーズンの約1年半前に
国内市場向けに方向性や素材など話し合われ、
正式にトレンドカラーが決定します。
その後、ファッション情報として
消費者に商品として伝達され、
トレンドカラーが流行します。
トレンドカラーを早く決めることにより、
メーカーなどファッション業界に
選定色を反映させることができます。
つまり、トレンドカラーを浸透させるには
約2年間を要することがわかりますね。

パントン社のトレンドカラー

インターンカラーの他にも、
世界で使用されている色見本帳の一つである、
パントンのパントンカラー・研究所からも
トレンドカラーは発表されています。
パントンといえば、デザイナーの方なら
誰しも1度は聞いたことがあると思います。
グラフィックデザインや、
印刷などに、色を指定する際に使われています。
毎年12月に「カラー・オブ・ザ・イヤー」として
主にデザインなどに携わる人に向けて発信されています。

今年のトレンドカラー

パントン・カラー研究所から
2017年のトレンドカラーは、安らぎと再生の緑である
「グリーナリー(Greenery)」
となりました。
春を思わせるような、鮮やかで、
目に優しい、黄緑色です。
身近なものだと、
抹茶を彷彿させそうです。
パントン社が
「自然の結びつき」「新たな始まり」
という意味を込めて、選定したそうです。
安らぎとあるだけあって、
見ているだけでほっとするような色合いですね。
日本流行色協会からは、
テーマカラーといい、
その年を象徴する色合いが発表されています。
トレンドカラーとは違い、
これから流行する、流行した色であり、
少し外れてしまいますが、ご紹介したいと思います。
2017年を象徴するカラーは
「リーディングレッド(Leading Red)」
が選ばれました。
選定理由として
「決断、エネルギー」「人間らしさ」「日本」
の3つのキーワードが挙げられています。
リーディングレッドというだけだあり、
明るくすっきりとした赤色です。


春夏のトレンドカラー

同じくパントン社から
ナイアガラ
ラピス・ブルー
アイランド・パラダイス
グリーナリー
ケール
ヘーゼルナッツ
プリムローズ・イエロー
フレイム
ペール・ドッグウッド
ピンク・ヤロー
が選ばれました。
今年のトレンドカラーである、
グリーナリーも入っていますね。

自然を彷彿させるような色合いが
多い印象を持ちました。
日本流行色協会からは全体的に
グレーがかった色合いから、
大体なビビッド色を使った
組み合わせが多い印象を受けました。

そこにもトレンドカラーである
グリーンが使われています。
2017年のトレンドカラーである
グリーンが流行することが分かりますね。

まとめ

いかがでしたでしょうか。
個人的に、グリーンが大好きなので、
トレンドカラーに選ばれていて、
とても嬉しく思います。
周りにたくさん取り入れたいと思います。
そして流行色はたまたまはやるというわけでなく、
2年前からじっくりと世界各国で話し合い、
戦略を立てて、計画されて流行していることが分かりました。
私はこの話を学生の時に聞きました。
それまでは、
たまたま流行っているのだろうと思っていたので、
初めて聞いた際には、
人の手で操作され流行っているのは、
とても面白いなと感じました。

確かに2年くらい前でないと、
流行にメーカーなどが追いつかないですよね。
いちはやくトレンドカラーを知る方法としては、
展示会に足を運んでみるのも手です。
その色にも合わせやすそうなグリーナリーですが、
組み合わせに悩んだ時は、
パントン社のHPに組み合わせに適した色合いの画像が
掲載されているので、
そちらもチェックしてみてはいかがでしょうか。
2017年のトレンドカラーである、
グリーンをファションやデザインに
是非取り入れてみてください。

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

おすすめ情報

2017年2月3日

Web制作者向け便利ツールをご紹介!

introduction-of-useful-tools-for-web-makers

Web制作者のみなさま、いつもの制作作業の中で
「あとちょっとこの作業を効率的にできたら、
もっと早く仕事がこなせるのに・・」というような悩み、
一度は思ったこと、ありますよね?

そんなあなたに、いくつかの便利ツールをご紹介します!

おすすめのブックマークレット

まずはおすすめしたいブックマークレットを
いくつかピックアップ。

ブックマークレットとは、通常、
ブラウザでお気に入り(ブックマーク)を選ぶと
指定のホームページに飛びますが、
登録URLの代わりにJavaScriptで構成されたプログラムを
ブックマークすることで、それを選んだ時に指定のプログラムが
そのページで実行され、早く、簡単に機能が実現できるのです。
そういったものをブックマークレットと言います。
インストールもお手軽で、そのコードをブックマークするだけで
行えるんですよ。

画像のalt属性を一発で確認出来るブックマークレット

画像を入れて、altが入っているか、最終チェックが必要ですよね。
そんな時に便利なのが、こちらのブックマークレット。
例えばYahooのトップのaltを確認しようとすると、
このような表示になります。

少し画面が崩れますが、画像のalt属性を全て検証モードで
確認するよりは手軽に確認ができますね。

useful-tools-02

▼alt属性を確認するブックマークレット。|trustworks

http://www.trustworks.biz/blog/2008/04/alt.html

HTMLタグの閉じ忘れを教えてくれるブックマークレット

閉じタグ忘れ、よくありませんか?
このブックマークレットは、
閉じタグが多かったり少なかったりするのを教えてくれます。

急なページの崩れが起こったら、
まずこちらで確認してみましょう。

HTMLタグの閉じ忘れを教えてくれるブックマークレット

▼HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー
http://tockri.blog78.fc2.com/blog-entry-168.html

フォントの名前を知らせてくれるブックマークレット

このサイト、なんのフォント使われてるんだろう?
と気になった方はこちら!

検証モードでcssを探さなくても、その場所が
なんのWebフォントが使われているか教えてくれます。

フォントの名前を知らせてくれるブックマークレット

▼WHATFONT TOOL|Chengyin Liu
http://www.chengyinliu.com/whatfont.html

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

クロームなどは特に拡張機能でも同じようなものがありますが、
よりデザイン的で、より視覚的で見やすいですね。

デザインも整っているので、
レスポンシブが楽しくなりそうです。

ただし、こちらのブックマークレットは
ブラウザ幅を取得し、viewport(ビューポート)で
デバイスサイズ別に表示させているサイトでのみご使用頂けます。

アクセス時にパソコンかスマートフォンかを
取得して振り分けているサイトにはお使いいただけませんので、
お気をつけて。

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

▼VIEWPORT RESIZER|maltewassermann
http://lab.maltewassermann.com/viewport-resizer/

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

画像や要素の幅・高さを、いつも検証モードで
調べているのですが、
パッと確認したい時にはオススメです。

背景画像のサイズ取得までできれば最高なのですが、
背景の時はブロック要素のプロパティを取得してしまうようなので
そこはまだ検証モードが必要そうですね・・。

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://www.westciv.com/xray/

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

titleやdescriptionなどのMETA情報をはじめ、
サムネイルなど、ページの基本情報を見ることが出来ます。

こちらで個人的に一番オススメなのは、
短縮URLを表示できることですね。

長いページの短縮URL発行に
いちいちGoogleのサービスページまで飛ばないのは
結構便利な気がします。

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://geturlinfo.com/

おすすめのChrome拡張機能

最近だと、標準ブラウザに動作の早い
Google Chromeをお使いの方も多いのではないでしょうか?

Chromeにはたくさんの便利な拡張機能があります。
拡張機能のインストール自体はとても簡単で、
chromeウェブストアから、欲しい拡張機能を選択するだけ。
クリックしてインストールすれば、もう使うことができます。

さてここからは、いつもの業務がちょっと早くなる、
おすすめChrome拡張機能をご紹介します。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

htmlページにファーストデザインなどの画像を
うっすらとしたレイヤーで乗せることができる
Chrome拡張機能です。

レイヤーの透明度を変更する箇所や、
矢印キーで細かな位置調整ができる箇所もあるので、
PSDが分かれていたりしても
パーツごとに重ねてチェックもできますね。

デザイン通りにコーディングされているかのチェック以外にも
ブラウザ上で画像を横に置いて比較したい時にも便利です。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

▼PerfectPixel by WellDoneCode|Chrome拡張機能
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

増えすぎたブラウザタブを整理させるChrome拡張機能

個人的な意見ですが、この拡張機能、だいぶ画期的です。

よく調べ物をしていると、ブラウザにタブが増えすぎますよね?

私もよくなります。。
こんな感じになってよく迷子になりますが、
下手にタブを消すと、せっかくの参考サイトが
URLわからなくなったりするので
迷子の中探し回ることがしょっちゅうです。
(都度閉じればいいんですけどね)

この拡張機能があれば、 OneTabのメニューを押すだけで、
1 つのタブにサイトのタイトルとURLを
一覧で見やすく表示してくれるのです!

いつもタブ迷子になっている方、
ぜひこの拡張機能をインストールしてみてください。

増えすぎたブラウザタブを整理させるChrome拡張機能

▼OneTab|Chrome拡張機能
https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

1クリックでキャッシュをクリアできるChrome拡張機能

構築中のサイトのキャッシュがきつくて、
画像やcssを差し替えるたびに
キャッシュをクリアしなくてはいけない・・

もしくは、軽微なサイト修正があり、
差し替えたはずのバナー画像が切り替わらない・・

そんな経験、誰しもありますよね?
画像のURLを変えるのがベストですが、
ちょっと修正したいだけなのに!
というときも根強いキャッシュ。

そんなときにはこの拡張機能がおすすめ!

最近Chromeのキャッシュクリアが
設定から2、3クッションおかないとクリアできなくなって、
非常に面倒だと感じていた私には、
これまたかなり便利な拡張機能。

一瞬ボタンを押すと、
アイコンが緑にふわっと切り替わるのですが、
無駄な数秒をコンマ数秒に省けて大変重宝しています。

毎度毎度のキャッシュクリアに辟易しているあなたは、
ぜひこちらのChrome拡張を使ってみてください。

1クリックでキャッシュをクリアできるChrome拡張機能

▼Clear Cache|Chrome拡張機能
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn/related

まとめ

いかがでしたか?

これらの便利ツールで、毎日の制作が少しでも早くなり、
ストレスフリーな制作に近づけられるといいですね。

ぜひお試しください。

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

おすすめ情報

2017年1月31日

見た目以上のフラットデザイン〜メリットとデメリット〜

flat-design-merit-and-disadvantage-beyond-appearance

皆さんフラットデザインという言葉は知っていますか?
少し前から、Webサイトなどでトレンドになっています。

いつの間にか色んなサイトがフラットデザインになっていたり、
OSやインターフェイスで使用されていたりと
見かけることも多いと思います。
手元にあるスマートフォンに表示されるアプリのアイコンも
フラットな物が多いはずです。

今、人気のデザインと思われることも多い
フラットデザインですが、実は見た目以上に意味があります。
今回はフラットデザインについて記事を
書いていきたいと思います。

フラットデザインとは

フラットデザインとは2012年頃から広まった、
webデザインのスタイルのことです。
では、フラットデザインとはどのようなものを指すのでしょうか?
代表的な物はWindows8から採用されたインターフェイスの
「メトロUI」
や、iPhoneのOSで採用された
「ios7」
がフラットデザインとしてあげられます。
日常的に目にするこの2つから、
フラットデザインや
フラットUIを知った人が多いのではないでしょうか。

次にフラットデザインで作られた参考サイトを見ていきます。

フラットデザインの例

京都宇治伊藤久右衛門
http://www.itohkyuemon.co.jp/

ひめの麦畑
http://www.himeno-mugibatake.com/

Lorenzo Verzini
http://lorenzoverzini.com/

フラットデザインの特徴

上記のサイトからフラットデザインの
特徴がなんとなく伝わったはずです。
簡単に特徴を説明していきます。

  • 平面である
  • 装飾がない
  • シンプル
  • 一目で分かる
  • 情報が整理されている
  • 色鮮やかで見た目が華やか
  • フォントがモダン調

フラットというだけあり、
質感や立体感がありません。
フラットデザインの一番の特徴です。
ボタンやロゴに注目すると、
エフェクトやグラデーションが無いことが分かります。
また、文字などの各要素がとてもシンプルです。
情報も最小限にしかありません。

レイアウトも一目で分かるようになっています。
そして、シンプルだけでなく色を多用しているため、
見た目がとても華やかになります。

見た目以上の意味

特徴的なフラットデザインですが、
なぜここまで一気に広がったのでしょうか?
実はデザイナーやユーザーにとってメリットがあるからです。

スマートフォンの普及

まず、スマートフォンの普及が大きな要因です。
パソコン画面の場合、質感や立体感を出したり、
フォントを細かく設定してもしっかり、
美しく表現することができます。
このような手法はリッチデザインと呼ばれます。
木目の素材感を出したりなど、
実際のものに寄せています。

これがスマートフォンだとどうでしょうか?
ほとんど潰れてしまい、
せっかくの綺麗なボタンなどが
見えづらくなってしまいます。
これがフラットデザインだと、
装飾や文字が最小限なので、
スマートフォンの画面でもしっかり見え、
ユーザーにとってメリットがあることが分かります。

デバイスの多様化

デバイスの多様化によりパソコンやスマートフォン、
タブレットとユーザーが
どれを使ってサイトを閲覧するか分かりません。
どのデバイスからも
最適化されたサイトを閲覧できるよう、
デザイナーはレスポンシブという方法をとります。

実はそのレスポンシブは
フラットデザインととても相性がいいのです。
フラットデザインを採用しているサイトの多くが、
グリッドレイアウトを意識しているものが多いです。
グリッドレイアウトはページ内にグリッドを引き、
余白をもたせ、コンテンツを当てはめていく手法です。

グリッドを意識しているため、
情報がまとまっており、ユーザーにとって、
とても分かりやすくなります。
また、どのデバイスからも読み込みが早くなり、
スタートアップに最適です。

もちろんデザイナーや制作会社側のメリットもあります。
配置や色に上点を置くため、
フラットデザインの特徴である、
シンプルさによってアイコンなどの
制作作業が軽減されます。

レスポンシブの際に、
グリッドを意識しているため、
コンテンツの配置がしやすく、
自由に配置するより、
表示が変化した時に形作りやすくなります。
画像も配置がしやすくパソコン上では
綺麗に見えていても
スマートフォンだと右端が切れて、
見えづらくなることも無くなります。

また、パソコンとその他デバイス上での
イメージの変化が少ないことも
メリットとしてあげられます。
このようにフラットデザインは作り手から受け手まで
幅広く要素を持っていることが分かります。

デメリット

メリットばかりだと思っているフラットデザインですが、
注意点もあります。
シンプルさを追求しすぎると、
ユーザーはどのボタンが次のアクションに繋がるのか
分からなくなってしまいます。
例えば、このボタンはリンクへと繋がるのか?
これはそもそもボタンなのか?
と混乱を招いてしまう可能性があります。

そして人気故に、
似たようなサイトができてしまうということです。
デザイナーの個性がまり出せないところも
デメリットとしてあがります。
A/Bテストなどを行い、
デメリットをうまくカバーすることが
大切なのではないかと思います。

まとめ

いかがでしたでしょうか?
見た目が華やかで、かわいいフラットデザインも、
ユーザーだけでなく、作り手側のデザイナーにもメリットがあり、
流行のスタイルというだけでなく、
理由があることが分かりました。

マルチデバイスに適応したフラットデザインですが、
目的によって使いづらい場合があると思います。
フラットデザインを使うのか、リッチデザインを使うのか、
ユーザーにとっての使い勝手を理解して、
Webサイト制作をしていくことが大切です。
時代と共に変化してきた
インターフェイスであるフラットデザインを、
うまく使えるように、経験を積んでいきたいと思います。

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

おすすめ情報

2017年1月29日

グラフィックデザインの定番レイアウト手法10選

グラフィックデザインの定番レイアウト手法10選

レイアウトとは元々、[lay out]=[lay(動詞)+out(副詞)]で
「広げる」「設計する」という意味を持つことばです。
デザインでいう「レイアウト」は、
あるスペースに何かを配置することを指します。

レイアウトに触れる場面は、実は私達の生活の中に
たくさん潜んでいます。
例えば、机の引き出しの中のものの配置を
決めることもレイアウト。
町づくりで、郵便局や学校、住宅などの場所を
どこにするか決めることもレイアウトなのです。

町づくりで一番大事なことは「暮らしやすさ」です。
レイアウトは、この「やすさ」を考えることが重要です。
印刷物のレイアウトで大切なのは「分かりやすさ」です。

この記事では、ポスターやチラシなどの印刷物の内容を、
見る人により的確にわかりやすく伝えるために
レイアウトの手法をご紹介していきます。

レイアウトの役割とは?

手法の説明に入る前に、
レイアウトの役割について考えてみましょう。
レイアウトを分かりやすくする目的は
なんだと思いますか?

それは、見る人によい印象をもってもらうことです。
良い印象を持ってもらうと、

  • 新商品の広告の場合・・・
    その商品がより多くの人に知られて売上が上がる
  • 映画のポスターの場合・・・来場者数が増える
  • 雑誌の場合・・・読者が心地よく有益な情報を得られ、
    また読みたいと思ってもらえる

その為には、雰囲気の演出や情報の伝え方に工夫が必要です。
雰囲気の演出と一言にいっても、
「しずかな雰囲気」「インパクトのある表現」
「ゆったりした感じ」など様々な手法があります。

その中から、その印刷物の内容に最適な演出をよく考えて、
見る人の気持ちを揺さぶる事ができれば、
そのレイアウトは役目を果たしていると言えるでしょう。

活用できるレイアウトの手法

ジャンプ率

ジャンプ率のイラスト

ジャンプ率とは、配置した要素の大小サイズ比のことで、
大きな要素と小さな要素の差が大きいとき、
「ジャンプ率が高い」といいます。

反対に、大小の差がそれほど無い場合は、
「ジャンプ率が低い」状態です。
ジャンプ率が高いと、躍動感や賑やかさを
感じさせることが出来ます。

逆に、落ち着きを表現したい場合などは、
ジャンプ率が小さくしましょう。

図形や画像だけではなく、
文字にもジャンプ率を応用することができます。

強調したい見出し部分などの文言を大きくしたり、
接続詞(例「〇〇と〇〇」の「と」)を小さくすることで
緩急が生まれ、内容が素早く見る人に伝わります。

【向いている内容】
要素が多めで賑やかな雰囲気

視線を誘導

視線を誘導するレイアウトのイラスト

配置する要素には、読み進めるべき順番が
想定されているものです。
その順番を妨げず、自然に視線を誘導するのも
レイアウトの大事な役目です。

また、配置の工夫や余白の活用などで
スムーズな流れがつくられたレイアウトは、
内容を理解し整理する手助けにもなります。

基本的に紙面を見た時の人の視線は、上から下に移動します。
また、右開きの本では右から左へ、
左開きの本では、左から右への視線の流れが生じます。
パンフレットや冊子などのページレイアウトでは、
この流れに沿って要素を配置するとよいでしょう。

この流れと異なる動きのレイアウトをする場合は、
少し工夫が必要です。
例えばですが、商品とその商品の説明文が載っているページで、
読んでいる説明文がどの商品のものなのか
わかりづらい場合があったとします。
その場合は、説明文から引き出し線(矢印)などを引っ張ることで、
スムーズに説明文と商品を結びつけることが出来ます。

その他に、文章の多いレイアウトの場合、
段落の頭文字だけを大きくする「ドロップキャップ」という
手法を使うことで、読みやすくすることが出来ます。

【向いている内容】
要素が多めで複雑なレイアウト

逆三角形

逆三角形のレイアウトのイラスト

レイアウトでは、要素を配置したときの
紙面全体の構図への配慮も大切です。
レイアウトに慣れないうちには、典型的な構図を参考にすると、
バランスよく仕上げられます。
その一つが逆三角形の構図です。

逆三角形の点に配置する要素を大きく、
その他を小さくすること手法で、紙面に動きを出しながら、
ほどよい緊張感を生み出し、全体を引き締めることが出来ます。

逆三角形は不安定な構図なので、
もうすこし安定したイメージを表現した場合は、
逆二等辺三角形にすることで、緊張感を和らげることが出来ます。
また、安定した三角形の構図では、落ち着きを表現できます。

【向いている内容】
3つ以上の要素がある場合

ユニット化

ユニット化のイラスト

ユニット化とは、商品や店舗を紹介する紙面などで、
一つの情報を小さな枠組みに割り当て、
あらかじめ決めておいた枠内の配置ルールに沿って、
レイアウトする手法のことです。

ユニット化のメリットは、膨大な情報を
きれいにまとまって見せられることです。

枠で囲む以外にも、線で区切ったり、境界部分の余白を
しっかりとることでも区分けすることが出来ます。
ただ、ユニット化したレイアウトは機能的な反面、
単調にも感じられやすいため、ユニットを変形させたり
デザインを工夫して遊びを加えましょう。

【向いている内容】
要素が多めで、情報がひとつひとつ明確に区分けできる場合のみ。

グリッドシステム

グリッドシステムのイラスト

グリッドシステムとは、紙面を水平・垂直に等分割して
格子状のガイドをつくる手法で、
冊子などで読み物が複数ページで展開されるような場合、
このガイドに沿って配置を行うと、
レイアウトが統一され読みやすくなります。

ページ内でグリットに沿わせた箇所が多いほど
新聞のような堅い印象になり、
部分的にずらす箇所を増やすほど動きが生まれます。

【向いている内容】
要素が多め

パターン化

パターン化のイラスト

同じ図形を繰り返し並べるなど、
規則的な反復表現のことをパターン化と言います。

心地よいリズム感を生み出すパターンは、
テキスタイルのデザインでよく見かける手法です。
紙面の場合では、背景にドットやストライプを敷いたり、
連続写真でストーリー性を生み出す手法で使われます。

等間隔で配置したパターンのように規則性を強調すると、
まとまりを感じさせることが可能です。
パターン表現は単調になりがちですが、アクセントを入れたり、
1つおきに図形の色やサイズを変えることで、
規則的な中にも変化をつけることができます。

【向いている内容】
要素が多めで賑やかな雰囲気

アクセント

アクセントのイラスト

アクセントを効果的に機能させるためには、
一瞬見ただけでわかる大胆な変化の表現が必要です。

アクセントの数は増やしすぎると、
散漫でインパクトが弱まり逆効果になるので、数は絞りましょう。
アクセントの例をふたつ紹介します。

    • 繰り返しのパターンの中に
      一箇所だけ違うデザインの要素を置く
    • モノクロのレイアウトに一点だけカラーの要素を置く

【向いている内容】
すべての要素に効かせられるが、要素が多い場合は工夫が必要。

ホワイトスペース

white-space

ホワイトスペースとは、紙面にある余白のことです。
なんとなく余ってしまったスペースではなく、
意図的につくられたものです。

ゆったりした静かな雰囲気や、上質さの演出、
視線の滞在時間を長くするなど、余白は多くの役割を果たします。
注目させたい要素の周りに広く余白をつくり、
要素自体もシンプルなデザインにすることで
余白を最大限生かすことができます。

全く余白のない紙面は読みづらく、窮屈で圧迫感を感じさせます。
余白を多くとる部分と要素を集中させる部分を
紙面の中にバランス良く盛り込みましょう。

【向いている内容】
要素が少なめで静かな雰囲気

シンメトリー

シンメトリーのイラスト

シンメトリーは、古くから使われている
定番レイアウトのひとつで、
図形を反転させて構成される左右対称・上下対称や、
図形を回転させて構成される点対称などがあります。
上質で静かな雰囲気を出すにはもってこいのレイアウトです。

また、写真や図形だけでなく、
メニュー表などの文字のレイアウトにも使えます。
書体も上品な明朝体やセリフ体、筆記体などを用いると、
より高級な印象に仕上がります。

【向いている内容】
画像が少なめで静かな雰囲気

対比

対比のイラスト

2つの要素を並べると、人はそれらを見比べて
何らかの関係性を読み取ろうとします。

この対比の効果をうまく生かすことで、それぞれを強調したり、
時間の流れなどのストーリー性を演出できます。
サイズ差や色の違いなど、対比させたい要素を
的確にレイアウトすることがコツです。

対比の例をふたつ紹介します。
・リアルな人の顔の写真と、
その人のイラストの顔を隣り合わせて配置する
・同じ場所で違う時代にとったふたつの写真を上下に配置する

【向いている内容】
要素が少なめでシンプルなレイアウト

まとめ

以上、10個のレイアウト手法をご紹介しました。
今まで、何も考えずになんとなくレイアウトをしていた
デザイナーの方は、まずはこの10個の手法の中から
当てはまるものを選んでデザインすると
いいのではないのかなと思います。

レイアウトを上達させるには、できるだけ多くのデザインを見て、
自分がいいと思うデザインにはどういうレイアウト手法が
取り入れられているのか、『考えながら見る』ことが大事です。

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

おすすめ情報

2017年1月4日

Webデザイナーがこだわるべき情報設計とは

information-design-webdesigner-should-consider

Webデザインを制作するとき、
みなさんはどんなことに気をつけているでしょうか?
もちろんデザイン性や
クライアントの要望に沿うことも
大事なことと言えますが、
それ以前に
まずはWebデザイナーなら知っておいて欲しい
過程が、「情報設計」です。
「情報設計」と聞くと、
デザインとはかけ離れて聞こえるかもしれませんが、
情報設計にこだわることで
ユーザーにとって使いやすく、
わかりやすいサイトができあがってきます。
この情報設計の過程は、
Webサイト制作をしていく中で
ワイヤーフレームやサイトマップの作成以前に
取りかかるべき工程です。
そしてしっかりと情報設計を行った上で
ページ構成・サイト構成といった
ワイヤーフレームやサイトマップを
作成していくのが良い手順だといえます。
今回は
その情報設計について詳しく紹介していきたいと思います。

情報設計とは何か?

Webデザインを制作したとき、
「なぜこういうデザインにしたのか?」
と聞かれて、あなたは即答できるでしょうか?
情報設計とは、簡単に言ってしまえば
利用者にとってわかりやすく、使い勝手がよい
設計をしていくことを指します。
情報設計をしていくことで、
デザインができあがったとき、
ボタンひとつにしても、
「なぜここにこのデザインで
ボタンを置いたのか?」
という質問にも答えられるようになるでしょう。
制作する上で必要な情報をまとめ、
ユーザにとってわかりやすく、
使い勝手がいいように設計をしていくこと、
更にはユーザーをゴールまで
きちんと誘導できるような設計を
していくことが、
情報設計といえます。

情報設計の流れ

実際に情報設計する際に、
まずはクライアントのヒアリングで
詳しく色々な情報を聞き出していきましょう。
その中でも最低限こちらは
考慮していくべきというポイントを
挙げていきたいと思います。

なぜWebサイトを作るorリニューアルするのか?

Webサイトを制作するにあたり、
まずはなぜサイトを作りたい、
もしくはリニューアルをしたいと思い、依頼したのか?
その点は必ずヒアリングしていただきたい項目です。
なぜなら、
その「きっかけ」が
今回制作するサイトの課題であり、
改善するポイントであるからです。
例えば、
・訪問数が少ない
・必要な情報が載せきれていないためユーザーが不満に思っている
・ECサイトの売り上げを伸ばしたい
・企業の認知度をあげたい
などなど、
Webサイトを制作する上で期待している効果が
どういったものなのか?
何を問題と感じているのか?
そういった点を明確にしていきましょう。
企業サイトの場合などには、
とりあえず案内できるホームページが欲しい、という
クライアントも多くいるかと思います。
そういった方にも、
せっかく作るのであれば、
ホームページを通してどういうことを
伝えていきたいか?
を必ず聞くべきだと思います。
例えば、採用情報をサイトにしっかりと載せていき
サイトからの応募も受け付けたいなども
出てくるかもしません。
特にサイトを作る目的がなく、
案内できるものでいいのであれば、
最近はテンプレートなどもあり、
専門知識がなくてもWebサイトが作れてしまうので、
自社で簡単に作ってしまった方が
コストもかからず良いとは思いませんか?
それでも費用をかけて制作会社にお願いをする、
ということは少なからず制作をすることで何かを
求めているということは理解しなければいけません。
それが何なのか、
それに応えるためにはどうしていけばいいのか
クライアントと一緒に考えていくことが
大事だと思います。

原因を分析しよう

こちらはサイトのリニューアルの際に
特に重要となってきます。
現行サイトで、問題と感じているものが
なぜ発生しているのか?
どこで発生しているのか?
問題点の分析をしていきましょう。
この分析においては、
制作会社によっては他部署がしてくれたり、
また何かツールを使ったりと
様々な方法があります。

戦略をたてよう

現状の問題点やその原因の分析、
把握ができたところで
どうしていくべきなのか戦略をたてていきましょう。
その中で、競合他社との比較、
差別化、
または対象となるユーザー(ペルソナ)の設定など
を考えていく必要があります。
そして、ゴールの設定、
そこまでの誘導など様々なことを
この段階で整理していきます。
ゴールに向けての施策を練っていき、
しっかりとした目的・目標をもった
Webサイトを制作していきましょう。

Webサイトの設計をしよう

施策とゴール、
今回制作するWebサイトの目的・目標を
明確にしたところで、
ようやくWebサイトの中身を考えていきます。
設計前の情報整理がないと、
設計をする際にそもそもの目的がブレてしまったり、
クライアントの意向にばかり沿った設計に
なってきてしまいがちなので、
まずはここまでの過程(情報整理)を
必ずしっかりと行い、
クライアントにもそれを共有していきましょう。

必要なコンテンツを洗い出そう

まずは現行サイトを参考にコンテンツを洗い出し、
その中でも必要なコンテンツ、
必要でないコンテンツ、
または載せていきたいコンテンツなどを
整理していきましょう。
ゴールを明確にしていることで、
そのコンテンツがゴールに向けて
必要なのかどうか検討しやすくなると思います。
また、この時に重要なのが、
必ずしも全ての情報を
Webサイトに載せるべきではない、
ということです。
コンテンツが多くなれば多くなるほど、
ユーザーに何を伝えたいのか?が
わかりにくくなり、
結局のところ何のためのWebサイトなのかが
わからなくなってしまうことが
多々あります。
ユーザーにとって本当に必要なのかどうか
Webサイトに載せるべき情報なのかどうかを
この工程でじっくりと考えていきましょう。

コンテンツを見せる流れを考えよう

コンテンツを見せていく中でも、
その流れによって
伝わりやすさが格段に違ってきます。
どんな流れで見せていけば
ユーザーがわかりやすく、
納得してくれるのかを考えましょう。

サイト構成・ページ構成を作成しよう

必要なコンテンツと流れ(重要なコンテンツ)を整理したところで、
ようやくサイト構成とページ構成を作成していきます。
この工程がいわゆる
サイトマップ・ワイヤーフレームの作成となります。

ここまでの一連の流れが
「情報設計」となります。
これ、全部Webデザイナーがやる仕事なの!?と
思われる方も多いかもしれません。
制作会社によって異なってくるとは思いますが、
制作側との認識の違いを
減らしていくためにも、
制作側もこの流れを必ず知っていなくてはいけません。
その中で、
ヒアリング・情報整理までは他部署で行い
その情報を制作側に落とし込むという
制作会社も多いのではないでしょうか?
情報設計に全て携われないとしても
最低でも情報の落とし込みをして、
実際の制作担当が
しっかりとそのWebサイトを制作する
目的やゴールがわかっていないと
結局中身がブレたサイトができあがってしまいます。

Webデザイナーとして、
デザイン・構築をすることが全てではありません。
指示通りにデザインをおこして
構築するだけなら知識さえあれば
誰でもできることです。
言ってしまえば、
ここまでは学生の範囲です。
お仕事としてこなしていくのであれば、
それ以上が求められるのは
当然のことですよね。
自分が満足するだけのデザインでは
もちろんお仕事とはいえませんし、
もちろんクライアントのことだけを
考えたデザインでもいけません。
Webデザイナーとして大事なのは
その先にユーザーがいることを
踏まえた上で、
そのWebサイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

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