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

デザイン

おすすめ情報

2016年12月30日

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

what-is-visual-weight

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

見た目の重さ?

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

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

色の重さの関係性とは?

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

1大きさ

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

2色の重さ

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

3サイズが違うもの

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

4テクスチャが加わると

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

5縁が加わると

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

デザインに活かそう

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

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

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

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

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

まとめ

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

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

おすすめ情報

2016年12月20日

デザインと心理学の関係

relationship-between-design-and-psychology皆さん、デザインと心理学は違うものだと分けていませんか?実は深い関係性があります。

心理と色は関係は深い

ここでは、心理学に則った効果的なwebデザインを紹介していきます。Webページの記事を初めて見た時、直感的に利用者の脳内に働きかけるものが色(カラー)です。それぞれの色には人間が直感的に感じるイメージが存在します。

たとえば、WEBサイトを見に行ったとき、赤いボタンと緑のボタンが並んでいたとしましょう。どちらか一つ押さないといけないと言われたらあなたはどちらを押しますか?おそらくは緑のボタンではないでしょうか?信号機のように緑には「安全」や「健全」などの機能、影響、背景が無意識に連想できます。逆に赤には「注意」や「危険」のイメージがあります。ボタンを押したらどのような展開になるのか想定できない状況でわざわざ危険と感じるボタンを押す人はそういないと思います。

しかし、意味がわかった状況だと結果は一転します。対応例として、買い物をするためにアプリ、ホームページやWebサイトを訪れた場合は、赤い商品購入ボタンの方が売上が上がるという結果が出ています。実は赤色には危険というイメージの他に、活動的や行動力などのイメージもあります。そのため、購買意欲を掻き立てるというマーケティング結果があります。

このように配色によって人間の感じ方は様々です。最初に、そのWEBサイトが見てくれる人にどのような印象を与えているかはWebデザイナーたちのセンスと技術と経験ももちろんですが、ターゲットを射抜くための色設計で決まると言っても過言ではないほどの心理と色は関係は深いです。それでは、デザインを考える上でおさえておきたい豆知識をまとめました。

視覚階層

視覚階層とは、人間の目が、対象物を把握する順番を指すことで、良質なウェブデザインを支える要素の中でも、特に重要度が高いです。なぜ、視覚階層が重要なのかといいますとビジュアルによる判断は何が重要で自分にとって必要かどうか、何が違うのかを決定づけることができるからです。

あるデザイン要素のウエイトを強くすることで、それらが重要なポイントと対象者は認識します。デザインの基本原理を理解することで、ユーザーの感覚順応に作用しリーチすることができる可能性が高まります。階層において情報は取り込みやすく、そしてより製品が分かりやすいことが重要です。じっくりと考慮された階層は、ユーザーが感情に混乱することなく、安心感を持つことができスムーズに情報内容を理解できるでしょう。さらにデザイン要素まとめることで、統一感を表現できデザイン面が良くなります。

黄金律

見た目が美しくなると言われているバランスの黄金律は、1:1.618です。世界的に有名な古代ギリシャのパンテノン神殿が良い参考例です。

また、フィボナッチ数と呼ばれる、二つの数字0と1から始まる数列で、一つ前の数を次々に加算た数列の法則もあります。
(0、1、1、2、3、5、8、13、21…)

この2つの法則は、全く関係がないように見えるものの、同じ数字を導き出します。この黄金律もデザインにおいて重要です。

ヒックの法則

ヒックの法則は、選択肢を増やすと、それだけ意思を決定する時間が長くなります。メニューにあまりに多くの選択肢が用意されていると、選ぶのに困ります。しかし、2つしか選択肢がないなら決定までにかかる時間は遥かに短くなると思いませんか?

Webサイト訪問者が利用する際に選択肢が多いと使いにくくなります。最悪、全く使ってもらえなくなる場合もあります。そのため、UXデザイナーはより楽しいUXを提供するため、選択肢を少なくする必要があります。ウェブデザインを改善目的を明確にする上で、気を散らす選択肢の削除は、継続的に実施しなければなりません。

三分割法

