ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

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

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

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

  • WEBデザイン

あけましておめでとうございます!いよいよ2016年が始まりました。昨年、WEBの世界では様々な動きがあり、このインバウンドブログでも多くのトピックをご紹介してきました。さて今年はどのような1年になるでしょうか。

ということで今日は、2015年の動向を振り返りながら、2016年にはどのようなWEBトレンドが巻き起こるのかを、デザイン面にフォーカスして予想していきたいと思います。トレンドを押さえたサイトを作り運営していく上で、必見の内容です。ぜひ最後までご覧ください!

予測1.レスポンシブWEBデザインがサイト制作の基準になる

WEBデザインは、さまざまなWEB技術とも深く関係しています。新しい技術が生まれれば、それを活かしたWEBの作り方が出てきて、そこから新たなWEBデザインのトレンドが生まれていきます。最初は海外サイトや国内の一部先端的サイトでしか取り入れられていなかったデザインも、次第に広く普及し、定着し、やがてスタンダードなものになっていきます。

そのような新たなスタンダードとして、2016年、レスポンシブWEBデザインがサイト制作の標準になっていくことは間違いないでしょう。今、サイトの新規構築やリニューアルを行う際に、スマートフォン対応という言葉が出ないことはまずありませんし、その方法として最もスタンダードなのがレスポンシブWEBデザインです。

レスポンシブ対応は、もはやオプションではなくなる。

昨年、グーグルの「モバイルフレンドリーアップデート」によって、スマホ対応させないと検索結果にも影響が出てしまうということで、一気に関心が高まりましたが、現実にはまだまだ、「レスポンシブ対応しておらず、スマホサイトがあるわけでもない」というケースは数多くあります。しかし今年、レスポンシブ対応は従来のようなオプション的なものではなくなり、「レスポンシブありき」でサイトを制作、あるいはリニューアルしていく流れに拍車がかかっていくでしょう。

image レスポンシブ対応サイト例:
受験生応援サイト“THE WORLD GATE”|神田外語大学

予測2.動画を使ったサイトがさらに増加

昨年も数多くのWEBサイトを見てきましたが、後半になるほど、動画を使ったサイトの数がかなり増えてきたと感じた1年でした。この傾向は、今年も確実に増えていきそうな気がします。

ちなみにWEBサイトにおける動画コンテンツにはメリット、デメリットの両面があります。メリットは、写真や文章だけでなく動画を使うことで伝えられる情報の幅が広がり、臨場感やLIVE感なども伝えることができるということ。そして、格好良い動画、社員が登場する動画、ドラマのような面白いストーリーの動画など、特徴のあるものを制作すれば、それ自体が目玉コンテンツになり、認知向上やブランディングにもつながっていきます。

逆にデメリットとしては、静止画(写真)に比べると容量が重いため、サイトが表示されるまでの読み込み時間が長くなって離脱されてしまったり、見るのに時間がかかってしまうため、せっかく良い動画を作っても思いの外最後まで再生されず見てもらえなかったり、などということがあります。

デザインからの動画アプローチもより洗練される。

このようなメリット、デメリットも踏まえた上で、デザイン的な側面からも動画を使ったサイトが2016年は増えていきそうです。アクセスするとファーストビューでイメージ動画のようなものが自動再生されるサイトはさらに増え、動画の重さを解決するためにモノクロや単色にして雰囲気を出すなど、デザイン的な方向性からのアプローチがより進化していくのではないでしょうか。

image 動画をうまく活用したサイト例: ATH-MSR7(ポータブルヘッドホン)|オーディオテクニカ

予測3.SNSと連携したサイト制作が増える

企業としてしっかりとしたホームページを持っている自体に価値があるという時代もありました。しかし、ホームページが手軽に作れるものとなった今では、作った後にどうすれば多くの人にサイトを見てもらえるか、サイトをどう成長させていけるのかということも踏まえて、設計やデザインをしていかなければならなくなっています。

その1つの方法が、WEBサイトと各種SNSの連携です。ホームページを作成する際に、FacebookページやTwitterアカウントを同時開設して連携させることは既にスタンダードになりつつあります。今後は、様々なSNSに投稿された写真や動画、テキストメッセージなどを効果的に編集してサイト上に表示させるなど、SNSとの連携を前提にしたサイトコンテンツがさらに増えていくと思われます。情報を拡散するツールというだけでなく、コンテンツを生み出すしくみとしてSNSが活用されていきそうです。

コンテンツのシームレス化がさらに進む。

例えば、お知らせはFacebookのタイムラインを読み込ませることでこと足りてしまうことも多いですし、フォトギャラリーのようなコンテンツはInstagramの写真を読みこめば、更新しなくても自然にアップデートされていきます。このように、両者のコンテンツはよりシームレスになっていくはず。SNSの情報を集約してポータル化するサービスも現れ、このような動きは今年更に加速すると思われます。また、例えば以下のようにSNSの投稿自体のデザインなども、より洗練されていくのではないでしょうか。

