Swipe
Column
Slick
List
Tab
Image
・・・
END

スワイプ SWIPE

このページはスワイプが横方向へ可能です。スワイプしてタブを切り替えることが出来る。

タッチデバイスではないPCでは、タブのテキストなどをクリック、またはタブをドラッグアンドドロップすることで同様の動作を可能にする。

現在のところ、コンテンツを多く詰め込むには本編のような横方向へのスワイプが有効である。水平と垂直方向へのスワイプはページ遷移を注視した場合が有効である。

モバイルのページでは、このスワイプがもっと効果的に使われなければならない。そうなるために、もっと思考しなければならない。

ページの展開にはこのスワイプとボタンやテキストリンク、イメージリンクがある。

これらを織り交ぜるとどういうことが出来るだろうか…。そういうことを考えながら、このページにスクロールバーが出現するボリュームに達するように文字を埋めてみた。

カラムを組み合わせる

BookBlock起動が遅すぎるのが難。

reveal.jsプレゼンテーションに最適。

異なる段組みを並べてページ内に表示してみた。

簡単なように思えるが、これが意外に難しい。

Columnは厳格に存在する

上のようなパーフェクトな3columnと2columnを作り直した。レスポンシブ対応のものである。完璧だ。

これまでのもの、特に3columnはレスポンシブ表示にして各デバイスで確認すると、幅の狭いデバイス(iPhone SE)だけが何故か1columnだけ伸縮していた。

「幅と高さ、文字が溢れる」この辺りが解決できていないように思える。

そこで、スワイプさせる本体をslickに変更して、css grid layout を用いて最初からやり直した。デバッグ用のグリッドも表示させて万全に正確性を確認した。

スリック SLICK

本編でスワイプの動きとタブにインジケーターを走らせているのはSLICKと呼ばれるものだ。

スワイプさせるjsを幾つか使ってみたが、カスタマイズが一番簡単である。

Javascript使いの方は、デザインには無頓着な人が殆どだ。サンプルがあっても、そのまま使えるのが無いと覚悟しよう。

私はカスタマイズは主にデザインを変更することが大半であるが、中にはjsに書かれてあったりと編集部分を探すのが大変であることもある。

スタイルシートがアップロードされてリンクされているタイプは編集ができないので、上書きするスタイルを充てる。

htmlのタグはインデントを以って綺麗に整理しておこう。このタイプのページでは多くのデザインパターンを使うことになるので、乱雑のままだと思考停止に陥ってしまう。タグの閉じ忘れなどはレイアウトの崩壊を起こすのでくれぐれも。

スワイプの動きは「スムーズにゆるっと動いてほしい」というのもポイントである。これが、従来のタブでコンテンツを切り替えるタイプの瞬く間にピッと表示されるのは、非常によろしくない。


ここのところ、スワイプに関しての記述が多いが、まだまだもっと追及して行かなければならないモバイルファーストの必須アイテムだ。

An example of topics

「reveal.js」はスクリーン中央にコンテンツが集まるポジションを採る。レスポンシブで表示を可能にしているためだ。

手を付けたのは、上下左右方向へスワイプできるもの。プレゼンテーションを素早く作ることができる。


電車に乗るとこいつを立ち上げて日常英会話をチェックする。忘れた頃を見計らってまたチェックする。

覚えていないフレーズはチェックを付けて繰り返し覚える。


「Swiper」は幾分フルスクリーンに近づけるポジションが可能。「reveal.js」と同様に上下左右方向へスワイプできる。

ページ遷移をストーリーで組むと面白いかもしれない。


商品イメージを整列させてボタンは定位置に置くサンプル。デバイス毎にレスポンシブ表示で一列から七列に表示が切り替わる。


タブ TAB

タブの数に制限は無いので、カテゴリーが多いサイトでもこのページで一部始終を纏めることが可能である。

タッチデバイスではないPCでは、タブのテキストなどをクリック、またはタブをドラッグアンドドロップすることで同様の動作を可能にする。

現在のところ、コンテンツを多く詰め込むには本編のような横方向へのスワイプが有効である。水平と垂直方向へのスワイプはページ遷移を注視した場合が有効である。

モバイルのページでは、このスワイプがもっと効果的に使われなければならない。そうなるために、もっと思考しなければならない。

ページの展開にはこのスワイプとボタンやテキストリンク、イメージリンクがある。

これらを織り交ぜるとどういうことが出来るだろうか…。そういうことを考えながら、このページにスクロールバーが出現するボリュームに達するように文字を埋めてみた。

イメージの割り付け

「display:flex」を使って、レイアウトを割り付けていく。当然、従来の方法とは異なる新しい手法を使ってやるのだ。

Let's get ready.

準備しておこう。チャンスはいつか訪れるものだ。

「display: flex」を使ってイメージの中央にテキストの塊りを配置する。この方法が一番簡単かもしれない。

「display: flex」を使ってイメージを二分割して配置する。

2カラムのレイアウト

よく見かける2カラムのレイアウトだ。左にはイメージ、右にはこんなふうに段落を分けても大丈夫、テキストが入る。

左はパーセンテージ、右は「flex:1」を指定して余白を100%埋めるように伸びる設定だ。このままテキストを埋めていっても、左側のインデントはキープされている。


こんな感じで<hr>を装飾して区切り線を入れてみるのはどうだろう?

個人的な趣向で言えば、ここはクッキリはっきりよりもドットか何かが良い気がする。

あしたは最高のはじまり

END

Are U experienced? TOP PAGE へ戻る