三分割法とは2本の横線と2本の縦線でスペースを同じ9つの大きさに区切って考え、重要な構成要素を線、もしくは、線が交差する点に画像などを配置する手法です。中心に置くより上記のところに置いたほうが周辺視野を考えてもデザインが良くなります。デザインに画像を利用する有効な手段です。なぜなら視覚的な要素は、テキストよりも遥かに迅速にアイデアを伝えることが出来るからです。

余白&清潔感のあるデザイン

余白は、画面ページの「手をつけない・装飾しない」スペースです。グラフィック、縁、溝、カラムの間のスペース、そして、文字や視覚要素の列の間のスペース等が該当します。「空白」のスペースと認識するべきではない余白は、余白の中のオブジェクトの存在感を引き立てる効果がありデザインにおける大事な要素の一つです。

余白においてのキーポイントが、階層の利用です。会社のブランドメインカラーや写真、広告の文字であれ、色であれ、ブランドロゴ、画像情報の階層が欠かせません。テキストやグラフィックで埋め尽くされた余白のないページは、いくらベースカラーや配置にこだわっていてもゴチャゴチャした印象や散らかった印象を与えてしまい、また、メインのサービスが伝わりにく、読みにくい印象を与えます。十分に余白のスペースを確保すると「清潔感」が生まれます。清潔感のあるウェブサイトは、明確なメッセージを伝える上で重要ですが、コンテンツを少なくすればいいわけではありません。清潔感のあるデザインとは、スペースを有効に活用するデザインをさします。

カラースキーム

色彩計画のことを言います。色のもつ心理的、生理的、物理的効果や性質を利用し、全体的にまとまりのある見やすい雰囲気作りなど、目的を理解した上で見合った配色設計を行うことです。主に建築、インテリアウェブデザインなどでよく使われます。

ハロー効果

ハロー効果とは、ある対象物を評価する際に目立ちやすい特徴にひっぱられて、他の特徴までも高評価してしまう、あるいはマイナスな印象を受けて低評価してしまう心理現象のことを言います。光背効果、後光効果とも呼ばれます。このように、他の特徴や要素の影響力によって、判断を歪めてしまう認知バイアスのひとつです。Webマーケティングでハロー効果活用することでお客さんが好むタイプを理解し、一番最初に提示することで、全体の印象を良くすることができます。

まとめ

上記のポイントを研究し、検索ユーザーのことを考え操作しやすいUXデザインを作っていきましょう。

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

おすすめ情報

2016年12月5日

HTML5のマークアップ

markup-of-html5以前こちら(今更聞けない!HTML5・CSS3)の記事でも
取り上げたように
2014年にHTML5の勧告がされたことによって、
HTML4ではできなかった様々なことができるようになりました。
実際にHTML5を使ってどのように
マークアップするといいのか
今回はそちらを書いていきたいと思います。

マークアップとは?

そもそもマークアップとは、
人間語が認識出来ない機械でも文書の構造が認識出来るように、
文書の各要素に目印を与えて行く事です。
見出しや段落などと言った紙の文書では
当り前にある要素だけでなく、
ハイパーリンクのアンカーなどのような
ハイパーテキスト独自の要素なども、
マークアップに依り認識が可能になります。
HTMLでのマークアップは、タグと呼ばれる目印を利用します。

SEO対策にも

正しいマークアップを身につけることは、
もちろんSEO対策にも効果的です。
Googleの基準に習い正しくマークアップし、
より優れたコードをめざしながら
サイトパフォーマンスを向上させましょう。

文書構造をまとめよう

HTMLマークアップをはじめる前に、
ページの文書構造を確認しましょう。
デザインから作成の場合には
レイヤー名などにあらかじめクラスやIDを
ふっておくと、構造が理解しやすくなります。
最初の方はデザインを印刷したものに
書き込んでいくとわかりやすいと思います。
ソースコード内で迷子にならないよう
先に構造を整理しておくクセをつけておきましょう。

カテゴリーとコンテンツモデル

要素を記述するルールとなるのが
「カテゴリー」と「コンテンツモデル」です。
HTML5では、類似する特性をもった要素が
7つのカテゴリーに分類されており、
どの要素を子要素として持てるのかは
コンテンツモデルによって定義されます。

カテゴリー

HTML5では、類似する特性を持った要素が
以下で紹介する7つの「カテゴリー」に
分類されています。
それぞれの要素は、0個以上のカテゴリーに分類されます。
つまり、どこのカテゴリーにも属していない要素や、
複数のカテゴリーに属する要素も存在します。

