サイトリニューアルの前に!最近よく聞く4つのWEBトレンド2015-06-19サイトリニューアルの前に!最近よく聞く4つのWEBトレンドWEBデザイン今回は最近クライアントのご要望の中でもよく聞く「1カラムデザイン」「メイン動画」「レスポンシブ」「メディア化」の4つのトレンドをピックアップしたいと思います。これら4つのトレンドはweb業界全体を覆うトレンドとも言え、これから新規制作やリニューアルを進めるサイトにはこれらのトレンドを取り入れることも多いと思います。そこで各トレンドの背景にある流れと制作時に気をつけたいポイントをまとめてみました。依頼する側も受注する側も参考になればと思います。UI」が多くのサイトで取り入れられています。1カラムにすることで動線を一本化できて、分かりやすいサイト構成にできるというメリットも大きいのでしょう。1カラムデザインはモニターサイズが大きくなり、タッチパネル方式へモニターがシフトしたことも大きな要因として考えられます。タッチパネルをフリックして縦スクロールする操作性の影響です。フラットデザインやパララックス効果、レスポンシブデザインとも相性がいいので、それらのベースとして1カラムデザインは今後も広まると思います。UIのバランスが悪くなります。フォントサイズも2カラムでは「13ピクセル」程度でいいのですが、1カラムになると少し物足りなさを感じるかもしれません。1サイズ大きめのフォントサイズを意識してもいいかと思います。1カラムというレイアウト上、2~3行のリード文はセンタリングすることが多くなります。いった際は、1行あたりの文字数を合わせバラつきを抑えるとキレイにデザインできます。1カラムで構成するということは、サイトの1つ1つのパーツが大きくなりますので、写真や素材のクオリティがこれまでにもまして求められることも注意点です。動画を使ったWebサイトをよく見るようになりましたね。文字や写真だけでは伝わらない製品の良さ、社内の雰囲気、スタッフの仲の良さなどを動画で紹介するのはとてもいいアイデアだと思います。最近特にトレンドとなっているのが「メイン動画」です。メイン画像のコンテンツや背景として動画が再生され、そこから得られる雰囲気や情報は写真イメージよりも情報量が多いです。アプリなどの普及があると思います。先月、Facebook内での1日の動画再生回数が40億回を上回ったというニュースに注目が集まりました。した動画への需要の高さがうかがえるニュースではないでしょうか。■メイン動画制作時に注意するところ一番の注意点は、コンテンツとして「魅せる動画」と、背景として「流す動画」を切り分けて考えることです。メインイメージで背景として動画を「流す」場合、コンテンツのように主張の強い動画ではメインの背景として使いにくくなります。逆に作業風景などサラッとした軽い動画は「魅せる」コンテンツとして物足りなさを感じてしまいます。動画は制作する最初の段階でどんな感じで使いたいかを明確にしておきたいところです。動画のファイル容量が重すぎると読み込みに時間がかかってしまうのも基本的ではありますが見落としがちな注意点です。動画の内容は伝えたいことをコンパクトに作るように心がけましょう。「スマホファースト!」――よく聞きます。クライアントからレスポンシブ対応の要望も多いですね。今年4月21日にgoogleの「モバイルフレンドリーアップデート」もあって、新規で制作するサイトのほとんどがスマホ対応サイトです。日本で独自の発達を遂げたガラケーが駆逐される一方で、スマホやタブレット端末が市場シェアを伸ばし続けています。したマルチデバイスに対応するレスポンシブデザインを採用したサイトは「対応していて当たり前」の水準になりつつあるようです。レスポンシブデザインはメディアクエリーの実用化を受けて、もはやトレンドだけでなく王道になったと言ってもいいのではないでしょうか。■レスポンシブデザインの制作時に注意するところレスポンシブデザインでのサイト構築には、ブレイクポイントの設定が重要です。厳密には「利用シーンを優先したアダプティブ」と「デバイスを優先したレスポンシブ」の2パターンに分かれるのですが、どこにブレイクポイントを設定するかをデザイナーとしっかり共有することが重要です。レスポンシブデザインの制作の現場において、これは「サイトをどれほどのデバイスの機種に対応させたいか?」を共通認識としてチーム内ですり合わせておくこと、と同義です。以前からいわゆる「メディア化」はサイトで結果を出す王道的な方法でしたが、小手先のSEO対策で効果があった時代はどこもかしこも小手先のテクニックに頼っていたと思います。過去のSEO対策を積極的に取り組まれていたようなクライアントは、現在ではもれなくこの「メディア化」に取り組まれてるのではないでしょうか。メディア化は過去のSEO対策と性質的な違いがあります。メディア化は一朝一夕で結果が出にくく、また1つのパターンをひたすら複製するだけでは質のいいコンテンツになりません。そこがこのメディア化の難しいところでもあります。■メディア制作時に注意するところまずはコンテンツ(記事)の質が何よりも重要です。質を担保しながら継続的にコンテンツを更新するのは簡単なことではありません。従来のサイト運営の場合はサイト担当者を置くだけで良かったのですが、メディア化したサイトの場合は編集長というそのサイトを継続的に運営できる責任者が必要です。メディア化にはコーディング面での基本的な構造も非常に重要です。メタキーワードやディスクリプションなどが各ページ個別に設定できることや、HTMLを構造化データにマークアップするなども重要なポイントになってきます。した記事数が溜まってくれば、ページ構成やレイアウトをブラッシュアップしてユーザーが見やすい配慮を加えていくことも重要です。まとめサイトは本来的に企業イメージを高めたり、コンバージョンを改善する役目を担っています。したWEBサイトにはその時々に応じたトレンドがあります。サイト訪問者の心をつかむためには、常に最新のトレンドを取り入れることも重要なのです。UI、メインには動画を入れて...」という「シンプルなだけでなく訴求力を高めた」デザインが多いと感じます。スマホやタブレットの普及と共にWEBサイトの閲覧環境が大きく変わり、googleのアルゴリズムのアップデートによるWEBサイトに対する本質的な価値観が変わり、と外部環境の流れの中でWEBのトレンドが決まると言えるのかもしれません。過剰な表現でインパクト重視のWEBサイトが消費者から倦厭(けんえん)され出し、ありのままの商品やサービスの紹介、企業の理念などが消費者に受け入れられる時代になってると感じます。これは単に「流行り/廃り」の問題ではなく大きなトレンドの変化と言えそうです。サイトリニューアル時には、これらトレンドを検討してみてはいかがでしょうか?この記事に関連する記事2014-12-03ユーザーの視覚と心に訴えかける、パララックスを効果的に使う事例とポイントWEBデザイン2016-05-25【ツール紹介】活発化するBtoBマーケティングに。エムハンドその他アクセスランキング月間1今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?2いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ3言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選4【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ5今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ6【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選7【WEBデザイン10選】ナチュラルさが上手く表現されたWEBサイトまとめ8わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!9【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ10【WEBデザイン10選】これは上手い!縦の文字組みを効果的に使ったサイトまとめ総合1いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ2今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?3【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選4【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ5【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ6【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ7初めてでもできる!iPhone動画編集アプリ【厳選4つ】8【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ9【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ10【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ最新記事Web集客に必須の「ペルソナマーケティング」。ある相談事例エムハンドブログwebマーケティングインバウンドブログweb雑学・面白ヒルメシマエブログ。