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

デザイン

おすすめ情報

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サイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

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

おすすめ情報

2017年1月3日

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

あなたはどんなWebデザイナー?

もしあなたが「Webデザイナー」という職業ならば、
自分の作ったデザインを、きちんとコーディングできますか?

「Webデザイナー」がどこまで手広くやるかは
昔からよく議論されている内容ではありますが、
「Webデザイナー」「コーダー」が完全分業という考えは、
今はもうだいぶ古くなってきているのではないでしょうか。
(決して完全分業を否定しているわけではありません)

どちらかに特化した人材は作ることはできますが、
どちらにしても、双方の手法を知らないと、
結局両者への負担が大きくなったり、
意味のないコードが増えたり、
デザイン通りのサイトにならなかったり、
SEOを無視したソースの汚いサイトが
出来上がってしまったりなど
マイナス面が大きくなってしまいます。

Webデザイナーを含む、Webクリエイターの相関図

Webクリエイター相関図

上図のとおり「Webクリエイター」という括りの中には
複数の職種が存在しています。

デザインしかできないWebデザイナーか、
コードしか書けないコーダーから始まり、その次のステップに
多少のコードなら書けるWebデザイナーと、
多少のデザイン修正ならできるコーダーと、
html・cssをより深く理解したマークアップエンジニア、
よりシステムが絡むフロントエンドエンジニアが位置します。

マークアップエンジニア

ここで出てきた「マークアップエンジニア」とは、
HTML5でのコーディング、
CSS3でのデザインあてはもちろんのこと、
コンテンツの内容をきちんと理解しながら
デザインや文章を構造化し、
検索エンジンにもフレンドリーなマークアップをするなど、
ディレクターやデザイナーの意図を汲み取り
かつ改善の提案ができるレベルでのコーディングが
できる人材のことを指します。

フロントエンドエンジニア

また、「フロントエンドエンジニア」とは
Web標準やアクセシビリティに配慮した
質の高いコーディングを行い、
長期的に見た保守性にも優れた
設計をできることが前提となります。
その他、UI(ユーザーインターフェース)にも
意識した実装に気を配りつつ、
画像素材の用意やデザイン設計といった
Webサイトやページデザインなどの
Webデザイナーとしての役割も
求められることがあります。
企業によってはこの職種がシステム部分を理解し
触るケースも多く、簡単に言えば、
プログラマ寄りのWebクリエイターと言えますね。

かくゆう私は「デザイナー」兼「マークアップエンジニア」
という立場になるかと思うのですが、
最近は実作業に集中するよりは、
ディレクション業務の方が主なため、
「コードが書けるデザイナー」
「簡単なデザイン修正ができるコーダー」を
育て上げることに現在は熱意を注いでいます。
(※熱意はあってもその分時間を
費やせているわけではありませんが、、)

「デザイナー」兼「コーダー」兼
できれば「マークアップエンジニア」まで
になれれば最高ですが、現在弊社には
「デザイナーのひよっこ(or卵)」
「コーダーのひよっこ(or卵)」
レベルのスタッフが大半なので、まずは欲張らずに、
「サイト(ページ)構成を理解した上で、
きれいなデザインが作れて、
htmlとcssを使ってコーディングできる」
レベルのお話をしましょう。

こんな人はWebデザイナーと名乗らないで欲しい

私が一番Webデザイナーとして危険だと思うのは、
デザインしかできなくて無理難題なデザインや、
ページ構成を無視したデザインが上がってきて、
ひとりよがりのデザインだけたたきつけて、
コーダーやマークアップエンジニアを
泣かせるデザイナーです。

決して否定しているわけではないですが、
最近は「Webデザイナーです」と名乗ると
最低限のコードは書けると思われることがほとんどなので、
そういった方は自分の首を絞めないためにも、
「コードはかけませんがWebデザイナーです」
とでも言っておきましょう。

さて、デザインしかできないWebデザイナーについて、
何がダメなのかきちんと理由を紐解いてみましょう。

デザインの理由や構成を説明できない

こういったタイプの人は、
「どうしてそのデザインにしたの?」
「ここ、どう組むかわかってる?」
という質問を投げかけた時に、悩んで黙り込んだり、
曖昧な返事しかできないことが非常に多いです。

