LP Designer PTSシリーズ 端末別スクリーンショットを紹介

LP Designer PTSシリーズ 端末別スクリーンショットを紹介

LP Designer PTSシリーズの端末別スクリーンショットをご紹介します。

LP Designer PTSシリーズは、もちろんレスポンシブデザインではありますが、パソコン表示、タブレット表示、スマートフォン表示と更に細かく表示チェックを行い、ホームページ閲覧者が見やすいデザインやレイアウトを実現させました。

一般的なレスポンシブデザインのテンプレートと、LP Designerのレスポンシブデザインを比較していただけるように、様々な端末で様々な状態のスクリーンショットをご紹介します。

これから新規でホームページを制作しようとしている方、既に運営中のホームページのリニューアルをお考えの方、ホームページ制作業を営んでいる方は、今からご紹介する端末別のスクリーンショトをご覧いただき、テンプレートの候補の一つにしていただければ幸いです。

※このページで使用しているスクリーンショットは、パソコンで擬似的に表示させた状態でのスクリーンショットのため、実際の端末で見た場合と若干異なりますことをご了承ください。

お手持ちの端末で確認したい場合は、実際に運営しているサイトにてご確認ください。
・2カラムテンプレート http://lp-designer.net
・3カラムテンプレート http://tpl-zanmai.info

LP Designer PTSシリーズ 端末別スクリーンショット

スマートフォン(iPhone6)でのスクリーンショット

※最新版では、safari(iPhone)のメニューバーと干渉するため、メニューバーを最上部に表示させています。

03
スマートフォン表示での一番の特徴は、画面最下部にメニューバーが常に表示されていることです。ページを開いたばかりのときの表示は、「メニュー」ボタンと「ホーム」ボタンが表示されています。

04
ページを下にスクロールしていくと、メニューバーの右端に「上へ」ボタンが表示されます。ページの一番上に戻りたいときは、「上へ」ボタンをタップすると、スルスルっとページの一番上へ戻ります。

ページの一番上へ戻ると、「上へ」ボタンは自動で非表示になります。

05
メニューバー左の「メニュー」ボタンをタップすると、左からメニューがスルッと出てきます。再度「メニュー」ボタンをタップすると、メニューが左へ移動し、元のページ表示に戻ります。

一般的なワードプレス用のレスポンシブテンプレートは、パソコン表示でのグローバルナビゲーション(ヘッダーメニュー)を、このようなメニューで表示させています。

よって、サイドバーにあった多くのメニューは記事の下に移動しており、グローバルメニューに表示されていないメニュー等は、いちいち下へスクロールして確認する必要があります。

LP Designer PTSシリーズでは、閲覧者がもっと簡単にメニューにアクセスできるようにするため、モバイル用のメニュー設定機能を追加しました。

「メニュー」ボタンをタップして表示するメニューの内容は、グローバルメニューの内容を固定で表示するのではなく、サイドバーにウィジェットを追加するのと同じ要領で、モバイルメニューを設定することができます。

「メニュー」ボタンは、メニューバーに常に表示されているため、ページのどの位置にいても、すぐにメニューを確認することができるため、閲覧者の操作性がアップします。

06
左からスライドして出てくるメニューは、メニュー部のみのスクロールが可能です。よって、メニューの数が多い場合でも、上にスクロールすることで全てのメニューを見ることができます。

07
記事(投稿ページ)の閲覧を始めると、メニューバーに「前の記事へ」ボタンと「次の記事へ」ボタンが表示されます。

いちいちメニューを表示しなくても、前の記事に戻ったり、次の記事へ進んだりすることができるので、閲覧者にとっては非常に便利なボタンとなります。

また、メニューバーには常に「ホーム」ボタンが表示されており、どのページのどの位置にいても、「ホーム」ボタンをタップすることで、いつでもトップページに戻ることができます。

タブレット(iPad iPad mini)でのスクリーンショット ※表示幅768px~

09
一般的なレスポンシブテンプレートは、パソコン表示幅を切ると1カラム表示になる場合がほとんどです。そのため、iPadなどのようにそこそこ表示が広い端末でも1カラム表示になるケースが多く、サイトによっては少し見づらくなる場合があります。

そこで、LP Designer PTSシリーズは、パソコン表示幅を切ると、2カラムテンプレートの場合はそのまま2カラムの状態のままで表示し、3カラムテンプレートの場合は、2カラムにレイアウト変更をして表示するという設定にしました。

サイドバーが表示されているため、パソコンの表示とほぼ変わらず、とても見やすい状態で表示されます。

また、スマートフォンと同じように、画面最下部にメニューバーも表示されます。

10

2カラムテンプレート(Lp Designer 2CR PTS)の場合

2カラムテンプレートの場合、パソコン表示幅の1000pxを切ると、サイドバーの幅は固定のまま、メインエリアがサイト幅に追従して狭くなります。また、少しでもメインエリアの表示幅を広げるために、サイドバーとメインエリアのマージンを半分にしています。

この状態は、表示幅が1000pxを切ったところから768pxまでで、768pxを切るとスマートフォンと同じ表示の1カラムにレイアウト変更します。

11

3カラムテンプレート(Lp Designer 3CR PTS)の場合

3カラムテンプレートの場合、パソコン表示幅の1000pxを切ると、左サイドバーが右サイドバー側に移動し、右サイドバーは左サイドバーの下に移動します。

サイドバーの幅はパソコン表示と同じ200pxのままで、メインエリアの幅もほぼ同じです。

2カラムテンプレートとは違い、表示幅が1000pxを切ると768pxになり、768pxを切るとスマートフォンと同じ表示の1カラムにレイアウト変更します。

12
13

以上が、LP Designer PTSシリーズの端末別スクリーンショットです。

Copyright© 2016 LP Designer PTSシリーズ 端末別スクリーンショットを紹介. All rights reserved.