1. Swiper を使ってみる

モバイルを片手で操作するにはスワイプが有効だ。そのスワイプの機能は上下左右方向に可能なものが特に有効だ。クリックにも対応。

「Swiper」はそれができる。

水平方向を「Next」(右へスワイプすると「ページ 2.」)、垂直方向を「Description」(下へスワイプすると「ページ 1.1」)に使うように設定して作り込みを進めることにしよう。

1.1 スワイプの制約

最初に、スワイプとはフルページ単位でページを移動できるものだ。上下のスワイプを可能とすることで、構造的に縦方向のスクロールができない制約がある。

通常のページのレスポンシブだと、コンテンツが画面を溢れた場合はスクロールさせて表示できたが、それが出来ない。ここでは、コンテンツの分量が最小である「iPhone SE」を基準にして作ってみよう。

水平方向と垂直方向の二種類が可能である。

ひとつ、垂直方向を時系列で表示する。例えば、スポーツのページで直近の試合から過去の試合を垂直方向のスワイプで閲覧可能にする。これは閲覧を楽にする。

この場合、水平方向のページは各々のトピックスが鎮座する自由レイアウトだ。

前述によれば、各々のトピックスが収まるのがこのページである。ここにいくつかの段落を入れてみよう。

段落の許容範囲は「iPhone SE」だから、すぐに範囲を超える容量に到達する。このとき、垂直方向へスワイプすると次に続く段落を表示させる。

こういう使い方をさせることで、「1.1 スワイプの制約」の打開策を講じることができるのだ。試行を続けてみよう。

前述に続く段落がここへ入る。下にイメージもレイアウトしてみよう。

上方向へスワイプしてページ遷移を確認してみよう。如何だろう？このページ遷移に違和感はない。ページを捲って次へ行くだけの自然な感じである。

ページの目次で使われるのが章と節である。本ページでは「第一章第一節」を「1.1」のように表記している。

段落の溢れた部分を次のページで閲覧できるようにしているので、この部分のページの章と節は省くことになる。先頭ページだけは表記すると分かり易い。

少々気がかりなのは、一番に縦長の「iPhone X」である。上下に空白が発生して間抜けなレイアウトになっていないか?

情報を付加する方法として「モーダルウィンドウ」という手がある。

Swiperの弱点である、「情報をフル画面で詰め込めない」という問題点を改善する方法として「モーダルウィンドウ」を設置してみよう。

注意を促したり、選択肢を提示したり、ポップアップで表示させるものだ。次のページに設置したのでスワイプしてくれ。

モバイルを片手で操作するときに、このモーダルウィンドウはとても便利だ。リンク対象を長く確保してここで表示させてみよう。

モバイルのレイアウトが主流になってきている今、そのデザイン・レイアウトは益々淘汰されるに違いない。

どうだろう？こういう打開策があれば、スワイプの存在意義がもっと明確になるように思える。

常時携帯するという意味では未来的に形を変えながら永続的に発展するのだろう。

現在でも、私はこの小さな画面で編集作業をするという気にはならないのだが、やっている人もいるのだ。

デザイン面ではとても便利になってとても難しくなった。ソーシャル・ネットワーキング・サービスを使うから問題はないのだろうか。

この小さな画面に、従来では出来なかった内容をたくさん詰め込む。

機能もひとつではなく、複数詰め込もうとする。そこでコンフリクトが厄介な存在になる。造形的には同様でも実現方法が異なるものを幾つか持っていないと対応が難しい。

そうつくづく考えてしまう今日この頃だ。
Back to top