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. indesign

    デザイン

    Indesignを使って、冊子を作りました!

    知り合いの手伝いで、初めてIndesignを使って冊子を作りました!…

  2. Web Design

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

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

  3. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  4. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材を作りました

    みなさん、こんにちはmayukouです。台風も過ぎ去り、梅雨ももう…

  5. Photoshop

    Photoshopでパターンを作ろう!斜めストライプを作る方法とは?

    こんにちは、mayukouです。先日仕事でIllustratorで斜…

  6. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. 未分類

    モバイルフレンドリー!フラットデザインなwordpressテーマ ACCIOに変…
  2. Photoshop

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

    フットワーク軽くなりそう♩Air Podsを買いました!
  4. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  5. デザイン

    脱自己流!上手くいくデザインの手順とは。
PAGE TOP