喫茶店のホームページを作ってみる

こんにちは、コンスキです。

今回はホームページ制作の練習として街の喫茶店のホームページを作っていきます。

準備

Webデザイナーがホームーページを作るにあたって、まず最初にしなければならないことはホームページに必要な要素を考えることです。

なぜかというと、依頼を受けた喫茶店がどんな喫茶でんであったとしても、基本的に必要な要素は変わらないからです。

先ほどから言っている要素とは、例えば、メニューや営業時間などのことです。

それでは、喫茶店のホームページにはどんな要素が必要なのか考えて列挙していきます。

それぞれにしっかりとした役割がある要素はこんなところでしょうか。

後々、思い出したら追加していけばいいので、今全て挙げておく必要はありません。

ちなみに、要素を先に上げておく目的は、レイアウトを決めやすくなるようにするためです。

例えば、メニューはお客さんにどんなメニューがあるかをあらかじめ知ってもらうことで来てもらいやすくするという役割のある要素です。

このようなしっかりとした役割を持った要素を前もって上げておかないと、いざレイアウトに入ろうとした時に、何をどうレイアウトしていけばいいのかわからなくなってしまう可能性があります。

次にすることはヒアリングです。

ヒアリングでは、依頼してくれたお客さんに対して、ホームページ作成の予算やどんなホームページを作りたいかなどを聞くことが多いです。

しかし、これはWeb制作の仕事を一度も仕事を受けたことがない大学生ので想像言っていることなので、もしすると正確ではないかもしれません💦

さらに今回は実際にお客さんに頼まれて作るわけではありません。

仮想の喫茶店からホームページ制作を依頼されたと想定してホームページを作っていきます。

そのため、本当はヒアリングで得られるような情報は自分で考えていきます。

私がWebデザイナーだったらするかもしれない質問に対して自分で答えを書いていく形式でヒアリングをしていきます。

どんな雰囲気のお店ですか？

具体的なお店の情報を教えてください

ホームページの配色はどんな感じがいいと考えていますか？

ホームページの美しい配色の割合としてよく言われるのは「ベースカラー70%、メインカラー25%、アクセントカラー5% 」です。

このような3つの色がしっかり決まっている場合もあると思いますが、「この色がいい」というようにはっきりと色を提示されることは少ないそうです。

そのためカラーチャートのようなものを見せてお客さんに決めていただくか、どんな色がいいかを質問して答えてもらった色を参考にWebデザイナー側から提案していくのが良さそうです。

ということで、今回も質問の回答を下に次のような配色を提案することに決めました。

ベースカラー

メインカラー

アクセントカラ

ちなみに上に示している色はこちらのサイトを参考にしています。

という感じで、今回は喫茶店のホームページを作る前の準備段階をご紹介しました。

私は以前まで、ホームページ制作というと真っ先にHTMLやCSSを始めていました。

しかし、いざ初めてみるとそこで思うんです。

「何をレイアウトすればいいの？」「何をコーディングすればいいの？」

今考えてみると、これから作るものがどんなものであるかが決まってないのに、いきなりコーディングをやっていたと思うと、かなり無謀なことしようとしていたと感じます。

でも準備って目的から外れるような感じがしてやりたくなかったんです。

今も「準備したい」って思っていやっているわけじゃないんですが、そうしないと作るのが難しいことがわかったので準備をしています。

次回は、文字と四角だけで作る大雑把なレイアウトを考えていこうと思います。