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

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

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

  • WEBデザイン

昨年のWEB制作のトレンドは?と問われれば「レスポンシブWEBデザイン」を挙げる方が多かったのではないでしょうか。その前年なら「HTML5」になるでしょうか。それでは2014年は?ということで、年末を迎えてベスト10をランキングしてみました。

制作者側にもツールや制作環境など、ここ最近で多くの変化が起こっていますが、このランキングは、事業者側(WEB制作を発注する方々)の立場からの視点に立って、制作の依頼や確認を行う際に知っておくと役立つと思われる動向を中心にピックアップしてみました。何をトレンドと見るかにはいろいろな意見があると思いますが、ひとつの参考としていただければと思います。ということで、カウントダウン方式で前編、後編の2回に分けてお届けするWEB制作トレンド・ベスト10。今日は、その前編です!

10位 モックアップ主導のUI設計の登場

WEBページ制作の基本的な流れは、従来では以下のようなものが中心でした。

  1. ワイヤーフレーム(大まかなレイアウト)
  2. モックアップ(jpgなどの画像としてデザイン)
  3. 実際のサイト(テストアップ)

ところが最近では、違う潮流が生まれ始めています。それは、ワイヤーフレームではなく、実際のサイトに近い動的なモックアップを最初から作成していくやり方です。その背景にあるのはデバイス(閲覧環境)の多様化。特にインタラクションが重視されるモバイルの画面設計などで、この方式が取り入れられるようになりました。モックアップに動きをつけられるツールが出てきたことも、この動きを加速させる要因になっています。

モックアップの制作期間をなるべく短くし、実際に操作イメージを確認しながらユーザビリティを検討していくという制作プロセスは、今のところまだ、「こうした方法も出て来た」という段階ですが、今後拡大して行くと思われます。WEB制作のワークフローとして覚えておくといいでしょう。

1222_01

9位 WEBフォントが本格化

WEBフォントとは、WEBページのテキスト表示の技術です。従来のように閲覧者のパソコンなどのOSに搭載されているフォント(書体)を使用するのではなく、WEB上にある指定したフォントで表示する技術のこと。WEBフォントを使うことによって、タイトルやバナー、見出しなどに、画像化することなく意図通りの書体を表示させることができます。

また、本文にも、ユニバーサルデザイン書体など可読性の高いフォントを使うことで、アクセシビリティを高めることができます。書体のデザイン性を保ったまま、画像ではなくテキストデータとして利用できるので、SEOに強いことなどの実用的な面でもWEBフォントの人気が高まっています。

WEBフォントを気軽に体験するならモリサワのサイト「TypeSquare」の中にあるクラウドフォント・シミュレータがおすすめです。

1222_02
参考:「TypeSquare」http://typesquare.com/

8位 フラットデザインの進化

昨年から人気が高まってきた「フラットデザイン」は、今年すっかり定着。Windows8やiOSといった多くの人が使うメインOSでの導入がそれを決定づけました。

1222_03
Windows8の画面 http://windows.microsoft.com/ja-jp/windows-8/meet

しかし、従来のWEBサイトに慣れ親しんだユーザーからは、操作性がわかりづらいといった声も聞かれ、シンプルであるが故にデザインの力量が問われる分野でもあります。色やフォント選び、フラットアイコンには微細な陰影をつけるなどの工夫を施しつつ、フラットデザインは弱点をカバーしながら進化しています。発注者側もこのあたりをチェックする目を養った方が良さそうです。

また、従来タイプのECサイトに多く見られるような、いわば“ゴテゴテした”感じのデザインが、上手く成果を上げているジャンルもたくさんあります。自社のサービスや特徴を考えて、あくまでもひとつの選択肢としてフラットデザインを捉えていきましょう。

7位 テンプレートでないWEBレイアウトが活況

一部のキャンペーンサイトなどを除き、ホームページはテンプレート化される流れになっていました。ヘッダにロゴとサブメニュー、グローバルナビゲーションがあって、コンテンツエリアが大きく中央にあり、下段にフッタメニューが設置されている……といったイメージです。これに当てはめておけば、外れのない標準的なホームページを持つことができました。

しかし閲覧環境の多様化などにより、その流れは変わってきています。その代表例と言えるのが、画面によりレイアウトが流動する「レスポンシブWEBデザイン」でしょう。

1222_04

また、今年さらに増えてきたカードレイアウト(TOPページなどに見られるカードを並べたようなレイアウト)などの発想も、WEBデザインをテンプレート化されたものと思い込んでいたら出て来なかったといえます。ユーザーは既に、日常生活の中で多くのレイアウトパターンに親しみ始めています。そんな目の肥えたユーザーに快適さと心地良さ、そして驚きを与えられるレイアウトの模索を柔軟に行っていく時代になっています。

6位 WEBデザイナーの活躍フィールドの拡大

今年WEBデザイナーが身に着けたいスキルとして人気が急上昇したものの中に、「デジタルサイネージコンテンツ」があるそうです。デジタルサイネージとは、街頭や店頭などに設置された大型のディスプレイや公共交通機関の中のモニタに映し出される電子広告のことです。その他、アプリデザインなども注目されています。

さらには、WEBデザイナーの本来の対応範囲でないロゴ制作などの相談も、日常的に多くなっていると言われています。2014年はマーケティング面ではオムニチャネルの普及の年と言われますが、それと共にWEB制作だけではなく、それに関連する様々な制作やデザインの相談先としてのWEB制作会社の重要性が上昇した一年だったと言えます。

 

今日の発表は、ここまでです。以上のランキングからも、あらためて変化を実感した方や、思い当たることが多かったという方もいらっしゃるのではないでしょうか。こうしてみてみると、2014年は従来から見え始めていた様々な傾向が進化、成熟した年だとも言えそうですね。5位以上の項目は、24日に掲載予定の後編で発表していきます。ぜひ、引き続きご覧ください!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  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

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