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

自社書籍

新卒採用情報

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

採用情報

Bigmac 社長ブログ

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

ITAL株式会社

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

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

デザイン

おすすめ情報

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

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)」
方式ののことです。
パソコンからデータをプリンタに送り印刷するため、
版の作成が必要なくデジタルデータを直接出力します。
短時間で印刷することができ、小ロットだと単価が安くなります。

特徴

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

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

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

メリット

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

デメリット

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

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

まとめ

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

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

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

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

おすすめ情報

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

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