制作コラム

PCの時は画面内に横並びでモバイルの時は画面外からスワイプして横スクロール

最近のホームページでも、またはアプリケーションでも時々見かけますが、スマホで見る際に要素が画面外にまで伸びてて、スワイプするとその要素を画面内に横スクロールでするりと表示させるようなもの(表現がわかりにくいですね。ごめんなさい)のご紹介になります。

以前の記事(スマホサイトのナビゲーションに横スクロールを採用しては?)の改良版といいますか、PCの時は折り返しができて、スマホになると横並びでスクロールできるので、無駄なスペースを省き、UIの改善にもつながるのではないでしょうか?

完成イメージ

PCとスマホの表示変更

例えば画像付きのリスト表示をしたい際に、その数が多い場合、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部分にこの応用を利用しています。

 

 

記事一覧に戻る

ホームページ
制作業務

コーポレートサイト制作

コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。

More

ブランドサイト・集客サイト制作

ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。

More

採用サイト制作

採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。

More

ECサイト制作

ECサイトは、事業の形態や規模によって求められる内容や機能が異なります。
アルラボではお客様の事業内容や求められる結果に応じてさまざまな形態のECサイトをご提案しています。

More

サービス一覧

Webマーケティング
集客対策業務

リスティング広告運用

検索ユーザーに貴社のビジネスの接点を作るリスティング広告。
限られた予算の中で費用対効果を重視した最適なリスティング広告運用を行います。

More

SNS・YouTube広告運用

検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。

More

SEO対策

サイトの検索表示順位を上昇させるSEO対策。
内部施策を標準化し、サイトの構造を正しくクローラーに伝え、適切な検索キーワードからユーザーが求める情報とは何なのかを追求します。

More

コンテンツマーケティング

ユーザーにとって価値のあるコンテンツを継続的に発信し、幅広いワードでアプローチするユーザーをキャッチします。

More

MEO対策

近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。

More

Webアクセス解析

ユーザーの属性や特徴、そして行動を分析し、コンバージョンに繋がる課題を解決します。ウェブサイトを着実に成長させる指標としてアクセス解析からの改善提案を行います。

More

お問い合わせ
Contact

私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。

ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。

お問い合わせ・ご相談

ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。

お問い合わせ・ご相談

お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。

0952-20-1501(佐賀)

092-717-3446(福岡)

営業時間:9:00~17:00(休業日:土日祝)