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

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

WEBサイト運営者必見!2015年のWEBデザイン、5つの大胆予測!

  • WEBデザイン

あけましておめでとうございます。新しい年を迎えて心も新たに、よりお役に立てる情報、読んでいただける記事をお届けできるよう、当インバウンドブログはさらにパワーアップしていきたいと思います。本年もよろしくお願いいたします。

さて、新しく生まれては消えていくトレンド。その繰り返しの中で、WEBデザインは進化し続けています。新しい年、2015年には、どのようなトレンドがやって来るでしょうか?新年1回目の今日は、2014年のWEBデザインのトピックスを振り返りながら、そこから見えてくる今年、2015年のWEBデザイン・トレンドを大胆予測してみたいと思います。WEBサイトを運営する企業のみなさまにも、押さえておいたいただきたい項目ばかり。特に、今年、サイトの新規開設やリニューアルを考えておられる方は必見です!

予測1.使いやすさを意識した「コンテンツ・ファースト」のデザインが増える

Enjoy WishList
Enjoy WishList

2014年、ユーザーフレンドリーなスッキリと使いやすいサイトが増えたように感じます。その大きな理由の1つがコンテンツ・ファーストを意識したデザインにあります。

コンテンツ・ファーストとは、不必要な要素を省き、プレゼンテーションしたい内容にユーザーが集中できるようにデザインするという考え方。かつてWEBサイトと言えばとにかく伝えたい情報を「全部乗せ」したような、カラム数が多く、過剰に装飾もされたような、ユーザー側からすると使いづらく自分が求めている情報にたどり着くことが困難なサイトが数多くありました。

しかし、流れは大きく変わってきています。

  • ファーストビューを見ればそのサイトのコンテンツがしっかりとわかる
  • コンテンツの1つ1つを大きなボタンにして、ダイレクトにアクセスできる
  • 下層ページにもなるべくクリック数が少なくアクセスできる

このようなデザインは、2015年のWEBデザインでも基本となる考え方として引き継がれていくと思われます。

予測2・モバイルファーストを意識した「シングルカラムの縦長ページ」が主流に

QUAY
QUAY

2014年のWEBデザインで、明らかに目にすることが増えたのが「シングルカラムの縦長ページ」です。

これはWEBサイトへのアクセスが、PC中心の時代からスマートフォン中心の時代に移り変わろうとしていることから考えても重要です。スマートフォンサイトでは、クリックするボタンが多いとユーザーが混乱してしまい、なかなか自分の見たいコンテンツへアクセスすることができません。「クリックよりもスクロールが好まれる」傾向にあります。

シングルカラムの縦長ページであれば、ユーザーはスクロールするだけでサイトの内容を理解できます。このような「モバイルファースト」を意識した考え方がデザインで重視され、それをPCサイトのデザインにも反映した結果、「シングルカラムの縦長ページ」が急増したと言えるでしょう。

WEBの閲覧がPCからスマートフォンやタブレット中心に変わっていく流れは2015年、さらに加速していくと思われ、このようなシングルカラムデザインのサイトを目にする機会はさらに増えるのではないでしょうか。ユーザーが他のページに迷い込んでしまうこともない明確な導線は、集客サイトでのお問い合わせへの誘導や簡潔に内容を伝えたい場合にも、良いデザイン手法と言えます。

<参考サイト>

2014年、開発は「モバイルファースト」に
http://japan.zdnet.com/article/35041548/

予測3.フラットデザインがさらに進化する

Working Not Working
Working Not Working

iOSやMac OSをアップデートするたびに特にはっきりと感じるのが、フラットデザインがWEBデザインすべてを飲み込んでしまうような勢いです。シンプルで平坦なデザインが増え、一昔前に目にしたようなグラデーションを多用してリッチな作りにしたホームページを探すのは、もはや難しくなりつつあります。

そんなここ数年のWEBサイトの最大のトレンドとも言えるフラットデザインですが、正直なところ扱いが難しいのも事実です。フラットデザインは非常にシンプルなデザインですから、なかなか他のサイトとの差がつけづらく、手抜きのデザインと思われてしまうことさえあります。視覚的にもすべてが平坦に見えてしまうため、どこがボタンやリンクされているアイコンなのか、わかりづらいこともあり、ユーザビリティ的にも好みが分かれるところです。