メタデータコンテンツ

文書内のコンテンツの表示や動作を指定したり
ドキュメントの関連性の指定、
文書のメタ情報などを指定したりする要素。

フローコンテンツ

body要素内で使われるほとんどの要素は
「フローコンテンツ」に分類されます。

セクショニングコンテンツ

明示的にアウトラインを生成する要素。
各セクショニングコンテンツは通常、
見出しを伴って使用されます。
article、aside、nav、section要素が該当します。

ヘディングコンテンツ

セクションの見出しを定義する要素。
暗黙的にアウトラインを生成します。
h1、h2、h3、h4、h5、h6要素が該当します。

フレージングコンテンツ

文書を構成するテキストを表す要素。
従来のHTMLでインライン要素と呼ばれていた分類です。
※従来インライン要素とブロックレベル要素で
わけられていたものがHTML5では廃止され、
今回紹介しているコンテンツモデルによって
より細かくわけられるようになりました。

エンベディッドコンテンツ

ドキュメントに他のリソースを組み込む要素。
audio、canvas、embed、iframe、img、
object、video、picture要素が該当します。

インタラクティブコンテンツ

ユーザーの操作に特化した要素。
button、textarea、labelなどが該当します。

コンテンツモデル

コンテンツモデルは、ある要素がどの要素を
内容として持つことができるか、
つまり子要素とできるかというルールを表します。
例えば、コンテンツモデルが「フローコンテンツ」の
aside要素は、フローコンテンツに属する
p要素などを内容として持てます。
フローコンテンツに属していない
link要素などを内容として持つことはできません。

また、audio要素のように、
属性と属性値の指定によって
コンテンツモデルが変化する要素も存在します。
なお、空要素のコンテンツモデルは「空」です。

トランスペアレントコンテンツ

a、audio、canvas、del、ins、map、
noscript、video要素は、
コンテンツモデルが
「トランスペアレントコンテンツ」となっており、
親要素のコンテンツモデルを受け継ぐ要素です。
例えば、親要素にaside要素を持つa要素は、
aside要素のコンテンツモデルが
フローコンテンツなので、
コンテンツモデルを受け継ぎ、
フローコンテンツを内容に持つことができます。

HTML5で新しく加わった要素

HTML5で新しく加わった要素について
詳しく見ていきたいと思います。
マークアップする順番に沿って
紹介していきます。

header要素

header要素(<header>)は、
HTML5 から新たに追加された要素で、
イントロダクションやナビゲーショングループで
あることを示す際に使用します。
文書のヘッダ情報を表すタグとは異なります。
header要素はページの構造化要素であり、
フロー・コンテンツにしか属していません。

<header>の中には、
通常は <h1>〜<h6> や <hgroup> など、
セクションの見出しが含まれることが想定されていますが、
必ず必要というわけではありません。

従来は<div id=”header”></div>としていたところを
<header></header>とマークアップすることが
できるようになりました。
divと同じようにidやclassをふることも
可能です。

nav要素

nav要素は文書内の
主要なナビゲーションのセクションを表します。
主要なナビゲーションとは、
Webサイト内で共通で使われている
グローバルナビゲーションと呼ばれるセクションや、
ブログのサイドメニューにあるカテゴリーの一覧といった
リンクブロック、あるいは文書内で
各セクションに移動するための
リンクブロックなどが該当します。
nav要素は
セクショニング・コンテンツです。
セクショニング・コンテンツは
『それ単体でページの骨組みを作るもの』です。
ですから、見出しがなければなりません。

こちらも従来は
<div id=”gnav”></div>などとマークアップされていました。
header要素と同じくidやclassをふって
複数存在するときには使い分けることが可能です。

main要素

main要素は文書内の主要なコンテンツを表します。
主要なコンテンツとは、
Webサイト内の各ページで繰り返し使われる
ヘッダーやナビゲーション、
検索フォームやフッター情報などを除いた、
その文書内で主な内容となる部分を指します。
また、セクショニングコンテンツではないので、
文書のアウトラインに影響を与えません。
article、aside、footer、
header、navの各要素を
祖先要素に持つことは不可とされています。

article要素

