Lopan.jp

Webサイトの作り方のまとめ!番外。

about Web design (番外)

サンプルサイトの制作を通して、「Webサイトの制作手順」についてまとめてみました(の番外です)
前回の記事では、トップページのデザイン制作と、勢い余ってスライスまでしてしまいましたが、その後、依頼主からデザインの修正依頼がありました。この記事では、トップページデザインの修正と、下層(コンテンツ)ページのデザイン制作について書いてます。

目次です。クリックするとその項目へ移動します。

トップページデザインの修正

依頼主から、トップページデザイン案に対する返事が来ました。いくつか修正依頼がある模様…。

依頼主からの返答

修正依頼.pdf

返答はメールで、PDFに手書きの指示と、メール本文に補足のコメントがありました。PDFは右図。いろいろ書いてありますが、PDFとメールの内容をまとめると以下の通り。

  • 全体的に窮屈、まとまりがない。
  • ちょっとファンシーすぎ。
  • パン教室とかはそんな頻繁にやらない。
  • パンの予約は?
  • お問い合わせフォームも欲しい。
  • 一番上のボタン?なんかもっと押せる感じにしてほしい。

まとめるとひどい言われようですが、メールの本文では喜んでくれている様子も読み取れたので、デザインの方向性としては間違ってなかったと思うんです(…!)。

改善案を考える

上記を元に修正を行う訳ですが、一旦落ち着いて、依頼内容を一個ずつ見ていきます。

