ページ構成と共通部分のデザイン
データも準備できたので今回はページ構成を決めていきます。どういった階層構造をとるか決めて、そのあと共通部分のデザインを作っていきますね。
まずTopページ、ここにはとりあえずサービスの説明書きとリンクを一覧で並べようかなっと思います。同じ階層によくある質問とサイトの説明ページを用意します。
その下に小説家になろうのランキング探索ページを作ります。
ツリーにするとこんな感じかな
- TOP
- FAQ
- About
- Naruo - Search
- Gacha
小説家になろうの階層を作っているのは将来的なことも考えてです。小説家になろうだけが対象の場合はずらっと平たく並べてもいいのですが（その場合はTopがランキング検索になるのが自然かな）、今後別の小説投稿サイトも追加する予定なのでこういった階層にしておくと拡張もしやすいかなって思います。
私はカクヨムとかアルファポリスも利用しているのでそのあたりも何とかできたらなって考えてます。
さて、ひとまず階層も決まったので共通部分のデザインも作りますか。ヘッダーとかフッターなんかは使い回しができるので先に作っておきます。
こういったサービスを作るときはまずは共通部分を作って、異なる部分だけ別に作るのが一般的ですね。
共通レイアウトについては1カラム構造にします。
本来はPC、タブレット、スマホの画面サイズでレイアウトは別々に作るのがいいです。
大体、経験的にPCは3カラム、タブレットで2カラム、スマホで1カラムくらいにするとおさまりが良い気がします。ただ、作業量が多くなるので今回は省エネモードでいきます。個人開発は労力をかける部分とかけない部分をしっかり分けるのがいいと思いますね。メリハリ大事。
省エネモードにする場合、大体は一番小さいスマホの画面に合わせるような形で作るので1カラムになります。PCの3カラムをスマホに当てはめるとひどいことになるので当然ですね。
あと方針として、将来的にはアプリも作りたいのでアプリに似せた画面デザインをしていきます。
となるとこんな感じかな。
本当はFigmaとかでデザインするのが標準らしいですが、デザイナーでもないのでパワポで作ってます。
Figmaも時間あったら勉強したいなぁとも思いますが、そこまでデザインセンスもないし、一人だし、時間もないので今はパワポでいいかな。
さて、とりあえずヘッダー、フッターと各種リンク集を用意しました。最下部はサイト名だけでいいかなって思います。
リンク集は全ページにどこからでもアクセスできるようにしておきたいので付けてます。こういったツールはアクセス性がよくないと使われないからね。
あとは操作用のメニューバーかな。スマホだと画面が小さいので補助用のメニューが必要かと思います。通常のページはいいけどサーチとかは用意します。
ヘッダーには拡散用のTwitterリンク、あとは設定用のアイコン付ける感じで。
ということでこんな感じでしょうかね。
うん、いいんじゃないかな？ スマホアプリっぽくて。
PCへ適用するときはあんまり間延びしないようにmax-widthに気を付けておけばいいかと思います。タブレットくらいのサイズ(780 px)くらいに合わせればそこまで見にくくはないと思いますね。
ということで一応デザインできたので、次回はこれをもとに実際のページを作っていきます。
デザインセンスが欲しい今日この頃。マテリアルデザイン勉強したい。
