個人開発者のためのズボラUIデザイン #3 ～ページ構成＆レイアウト～
この記事の文字数は、4,235 文字です。
具体的にブログサイトのUIデザインをはじめてみましょう。 参考サイトをもとにページ構成・レイアウトを決めていきます。 PC版とSP版でのレイアウト変換の考え方について学びましょう。
目次
こんにちは、ナオツです。
前回はUIデザインツールを比較して、結果「Figmaを選ぶのが良さそう」という話をさせていだきました。
今回から実際にブログサイトのUIデザインを行っていきます。
とはいえ、まだFigmaを使ったデザインはやりません。 申し訳ございません。(笑)
今日はブログサイトにおけるページ構成とレイアウトの作り方 についてのお話です。 参考サイトを例に考え方をまとめていきます。
UIデザイン未経験でも気軽に読んでみてください。
既存サイトを参考にする
まずサイトのページ構成やレイアウトをどうしようか迷うと思います。 これについては簡単です。
すでに完成しているものを参考にすれば良い
です。
パクる んじゃありませんよ？ 参考にする んです。(笑)
とはいえ、ブログサイトの構成はみんな大体一緒です。
オススメの参考サイト
あなたが良く見るブログサイトはありますか？ あれば、そのサイトをじっくり参考にしてみてください。
もしなければ、僕が参考にしたブログサイトを2つご紹介します。
マナブログ
マナブログについては、ご存じの方も多いかと思いますが、 ブロガーとして大成功を納めているマナブさんのブログです。
個人的にファンであるということでもないのですが（ファンの方ごめんなさい）、 成功しているブログサイトを研究するというのは、自分のサイトを成功させる上で重要なポイントだと思います。
Webクリエイターボックス
HTML/CSSを始めて勉強するような駆け出しエンジニアさんに大人気の教本である「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」の著者Manaさんの運営するサイトです。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
Web開発に必要な情報をブログなどでたくさん発信されています。 もともと著者の方がフロント寄りのエンジニアさんということもあり、かなり凝った作りになっています。
こちらのサイトはエンジニア目線で研究すると、自分のサイトにもマネしたくなる仕組みがいくつも見つかることでしょう。
Easy Life Tips
このサイトです。 上記2つのサイトに用いられているHTMLやCSSのコードについて細かく紹介していく（リバースエンジニアリングといいます）のは規約上タブーなので、 細かいコードについてはこのサイトを使って紹介します。
ページ構成
さてブログサイトのページ構成ですが、共通して下記のようになっていることに気づくかと思います。
メインコンテンツ
- 記事一覧（カテゴリ別）: 該当のカテゴリや最新の記事が何件か一覧で表示される。各記事のタイトルや画像（「アイキャッチ」と言う）などを表示する
- 記事詳細：実際の記事の内容
サブコンテンツ
- プロフィール：著者のプロフィールページ
- 人気の記事一覧：何らかの条件に基づく記事一覧
- 記事の全文検索
- 利用規約など
MVPを心がける
MVPとは
ご存じない方、いきなり謎の単語を使ってすみません。（汗）
MVPとは、Minimum Viable Product の略です。
直訳すると「実用最小限の製品」といったところです。
※プロ野球とかで聞くmost valuable playerのことではありません。笑
つまり、最初は必要な機能のみに絞ってサイトのリリースを心がけます。 細部のUIや細かい機能は詰めません。
「この機能がないとサイトとして機能しない」ところを詰めていきます。
では、ブログサイトでいうところのMVPとはなんでしょうか？
結論、前述したメインコンテンツ です。
読みたい記事が一覧から探せて、該当の記事が読める。
ブログサイトに我々が求めるのは、これだけですよね？
MVPをリリースしたあとに、欲しいサブコンテンツを追加実装してあとから再リリースしていけば良い という考え方ですね。 個人開発を勧めるにあたり、まずは1回ゴールするのが大事です。
話を戻すと最初にデザインすべきは、
- 記事一覧
- 記事詳細
ということになります。
PCとSP（Smart Phone・スマホの略）の両方のUIデザインが必要なので正しくは、
- PC版記事一覧
- PC版記事詳細
- SP版記事一覧
- SP版記事詳細
ということになります。
レイアウト
さて、デザインすべき画面の種類が明らかになったので、今度はレイアウトを決めていこうと思います。 ブログサイトには定番のレイアウトがあります。
PCは2カラムレイアウト
ブログサイトをPCで開くとほとんど2カラムレイアウトです。
たとえば、こういうのです。
カラムとは縦の列のことで、コンテンツの表示エリアが2列に分かれているレイアウトのことをいいます。
メインコンテンツとサブコンテンツを 3:1 くらいの割合でレイアウトします。（キッチリ3:1でなくてもOKです）
記事一覧画面の場合は、
- 3: メインコンテンツとなる記事の一覧部分（左）
- 1: プロフィールや広告を載せるサブコンテンツとなる部分（右）
となるようにデザインします。
とくにブログサイトのフレームワークで定番の WordPress を使っている方は、ほぼこのようなレイアウトを選ぶ方が多いかと思います。
SPのレイアウト
モバイルファーストと言いながらPCのレイアウトを先に紹介したのには理由があります。 SPのレイアウトは、PCのレイアウトを元にデザインしたほうが効率良かったりするからです。
やりかたは簡単です。
- 「3」占めていたメインコンテンツを、キュッと「1」に縮める
- メインコンテンツの下にサブコンテンツをくっつける
イメージはこんな感じ。
一番見てもらいたいメインコンテンツを当然上のほうに配置していきます。
SPの場合は、スワイプする労力がありますので、コンテンツの価値が高いものから上に配置していくように心がけましょう。
レスポンシブデザインとは
上記のようにPCレイアウトのメインコンテンツをキュッと縮めて、SPレイアウトに適用させるような考え方を「レスポンシブデザイン」といいます。
PCでもSPでも「良い感じのレイアウトになるように実装する」っていうことですね。
具体的には実装のフェーズで詳しく説明しますが、CSSを用いて簡単に実現できますので、実装時の不安は払拭してくださいね。(笑)
どういうものか現時点でもっと詳細に知りたい方は、さきほども紹介したManaさんの書籍がオススメです。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
あとがき
いかがだったでしょうか？ 今回は、参考サイトをもとにブログサイトにおけるページ構成とレイアウトの考え方を紹介しました。
次回は、実際に手を動かしてFigmaを使ってみましょう。
もっと本格的にWebデザインを学びたい方はこちら！
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
