ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

2014年を総まとめ! WEB制作トレンド・ベスト10 【後編】

  • WEBデザイン

年の終わりの振り返りとしてお届けしている、2014年のWEB制作トレンド総まとめ。前編では、カウントダウン式で10位から6位までを発表しました。この記事は、その後編です。まだ前編をご覧になっていない方は、ぜひそちらから先に見ていただければと思います。

ひき続いてこの後編では、5位から1位までをご紹介していきます。WEB制作の考え方や手法に多くの変化が見られた2014年でしたが、ランキング上位にはどんなものが入ったでしょうか。2015年をスタートダッシュするために、ぜひチェックしてみてください。

5位 心地良く楽しいスクロールの演出

WEBサイトを閲覧するユーザーの視線の動きとして、従来は、紙媒体の時代から続く「Z型」や、WEBの普及と研究が進んでくるうちに意識されるようになった「F型」などが挙げられ、これらの視線の動きに従ってコンテンツを配置すれば良いとされていました。しかし、最近はスマホに慣れたユーザーが増えたということで、下に向かって一直線に進んでいく配置(シングルカラムレイアウト)が増えてきています。2014年は、このかたちを採用したホームページが多数みられた年でした。

1224_01

また、それに関連して、ページを閲覧するユーザーに「いかに下までスクロールをしてもらうか」というWEBデザインの重要テーマの解決として、スクロールに合わせて視覚効果を生み出す「パララックス」などの手法が注目されました。その他、各ポイントにアニメーションを配置した「アニメーションエフェクト」など、楽しく工夫されたスクロールの演出方法も多く見られるようになりました。

4位 動画によるダイナミックな演出

WEBサイトに動画を上手く組み込んだ演出方法も、多く見られるようになりました。キャンペーンページなどによく利用されたフルスクリーンレイアウトは、Flashが下火になってきた時に衰退するように見えましたが、ダイナミックな表現を使った効果が見直され、再び盛んになってきています。

全面の背景として動画を配置したり、さらには画面全体をコマ割りして動画を見せたりするなどの演出も見られ始めています。

1224_03
事例:ここで一息入れて、ボレロの演奏をお楽しみください
http://play.lso.co.uk/

3位 モバイルファースト

モバイルファーストとは、従来のようにパソコン用のサイトから設計するのでなく、スマホをはじめとするスマートデバイスから先に構築していくという考え方です。モバイルファーストという言葉自体がトレンドになったのは、どちらかと言うと昨年かもしれませんが、今年はそれが定着した年だと言えます。

スマートフォンサイトの方がパソコン版サイトよりも充実しており、よくできている、というケースも増えてきました。なお、このモバイルファーストの項目は、正確にいえば、2位のコンテンツファーストの中に位置づけられるものですが、WEB制作におけるPC版サイトとスマホ用サイトの位置づけの逆転というトピックはWEB制作において象徴的であることから、ひとつのトレンドとして、あえて別途ピックアップしました。

2位 コンテンツファースト

ある調査によると、スマートフォンを中心にしたスマートデバイスでのWEBサイトの閲覧は、2014年末時点でPCと逆転するという予測があるそうです。その一方で、フィーチャーフォン(いわゆるガラケー)の利用者も携帯電話の所有者全体のまだ40%以上いるというデータもあります。さらにはテレビやゲーム機の他、家電分野でもWEB閲覧機能を組み込む研究開発が進んでいます。

こうなってくると特定のデバイスだけを指して○○ファースト、とすることには無理があります。そこで、「ユーザーはどんな状況で閲覧するかわからない。だから、余計な情報を削ぎ落として、ユーザーに最適な情報だけを提供することが最善の形だ」、という考え方がコンテンツファーストです。

モバイルファーストをも含む流れの根底にある大きなトレンドとして、「本当に必要なコンテンツだけを提供する」「コンテンツそのものが大事である」という、コンテンツファーストの考え方がWEB制作の主流となっています。

1位 UX(ユーザーエクスペリエンス)の進化

UX(User Experience)は、直訳すると「ユーザー体験」。ユーザーが特定の製品やサービスを使った時に得られる経験や満足などを表す言葉です。その概念自体は以前からあったものですが、今年はWEB制作においてもこのUXが意識されるようになった年だと言えます。
その背景にはスマートフォンやタブレットの普及によって、ユーザーのWEBへの接し方が今までと大きく変わったことがあります。

タッチ操作や音声操作などマウスを使わなくても操作ができるようになったことや、移動中や外出先、ソファーでくつろぎながらなどWEB閲覧環境が多様になったことなどがWEB制作にも影響してきています。見やすく、使いやすいユーザーインターフェイスの概念や、ユーザビリティを考えたナビゲーション設計などはWEB制作の基本としてこれまでも重視されてきましたが、今後はさらに、心地よさや感動、満足を与えるようなUXを意識した制作が一般化してくるでしょう。

あえて大雑把な言い方をすれば、UXとは「ユーザーをよく見てWEBを制作していきましょう」ということ。2015年にはスマートデバイスのさらなる普及や多様化が予測されていますが、「閲覧環境やデバイスに合わせたWEBデザイン、制作」から一歩進んで、「ユーザーに合わせたWEBデザイン、制作」がキーワードになっていくはずです。

1224_02

2014年のWEB制作を振り返って

以上、2回に分けてお届けした「2014年を総まとめ! WEBデザイン・制作トレンド ベスト10」、いかがでしたでしょうか?制作手法の進化や制作ツールの充実によって、WEBの表現方法は多種多様になりました。しかし、それ以上に望まれているのが、「誰のためのWEBサイトか?」という原点につながる、ユーザー中心の考え方だということが、トレンドを振り返る中であらためて明確になった気がします。

2015年以降はさらに、こうした考え方の有無が成否を分けていきそうです。当社にとっても、また集客やブランディングなどに積極的にWEB活用をされている企業のみなさまにとっても、来年も変化の多い年になるかもしれませんが、流れをしっかりと受け止め、成果を目指して取り組んでいきましょう!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」