Web Design

今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた


みなさんこんにちは、mayukouです。
ウェブデザインのトレンドであるフラットデザインは4年ほど前から流行し、
その流れがまだ続いていますね。
過度な装飾やリアルな表現を排除し、軽量なサイトにすることで、
スマホなどのモバイルに対応を優先(=モバイルファースト)するためだとも言えますが、
最近では、モバイルファーストという言葉と同時に
コンテンツファーストという言葉が出てきているようです。

そこでコンテンツファーストについて調べてみました。

スポンサードリンク

コンテンツファーストとは

「コンテンツファースト」とはウェブサイトのコンテンツ(内容)を見せることに主眼とした設計やデザインの考え方のことを言います。

谷元博さんのブログより

サイト全体のデザインよりも、コンテンツに集中して見て欲しい!そんなサイトでしょうか。

ということで、コンテンツファーストなサイトを集めてみました!

Nest Online

61-nestonline
装飾はほとんどなく、アクセントカラーに綺麗なグリーンがあり、サイトが一つにまとまっています。

Yahoo!Beauty

59-yahoo
おしゃれなフラットなサイト。タイトルの装飾にはボーダーを使い、統一感あるポップな印象のサイトです。

Retrip

55-retrip3

白基調のサイト。かわいいシンプルなロゴが印象的です。

by S.

57-bys

記事のタイトルが見やすく大きく出ています。見る方も、気持ち良く読みたくなります。

 

…まだまだありますけど今日はこのくらいにしておきます♪

 

まとめ

全体的にみてみてわかることは、

  • 装飾的なレイアウトが少ない
  • ロゴがきちんと作られていたり、印象に残る
  • 記事タイトルが大きめ
  • アイキャッチが目を惹き付ける魅力的なものが多い
  • サイトのデザインは、アクセントカラーが印象に残るもの
  • キュレーション系のサイトに多く見られる

私もアイキャッチに力入れないと、と思います。

 

私のブログテーマもコンテンツファースト

よく考えてみると、私のブログテーマも装飾が極力避けられていますし、
これはコンテンツファーストです。
このテーマを選んだ理由はやはり、表示を早くしてくれて、軽量だということでした。

このテーマに関する記事はこちら。
モバイルフレンドリー!フラットデザインなwordpressテーマ ACCIOに変更しました

 

このところ私が惹かれるデザインに、
このコンテンツファーストが多いことに気付きました。

時間があるときに、当ブログをカスタマイズかリニューアルしたいと考えていますが、
そのときは、やっぱり今より以上にコンテンツ優先(コンテンツファースト)で
見やすくシェアしやすいUIにしたいなと考えています。
なんとかスキマ時間を見つけてやりたいと思っています。

ブログのオリジナリティーを表現するために、
デザインも優先したい気持ちもありますので、
デザイン性も保持しながら、作れたらいいかなと。

 

最後に

以上、コンテンツファーストについてまとめてみました。
今後のブログを始めとしたメディアサイトのデザイントレンドになりうるコンテンツファースト、
ぜひ、チェックしてみてください。

↓コンテンツファーストの勉強になるお勧め書籍。これからのwebデザインスタイルを勉強できます。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?

    みなさんこんにちは、mayukouです。Adobe CCが登場して、…

  2. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  3. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法

    今回は、スタンプ風のかすれた表現をご紹介します。私は、仕事で使うこと…

  4. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  5. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. グッズ

    アナログ手法も極めたい!私が使っている水彩画道具のご紹介
  2. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法
  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方
  4. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  5. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法
PAGE TOP