article要素は文書内の
独立した記事セクションを表します。
ニュースサイトやブログにおける各記事や、
それに付随するコメントなども
独立した記事セクションと考えられます。

article要素を入れ子にするときは、
子孫要素は祖先要素にあたる
article要素の内容に関連した内容を表します。
記事へのコメントをarticle要素で
マークアップする場合などが該当します。

section要素

section要素は文書内の一般的なセクションを表します。
「セクション」とは通常、
見出しを伴う文書内の章や節を意味します。
また、見出しがない場合でも、
暗黙的にあるものとみなされます。
段組みのために使うのはNGです。
divの代わりに使ってはいけません。

section要素はセクショニングコンテンツなので
アウトラインを生成しますが、
他に適切なセクショニングコンテンツが
ない場合に使用しましょう。

aside要素

asideは
その前後の要素のコンテンツに関係しているが、
別のコンテンツとして分離されたものとみなされます。
補足的な情報であることが多いです。
逆に、抜き取ってしまうと
本筋の意味が通らなくなる内容は
aside要素にするべきではありません。

footer要素

footer要素はheader要素と同じく
ページの構造化要素であり
フロー・コンテンツにしか属していません。
その直近の祖先にあたる
セクショニング・コンテンツ、
または、セクショニング・ルートのフッターを表します。

通常はページの最後に現れますが、
必ず最後に置かなければならないというわけではありません。

以上header、nav、main、article、
secrion、aside、footerの7つが
通常マークアップする際に
使用するものかと思います。

コーディングを行う際、
このような基礎的な構造を覚えていると
マークアップしやすくなるのではないでしょうか?
また、冒頭でも述べましたが、
正しいマークアップは
SEO対策としても期待ができるので
ぜひ身につけていきましょう!

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

おすすめ情報

2016年12月3日

2016年のWebデザインのトレンドと、2017年流行の兆しのWebデザイン

web-design-trend-of-2016-and-web-design-of-signs-of-epidemic-in-2017

早いもので、もう今年も12月に差し掛かり、
2016年が終わりを告げようとしています。

Web業界は常にトレンドが変化し続けています。
デザインの移り変わりは早いもの。
常に新しいデザインを追い続けられるといいですね。

ということで、今年のWebデザインを振り返りながら、
2017年に流行の兆しのWebデザインについて
考察を加えます。

2016年に流行ったデザインのおさらい

シネマグラフ

シネマグラフ(Cinemagraphs)という手法が、
近年人気が出てきています。

シネマグラフとは画像の一部のみを動かす
Webデザインの技術です。
このデザインを導入することで動画とは違う、
洗練したインパクトをユーザーに残すことができます。

GIFアニメーションを使ったホームページ自体は
以前からありましたが、最近では
少し変わった形で使われています。

今回は、シネマグラフを活用した
オシャレなサイトと画像をまとめてご紹介します。

株式会社電通クリエイティブXのホームページでは、
社員や文具が永遠と回るシネマグラフを
デザインに取り入れています。

トップページをはじめ、企業紹介から社員紹介、
リクルートページまで全て共通して回転する
シネマグラフがデザインに入っているため、
ページを開くごとに面白みがありますね。

クリエイティブコンテンツを制作する
同社ならではのユニークな試みと言えます。

img_dentsu

http://www.dentsu-crx.co.jp/

料理関連のサービス「gilgul」では、
料理ができ上がるまでのシーンを
シネマグラフで表現しています。

動くシネマグラフを使うことで、
イメージや想像をさせることができていますね。

img_gilgul

http://gilgul.co.il/eng.html

パララックス

パララックスはスクロールなどの動作に応じて
視覚的エフェクトが発生するWebデザインです。

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの
動作に応じて、複数のレイヤー(層)にある要素を
異なるスピードで動かすことで、「立体感や奥行きを演出」、
「フェード・拡大縮小・回転などの視覚的エフェクト」を
演出する手法を指します。

何年か前から人気でしたが、ページが重たいなどの
反対意見がありつつも、依然として人気のWebデザインです。

「Nikon」のサイトでは、
パララックスでストーリー性を持たせ、
製品の特徴をアピールしています。

img_nikon

http://shop.nikon-image.com/nikon1/nikon1aw1/

インフォグラフィックス

