目的
・ユーザーがスマホの普及及びウェブ環境の変化に合わせて、インターネットに求める体験の変化を解明する。
・企業（クライアント）のトレンドとともに変化する課題に応え、運用のコストダウンを実現する。
・私たち制作側はトレンドに合わせ、自社の制作の実績を作りあげ、トレンドの変化とともにクライアントの課題の一歩先に立ち、クライアントの問題解決及び提案をする。
研究内容
■研究サマリー
スマホユーザーの増加に伴い、ウェブ環境に大幅な影響を与えている。ユーザーがインターネットに求める体験が変わってきている。
ウェブサイトにもスマホと似たような操作を求めるようになり、ウェブサイトに対しても、
動き・アニメーションによる愉快な操作、スマートで理解しやすい情報、小さな目標設定による達成感、ユーザーとの密なコミュニケーションといったインターネット体験が求められるようになった。
それと同時に、さまざまなレイアウトの手法やそれを活用したウェブサイトが現れた。
その裏には企業（クライアント）がユーザーの需要に合わせての動きが読み取られる。
まず緊急性高いのは既存サイトのスマホをはじめ、様々な端末の対応になる。
そしてサイトが増えたと同時に増加する運用コストの増加も企業にとっては大きな課題だ。
さらにユーザーが求めている体験に合わせ、多様なウェブサイトの見せ方が求められる。
それら企業側の課題は我々制作側の課題でもあると考えている。
今回の研究を通して、ウェブデザインのレイアウトに関するトレンドをつかめ、今後の制作においては、
ユーザーのインターネット体験及び企業側の端末対応、コストダウンなどの問題解決に直結することを目的とする。
研究は
１、まずウェブ環境の変化にフォーカスし、それに伴うユーザーの動きと需要を解明する。
２、環境やユーザーの変化によってサイトレイアウトの傾向をまとめる。
３、その傾向に沿って、具体的に世界中で近年よく使われているレイアウトを分析する。
４、私たち制作の現場ではトレンドを取り入れ、今までの実績とこれからの課題を検討する。
５、これからのレイアウトに関する私なりの考え。
という順番で行った。
１、ウェブ環境の変化によってレイアウトにもさまざまな変化が起きている
ウェブの変化は主に4方面から見たい。
１．１スマホユーザーの増加が人々のインターネット体験を変えている
2008年iphone3Gが発売以来、スマホの普及に伴い利用者数が継続的に増加し、調査によると日本において2015年冬にはPCを超える可能性が現れている。
2016年世界のスマホ利用者は19億人に達する見通しとも言われている。
“スマートフォンからのインターネット利用者数は2015年4月時点で4,832万人となり、5,000万人に迫る規模に成長していました。
また、PCからのインターネット利用者数は同4月で5,100万人となり、2014年7月以降、横ばいに推移していました。
一方で、スマートフォンからの利用者数は現在も継続的に増加していますが、
2014年度の増加率は19%となっており、2013年度の増加率41％と比較すると、そのスピードが鈍化していることが分かりました。”
１．２アップル社が「iOS 7」にてフラットデザインを採用し、ウェブ業界に大きな変化
2013年6月10日に、アップルの開発者向け年次イベント「Worldwide Developers Conference（WWDC）」が開催し、同社モバイルOSの次期版「iOS 7」が「フラットデザイン」という手法を採用ことが発表された。
「フラットデザイン」のは平面的で、立体感のないデザインになる。
エフェックトは最小限、文字も最小限、質感や立体感がない、vividな色を利用する、アイコンを使わない、グラデーションは使わない、影を付けない、背景画像を使うなどの特徴があげられる。
１．３グーグル社がマテリアルデザインガイドラインの発表
2014年6月、Googleはマテリアルデザインガイドラインを発表した。
フラットデザインと比べると、マテリアルデザインがアニメーションや動きを重視し、心地の良い動きを重要視している。
シンプルで平面的でありながらも物理的に要素を認識し、3Dに仕上げるふうになっている。またタッチフィードバックの演出もその特徴になる。
１．４CPUの進化やhtml5、CSS3、JSの進化
CPU性能が2004年から2011年までの7年間で28倍に増加している。処理スピードが大幅にアップしているため、より複雑な構成や動きを支えられるようになってきている。
HTML5を標準とする正式なW3C勧告が2014年10月28日からで、jQuery 2013年11月時点での最新版がアップロードされた。
１．５ウェブ環境の変化がユーザーの動きを影響する
2008年から、スマホの普及によってユーザーがインターネットを楽しむ環境が大きく変化し始めた。簡単にまとめてみると以下のようになる。
また「フラットデザイン」と「マテリアルデザイン」の普及に伴い、ウェブサイトやユーザーにも以下のような変化がみられる。
ユーザーがいろんなデバイスでインターネットを利用するようになり、ウェブサイトに求めている体験も変化している。このような変化を踏まえ、
結論：
変化１、動き・アニメーションによる愉快な操作、スマートで理解しやすい情報、小さな目標設定による達成感、
ユーザーとの密なコミュニケーションといったインターネット体験が求められるようになった。
変化２、全端末対応しやすい、分解しやすい、組み立てやすい、運用しやすいレイアウトが求められるようになった。
２、レイアウトの傾向
上記のようにユーザーのニーズに応えるために、ウェブサイトのレイアウトは従来主流だったマルチカラムレイアウトから以下のような変化が起きている。
２．１レイアウトは列から行へ
マルチカラムレイアウトとは左・中央・右の三つの段組みによって作られるページになる。今でも楽天の店舗などで活用されている。
このような横3列並べる作りがスマホ対応しづらいため、徐々に使われなくなっている。
代わりにレスポンシブ対応のフレームワーク「Bootstrap」では行を分割し、列として利用する行を中心とした仕様が主流になりつつである。
２．２分解可能なマルチカラムレイアウト
マルチカラムレイアウトをベースに、横幅の変化に柔軟に対応できるようにコンテンツを小さく分割する傾向がある。
メリットは横3列並びを維持できる上、スマホ対応するときにとても組み立てやすいレイアウトである。
結論：
以上のようにスマホ対応しやすい、分解しやすい、組み立てやすいという新たなレイアウトの傾向が明確にみられる。
この傾向の元に、いろんなレイアウトのバリエーションが現れた。
３、レイアウトに関するウェブデザインのバリエーション
世界中によく使われているレイアウトをピックアップした。
３．１シングルカラムレイアウト
私たちいつ版制作しているランディングページはシングルカラムレイアウトになる。
まっすぐ縦に配列し、1カラムレイアウトまたはシングルカラムと言う。
横幅に合わせて柔軟に変化できるメリットがあるため、今までランディングページで使われることがメインですが、スマホやタブレットの普及によって、一般サイトでも活用するようになっている。
一般サイトに今までよく設置していたサイトバーはなくなり、固定ヘッダーやフッターによって同じ役割を果たすようになってきている。
サンプルサイト：
https://www.theport.jp/
３．２Masonryレイアウト
Masonryレイアウト最も有名なサイトはPinterestになるだろう。特徴は画面横幅いっぱいにコンテンツを配置し、各コンテンツは横幅小さく、縦幅は可変的になっている。
ウィンドウの横幅の変化に合わせて自由に配置できる。このようなレイアウトは画像をメインコンテンツとし、またはコミュニケーションを目的としたサイトに向いていると考えられる。
ウィンドウの横幅に合わせて自由にレイアウトできるため、スマホ・タブレット対応が非常にしやすい。ただし読み物中心のサイトには向いてないと考えられる。
サンプルサイト：
３．３フルスクリーンレイアウト
高解像度の画像素材などを使い、横幅いっぱいまでダイナミックに使用したデザインのことを言う。あらゆるサイズの端末を想定し作成することが多い。
項目ごとの説明に実に向いているレイアウトである。商品のPR、ブランディングなどに良く使われるレイアウト。注意点としてはスクロールなどアクションのヒントを明確に与えることになる。
サンプルサイト：
３．４グリッドレイアウト
グリッド（grid）とは格子・方眼の意味になる。グリッドレイアウトは画面やページを縦横に格子状に分割し、均等なブロックを組み合わせて各要素の大きさや配置、余白などの画面作成することである。
もともとは新聞や雑誌などの印刷物でよく使われてきた手法ですが、Webサイトのデザインにも応用している。
ポイントは文章や画像といった構成要素の境界線がグリッド線に合わせて配置し、マージンや余白の取り方などが統一されたりすることが大事である。
大きさの異なるパーツがたくさんあっても整理されたきっちり感がある。グリッドレイアウトはテンプレート配布しているとこが多いので、ダウンロードして使うことが可能。
サンプルサイト：
３．５タイルレイアウト
Windows 8とともに登場した「Modern UI（モダンUI）」以来、タイルレイアウトが多く使われるようになった。
その特徴は画面をきっちり分割し、タイルのように隙間なく並べることである。そしてタイルのサイズにメリハリをつけることによってコンテンツの優先順位を表現している。
メリットはどんな画面サイズでもコンテンツをきれいに整列できることである。デメリットは文字が多いと窮屈に感じ、ルール決めないとただのバナーならべたと思われる恐れがある。
サンプルサイト：
結論：
以上さまざまなレイアウトが挙げられた。サイトの内容・ユーザー・目的によって使われるレイアウトも変わってくる。
では実際案件が来たときにどのようレイアウトを考えているかは次の章で検討してみたい。
４、制作のフレームワーク
４．1、ランディングページ実績と課題
現在制作チームにおいて、一番多い案件はランディングページの案件で、一番よく使われているのはシングルカラムレイアウトになる。
ランディングページは多くの場合、特定の商品の紹介とPRのページになる。ブランディングよりコンバージョンを重要視し、商品の購入に直結する。
従来のランディングページは以下の特徴があげられる。
１、ファーストビューにすべての要素を詰め込み、コンバージョンまで見せる
２、開くのが遅いことを避けるため、動的要素が少ない。
３、横幅1024以下の安定感のある四角いブロックが普遍的。
現在もシングルカラムレイアウトが主流だが、従来の特徴に基づいて以下の変化がみられる。
１、ファーストビューに動的要素を導入し、コンテンツを詰め込むよりスクロールを意識させ、リズムよくスクロールするページが増えている。
２、動的要素が増えてき、ユーザーも動的「体験」を楽しむ傾向がみられる。
３、横幅１００％や三角などシングルカラムレイアウトなかでも大胆なレイアウトや動きを体験できるページが増えている。
サンプルサイト
https://kyujin.fukkoukeikaku.jp/lp/genki_gogo/
https://www.inte-internship2017.com/
制作の強み：
いままでの豊富な実績の積み上げがあり、コンバージョンが改善された実績がたくさん積み上げている。
私が考える制作の課題：
⇒ユーザーの体験をより豊かに、リッチに、インパクト強めに
より大胆なレイアウトや動的要素を取り入れたりし、とことんインパクトの強いページの実績を作ること
⇒企業の需要をより細かく応えると同時に、気づかない課題を提案する。
現在制作はいままで実績に基づいて、既存サイトの各種タブレット対応を行っている。しかしタブレット対応には限界があると考えている。
なぜなら誰でも対応できるし、既存サイトも数が限られているからである。
ウェブ環境の変化と同時に企業もユーザーとのコミュニケーションが変わってきている。当然制作にはより多様な手法と実力を求めていると考えられる。
それに応えるためには我々制作は一刻も早く新しいトレンドを取り入れたLP制作の実績を出さなければいけない。
スキルアップは基礎とし、その裏にある企業がウェブに求める新たなコミュニケーションを読み取らなければいけないと考えている。
オプティマイザーとしての付加価値をつけられなければならない。
⇒運用のコストダウン
コストダウンランディングページのスマホ化においては大きな課題である。
一般サイトとは違い、ランディングページの第一目的コンバージョンを最優先するためには、スマホサイトのレイアウトとデザインにも強くこだわる必要がある。
そのためスマホ用ランディングページはレスポンシブ対応せずに、PCとは別デザインで制作している。したがって企業側からみると運用コストは倍になる。
４．２、一般サイト案件とECサイト案件の実績と課題
一般サイトは主に企業サイトなどのサイトのことをいう。企業のサービスや情報を紹介したりする役割になる。ECサイトは企業サイトとは別に、オンラインでの販売を中心としたサイトのこという。
一般サイトは従来マルチカラムレイアウトがメインなレイアウトだった。現在外販においては、一般サイトの制作実績がまだ少ないだが、グリッドレイアウトもしくはタイルレイアウトの実績がみられる。
ECサイトでは現在ヴァーナルの制作を行っており、異なるページの目的ごとに、様々なレイアウトにチャレンジしている。
たとえば企業のこだわりやメッセージを伝わるページは、よりインパクトに伝えるためにフルスクリーンレイアウトとシングルカラムレイアウトをミックスして作成している。
トップページにはいろんな機能を担っているので、全体シングルカラムレイアウトを中心に、パーツパーツの機能に応じてマルチカラムレイアウトやタイルレイアウトをミックスしている。
制作の強み：
大型案件の実績は積み上げつつ、人材リソースも増えている。
私が考える制作の課題：
⇒実績がすくない
一般サイトやECサイトなどの案件はまだまだ少ない。
⇒大型案件制作に応じられるリソースと技術
現在の制作チームは大型案件を受けられる経験が少ないし、スキルも弱い。
⇒制作会社並みの質の制作するには
制作チームが制作会社を目指すならウェブ制作業界のお手本となるサイトの実績を残すべきだと考えている。
５、これからはレイアウト、紙媒体との境がなくなる？
CSS3やJS、またはbootstrapの進歩によってさまざまなレイアウトが実現しやすくなってきている。
こらからは決まったレイアウトで制作することはなくなるのではないかと思った、なぜならウェブ技術とハードウェア、ソフトウェアの進化と共に、どのようなレイアウトでも実現可能になりつつだから。
ユーザーがウェブサイトに求めているコンテンツや機能が多様化してきている。そして企業がユーザーに発信する内容も大幅に変化してきている。
たとえば昔なら採用ページは簡単な1ページで完結し、リソースをパンフレット制作に投入するパターンが多かったかもしれないが、
現在より多くの企業は採用ページをリッチにし、場合によって採用ページを採用サイトに仕上げたりする企業もある。
それと同時に、ウェブは紙媒体に負けない多様なレイアウトの実現が可能になってき、紙媒体が実現できないコミュニケーションを実現しつつとなってきている。
いままで紙媒体だから実現した豊富なレイアウトによる魅力や優位は、ウェブサイトに移されると考えられる。
そしてウェブサイトはさらにウェブでしか実現できない動的表現を取り入れ、決められたレイアウトという概念を突破し、より豊富なコミュニケーションを実現するために進化していくと考えられる。
結果
まとめ：
今回の研究を通して、レイアウトのトレンドをまとめた。ウェブ環境の変化によって、スマホ化対応、コストアップ、ユーザーが求めている体験によって様々なレイアウトが生まれた。
これからのレイアウトもどんどん多様化になると考えられる。それに伴う我々制作のスキルアップはまだまだ足りないのが目に見えている。
レイアウトのみでなく、ウェブ制作においてはまだたくさんの変化が起きている。これからのレポートで紹介していきたい。
参考
http://jbpress.ismedia.jp/articles/-/42463
スマートフォンからのインターネット利用者、2015年冬にはPCを超える可能性 ～ ニールセン、最新のインターネット利用状況を発表 ～
一緒に読まれているコラム
関連するおすすめページ
[calltoaction01]