そのようなフラットデザインのデメリットをカバーするのが、フラットデザインをベースにした新しいスタイルトレンドです。フラットデザインの初期にも流行したような「ロング・シャドウエフェクト」「ドロップシャドウエフェクト」「3Dフラットデザイン」など、フラットでありながら立体的な処理で、単にフラットにするとユーザビリティが悪いという問題点を解決しています。

さまざまなサイズの端末に対応したデザインをおこなう際に、なるべく画像を使わない方が対応しやすいことを考えると、フラットデザインがWEBデザインの主流であることは2015年も変わることはないでしょう。しかし、そんなフラットデザイン自体も刻々と進化していることを理解しておくのは重要なポイントです。

<参考サイト>

フラットデザインをより魅力的にする、新スタイルトレンド5個まとめ
http://photoshopvip.net/archives/52673

予測4.マルチデバイス対応を想定したデザインへのシフト

Kelsey Dake
Kelsey Dake

今年はiPhone 6、iPhone 6 Plusが発売され、iOSデバイス1つをとってもさまざまなサイズが展開され、解像度も異なる状態です。これにAndroid端末を加えると、機種ごとの画面サイズや解像度は、文字通り「星の数ほどある」ことになります。このような状況では、「1つのサイトを何か1つのデバイスのサイズにあわせて、画面サイズを固定してデザインするのは不可能な時代」だと言えます。

この問題の解決するために生み出されたのが、「レスポンシブWEBデザイン」や「アダプティブWEBデザイン」などの画面に合わせて変化するデザインであり、それをおこないやすくしているのが、先程紹介したフラットデザイン。そして、そのフラットデザインを採用する理由にもなっているのが、できる限り画像による制約をなくすため、ということになります。

複数のデバイスを考えると、画像をどのように扱うかはとても重要です。手間をかけてデバイスごとに最適なサイズの画像を用意するという方法もありますが、ベクター(拡大してもギザギザにならない画像形式)であれば、1つのファイルでさまざまなデバイスに応じて表示することが可能です。それを実現するために、「CSS3」「SVG」「WEBフォント」などを積極的に使用していくことは、2015年のWebデザインでは欠かせないことになるでしょう。

予測5.パララックスがより洗練されて進化する

image05
IN NATURAL

2年ほど前からレスポンシブWEBデザインと並んで大流行となったのが「パララックス」です。パララックスについては、このインバウンドブログでも「ユーザーの視覚と心に訴えかける、パララックスを効果的に使う事例とポイント」という記事で取り上げておりますので、そちらも合わせて読んでいただければと思います。

このパララックス、登場した時には一気に広まり「猫も杓子もパララックス」という感じで、WEBデザインのサイトリンク集などを見ると、どのサイトを見てもゴリゴリをスクロールし続けてパララックスを動かしていたような記憶があります。しかし、遊び心などとして上手く取り入れられているのなら良いのですが、普通にサイトを閲覧したいユーザーにとって、あまりにも過剰なパララックスは「どれだけスクロールすればいいんだ!」と思わせるような場合もあり、あまりユーザーのためになるものではありませんでした。

そんな過剰なパララックス時代から数年。今はスクロールをするとコンテンツに少し動きがついてフェードインするなど「さりげないパララックス」が流行っています。これは単調になりがちな「シングルカラムの縦長ページ」にアクセントをつけるという意味でもとても有効で、ユーザーに飽きることなくページを最後までスクロールしてもらうためにも役立っています。

ユーザビリティも考えられた視覚効果として、2015年もパララックスはさらなる進化を遂げていくのではないでしょうか。

今回のまとめ

今日は、年始にあたり、2015年のWEBデザインのトレンド予想をおこなってみました。今回、ご紹介した5つのトレンドは、1つ1つが独立した流行であるというよりは、すべてが関連したもので、それぞれが融合することによって「さまざまな閲覧環境に対応したユーザビリティの高い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選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

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

  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

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