インフォグラフィックスはグラフや表など
データなどを視覚的に見やすい形で表現したデザインです。

ごちゃごちゃしているものをシンプルで
分かりやすくて伝えやすくまとめられるメリットがあります。

通常、データや表の記載は
どうしても堅苦しいものになりがちですが、
それにデザインセンスを取り入れることで、
見やすい画期的なWebデザインになります。

「ウェブの進化」のページでは、
Webの技術の歴史をまとめたインフォグラフィックスが
効果的に使われています。
グラフの扱い方や表現方法も素晴らしいですね。

img_evolutionofweb

http://www.evolutionoftheweb.com/

「NIPPON COLORS – 日本の伝統色」サイトでは、
日本の伝統色を集めて静的にグラフを見せていますが、
右のONOFFボタンをオンにすると、一気に三次元の
視覚的に見やすくデザイン的に表すようにできます。

ぐるぐる回るカラーと、背景色の切り替わりが幻想的で、
ずっと見ていたくなりますね。

img_japancolor

http://nipponcolors.com/#messhi

クロムなし

Googleの開発しているウェブブラウザとは無関係ですが、
グラフィック・フレームワークの婉曲的な言い回しで、
コンテンツを取り囲むデザイン要素のことを
「クロム(Chrome)」と呼ぶことがあります。

中央揃えされたコンテンツや、重要なコンテンツを
左から右に詰めていくレイアウトが
Webデザインの王道ですが、一方、
クロムのないデザインは、余分なパーツを省くことで、
よりコンテンツやビジュアルのメッセージ性を
強調することができます。

クロムのないデザインは、とても清潔感があり、
スタイリッシュだという見た目の部分に
メリットが行きがちです。

しかし、コーディングする上でも非常にメリットがあります。

通常はコンテナと呼ばれるdiv要素を
入れ子のように配置するのが一般的ですが、
クロムのないデザインでは
不要なdiv要素を省くことができます。

クロムなしとはその言葉のまま、コンテンツを囲む
クロムを排除したWebデザインです。

クロムなしにすることで、よりメッセージが際立ち、
視覚的インパクトを強めましょう。

シェーバーでお馴染みの家電メーカー「ブラウン」ですが、
注目したいのは、単にデザインとして
クロムなしのレイアウトを取り入れているのではなく、
製品のコンセプトと一貫しているという点です。

ブラウンが手掛ける時計ブランドのウェブサイトは、
同社が哲学としている
「Less, but better(より少なく、しかしより良く)」の
コンセプトのもとに、クロムなしでスタイリッシュに
仕上がっています。

しかしそれだけでなく、製品にも余分なデザインは
一切ないということは、Webサイトの製品を
ご覧いただければお分かりいただけるでしょう。

img_braun

http://www.br-time.jp/

ストーリーテリング

UX(ユーザーエクスペリエンス)を最大化する、
ということはウェブ業界では久しく言われてきたことです。

単にクールなだけでなく、ブラウジングする際に
読み手にどんな体験をしてもらうか、ということが大切である、
という考え方です。

次にWebデザインの大きなトレンドのひとつとして、
ストーリーテリングが挙げられます。

「ストーリーテリング」とは、伝えたい思いやコンセプトを、
それを想起させる印象的な体験談やエピソードなどの
“物語”を引用することによって、聞き手に強く
印象付ける手法のことです。
抽象的な単語や情報を羅列するよりも、
相手の記憶に残りやすく、得られる理解や共感が深いことから、
企業のリーダーが理念の浸透を図ったり、
組織改革の求心力を高めたりする目的で
活用するケースが増えています。

・・・とのことですが、まあつまりストーリーテリングとは、
シンプルに言うと、Webサイトが一つの物語になっている感じです。

ストーリーテリングのWebサイトは、
すっきりとしたデザインが特徴で、
ページをスクロールしていくと、
まるで絵本を読んでいるかのように
一つの物語として構成されているので、
Webサイトを訪れた人に、
よりわかりやすく説明することができます。

紹介したいストーリーに最大限焦点を合わせ、
他の表示物を一切削除しているので、
頭にすっと物語が入ってくるというメリットがあります。

このストーリーテリング、
2015年に流行ったシングルページデザインと
とても相性がいいんです。

