モバイルデザイン

From the bignning

fixedImage
fixedImage
fixedImage
fixedImage
fixedImage

ch.1 完全なるモバイルファースト・レイアウト

単独のモバイルデザインの時代からレスポンシブデザインへ移り、そしてグーグルの宣言によってモバイルファーストになったのが2018年の春だ。

だから、まだ巷にはPCレイアウトを流用した疑似モバイルレイアウト、もしくは稚拙なレイアウトが多く氾濫している。

正しいモバイルレイアウトへシフトするのはまさに今がチャンスだ。

スタイルシートはモバイルファースト

ウェブ制作の現場では、CSSのブレイクポイントをモバイルを一番に設定して書き始めることをモバイルファーストと呼ぶ。レイアウトはモバイルが優先されるため、PCのレイアウトがモバイル寄りになるのは淘汰なのかもしれない。

HTML5

ウェブサイトを構成する言語であるHyperText Markup Languageは、5th version へアップグレードされて、2017年12月14日に HTML 5.2 が勧告された。最新のマルチメディアをサポートする言語に向上させている。

勿論モバイルにとってもHTML5は不可欠で、Level4(仮称CSS4)のモジュールは随時公開されている。

レスポンシブは難しい

よく見かけるのは、イメージが掲載されている場合。Portrai(縦方向)で見ると良いのだが、Landscape(横方向)で見ると全体像が表示されていないで意図不明なイメージ表示になってしまっていることがある。その上、イメージに文字が載せられている場合、文字が切れて表示されてしまったりとか…。原因はレスポンシブの対応不足と確認ミス。

PC表示だけに委ねられた時代とは違って、現在のウェブサイト制作は随分と複雑になった。だから、異なるデバイスに対応するにはそれなりのスキル習得が求められる。

ひと昔前、誰もが気軽にウェブサイトを公開できた時代があったが、現在はそのハードルがかなり高くなってしまってモバイルファーストに手が出せないでいる人は多い。

その内容が論理的か否か、効率的か否か。その解決策は、模索していれば自ずと見えてくる。その結果、メディアクエリーではブレイクポイントを多くを設定せずに済むし、各レイアウトは僅かな微調整で上手くいく。

兎にも角にも、レスポンシブは検証に時間がかかる。躓くと、さらに時間がかかる。レスポンシブだから共通の操作性を優先させなければならないことも重要である。

CSS3

レスポンシブは横へ縦へ伸縮するレイアウトだから、これまで使ってきたかもしれないその場しのぎの小手先のCSS手法は愚かさを露呈する。

例えば、このページ先頭のイメージとタイトル文字の部分。何度か根本的な変更をして落ち着いたのが以下のデザイン・レイアウトだ。

デバイス別レイアウト

Portrait と Landscape

モバイルを縦方向で見ることが多いと思う。但し、横長のイメージや動画はこの限りではない。

モバイルの横方向のサイズは、568pxから823pxだから、タブレットの縦方向のサイズへ変更するようなものだ。

問題は、縦が横になるとレイアウトが変わる場合である。

メディアクエリーの検証

メディアクエリーについては、例えば「orientation: landscape」はどう作用するのか?、ブレイクポイントはどこで分岐させるか?、「all」って何?など、とにかく一度は独自にそのスタイル形式を作って検証することが必要だ。

配慮したい UI と UX

ユーザーの視覚に触れる全ての情報がUI(User Interface)であり、UX(User Experience)はウェブサービスを通じた得られた体験を示すもので、ページが読みやすい、購入方法が簡単、問い合わせが探しやすいなどがUXにあたる。

モバイル操作で横にはさせない、ピンチアウトによる拡大はさせないなど、UIとUXが悪いサイトが増えているのが現状だ。

ch.2 モバイルの縦型デザイン・レイアウト

モバイルを片手で操作して早捲りできるデザイン・レイアウトを目指したのがこのページだ。「From the biginning」一から作り出したモバイル専用のデザイン・レイアウトである。

せっかちな人が増えている?

ビデオ再生を早送りで見る人がいる。そんな対応策がスクロールボタンだ。気になれば、何度でも見返せばいい。

コンフリクトしない基本モジュール

ページの画面構成は、 Menu表示のトグルボタンとそれをタップで開くと現れるモーダルウィンドウ、右一列に配置した早捲り用のスクロールボタン、スクロールの位置を表すプログレスバー、トップにイメージとテキストを配置した表題部を持つコンテンツ、「copyright」を表示するフッター、以上が基本構成である。

基本モジュールだけでも、いくつかはその方式を全て取り換える必要性が発生する。全ページ共通で使うのでコンフリクトしないことが必須条件になるからだが、これは意外と手こずることになるだろう。

コンテンツの段落には拡大、他ページの引用、動画がページ内ウインドウで起動する「Lity」を取り入れた。

レスポンシブ対応のために

レスポンシブ対応にするために5色のバーには「vh」や「calc()」や「%」を使った。メディアクエリーの分岐については、あらゆるデバイスサイズから考察することが必須である。

メディアクエリーとスタイルシート

条件を分岐させたメディアクエリーを書いたのに、レイアウトが反映されていない。そういう場面に出くわすと諸君はどういう検証と解決策を辿るだろうか?

