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

デザイン

おすすめ情報

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

特徴

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

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

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

メリット

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

デメリット

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

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

まとめ

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

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

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

おすすめ情報

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日も早く「新人」を卒業できるよう、
頑張ってくださいね。