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

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

サイトリニューアルの前に!最近よく聞く4つのWEBトレンド

  • WEBデザイン

今回は最近クライアントのご要望の中でもよく聞く「1カラムデザイン」「メイン動画」「レスポンシブ」「メディア化」の4つのトレンドをピックアップしたいと思います。

これら4つのトレンドはweb業界全体を覆うトレンドとも言え、これから新規制作やリニューアルを進めるサイトにはこれらのトレンドを取り入れることも多いと思います。そこで各トレンドの背景にある流れと制作時に気をつけたいポイントをまとめてみました。依頼する側も受注する側も参考になればと思います。

1カラムデザイン|【トレンドと制作のポイント】

■1カラムデザイントレンドの背景

少し前までは、1画面内にカラムを複数作りコンパクトに情報をまとめることが多かったサイトデザインですが、最近のトレンドではフォントやコンテンツブロックも大きくレイアウトした、いわゆる「Big UI」が多くのサイトで取り入れられています。1カラムにすることで動線を一本化できて、分かりやすいサイト構成にできるというメリットも大きいのでしょう。

1カラムデザインはモニターサイズが大きくなり、タッチパネル方式へモニターがシフトしたことも大きな要因として考えられます。つまりタッチパネルをフリックして縦スクロールする操作性の影響です。フラットデザインやパララックス効果、レスポンシブデザインとも相性がいいので、それらのベースとして1カラムデザインは今後も広まると思います。

■1カラムデザインの制作時に注意するところ

2カラムで制作するときと同じ感覚で構成すると密度が高くなってわかりにくくなり、1カラムデザインの特徴でもあるBig UIのバランスが悪くなります。また、フォントサイズも2カラムでは「13ピクセル」程度でいいのですが、1カラムになると少し物足りなさを感じるかもしれません。もう1サイズ大きめのフォントサイズを意識してもいいかと思います。

また1カラムというレイアウト上、2~3行のリード文はセンタリングすることが多くなります。そういった際は、1行あたりの文字数を合わせバラつきを抑えるとキレイにデザインできます。
1カラムで構成するということは、サイトの1つ1つのパーツが大きくなりますので、写真や素材のクオリティがこれまでにもまして求められることも注意点です。

メイン動画|【トレンドと制作のポイント】

■メイン動画トレンドの背景

動画を使ったWebサイトをよく見るようになりましたね。文字や写真だけでは伝わらない製品の良さ、社内の雰囲気、スタッフの仲の良さなどを動画で紹介するのはとてもいいアイデアだと思います。
最近特にトレンドとなっているのが「メイン動画」です。メイン画像のコンテンツや背景として動画が再生され、そこから得られる雰囲気や情報は写真イメージよりも情報量が多いです。

こうしたメイン動画が普及している主な要因としては

  • html5のvideoタグ
  • モバイルのスペックが上がり動画「再生」環境が向上したこと
  • 動画「撮影」機能の向上と低価格化
  • 動画「編集」アプリなどの普及

があると思います。

先月、Facebook内での1日の動画再生回数が40億回を上回ったというニュースに注目が集まりました。こうした動画への需要の高さがうかがえるニュースではないでしょうか。

■メイン動画制作時に注意するところ

一番の注意点は、コンテンツとして「魅せる動画」と、背景として「流す動画」を切り分けて考えることです。メインイメージで背景として動画を「流す」場合、コンテンツのように主張の強い動画ではメインの背景として使いにくくなります。逆に作業風景などサラッとした軽い動画は「魅せる」コンテンツとして物足りなさを感じてしまいます。動画は制作する最初の段階でどんな感じで使いたいかを明確にしておきたいところです。

また動画のファイル容量が重すぎると読み込みに時間がかかってしまうのも基本的ではありますが見落としがちな注意点です。動画の内容は伝えたいことをコンパクトに作るように心がけましょう。

レスポンシブデザイン|【トレンドと制作のポイント】

■レスポンシブデザイントレンドの背景

