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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


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

関連記事

  1. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  2. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント

    みなさんこんにちは、mayukouです。福岡もやっと梅雨が明けまし…

  3. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  4. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  5. デザイン

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

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

  6. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法
  2. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuok…
  3. レポート

    CSS nite Fukuoka vol.5行ってきました。Illustrato…
  4. Illustrator

    Mac OS sierra にアップデートした時のIllustratorCS6の…
  5. iPhone

    生活が変わるかも!iphone7 に変えてみて思ったこと
PAGE TOP