たとえ業務上、完全分業であっても、
きちんとコードを思い描いてデザインして欲しいですね。
html構成を初心者であれば手書きで、
できるようになってきたら頭の中でもいいので
最初に決めてから、デザインして下さい。

誰のためのデザイン・サイトなのか理解できていない

これはどんなデザインを作る時もですが、
そのデザインは、必ず誰かのために
作らなくてはいけないものです。

ペルソナを設定する、とよく言いますが、
まさしくこれのことですね。
設定したペルソナになりきって、
「どうすれば心に響くか」を考えたり、
詳細なペルソナ設定がまだ難しければ、
せめて年齢層・性別・地域くらいは焦点を絞って、
「どうすればこのターゲット層に対してアプローチできるか」
を考えながらデザインすることが重要です。

ここで勘違いしてはいけないのが、
「クライアントのため」のデザインでは
全くないということです。

ここを履き違えると、膨大なクライアントからの修正依頼を
全て鵜呑みにして、エンドユーザーには全く響かない
サイトデザインになってしまったりします。

さて、ここで質問です。

すこしコードもわかるようになってきたWebデザイナーは
どういった分類となるのでしょう?

Webデザイナーは2種類に分けられる

Webデザイナーには、Webデザインと
初歩的なコーディングまでしか出来ないデザイナーと、
マークアップエンジニアの領域も手広くこなすデザイナーの
2種類に分けられます。

デザインしかできないWebデザイナーとは
言わばコーダーから一歩踏み込んだばかりの
人の事と言えるでしょう。

もしくは、デザイン学校卒業の学生や、
印刷会社などでグラフィックデザインを学び
「印刷は下火だしもういいや、Webしてみたい!」
と転職を決意し、この世界に足を踏み入れた
タイプの人に該当します。

そもそも原点回帰するなら、Webデザインとは、
グラフィックアートやイラストとは違い、
最終的にはhtml化をしないといけない媒体です。

つまりいくらデザイン単体で優れていても、
html化するにあたって、構造が複雑すぎたり、
いくつものjsや無駄なcssをばりばりに使って
ユーザービリティが下がってしまっては
エンドユーザーにストレスを与えるだけの、
無駄なデザインとなってしまうのです。

だからこそ、マークアップを
最初から意識しているWebデザイナーと
そうでないWebデザイナーで分けられるのです。

当然の話ではありますが、
前者のデザインしか出来ないWebデザイナーでも
最低限度のHTMLの知識はあるので、
Webサイトデザインとしてはあらかた形にはなりますが、
根底からマークアップを理解し制作した
Webデザイナーのサイトデザインの場合は、
デザイン要素とマークアップ要素が
完璧に合致し素晴らしいWebサイトになるのです。

ですので、採用の際など特に、
一概にWebデザイナーと言っても
優れているか否かを見極める際は
「マークアップエンジニアの範疇もこなせるか?」
という基準に基づき、見定めることも重要です。

まとめ

2017年を迎えたWebデザイナーの皆様、
あなたがどこを目指したいか、目指すべきか
決意を新たにしていただけたでしょうか。

今年は去年よりも一歩踏み込み
コーディングを前提とし、html構造をより深く理解し、
さらなるステップとしてSEOやアクセシビリティ、
保守性やエンドユーザーへの訴求にも配慮した
Webデザインをできるよう、邁進してください。

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

おすすめ情報

2016年12月30日

ビジュアルウェイトとは?

what-is-visual-weight

みなさんビジュアルウェイトという言葉は知っていますか?
重さは、見た目だけでなく、色にも重さがあります。
一目でみて重たそう、軽そうと感じるのは何故でしょうか。
今回はそんなビジュアルウェイトについて
書いていきたいと思います。

見た目の重さ?

生活の中で、重たそう、軽そうと印象に繋がるものもは
見た目の大きさです。
当たり前ですが、大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。

それではグラフィックの中ではどうでしょうか?
グラフィックの中で占領する
大きさが大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。
ところがそこに色彩が加われば、
見た目の大きさだけでなく、
色によって重さが変わります。
つまり人は見た目の大きさではなく、
色によって重さを感じ取っていることが分かります。