最初に疑うのは、諸君が書いたCSSにある。正確性に欠けたCSSでも、これまである局面では整って見えたかもしれない。レスポンシブだと、この正確性に欠けたCSSが暴れ出すのだ。

新しいレイアウトの試み

レスポンシブになってから、実現させたい事柄が変わってきた。例えば文字とイメージがオーバーラップする仕掛けは以前からあったが、伸縮するとなるとその実現方法は新しい方法で対処しなければならない。

下に重なるイメージから文字列がはみ出さないようにするには、イメージの縦方向と横方向の中央に文字を配置することで、確実に文字の配置が簡単になる筈だ。また、文字のサイズは画面の幅と高さで相応しいサイズが異なる、この辺りも調整が必要だ。

また、Grid Layoutが登場したお陰で、複雑なレイアウトも可能になった。これは素晴らしい。

ch.3 モバイルの必須機能

タッチが容易な大きいボタン、PCのレイアウトを引き継がないモバイル専用のデザイン・レイアウト、縦でも横でも見ることのできるレイアウト、それ以外には何があるだろう。

フォントサイズ

商材のランディングページであれば、特に注意したいのが適切な文字サイズである。ピンチアウトで得られるズームは必須機能として捉えるべきであろう。

HTML Heading Element

「h1」を同一ページ内で多用することが可能になった現在においては、メリハリのあるデザインで「h2、h3、h4」と差別化して視認性を確保したい。段落の流れについても確かな論理性を追及したい。

イメージサマリーと拡大

イメージは大と小を区別して掲載するとメリハリが出る。大はタイトルバックで使うフルワイドなイメージに代表される。サマリーは左図のように必ず拡大できるように同一ページ内にてモーダルウインドウで拡大イメージを表示させたい。どのページでも使い回すものだからこの機能は万全を期したい。

ch.4 モバイルの問題点

PC、タブレット、モバイルのデバイスサイズ別のデザイン・レイアウト。PCのレイアウトを引き継がないモバイル専用のデザイン・レイアウト。縦でも横でも見ることのできるレイアウト、制作サイドからすれば手が掛かる代物である。ウェブのクォリティーは益々ピンキリのギャップが広がっていく。

デベロッパーツールと実機を使った検証

実機では違う見え方をすることがある。iPhoneとAndroidでも違う。問題なのは、Androidでは一部のリンクが押せない機能不全も経験した。オーバーラップの仕掛けが原因だったが、早い段階での実機での検証が必要。

横向きとズーム

モバイルが所有する有益な機能と思える横向きへのレイアウトの回転とズームアップを禁止するのは如何なものか。レスポンシブ対応なのだから、横方向はタブレットを見るようなものだ。

ズームを禁止すれならば、モーダルウィンドウでも使って視認性を確保すればいい。

押せないリンクは無効

リストタグを使ってリンクを張っても、リンクに指で押すことができなければ無効だ。大き目なボタンや余白を確保したレイアウトが必要。

Menuは必要?

Menuの存在感が無くなってきた今日この頃である。出来ることなら、一ページの流れで展開を図れないものか、フッターを上手く使うとか向上させる余地はある。

ch.5 オプション

基本コンテンツのデザイン・レイアウトは以上で固まったが、用途によってはそのスタイルを一変させる必要がある。そこでだ。

コミック風なクールなヤツ

ひと目で表現するにはイメージの遷移が必要だ。gridとcolumn-countを併用したら、上手くいったのでご紹介する。

昔、スライドショーにコメントを付けて流れを説明する手法を散々使い回したが、これは思いつかなかった。一マスがイメージの比率に合わせて不揃いなのがアクセントになってイイ感じだ。

吹き出しとイメージを配置(ページを開く)したカラムで、デバイスのサイズにより4columnから、3columnへ、2columnへ、1columnへ変化する。

Flipboad のようにスワイプで捲る

Flipboad のようにスワイプで捲る(起動時間が遅いのが欠点/ページを開く)ことができる。タッチする対象が全画面なので片手での操作性を容易にしている。また、スクロールの味気無さに比べると日常性に伴う存在なのだが、この類は多くは発見できずにいる。

タッチデバイスとPCで操作できるようになっているが起動に少し時間がかかる。

グリッドレイアウトが強力

一般的には「コミック風なクールなヤツ」で紹介したようなレイアウトが多く紹介されているようだが、実は従来ではとても複雑であったデザイン・レイアウトを簡易に可能にする強力な武器がグリッドレイアウト(ページを開く)だ。モバイルデザインとして縦横に広がる二次元のレスポンシブデザインが可能だ。グリッドにイメージとテキストをオーバーラップして配置できる。

デザインに変革を与える機能だから、たっぷり時間を用意してモノにすることがデザイン力を高める。

Video、Movie

動画をレスポンシブ(ページを開く)で表示できる。MP4ファイルなどを再生。

PC用デジタルサイネージとして作成した Video Slideshow がモバイルでは使えないのが痛い。制作の現場では PC≒Mobile を痛感する。

フォトの見せ方

複数のフォトをモバイルで見せる方法(ページを開く)の一つ。

海外にてオフラインで使用するマップ(ページを開く)を作って実際に使ってみた。視認性を確保したデータが納まるフォトをモバイルでどこまで実現できるかの試作品。

HTML5 UPのテンプレートを試用。

その他