ノイズを減らしたミニマルなデザインへ

 

新たなことが始まることが多い春だからなのか、ブログデザインを少し変更したYuji(@yuji_dlv)です。

今年に入りブログへの端末アクセス比率がス6:4とPCに比べてスマホ、タブレットが上回ったこともあり、基本デザインや機能はそのままで色、レイアウトの変更を行いました。

各端末へ影響をあたえる箇所と変更前と変更後のデザイン比較について記載しています。

基本情報(主な変更箇所)

  • トップページの記事タイトル下部の本文非表示
  • サイドバーやウィジットタイトルをホワイト背景に変更
  • スマホ、タブレットのトップページレイアウト変更
  • PC / パソコン

    PCからのアクセスにあたり、影響する箇所は、『トップページの記事タイトル下部の本文非表示』と『サイドバーやウィジットタイトルをホワイト背景に変更』になります。以前に比べPCからのアクセスの場合、物足りないイメージにはなりますが、表示速度の向上にも繋がっています。

    Smartphone / スマホ


    スマホからのアクセスにあたり、影響する箇所は、『トップページの記事タイトル下部の本文非表示』、『サイドバーやウィジットタイトルをホワイト背景に変更』、『スマホ、タブレットのトップページレイアウト変更』になります。特に記事一覧の下部(フッター)のレイアウトを大幅に変更したので見やすくなっていると思います。

    Tablet / タブレット


    タブレットからのアクセスにあたり、影響する箇所は、『トップページの記事タイトル下部の本文非表示』、『サイドバーやウィジットタイトルをホワイト背景に変更』、『スマホ、タブレットのトップページレイアウト変更』になります。画面の大きさにもよりますが(9.7インチ以上)だと、縦の場合スマホ表示、横の場合PC表示になると思います。

    まとめ

    主な変更箇所の『トップページの記事タイトル下部の本文非表示』、『サイドバーやウィジットタイトルをホワイト背景に変更』、『スマホ、タブレットのトップページレイアウト変更』以外にも細かい調整を行っていますが、見た目上かわらず、表示速度向上させています。

    スマホ、タブレット、PCで検証済みではありますが、Android(スマホ、タブレット)に関しては種類が多いため端末によってはレイアウト崩れの可能性もあります。今回は、見やすさ、表示速度向上を目的とした変更を行いました。

    ※中心にあるバーを左右に移動するこことで写真比較できます。
    ※表示されるのが遅い場合があります。

    ブログの基本デザインはTCDのMAGをカスタマイズして使用しています。





    Amazonで得する方法

    Amazonでお得に購入、Amazonギフト券チャージ(発行日から10年間有効)

    1回のチャージ額通常会員プライム会員
    5,000~19,9990.5 %1.0 %
    20,000~39,9991.0 %1.5 %
    40,000~89,9991.5 %2.0 %
    90,000~2.0 %2.5 %

    Amazonプライム会員ならさらにお得。

    チャージが面倒な人はAmazon Mastercard

     

    人気記事

    カテゴリー

    アーカイブ

    1986年生まれ北海道出身。現在は東京都に住んでいます。検証したり、調べることが好きです。

    主にガジェット、WEBサービス、DIY、子育て、食べ物、キャッシュレスについて紹介しています。また、一児のパパになりました。Profile詳細はこちら

    Galaxy S10 SC-03L,iPad Air2,EOS KISS M,C101PA, UX21Eユーザ。