「スマホファースト!」――よく聞きます。クライアントからレスポンシブ対応の要望も多いですね。今年4月21日にgoogleの「モバイルフレンドリーアップデート」もあって、新規で制作するサイトのほとんどがスマホ対応サイトです。

日本で独自の発達を遂げたガラケーが駆逐される一方で、スマホやタブレット端末が市場シェアを伸ばし続けています。こうしたマルチデバイスに対応するレスポンシブデザインを採用したサイトは「対応していて当たり前」の水準になりつつあるようです。

また、レスポンシブデザインはメディアクエリーの実用化を受けて、もはやトレンドだけでなく王道になったと言ってもいいのではないでしょうか。

■レスポンシブデザインの制作時に注意するところ

レスポンシブデザインでのサイト構築には、ブレイクポイントの設定が重要です。厳密には「利用シーンを優先したアダプティブ」と「デバイスを優先したレスポンシブ」の2パターンに分かれるのですが、どこにブレイクポイントを設定するかをデザイナーとしっかり共有することが重要です。

つまりレスポンシブデザインの制作の現場において、これは「サイトをどれほどのデバイスの機種に対応させたいか?」を共通認識としてチーム内ですり合わせておくこと、と同義です。

メディア化|【トレンドと制作のポイント】

■メディア化トレンドの背景

以前からいわゆる「メディア化」はサイトで結果を出す王道的な方法でしたが、小手先のSEO対策で効果があった時代はどこもかしこも小手先のテクニックに頼っていたと思います。

過去のSEO対策を積極的に取り組まれていたようなクライアントは、現在ではもれなくこの「メディア化」に取り組まれてるのではないでしょうか。しかしメディア化は過去のSEO対策と性質的な違いがあります。

メディア化は一朝一夕で結果が出にくく、また1つのパターンをひたすら複製するだけでは質のいいコンテンツになりません。そこがこのメディア化の難しいところでもあります。

■メディア制作時に注意するところ

まずはコンテンツ(記事)の質が何よりも重要です。しかしながら質を担保しながら継続的にコンテンツを更新するのは簡単なことではありません。従来のサイト運営の場合はサイト担当者を置くだけで良かったのですが、メディア化したサイトの場合は編集長というそのサイトを継続的に運営できる責任者が必要です。

また、メディア化にはコーディング面での基本的な構造も非常に重要です。メタキーワードやディスクリプションなどが各ページ個別に設定できることや、HTMLを構造化データにマークアップするなども重要なポイントになってきます。

またこうした記事数が溜まってくれば、ページ構成やレイアウトをブラッシュアップしてユーザーが見やすい配慮を加えていくことも重要です。

まとめ

サイトは本来的に企業イメージを高めたり、コンバージョンを改善する役目を担っています。そうしたWEBサイトにはその時々に応じたトレンドがあります。サイト訪問者の心をつかむためには、常に最新のトレンドを取り入れることも重要なのです。

少し以前だとフラットデザインがブームでシンプルなサイトが多かったのですが、最近では上に挙げたような「1カラムでのBig UI、メインには動画を入れて…」という「シンプルなだけでなく訴求力を高めた」デザインが多いと感じます。

スマホやタブレットの普及と共にWEBサイトの閲覧環境が大きく変わり、googleのアルゴリズムのアップデートによるWEBサイトに対する本質的な価値観が変わり、と外部環境の流れの中でWEBのトレンドが決まると言えるのかもしれません。

また、過剰な表現でインパクト重視のWEBサイトが消費者から倦厭(けんえん)され出し、ありのままの商品やサービスの紹介、企業の理念などが消費者に受け入れられる時代になってると感じます。

これは単に「流行り/廃り」の問題ではなく大きなトレンドの変化と言えそうです。サイトリニューアル時には、これらトレンドを検討してみてはいかがでしょうか?

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

総合

  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

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

  10. 10

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

エムハンドブログ編集部

  • 編集長みつむね

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

  • 伊藤 高啓

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

  • 新棚幹太

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

  • 島田

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

  • ヨネクラ

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

  • キクチ

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

  • 池田仮名

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

最新記事

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

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