シングルページとストーリーテリングを組み合わせると、
ページを多層化せずに、
シンプルな1枚画面で言いたいことぜんぶ言える
Webサイトが出来上がります。

また、同じく2015年のトレンド
「バックグラウンドムービー」とも好相性。
シンプルな1ページで、1つの物語を展開する。
そして、背景に動画を使うことで、
ビジュアル的にも目を引くページになります。

サンプルでご紹介させて頂くCyberAgent社の
NIGO®さんと市川紗椰さんの対談レポは、
まるで取材現場にいるような迫力で
ページを読んでいただけます。
動画ではなく、静止画像ならではの迫力が特徴的な
Web デザインに仕上がっていますね。

ストーリーテリング サイバーエージェント社

https://www.cyberagent.co.jp/special/otsumotalk/006/

ただ、上記で紹介したのはスクロール型コンテンツ。
縦に長く伸びるシングルページデザインでは、
読み手は最後までスクロールすることに疲れてしまうという見方もあります。

そこで、サイト全体を1つのストーリーに構成して、
読み手を惹きつける魅力的なコンテンツに仕上げていく手法も
同じく人気です。

次に紹介するストーリーテリングのお手本になるサイトが、
「The Live in Levi’s Project」です。

リーバイスとともに送る生活の魅力を、
存分に伝えるサイトに仕上がっているため、
多くの共感を得ています。

ストーリーテーリング リーバイス

http://levi.jp/suchmos/mintcondition/

2017年に来るかもしれないWebデザインのトレンド

ミニマリズムは継続

img_minimal

フラットデザインやGoogleの ”Material Design” の
基盤となっているミニマリズムはここ数年間とても
ポピュラーなコンセプトとなってきましたが、
今後もその傾向は続きそうです。

ミニマリズムが流行ると、どのサイトも同じように見える、
という批判もあるのですが、ユーザーが使いやすいような
デザインパターンはすでに確立されていて、
むしろその制約の中でクリエーティビティーを
発揮することを求められています。

見かけのデザインよりもデータやコンテンツをデザイン

これまでは「Webデザイン」というとビジュアルな
意味合いが強かったのですが、これからはむしろ
コンテンツやデータそのもののデザインの意味合いが
強くなりそうです。

上記で挙げたミニマリズムも、この動向を反映している
背景があります。

実際のところ、ユーザーはサイトのデザインを
見るのではなくサイトのコンテンツに興味があるのであり、
サイトそのものはむしろコンテンツをサポートする
役目をするべき、というのがポイントです。

コンテンツデザインを重視することで、結果的には
サイトのクリック率や販売率も上がることが期待される、
というのもあります。

イラストレーションの多用

img_illust2

写真よりもイラストの方が多いサイトが増えるかもしれません。

これはパソコンやスマホの解析度が上がり、
MacBookやiPhone/iPadのレティナディスプレイなどで、
高解像度画像をWebでも負荷なく見せられるように
なってきたことが背景にあるようです。

WebブラウザのSVG対応が広まったことで、
小さなファイルサイズで劣化のないイラストレーションを
ウェブに掲載できるようになり、デザイナーもカラフルで
シャープなイメージを実現できるという意味で
イラストの多様化が進みそうです。

操作ミスのフォローによる、多様なユーザー層への対応

ある統計によると、2017年には実に世界の人口
半分以上がインターネットを利用するようになるそうです。

そこには、多様な文化や教育背景を持つ人々や、
いろいろな年齢のユーザーが含まれることになります。

現時点でパソコン利用に慣れている人たちにとって
説明不要な当たり前のことでもそれがわからず
悪戦苦闘するユーザーも増えてくると思われます。

そのようなユーザーがする行動や操作ミスを
サイトがフォローしてサイトにアプローチしやすくする
工夫がますます必要になってきそうです。

完璧に未来を予測することは不可能ですし、
これ以外にもまた違った予測もあり得ると思いますが、
これらの項目は既に現実化しているものがほとんどなので、
来年以降トレンドとして定着する可能性は十分あると思います。

マイクロ・ミニ・インタラクション

2015年あたりから「マイクロ・インタラクション」が
話題となり始めています。

マイクロ・インタラクションとは「ユーザーの
アクションに対して小さなアクションを返すこと」です。

