最近のホームページでも、またはアプリケーションでも時々見かけますが、スマホで見る際に要素が画面外にまで伸びてて、スワイプするとその要素を画面内に横スクロールでするりと表示させるようなもの(表現がわかりにくいですね。ごめんなさい)のご紹介になります。
以前の記事(スマホサイトのナビゲーションに横スクロールを採用しては?)の改良版といいますか、PCの時は折り返しができて、スマホになると横並びでスクロールできるので、無駄なスペースを省き、UIの改善にもつながるのではないでしょうか?
例えば画像付きのリスト表示をしたい際に、その数が多い場合、PCではいい感じに表示されるのに、スマホの場合だと多すぎるというか、縦に伸びすぎてしまって、それはそれでユーザーにストレスを与えてしまいかねません。そこでスマホの場合はある程度要素の幅を持たせながら、少し画面外に次の要素を見切れるように設置することで、ユーザーにスワイプしたら次の要素が表示できるんだと暗に示し、それでいてコンパクトに収まるような仕組みです。
親要素にflexを使って横並びにし、PCなどの場合のみflex-wrap:wrapで折り返しを可能にします。-webkit-overflow-scrolling: touch(画面外からのスクロールにぬるっと動かすための指示)はもう不要なので(iPhoneのSafariがデフォルトでぬるっと動くようになりました。)入れなくて結構です。
子要素にPCの時に指定したい幅を指定します。
スマホ幅になったら親要素に折り返しを禁止します。(flex-wrap:no-wrap)同時にX軸のはみ出た部分にスクロールを可能にします。(overflow-x:scroll)
子要素にmin-widthを追加して、次の要素が見切れるようにします。
<div class="wrapper"> <div class="youso"> 1 </div> <div class="youso"> 2 </div> <div class="youso"> 3 </div> <div class="youso"> 4 </div> <div class="youso"> 5 </div> <div class="youso"> 6 </div> <div class="youso"> 7 </div> <div class="youso"> 8 </div> <div class="youso"> 9 </div> <div class="youso"> 10 </div> </div>
.wrapper{ display: -webkit-box; display: flex; } .youso{ width:20%; padding:5vw; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 600px){ .wrapper{ flex-wrap: wrap; } } @media screen and (max-width:599px){ .wrapper{ flex-wrap: nowrap; overflow-x: scroll; } .youso{ width:100%; min-width:60%; } }
デモがありますのでそちらご覧ください。
Bino佐賀武雄様サイトトップページのLINE UP部分にこの応用を利用しています。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)