ルルルのル ～ モバイルのル｜マテリアルのル｜ビジュアルのル ～ WebとSEO
ルルルのル ～ バズワード
モバイル、マテリアル、ビジュアル
モバイルの ル
モバイルデバイスやモバイルユーザーが増加中
パソコンを持たず、使わず、知らず
モバイルネイティブの存在もあるだろう
モバイルの ルは、ルルルの ル 最初の ル
インターネットビジネスは、モバイルが主役
パソコンで対応しているけど、モバイルもＯＫだよ
ではなくて
モバイルファーストやら、モバイルフレンドリーやら、パソコンベースの思考ではダメ
対象とするデバイスは、スマートフォンだけ
というような
極端で強烈で前衛的な発想が必要だろう
デスクトップ画面は、どうでもいい！？
Webサイトを作成/更新したら、真っ先にスマートフォンで
デスクトップ画面は後回しで
デザイン、レイアウト、UI/UXなど、確認する
マテリアルの ル
マテリアルとは、Googleが主導するスマートフォン用、Android用アプリのガイドライン
これがベース
タップターゲット
スマホの小画面で、インターネットの命であり、クリック(マウス)＝タップ(指で)するボタンやリンクなどのタップターゲット
これを大きく、他の要素や他のタップターゲットなどと、まずは区別
次に間隔を空けて、デザインする
https://developer.chrome.com/ja/docs/lighthouse/seo/tap-targets/
質感・カラーなど
また見ている画面で、とくに見せたい、分からせたい要素は、質感を出してカラーを工夫して目立たせる、際立たせる
これがマテリアルのコンセプト
ビジュアルの ル
Googleのベースデバイスは”Moto G4″のデバイスは”Moto G4″
Moto G4 の画面は360 x 640 px
Googleと同じようにわれわれもMoto G4をベースにすると
横幅：360px・縦幅：640px
この表示領域のなかで
だらだらと、テキストを書くのはどうか？
ここにおさまる画像で、きっちり伝えられることができるのか？
たとえば、左右をトリミングする必要があるとき、画像の重要な部分はどれか？
横長画像は真ん中を残して、左右を切り取って３分の１にすれば、目標は達成か？
ビジュアルの ル 画像など
Moto G4の画質/デバイスピクセル比は DPR 3
DPR 3
1のCSSピクセルの中に、3倍の3デバイスピクセルが表示される
デスクトップのブラウザーのビューポートが 1000px 程度で、スマートフォンのビューポートが 360px
3分の1の画像を用意するべきと、思い込んでいないだろうか？
それが正しいレスポンシブと、誤解していないだろうか？
DPR 3の最適画像幅
DPR を理解したスマートフォンの画像は、360px で横幅いっぱい全画面表示するなら、DPR 3 では
360 x 3 = 1080
つまり、1080px の画像を用意するべきである
閲覧ユーザーに、「この画像はぼやけてるじゃん！」と思われないようにするには、そうするべき
SNS が横幅が最低
1200px
を要求することは、DPR 3 のスマートフォンをベースにしているからと思われる
Chromeのデベロッパーツール
Chromeのデベロッパーツールは、Moto G4はデフォルトで用意されている
モバイル・スマートフォンの表示確認では、このMoto G4で
Firefoxのデベロッパーツール
FirefoxのデベロッパーツールにはMoto G4はないので、カスタム端末を追加
端末名は「Moto G4 DPR3」サイズは「360 x 640」ピクセル比は「3」ユーザーエージェントは
Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4) Build/MPJ24.139-23.4; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.92 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/286.0.0.48.112;]モバイルなどの表示確認は、Chromeの場合「Ctrl + Shift + I」から端末選択するが、端末の選択や切り替えでさらに操作が必要
Firefoxの場合は、デベロッパーツール起動と端末選択が分離しているので、「Ctrl + Shift + M」一発でモバイル表示確認ができて非常に便利
ビジュアルの ル アイコンなど
交通標識や公共・大型施設の出口、トイレ、進行方向案内
このグラフィックシンボルはピクトグラム(ピクトグラフとも)
そしてWebサイト/ページのピクトグラムが、アイコンである
テキストに頼らず、小さいシンボルマークで
絵文字
これを組み合わせると
絵ことば
と言われている
アイコンは、小画面のスマートフォンにフィットしたグラフィックシンボル、ビジュアルアイテムであり、UI/UXを提供/実現するものになる
オリジナルの小画像やアイコンでもいいが、ネットで提供されているアイコンは、フォントやCSVでも、ワールドワイドを意識しているだろう
自分で作るよりも「楽」しかも無料
という動機ではなく
世間で通用する、多くのユーザーに分かりやすい
そういった意味で、ネットの有名サイトでサプライズされているアイコンを使うということに、意義があると言える
とどめは グーグルの ル
Googleは、検索や広告から、いろいろなネットツールを公開している
しかも、ほとんどが無料
ブラウザーやモバイルOS
顕著なのは、ブラウザーのChrome
あっという間に、世界的にシェア No.1
AppleのiPhone iOSに対して、やや遅れて市場投入されたGoogleのAndroid OS
これまた、iPhone以外のモバイルを駆逐し、おそろしいほどの市場支配力を獲得している
黙示録の四騎士、あるいはマンティコアともたとえられるGoogleだが
恐れ戦くのではなく、魂を抜かれて平伏するのではなく、無条件に従属するのでもなく
Googleが考案し実行し案内している、モバイルのあるべき姿を真摯に捉えるべきだろう
モダンWeb！ WP最新テーマ
レガシーWeb？ 掃討作戦！！
【モダンWebとは】
モバイルファースト・最新HTML/CSS3・スマホアプリ・WebP・JSON-LD・4K(Retina)・マテリアルデザイン・grid/flexbox
【レガシーWebとは】
table、float、position(relative / absolute)による位置決めが特徴
モバイルファースト
モバイルファーストの対象は、Googleのインデックスなのか、スマートフォンデバイスなのか、スマートフォンユーザーなのか
スマートフォンアプリ ビジュアル再現
ZOZOTOWN型スタイル、メルカリ型スタイル、Instagram型スタイル、およびYahooニュース/不動産紹介スタイル
4K / DPR:3 レスポンシブ イメージ
同一サイズの同一画像ファイルをCSSで伸縮させるのが、レスポンシブWebデザイン(レガシーレスポンシブ)
複数サイズの複数画像ファイルをビューポート(もしくはボックスサイズ)のDPRに合わせて最適な画像ファイルを、ブラウザーが選択表示するのがレスポンシブイメージ(モダンレスポンシブ)
モダンWebで
ビジュアルSEO
