組積造スタイルのブログの12の見事な例
公開: 2017-05-18ブログのレイアウトは、ブログの成功に大きな影響を与える可能性があります。 あなたはあなたのサイトがあまりにも雑然としていて、忙しすぎて、さもなければあなたのサイトの訪問者に魅力がないことを望まない。 組積造スタイルのテンプレートを入力します。 それらはすっきりとしたレイアウトのためのあなたの唯一のオプションではありませんが、スタイルはあなたのサイトにユニークでさわやかな外観を提供することができます。 さらに、ニッチに関係なく、ブランドに一致するレイアウトを作成するのに役立つ十分な柔軟性があります。
幸いなことに、あなたを刺激するためにウェブ全体に石積みスタイルのブログがたくさんあります。 この作品では、アート、美容、食べ物などのニッチをカバーする12の例を取り上げます。 それぞれのブログを（順不同で）見てみましょう。それらの機能を強調し、長所と短所の概要を説明します。
1.骨董品
Curioosは、Curioosアーティストマーケットプレイスの作品を特集したアートプリントブログです。 真っ白な背景、黒いヘッダーバー、くっきりとしたテキストが特徴のすっきりとしたデザインのこの石積みスタイルのブログは、画像が多いブログの重要な側面である、注目の各印刷物に完全に注意を向けています。
石積みのレイアウトに加えて、このサイトには、Pinterestボタン（読者がお気に入りのプリントをクリックするだけで共有できる）や、訪問者がコンテンツに夢中になれるようにする無限スクロールなどの機能も組み込まれています。
2.ブロンドサラダ
ブロンドサラダは、境界線のない石積みタイルを組み込んだファッション、美容、ライフスタイルのブログです。代わりに、自然な画像の境界線の幅に依存してコンテンツを分離および定義します。
スクロールすると、ブランドヘッダーが最小化され、より小さく静的なバージョンが表示されます。 これは、スクロールするスライドショーと、その下のブログ投稿のレイアウトに注意を喚起します。 ページの下部に到達すると、 more…オプションが表示され、閲覧できるようにさらに投稿が読み込まれます。
3.夢中
Hookedは、薄い灰色の境界線を使用してコンテンツを分割し、千鳥状のレイアウトから焦点を外すことなく、各タイルをきれいに分離します。 黒の太字の文字で白の背景を選択するHookedは、アートワーク（Hookedの場合はストリートアート）に依存してテクスチャと奥行きを追加するという点でCurioosに似ています。
組積造のブログ投稿表示の右側には、典型的な[ About Us] 、[ Follow Us] 、および[ Popular Posts]セクションのあるサイドバー（組積造スタイルのブログでは一般的な機能ではありません）もあります。
4.グリーンキッチンストーリー
Green Kitchen Storiesは、ご想像のとおりです。 –食品ブログ。薄い幅のディスプレイと、各画像にカーソルを合わせると表示されるオーバーレイテキストが特徴です。 これらのデザイン要素により、注目の画像が会話を行うことができ、ユーザーに新鮮な色のポップとナビゲートしやすいサイトを提供します。
タイルの境界線の幅は自然な分割線を提供し、スリムな外観はサイトのシームレスな表示に大きく貢献します。 下にスクロールすると、左側に静的な[以前の投稿]矢印が表示され、サイト内を簡単に移動できます。
5.OMFG。 とても良い。
OMFG。 とても良い。 は、WordPress.comに基づくコンフォートフードのブログで、全幅表示と無限スクロールを備えた石積みスタイルのレイアウトを活用しています。
各タイルは2つの部分に分割されています。上部の画像と下部のテキストで、輪郭がはっきりと分かれています。 ここにある他の注目サイトと同様に、OMFG。 とても良い。 また、白い背景が組み込まれているため、Webサイトがすっきりと整頓されているように見えます。
6.ジャム＆トースト
詩とデザインのブログであるJam＆Toastは、柔らかな灰色の背景、静的な左側のナビゲーション、画像オーバーレイを利用して、群衆から際立つ石積みのレイアウトを備えたユニークなWebサイトを作成します。
サイトをスクロールすると、ナビゲーションを簡単にするために、右下隅に気の利いたトップに戻るボタンがあります。 Jam＆Toastは、石積みのレイアウトがいかに用途が広いかを示す良い例であり、メインページでテキストタイルと画像タイルを組み合わせて使用します。
7.ポリエンヌ
Polienneはライフスタイル、ファッション、旅行のブログで、全幅のディスプレイとフルサイトの黒い境界線のラップアラウンドでスタイルとシンプルさをエミュレートしています。 このサイトは、左上隅にロゴとメニューを組み込むことで物事をシンプルに保ち、石積みのデザインにシームレスに溶け込んでいます。
画像にカーソルを合わせると、投稿のメタ情報を含む情報バーが表示され、グレースケールオーバーレイを使用すると明瞭さが向上します。 Polienneは無限スクロールを使用しませんが、ページ付けを使用します–数字と、下部の[次へ]および[前へ]矢印の両方を使用します。
8.アマンダセレステ
Amanda Celesteは別のWordPress.comブログで、今回はインテリアデザインとスタイルに焦点を当てています。鮮明でスタイリッシュなデザインが私たちの注目を集め、含める価値があります。
この全幅の組積造スタイルのブログは、太字のヘッダーと静的なメニューバー、および珍しい3面の黒い境界線のラップアラウンドを使用しています。 組積造のレイアウトに関しては、リストに掲載されている他のレイアウトと似ています。 各画像にカーソルを合わせると、続きを読むテキストオーバーレイが表示され、コンテンツの境界線が太くなり、タイルが分割されます。
9.バニティティーン
バニティティーンは、ティーンスタイルとファッションブログに期待するクリーンなラインを提供します。 それは白い背景と黒いテキストを特徴としますが、各石積みタイルを分割するためにサーモンピンクの境界線も使用します。 画像のホバー効果や無限のスクロールはありませんが、デザインは石積みスタイルのブログが提供する多様性の優れた例です。
他の多くのサイトと同様に、VanityTeenにはスクロールヘッダーが含まれています。 また、Jam＆Toastと同様に、ユーザーエクスペリエンスにとって重要な控えめな機能である「トップに戻る」矢印も提供します。
10.フィーバーランドのアレックス
FeverlandのAlexは、WordPress.comブログが石積みのスタイルを正しくしているもう1つの良い例です。 このウェブサイトは、例示的なデザインに焦点を当てて、著者の作品をきれいに表示し、広い境界幅ときれいな線でそれらを分離しています。 ホバーアニメーションはスムーズで心地よく、オーバーレイには各ピースの名前が表示されます。 ミニマリズムの優れたショーケースであり、石積みのレイアウトでもあります。
最後に、このサイトには、ロゴ、まばらなナビゲーション、および3つのソーシャルメディアボタンを含む静的な左側のサイドバーが組み込まれています。 全体的に見て、控えめでゴージャスです。
11.ジェフ・ホー
Jeff Haweは、旅行と建築を専門とする写真家です。 彼のブログは大胆なタイポグラフィを使用していますが、彼の仕事を犠牲にすることはありません。 タイトな境界線を使用して各画像を分離しているため、窮屈に感じる可能性がありますが、代わりに画像をまとまりのある全体として表示できます。
このリストに記載されている他のいくつかのサイトと同様に、無限スクロールを使用して、読者をオンサイトに維持します。これは、保持のための古典的な手法です。
12. Juule Kay
私たちの最後の石積みスタイルのブログは、このリストで間違いなく最も画像が多いブログであるファッションブログのJuuleKayです。 表示されるテキストはほとんどなく、スペースの生成に役立つ可変の画像サイズと分厚い自然な境界線があります。
このウェブサイトには、シンプルな左側のメニューバーが組み込まれており、無限スクロール機能を備えています。ここでのアニメーションはスムーズです。 画像にカーソルを合わせると、デザインの他の部分と同じように、黒いテキストの白いボックスが表示されます。 全体として、このサイトはデザインのまとまりの良い例です。 注目の画像でも同様の配色で、石積みスタイルのレイアウトの美しさをさらに示しています。
結論
あなたのニッチに関係なく、すべてのブログが組み込む必要がある2つの主要な要素があります-スタイルと機能性。 前者はユーザーエクスペリエンスに大きな影響を与え、コンテンツの配信方法と消費方法を決定します。 機能性はまた、より良い読書体験に役立ち、ブログの検索エンジンのランキングを上げることさえできます。
私たちが示したように、石積みスタイルのブログは、まとまりのある機能的な方法でコンテンツを配信します。 さらに、組積造のレイアウトは柔軟性を提供できるため、さまざまなニッチのブロガーにとって優れたオプションになります。 どんなルックを求めていても、インスピレーションを与えるスタイルがここにあるはずです！
上で取り上げた石積みスタイルのブログのお気に入りの要素は何ですか？ 以下のコメントでお知らせください！
tovovan /shutterstock.comによる記事のサムネイル画像。