全体的に窮屈、まとまりがない。
言われるとたしかにごちゃごちゃしてますね。窮屈感は否めないです…X(。もうちょっと素材感を抑えてスッキリさせれば、窮屈感は改善されるかも。
まとまりがなく見えるのは、全体の色合いが同系色でまとまっちゃってるからかな…。もっとメリハリを付ければ改善されるかも。
ちょっとファンシーすぎ。
これも、素材感を抑えれば改善されるはず。
パン教室とかはそんな頻繁にやらない。
やらないのか。じゃあトップページからは削除して、パン教室のご案内も、キャンペーンや新作パンの紹介とか他の情報と一緒にLoddan's infoでお知らせする事にします。
パンの予約は?
パンの個別ページに「このパンを予約する」というボタンを設置して、そこから予約フォームへ遷移させるようにします。
お問い合わせフォームも欲しい。
「パン教室のご案内の予約受付用」に設置するつもりだったんですが、ひっくるめて「汎用お問い合わせフォーム」として、トップページから行けるようにします。
一番上のボタン?なんかもっと押せる感じにしてほしい。
リンクエリアをしっかり仕切ることで改善されるでしょうか…。

修正案を制作する

以上の点を考慮して、トップページデザインの修正を行います。
だいぶすっきりしたでしょうか。あまり大きく変える事は避け、基本レイアウトはそのままに、素材のくどさを抑えました。ちなみに前回提出したデザインはこちら
野暮ったさが、ちょっとは改善されたと思います。サンプルにしては上出来です…!

0.Lopan_cafe_top.psd

サイトの役割を再確認

トップページデザインを再提出するついでに、念のため、再度、依頼主と話し合いを行います。
主に下層ページの仕様について細かく決めるのと、サイトの役割を再確認する目的で話し合います。
話し合う内容は以下の4点。

  • パンの予約について
  • お問い合わせ内容について
  • LopanのパンとCafeメニューの棲み分け
  • Lopan's infoとパンカフェBlogの棲み分け
パンの予約について
パンの予約とは、つまり「お取り置きの予約」の事。
欲しいパンがあらかじめ決まっている人や、取りに行く時間が決まっている人が、「このパンとこのパンを2個ずつ取っといて!」って感じで予約することができるようにする、という事です。あと、パンの個別ページについて、「パンひとつひとつについて、それほど載せる内容がないよ。(Lopan店長談)」との事。
結果、Lopanのパン一覧ページのみにして、その中から選択したパンをそのまま予約できる、という具合に変更になりました。ただし、予約できるパンは限られているので、そこら辺も配慮する必要がありますが。
予約にはメールフォームを利用します。ユーザーは、一覧からパンを選択後、個数来店日時メールアドレスを入力し送信する事になります。
また、「お取り置きの予約がサイトからできる」ことがトップページでも気付いてもらえるように、トップページの大バナーを使って喚起します。
お問い合わせ内容について
お問い合わせの内容は、「パン教室の参加者募集」、「アルバイト募集」、「ご意見・ご感想・ご質問」とし、ここから「パンの予約」はできないという事にしました。
LopanのパンとCafeメニューの棲み分け
イートインカフェでは、Lopanのパンで紹介するパンも食べる事ができるんですが、Cafeメニューでは、あくまでドリンクのみの紹介をすることになりました。「そこは深く考えずとも良い。(Lopan店長談)」です。
Lopan's infoとパンカフェBlogの棲み分け
Lopan's infoでは「お知らせ」や「キャンペーン情報」、「パン教室のご案内」など、お客様に向けた内容を発信。
パンカフェBlogでは「パンの豆知識」や「美味しいコーヒーの淹れ方」など、サイトを訪れた人に向けた内容を掲載する、事としました。「前にも言ったじゃん(Lopan店長談)」です。

下層ページ」とは、トップページ以下の階層のページという意味です。
「以下」という意味については後述の「サイト構成図」を見れば分かると思いますが、Webサイトでは、トップページを一番上の階層として、その下にそれぞれのページがぶら下がっているイメージで構成されるため、一般的に(?定かではない)トップページ以外は下層ページとなります。
また下層ページは、そのサイトのコンテンツとなるので、「コンテンツページ」と言ったりもします(言ってるのを聞いた事があります)

目次に戻る

サイトの構成を決める

前回の記事の「必要なページを書き出してみる」で書き出した内容から、多少変更があったので、改めて、必要なページそのページの役割を書き出してみます。

  • Lopan's info個別ページ(キャンペーンやパン教室、その他お知らせ)
  • Lopan's info(その記事の一覧)
  • Lopanのパン(パンの紹介+取り置きを予約するパンの選択)
  • Lopanのパン予約フォーム(パンの予約確定)
  • cafeメニュー(cafeメニューの紹介)
  • 店舗について(Lopan cafeの店舗情報)
  • パンカフェBlog記事ページ(珈琲の淹れ方やパンの豆知識を紹介するブログ)
  • パンカフェBlog(ブログ記事の一覧)
  • お問い合わせ(パン教室参加者募集や、その他お問い合わせ受付)
  • プライバシーポリシー(個人情報保護について)
  • サイトマップ

以上の内容でサイトを構成します。

サイト構成図を制作する

サイトの構成を捉えやすくするため、サイトを構成するページと、その階層構造を表した「サイト構成図」を作ります。下図では、トップページから下層ページに向かって、どのページとどのページがリンクされているかという導線が分かるように、相関図みたいな作りになってます。

サイト構成図

下記ページにて、サイト構成図をブラウザ上でお手軽に作れるサイトが紹介されてましたのでぜひご一読!

Webサイトの構成図を簡単に作れる便利ツール

目次に戻る

下層(コンテンツ)ページの制作

トップページデザインとサイト構成図の確認が取れたら、続いて下層(コンテンツ)ページを制作していきます。ヘッダー、フッターは固定なので、コンテンツ部分のレイアウトを考える事になります。
Lopan cafeの下層ページは前述の全11ページ。

各ページに入れる内容を整理する

ページには、それぞれの役割に合ったコンテンツを用意する必要がありますが、具体的には何が必要でしょう?
各ページに入れる内容を整理してみます。

Lopan's info個別ページ
  • 投稿日時
  • ニュースのタイトル
  • ニュースの種類(カテゴリ)表示(お知らせ・キャンペーン・パン教室・その他)
  • ニュースの内容(本文)
  • 画像(あれば)
Lopan's info(ニュース一覧)
個別ページの内容の概略と、画像を1枚だけ掲載した一覧にします。レイアウトを揃えるため、個別ページに画像がない場合も、代替画像を入れます。
Lopanのパン
  • パンの画像
  • パン名
  • パンの情報(値段・焼き上がり時間・袋詰めの場合何個入りか)
  • パンの解説
  • 取り置きできるか否か
Lopanのパン予約フォーム
  • 選択したパンと個数の一覧
  • 入力フォーム(お名前・メールアドレス・ご来店日時)
  • 送信ボタン
Cafeメニュー
ほとんどLopanのパンと同じ。取り置きがなくなるのと、情報は値段だけにします。
店舗について
  • Lopan cafeの紹介文とか、ご挨拶とか、コンセプトとか
  • 店舗の情報(住所・営業時間・定休日・連絡先)
  • アクセスマップ(Google Maps)
パンカフェBlog記事ページ
ほとんどLopan's info個別ページと同じ。カテゴリ分けが違うだけ(パンのこと・珈琲のこと・Lopanのこと・その他)
パンカフェBlog(記事一覧)
ほとんどLopan's info(ニュース一覧)と同じ。同上。
お問い合わせ
  • フォームの内容は、お名前・メールアドレス・お問い合わせ内容
  • お問い合わせ内容の種別(パン教室について・求人について・店舗について・その他)
プライバシーポリシー
  • 個人情報保護について
  • 個人情報の定義・収集・利用・管理について
サイトマップ
サイトの目次

レイアウトを考える

とはいえ、全ページ分を用意する必要はありません。サイト内で、似た内容のページや、同じデザイン要素があれば、そのどれかひとつだけを制作すればいいです。ページの内容をパターン別に分けて、その代表的なページをひとつずつ制作します。
Lopan cafeの場合は、以下の5ページ分用意する事にしました。

  • Lopan's info
  • Lopan's info個別ページ
  • Lopanのパン
  • Lopanのパン予約フォーム
  • 店舗について

Lopan's infoパンカフェBlogは、「ニュース(記事)の一覧」+「個別ページ」ともに、似たレイアウトとなりそうなので、Lopan's infoのみ制作します。
LopanのパンCafeメニューも同じく、似たレイアウトになりそうなので、Lopanのパンのみを制作。
Lopanのパンでは「予約フォーム」も制作しますが、このフォームがお問い合わせでも流用できそうです。
あとは、スタンダードなページレイアウトとして店舗についてを制作します。このページで、基本的なテキストのレイアウトとか、フォントサイズ、テーブルぽい組み方などのレギュレーション(ガイドライン)を固めたいと思います。

まずはラフスケッチでアバウトに。自分で分かればいいです。

下層ページレイアウトのラフスケッチ

下層ページのデザイン制作

大体のレイアウトが決まったら、早速デザインを制作します。トップページで、ボタン要素とかタイトル要素は作ってあるので、その辺は使い回していきます。
一覧のページでは、「レイアウト切り替えボタン」なるものを設置したので、それ用に違うレイアウトも用意します。
LopanのパンCafeメニューでは、サイドメニューの内容を変えます。
Lopanのパン予約フォームは、モーダルウィンドウで開くようにしました。

Lopanのパン/Lopanのパン予約フォーム
Lopan's info/店舗について

この時点では画像はダミーです。コーディングの時に差し替えるつもりです。グレーの塗り潰しにするよりも、ダミーでも入れておいた方が雰囲気が分かっていいです。実際はここまで綺麗な画像は入らないかもですがXD。
ダミーで使う画像は、こことか、ここみたいな「写真素材/ストックフォトサイト」のサンプル画像(サイト名が入った画像)を使わせてもらったりしてます。

モーダルウィンドウ」っていうのはLightboxとか、FancyBoxみたく、リンクをページ遷移させず、子ウィンドウで開かせるヤツの事です。このBlogでは後者を使ってます:)。

目次に戻る

スライスしてWeb用に書き出し

デザインが出揃ったら、画像をWebで使う用のデータに書き出していきます。スライスについては前回の記事の「Web用の画像素材にする」を参照。
例によって、下図のようなpsdデータを用意しました。

slice_common.psd
slice_contents.psd
slice_gallery.psd

以上!

目次に戻る

あとがき

前回トップページを制作してから結構月日が経ってしまいました…。その所為か、改めてデザインを見直してみたらなんだか野暮ったく感じたので、修正する事に相成りました。Photoshopの豆知識的な事とか、スライス用のデータを用意する理由については、前回の記事に書いてるので、ぜひを読んでみてください!
次回は(次回こそ)コーディング開始します!

続きはこちら→「Webサイトの作り方のまとめ!コーディングまで。

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

4 Comments! for Webサイトの作り方のまとめ!番外。

    • _watercolor

      > ttwicshallyさん
      コメントありがとうございますー!
      お役に立てたならなによりです:)。

      Reply

  1. nickwoo

    大変参考になりました。
    有難うございます。

    Reply

    • _watercolor

      > nickwooさん
      よかったですー。
      ありがとうございます!

      Reply

コメントを残す

*がついている欄は必須項目です。