WEBアプリケーションの設計方法について調べてみた【フロント編】

Laravelで自作WEBアプリを作ってみて、その場その場の思いつきでアプリ開発を進めていることに気がついた。

DBの設計をメモ書き程度ではあるがやっていたにも関わらず、ビューやコントローラについては命名規則も、役割分担も無く完全にその場の思いつきで機能追加を行なっていた。

そもそも学生時代からアプリの設計などやったことがなかったし、思いつきもしなかった。

ここで、アプリケーション開発の設計方法について調べてみたので自分用にまとめていきたい。

1. ワイヤーフレームを書く

WEBサイトの画面レイアウトを記載した図面。「どこ」に、「何」を配置するのか記載する。レイアウトの詳細は以下のページへ。

websae.net

ex1. ディレクトリマップ

webサイトを構成するページを、階層ごとにまとめたもの。

どのページがどのページにぶら下がっているのかを明示して階層をわかりやすくし、URLやタイトルを記載する。

ワイヤーフレームとは別に用意するのが望ましい。 

2.ワイヤーフレームの作り方

実際のワイヤーフレームの作り方についてまとめていく。

盛り込むべき情報を精査し、その後にレイアウト作業に入っていくという順で作成する。

2-1.ピックアップ

ピックアップとはそのサイトに載せるべき情報をひたすら上げていくことである。

「電話番号」、「バナー画像」、「広告」など、そのサイトに必要な情報を列挙していく。

あとで整理するため、ここでまとまっている必要はない。

2-2.グルーピング

ピックアップで列挙した項目で似た内容のものをグループ化していく。

「電話番号」と「住所」は「連絡先グループ」や、「会社名」と「会社ロゴ」は「会社情報グループ」などのまとまりでグループ化していき、

情報の分散に留意してグループ化を行う。

2-3.ランキング

グループ化した項目に優先順位をつける。

webサイトの目的に沿って優先順位をつけ、そのサイトの前面に出したい情報を精査する。

例えば、コーポレートサイトであれば、会社名や会社ロゴなどの情報をもつ「会社情報グループ」に高い順位をつけ、 コミュニティサイトなどの場合は会社情報は目立たない方が好ましいので低い順位とするなど。

3.情報をレイアウトする

ランキングまでに精査した情報を元に、webサイトの目的や機能性を意識してレイアウトを確定していく。

レイアウトはその時代ごとのトレンドなどにも留意する必要がある。

以下からレイアウトに関する用語についてまとめていく。

3-1.ヘッダー

webサイトを訪れた人が最初に目にする画面である。

メインとなるビジュアルやロゴを配置する場合が多い。

3-2.フッター

サイトの最下部のことである。

ここには規約や会社情報など、よく使わないにしろ重要な項目を置く。

3-3.グローバルナビゲーションバー（ナビバー）

webサイトのどのページにも配置される、よく使うメニューを配置するバーである。

3-4.サイドバー

メインコンテンツの横に表示されるバー。

ブログサイトなどでよく用いられる関連記事、最新情報やプロフィールページなどへのリンクを配置する。

4.まとめ

今回はフロントエンドにおけるwebサイトの設計についてまとめた。

ワイヤーフレームや、ディレクトリマップはwebアプリケーション設計において、後からこのページが必要だった！となることを防いだり、事前にレイアウトを提示して打ち合わせで活用する手段となる。

今後は自主制作においても活用して実務で対応できるよう備えていきたい。