【デスクツアー】押入れデスクと昇降デスク2台環境。
PC、ガジェットや周辺アイテムも紹介。

当サイトでは記事内に広告を掲載している場合があります。

消費者庁が問題としているステルスマーケティングや誇大表現を防ぐためWOMJガイドラインに従い、PR記事にはマーケティング主体の名称関係性の内容を明記しておりますのでご安心ください。

問題のある表現が見つかりましたらお問い合わせよりご一報いただけますと幸いです。

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

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

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

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

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

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

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

    Smartphone / スマホ


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

    Tablet / タブレット


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

    まとめ

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

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

    [twenty20 img1=”4556″ img2=”4555″ offset=”0.5″] ※中心にあるバーを左右に移動するこことで写真比較できます。
    ※表示されるのが遅い場合があります。

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