image SNSの投稿もデザインされた事例:丸亀製麺 Instagram

予測4.ユーザービリティの高いマテリアルデザインが浸透する

ここまでの予測をまとめると、レスポンシブ対応が進んでよりマルチデバイスな環境での閲覧が拡がり、動画など扱うコンテンツも増え、SNSとさらに緊密に連携し…ということで、WEBサイトは単に情報を見るものというよりも、生活の中で無意識的アクセスし、そこから情報を得たりサービスを活用したりするプラットフォームのようなものになってきていることがわかります。

そのため、より心地良く使ってもらうためのUXやUIの重要性が増してきます。しかし、デザインの側面から見ると、例えばフラットデザインやゴーストボタンのように、レスポンシブ対応がしやすく、シンプルでデザイン性も高く感じはするものの、ユーザーが使いやすいかどうかという点では賛否両論があるというものも決して少なくはありません。そのような中で、デザイン性とユーザービリティの高さを併せ持つデザインとして、2015年に注目され始めたのが「マテリアルデザイン」でした。

利用者がより感覚的に使えるデザインに…

マテリアルデザインとは、画面で見る2D(2次元)の世界をマテリアル(物資)として3D(3次元)で捉えた、「デジタルではあるけれども実際にモノを使っているかのようにフィジカルな操作性を意識したデザイン」のこと。具体的に言うと、立体的な構造に基づくデザインで、アニメーションがついてわかりやすいという特徴があり、WEBサイト特有の操作方法のようなものがわからなくても、感覚的に使えるデザインだと言えます。

単に閲覧するというだけではなくなってきたWEBの世界で、このマテリアルデザインという考え方は、今年さらに浸透していくと思われます。

Material design |Google Developers(音声あり)

予測5.日本語WEBフォントが普及する

最後はフォント(書体)についてです。WEBデザインには、歴史の長い紙のデザインから学べる点がまだ多くあり、インバウンドブログでも「【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ」のようなまとめ記事も書いています。しかし、紙媒体と大きく違う制約として、「WEBデザインではフォントを自由に使えない」ということがあります。

レティナディスプレイや4Kなどディスプレイの解像度もあがり、WEBでも細かな表現が可能なってきていますが、このフォントの問題だけは残っていました。画像で書き出してしまえばどのようなフォントも使うことができますが、コピー&ペーストするなどテキストとして扱うことも考えないといけない場面も少なくありません。そうなると使えるフォント数は少なく、しかも閲覧環境に依存するためデザイン性を上げられないという制約があります(同じサイトをMac OSで見たときに、同じ明朝体でもこんなにキレイに表示されるのか!と驚いた経験があるWindowsユーザーの方は多いと思います)。

しかし、日本語のWEBフォントにも追い風が…

そのような問題を解決する方法としてメジャーになってきたのが、機種に依存せずに思い通りに表示されるWEBフォントの使用。欧文フォントではすでにかなりの種類があり、海外サイトなどを見ていると、「こんな変わった書体でもテキストで表現されているのか!」と驚くこともあります。しかし、日本語のWEBフォントに関しては、文字数や画数の関係などで「フォントのデータが重い」「値段が高い」「種類が少ない」などの課題があり、なかなか利用が増えてきませんでした。

しかし、Googleが日本語のWEBフォント「Noto Sans Japanese」の提供を開始するなど普及に追い風が吹いてきています。日本語WEBフォントの種類が増えれば、デザインの表現の幅もぐっと広がります。希望的観測も含めて、2016年は日本語WEBフォントを使用したサイトがどんどん増えていくのではないでしょうか。

image Google Noto Fonts

今回のまとめ

以上、年頭にあたって2016年のWEBのトレンドを考えてみました。いかがでしたでしょうか?みなさんの頭の中には、またそれぞれの違った予測があるかもしれませんね。どのような展開を見せていくかが楽しみです。

振り返ってみれば、スマートフォンやSNSなど数年前まではなかったものが次々と生まれ、技術のサイクルが早くなり、それに伴って人々とWEBとの接し方も大きく変わってきています。もしかしたら、PCでもスマホでもタブレットでもなく、iWatchのようなウェアラブルデバイス向けのサイトを作るのが主流になる…そんな時代も遠くないのかもしれません。

そんな風に未来のWEBデザインのことも想像しつつ、今年もビジネスのお役に立てる良いサイトをたくさん生み出していけるよう、私たちもいっそう精進して参ります。また、このインバウンドブログでも、みなさまのお役に立てる情報をお届けしたいと思います。本年も、どうぞよろしくお願いいたします。

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  7. 7

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  8. 8

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

  9. 9

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

  10. 10

    歯科クリニックのホームページを徹底調査!24サイトに見る集患力のポイントとは?

総合

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

エムハンドブログ編集部

  • 編集長みつむね

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

  • 伊藤 高啓

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

  • 新棚幹太

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

  • 島田

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

  • ヨネクラ

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

  • キクチ

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

  • 池田仮名

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

最新記事

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

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND