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. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  2. Photoshop

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

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

  3. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは

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

  4. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  5. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  2. jQuery

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

    スマホに使える!3階層のアコーディオンメニューを作りました!
  4. Web Design

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

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
PAGE TOP