兵庫WEB制作.com

モバイルファースト世代の基本レイアウト

2018年3月29日

モバイルファーストインデックスを開始しますということで、兎にも角にも、モバイルに対応したコンテンツ、ファイルで作られたサイトが推奨されるようになりす。

モバイル、つまり今はもうほとんどがスマートフォンですね。スマホです、スマホ。

検索大手のグーグルがそう宣言しているので、ちゃっちゃとホームページやブログを対応していきましょう。

早いに越したことはないですよ。

さて、そんなモバイルファーストインデックス宣言がありつつも、凡そどういった感じになればいいのか、いろいろと漠然としている方もいるのではないかと思います。

コンテンツ、つまり内容が大事になるのは当然であることが前提にありつつも、他にどんな注意点やおすすめの施策があるのでしょうか。

ベーシックなデザイン(レイアウト)

内容が大事だと言いつつも、見た目だって気にするのも当たり前です。

数多ある大事な要素はとりあえず置いておき、どんなデザイン、どんなテイストのサイトやブログがいいかな?と、漠然と思うこともあるのではないでしょうか。

どうしても決めきれない、あれもこれも良く見える・・・そんな迷える子羊的な方たちがいれば、最も基本的な形式になりつつあるとされている形を取り入れてみてはどうでしょう。

中でも基本的なレイアウトが、シングルカラムレイアウトと言われるものです。

1フロアにワンルームしかないビルをイメージしてください。

または、縦にブロック(コンテンツ)が積まれているようなものです。

ブラウザ、端末による閲覧環境における見え方の誤差を、比較的抑えることができるとされている、基本的なレイアウト構成です。
(パソコンにシングルカラムレイアウトを用いているサイトも最近多く見かけます)

ストーリーテラー

シングルカラムレイアウトは、情報の読み取りや印象効果を馴染ませやすいとされています。

例えば、ページの上から、「ビジュアル」ドン!→「オススメ文句や特徴」ドン!→「ユーザーレビューや体験談」ドン!→「お問合せや注文、ダウンロード」といった流れを組み込みやすいと言えるでしょう。

そんなの当たり前と思う方もいるかもしれませんが、意外と忘れがちな流れです。

知りたい、得たい情報を、しかもこれから優先されるスマホでしっかりと提供できることになるでしょう。

言いたい事、伝えたい事が、有益な情報だからといって詰め込んでしまわないよう、余裕がうかがえるストーリーテラーな基本系レイアウトを用いてみるのもいいのではないでしょうか。

メニューの見せ方も基本をしっかり

スマホというなんだかんだで狭い領域で多く用いられているメニューボタンが、ハンバーガーボタンと言われるものです。

これです。
赤丸で囲っているところをタップすると、メニューが表示されます。

※見た目からハンバーガーボタンと呼ばれるのだとか

こうなります。

メニューボタンも見せ方の一つですが、凝りすぎるとタップするものだとさえ認識されなくなる可能性があります。

その中でハンバーガーボタンは、スマホはもちろんパソコンでも多く見受けられるようになったと思います。

メニューボタンの基本系という認識を持っていてもいいでしょう。

モバイルファーストな世代として

あくまで基本となるのではないかと思われるレイアウトですが、ウェブ界隈のデファクトスタンダードなら、突如別のレイアウトが基本となることもあります。

とりあえず、今のところはこうじゃないかといったところですね。

まだまだ他にも留意すべき点や有効な手段はあると思いますが、今までのようにパソコンをスマホに合わせようから、スマホからパソコンに合わせようというのが、まさにモバイルファースト世代でしょう。

その他のコラム

Facebook TWITTER LINE