WordPress・デザイン・web関連の小ネタや小技を紹介しています。雑記モバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しよう2018.07.012018.09.19codingUIHOMEWEB制作のヒントcodingモバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しようモバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しよう2018.07.012018.09.19codingUI最終更新日:2018.09.19少し前からモバイルファーストやモバイルフレンドリーという言葉をよく聞くようになってきました。今まではパソコンサイトメインだったけど、これからは携帯端末で見る時の表示に重きをおいたレイアウトを考えてサイトを作ろうぜ!というスマフォユーザーが見やすいサイトづくりをすることです。数年前から行っているレスポンシブ対応もその一環ですね。インデックスの開始をアナウンスしたり、今やスマフォサイトがある事が当たり前になってきています。実際、サイトを訪れる人の多くはスマートフォンで見ています。若い世代向けサイトやSNSと相性の良いコンテンツでのPVは圧倒的なスマフォ率です。私が記事にアイキャッチを追加したりレイアウトを改造してしまったのでSP表示が大変なことになっていました。今回は実際にこのブログで気になる点をピックアップして、その部分を直していこうと思います。まとめファーストビューの調整ファーストビューとは、ページを訪れた時スクロールせずに見える領域の事です。ファーストビューだけでページを離れてしまう確率は70%以上と言われています。2018年4月だとPC(パソコン)は1920×1080、SP(スマフォ)だと360×640の解像度が多くなっているのですが、ステータスバーやナビボタンを考えるとファーストビューはパコソンで1000px×600pxくらい、モバイルだと320px×600pxくらいじゃないかと思います。このブログでスマートフォン表示で見て個人的に気になったファーストビューはこの2ページです。個人的に一覧系はわかりやすいナビゲーションメニュー+記事の一覧が好きです。この表示に慣れているし、目的のページに移動しやすい!現状なんかでかい!!このページが何かわからないっちけじどうしたらええのや・・・ナコ不要な要素は思い切って切り捨てようぜ!タイトルエリアがでかすぎてファーストビューで一覧なのにカテゴリー名しか見えないです。オススメエリアは削除、パンくずも上にナビゲーションがあるので消しちゃいましょう。結果...見やすくなった!カテゴリータイトルの下に一覧表示の記事が見えて、スクロールしたら他にも記事あるかな〜というレイアウトになりました。個人的に詳細は記事タイトル+アイキャッチ、本文もちらっと見えると幸せです。現状なんかでかい!!このページが何かわからないっ(でじゃぶ)ちけじなんかでっかいな!タイトルでっかい!ナコせやろ・・・ここもいらんやつ思い切って切り捨てようぜ!ついでに配置も変更じゃタイトルエリアがでかすぎるのと背景のおしゃれな画像はめ込みでタイトルを読むpowerが吸い取られます。パンくずも上にナビゲーションがあるので消しちゃいましょう。結果...見やすくなった!アイキャッチをどどーんとSNSタイプの表示に、タイトル、その他付加情報は場所移動してよくある記事タイプになりました。ファーストビューにこだわるならアドセンス広告の場所を記事内に移動して本文5行ほど見えるともっといいかもです。記事詳細(single.php)関連記事を上に移動プロフィールも大事だけど関連記事を本文の下に持ってきたほうが他記事も見てもらえそうなので移動させます。文字サイズが小さめなのでスマートフォンの記事部分だけフォントサイズを大きくします。}}まとめざっくり気になったところを調整しましたが、自分で見たり反応をチェックして細かくチューニングをし、ページをカスタマイズしていくのもブログの楽しみの一つですね。ネットサーフをしていてよいなぁと思ったレイアウトはキャプチャーしておいて、自分のサイトに取り入れていくのもよい事だなぁと思います。大阪で15年、WEBデザイナーとして働いています。最近の趣味は子供が寝静まってからAmazonプライムで海外ドラマを見ること。好きな食べものはカレーと餃子。コメントをキャンセルメールアドレスが公開されることはありません。大阪で15年、WEBデザイナーとして働いています。最近の趣味は子供が寝静まってからAmazonプライムで海外ドラマを見ること。好きな食べものはカレーと餃子。本職はネットショップの店舗運営を6年ほどやっております。投稿一覧WEB広告業・SEO対策・WEBコンテンツ作製等、WEB業界に携わって14年。いろいろなWEB知識を生かしてメディア事業等の会社運営中。当サイトでは主にSEO担当として参加しております。WordPress.。