例えば、ボタンをクリックしたときに
アニメーションなどを用いて「あなたは今クリック
しましたよ」とユーザーにリアクションとして
通知することなどがそれに当たります。

「神は細部に宿る」とはよく言われますが、
Webデザインの作りこまれた細部表現です。

しかし現在のマイクロ・インタラクションは
ややリアクションが薄すぎてユーザーに
認識されていないこともしばしば。

2017年にはさらに「マイクロ・ミニ・
インタラクション」として改善が進みそうです。

触覚フィードバック技術

触覚フィードバック技術(ハプティクス)
というのをご存知でしょうか?

例えば、スマートフォンのキーボードに
触れるとガラスの感触がしますが、
これを実際のキーボードに近い感触として
フィードバックする技術のことです。

今のところまだそれほどメジャーな技術とは
言えないところがありますが、数か月内に大きく
話題に昇ってもおかしくない技術でもあります。

そしてこの「触覚フィードバック技術」を
さらに洗練させると、ユーザーはWebサイト上で
実際の製品に近い感触を確かめることが
できるようになりますね。

もしくはザラつく背景なんかもあるかもしれません。

もちろんこれらは実際の触感をシミュレーション
したものですが、そう遠くないうちに「触感」も
Webデザインの一要素となるかもしれませんね。

ちなみにこの触覚フィードバック技術に
取り組んでいる企業のひとつとして、
「ディズニー」が名を連ねているそうです。

レイテンシーへの取り組み

例えば、あるWebサイトの「次へ」ボタンを押して、
目的のページが表示されるのに5秒以上かかった場合
大半のユーザーは離脱してしまうのはUXデザインに
おいては、もはや常識となってきました。

Webページに限らず、こうしたさまざまな
レイテンシー(遅延)がUXを著しく損なわせるのは
間違いないのですが、Webデザイナー側では
その対応策のアイデアが考案され始めています。

例えば、現在でもユーザーにとって目的となる
ページのスクリーンショット画像をクリックする前に
表示して、レイテンシーによるユーザーの離脱を
予防しているサイトがありますが、2017年には
こうしたさまざまな対策案が考案されていくでしょう。

年齢レスポンシブデザイン

現在のレスポンシブデザインは、デバイスのスクリーン
サイズに応じて表示形式や表示するコンテンツに適合
するものですが、今後は閲覧者の「年齢」に応じて
コンテンツ表示を変えるデザインが出現するかもしれません。

例えば日本の場合で考えると、閲覧者が幼い
子どものときは漢字を使わない文章を表示し、
その子どもの親が閲覧している時は
一般的な文章を表示するというイメージです。

その他にも、

  • ユーザーの年齢に合わせ表示するナビゲーションメニューを変える
  • 高齢者のユーザーにはフォントサイズを大きく表示する
  • サイトカラーも若年層向けには明るく、高齢層には落ち着いた色で表示する

などが考えられます。

年齢レスポンシブデザインは今後
Webデザインに取り込まれていくでしょう。

まとめ

いかがでしたでしょうか。

日々挑戦し続けなければいけないWebデザイナーの皆様。
Webサイトのデザインに悩んだ時や
革新的なデザインに挑戦したい時は、
ぜひ本記事を参考に、サイトデザインを作ってみてくださいね。

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

おすすめ情報

2016年11月29日

オフセット印刷とオンデマンド印刷の違いとは?

what-is-the-difference-between-offset-printing-and-on-demand-printing

そろそろ年賀状の季節になってきました。
年賀状を印刷する方法としては、
自宅のインクジェットプリンターで刷っていらっしゃる方が
多いのではないでしょうか。

実は何気なく使っている印刷にも種類があり、
メリットとデメリットがあります。
今回は代表的な印刷である、
オフセット印刷とオンデマンド印刷の違いについて
書いていきたいと思います。

印刷の種類

印刷とは名前の通り、
「版にインクをつかって紙などに刷る」ということです。
版を使わない印刷方法もありますが、基本は版を用いられます。
印刷版の種類により、平版印刷、凸版印刷、凹版印刷などが
あります。

オフセット印刷

現在の印刷の代表的な平版印刷のひとつです。
商業印刷物や美術印刷の多くはこの印刷方式を用いられています。
一番ポピュラーな印刷方法です。
街中で見るポスターや書籍などは、ほとんどこの方法を
用いられています。

