Web Design

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


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

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

スポンサードリンク

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

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

谷元博さんのブログより

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

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

Nest Online

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

Yahoo!Beauty

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

Retrip

55-retrip3

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

by S.

57-bys

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

 

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

 

まとめ

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

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

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

 

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

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

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

 

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

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

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

 

最後に

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

投稿者プロフィール

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

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

関連記事

  1. Web Design

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

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

  2. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  3. デザイン

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

    みなさん、こんにちはmayukouです。先日デザイナーであることの自…

  4. Web Design

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

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

  5. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作…
  2. モバイルフレンドリーなwebデザインするときにおすすめなツー…
  3. かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(…
  4. 今や欠かせない存在!iPad Pro “9.7を…
  5. iPad Proを液タブに♫Astropad Studioは…

facebook更新中!

  1. Illustrator

    助かった!Illustratorが重たい時の対処方法
  2. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
  3. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXのパンケーキレンズ(単焦点レンズ)買いま…
  4. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー…
  5. illustration

    簡単!Illustratorでキラキラ星を作る方法
PAGE TOP