色の重さの関係性とは?

先ほどの話であったように、
人は見た目の大きさだけでなく
色によって重さを感じ取っています。
つまり、同じ大きさのもがあったとしても
色によっては重さが違うということです。
例をだしていきます。

1大きさ

形が大きいものと小さいものがあったら、
どちらが重たそうと感じるでしょうか?
よほどのことがない限り、
大きい方が重たいと感じます。
よくある話ですね。

2色の重さ

例えば同じ大きさのもがあったとします。
色は白と黒。どちらが重く感じるでしょうか?
大体の人が黒と答えるはずです。
コントラストの強いもの、
強烈な色のものが一番重く感じるということです。
明度が高いほど軽く感じ、低いほど重く感じます。
では、黒背景の場合はどうなるでしょうか?
この場合色が強烈なのは白ですね。
つまり、黒背景の場合は白が強く出て、
重く感じるということです。
また、赤は黒と同じくらいに重く感じます。

3サイズが違うもの

今まではサイズが同じもので比べてきました。
それでは、サイズが違い、
色も違うものはどうなるでしょうか?
例えば大きいものが白で、
小さいものが黒の箱が置いてあるとします。
どちらが重く感じますか?
大きい箱の方が重く感じそうですが、
この場合は小さく黒い箱の方が重く感じます。
先ほど書いた通り、
人は色によって重さを感じ取っているので、
色が強烈な黒の方が重く感じます。
サイズが変わっても、
小さい黒の方に重さの比重がかかってしまいます。

4テクスチャが加わると

同じ大きさでも、
テクスチャが加わるだけで見た目の重さが変わってきます。
テクスチャがあるのとないのでは、
ある方が重く感じます。

5縁が加わると

今度は縁を加えてみます。
同じ色のものでも、
黒い縁があるものとないものではどう感じますか?
黒い縁がある物の方が重く感じますよね。
黒は近くの色まで重く感じさせてしまう性質があるからです。

デザインに活かそう

早速デザインに活かしてみましょう。
ここは重く感じるなと思ったら、
サイズだけでなく色を変えてみたり、
強く見せたい所には縁をつけてみたりと
様々な所に活かすことが可能です。
ですが、途中で色や縁を加えた場合は
一度全体を見直すことが必要です。
また、黒は特に近くの色を重く感じさせる力があるので、
黒の近くに配置するときは注意が必要です。

その他のビジュアルウェイト

私たちの生活の中にも
ビジュアルウェイトは活かされています。
例えば、引越屋や宅配便のダンボール箱です。
ダンボール箱といえば薄い茶色を
思い浮かべる人は多いと思います。
実際、引越屋や宅配便のダンボール箱はどうでしょうか?
白色の物が多いですよね。
これもビジュアルウェイトが関係しています。
白は茶色に比べ明度が高いので、軽く感じます。
重たい荷物も白いダンボール箱に入れるだけで、
軽いと錯覚します。

他にも囲碁の碁石も黒の方が少し大きく作られています。
この場合、白は膨張色なので黒に比べて
大きく感じ取られてしまうためです。
ファッションで例えるなら、
白は膨張色のためあまり選ばれないと
いわれていることと同じです。

色の大きさや重さは
私たちの生活の中でも活かされることが分かりますね。

まとめ

いかがでしたでしょうか?
色にまつわる不思議な話はたくさんありますね。
そしてデザインだけでなく、
私たちの生活にも活かされていることが分かります。
よく見るダンボールも
そんな意味があったなんてと驚かされました。
私自身も色の重さは明度くらいだろうと思っていたので、
この記事を書いていくうちに、
縁やテクスチャを加えるだけで、
こんなにも見た目の重さが変わることを知ることができました。
これからの自分自身のデザインに活かしていきたいと思います。
もちろんデザインやダンボールだけでなく、
ファッションにも活かせるはずです。
色彩力を磨いて、
自分のファッションにも活かしてみてはいかがでしょうか?
色彩やその意味を調べて活かすだけで、
見えているものも変わってくるはずです。
この記事を読んで、
少しでも色彩について興味を持っていただけたら幸いです。

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