特徴

実際に印刷イメージが作られている版と紙が直接触れないのが
特徴です。
版につけられたインキを、
一度転写用ローラーであるブランケットに移し(Off)、
ブランケットから印刷用紙転写(Set)させ、
紙などの被印刷体に印刷するため、オフセット印刷とよばれます。

オフセット印刷機には、
紙1枚ずつに印刷をしていく枚葉機、
ロール紙に連続的に印刷していく輪転機などがあります。
枚葉機は1枚ずつ紙に印刷するため、紙の選択の自由度が大きく、
小ロット印刷に向いています。

ただし、取っては刷るという手間があるため、
スピードは輪転機に負けてしまいます。
輪転機は1枚の紙に一気に印刷していくため、
枚葉機より早く刷れます。

機上でインキ乾燥、用紙の折りと断裁ができるため、
大ロットの印刷(大部数のチラシや新聞、雑誌など)に
向いています。
ただし、紙の種類や大きさは枚葉機より自由度はありません。

メリット

・版を用いるため大量に印刷ができる
・大ロットほど安くなる
・品質が良く、写真や文字が綺麗に印刷される
・特色を使うことができる
・大きいサイズを印刷することができる
・使用できる紙の種類が豊富
(凹凸のある紙にも印刷することができる)

デメリット

・小ロットだと単価が高い
(最初に作成する版のコストがかかるため)
・作業工程が多いため、納期に時間がかかる
(版を作成する工程があるため)

オフセット印刷は時間がかかっても、
綺麗に仕上げたい印刷物に向いています。
逆に、小ロットで
短期間で仕上げてもらいたい場合は向いていないことになります。

オンデマンド印刷

「要求があったときに迅速にサービスを提供する(On demand)」
方式ののことです。
パソコンからデータをプリンタに送り印刷するため、
版の作成が必要なくデジタルデータを直接出力します。
短時間で印刷することができ、小ロットだと単価が安くなります。

特徴

トナーによるレーザープリンタ方式
またはインクジェット方式で印刷します。
また、「カラーダイレクト印刷」ともよばれます。
トナー方式とは、
会社などに置かれているレーザーコピー機や
レーザープリンターとよばれるものと同様の仕組みとなります。

インクジェット方式も、
多くの家庭で利用されている
一般用のインクジェットプリンターと基本は同じ仕組みです。
一般用のプリンタとオンデマンド印刷機の違いは
まずマシンの大きさです。
業務用なので一般用のプリンタとは大きさが全く違います。
マシン自体が大きいので適応する印刷用紙や印刷サイズも違います。

それだけでなく、
印字を正確な位置に印刷するなど印刷することだけでなく、
印刷物を作る上での精度さも求められます。
また、業務用として利用するため、
マシンの耐久性や操作性など一般用とは
大きな違いがあります。

メリット

・小ロットで単価が安い
・版の工程がないため、短期間で仕上がる
・版を必要としないため、多種類の印刷が可能

デメリット

・特色が使えない
・大ロットの場合オフセットより割高になる
・オフセット印刷に比べると質が劣る
・ベタやグラデーションにムラができる
・細かい字は滲むため、精密なデザインには向かない
・色が安定しない

品質より小ロットで早く仕上げたい場合は向いており、
逆に大ロットで品質重視の場合は向いていないことになります。

まとめ

それぞれ特徴があり、メリットとデメリットがあることが
分かりました。
一見、オンデマンドのデメリットが多い様に見えますが、
オンデマンド印刷に向いていることは沢山あります。

また、最近のオンデマンド機種は印刷物の品質が向上しており、
オフセット印刷の品質との差が縮まってきています。
縮まっていてもオフセット印刷が一番綺麗なことに
変わりないですが、小ロットやコスト面からすると
オンデマンド印刷に分があります。

目的に応じて、大きく綺麗に印刷したい部分はオフセット印刷、
情報が変わるところはオンデマンド印刷など
使い分けることが大切なのではないかと思います。
また、オフセット印刷とオンデマンド印刷のほかにも
様々な印刷方法があります。
この記事を読んで興味を持っていただけた方は是非、
他の印刷方法も調べてみてはいかがでしょうか。

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