開発雑記

Webサイトとスマートフォンアプリのレイアウトについて考えてみた

現在ハイブリッドアプリを作ろうと思っているのですが、どんなレイアウトにしようか考えています。ハイブリッドアプリはHTMLやCSSなどのWebで使われる言語で作成するスマートフォンアプリの事なのですが、せっかくなのでWebサイトとスマートフォンアプリのレイアウトを比較しながら各構成について簡単に書いてみようと思います。

Webサイトのレイアウト

シングルカラム

  1. どのデバイスで見ても同じレイアウトを保つことが出来る。
  2. サイトの回遊性が高いサイトでは向いていない。

マルチカラム

  1. ブログ等だと広告や人気記事等を表示する場所として良い。
  2. PCとスマートフォンのUIが変わる事があるので、メンテナンス量が上がる。

グリッドレイアウト

  1. 一瞬で多くの情報を与える事が出来る
  2. レイアウトにオリジナリティを持たせることが出来る

各レイアウトのサイトを見れる便利なサービスがおるのでリンクを置いておきます。興味がある方はこちらもどうぞ

スマートフォンアプリのレイアウト

フルスクリーン

画面遷移がなく起動した画面ですべての操作が出来る。

スマートフォンに標準でついている電卓アプリとかはフルスクリーン。

スライドメニュー

特定ボタンからスライドでメニューが表示される。

Webサイトの2カラムはスマートフォンだとこれを使ってカラム部分を隠す事に使われる。このサイトをスマフォ上で見るとスライドメニューがある。

ナビゲーション

各項目をタップして画面遷移が行われる。これはアプリ設定画面等で使われる事が多い。

タブバー

画面の上部や下部にアイコンが並んでいて、タップで画面遷移が行われる。LINEやTwitterみたいなSNSはこのタブバーで画面構成されている事が多い。

レイアウトについてのまとめ

比較して分かった事

レイアウトについて考える事がなかったので、いろんな構成があるという事が分かった。レイアウトによって操作性がかなり変わってくるので、アプリによってどれがいいか精査する必要がある。

Webサイトとスマートフォンアプリのレイアウトや操作感はかなり異なる部分があるので、それを補う為にハイブリッドアプリではライブラリーを有効活用して制作していくことが大事になってくる

自分のアプリはどうするか?

今回僕が作ろうとしているのはSNSになるので、タブバー形式にするのが一番いいかもしれない。大手のSNSアプリはタブバー形式が多いと思うし、ユーザーも使い慣れていると思われるのでタブバーに決定!ハイブリッドアプリの場合はこれをOnsenUIとかでやるんやな…頑張ろ。