架空サイトを作ってみた 猫カフェpart1

WEBデザイン

こんにちは!星りんごです。

最近全く絵を描かずに、ずっとWEBデザインについて勉強していました。
Twitterにはいつもイラストしかあげないので「イラストを描いてる林檎」ってイメージかもしれませんが、イラストだけではなくWEBデザインにも興味があってちょいちょい勉強してます。

デザインとコーディングの両方を楽しく勉強したい!という思いから、「架空の〇〇のサイト」づくりを始めることにしました。
自分の好きなものに関係する架空サイトをつくれば楽しく勉強できるよね~

第一弾は「架空の猫カフェのサイト」です!!
完成形はこちら

サイトを作る手順
  1. 構成とデザインを考える
  2. 画像を作る
  3. HTMLを書く
  4. CSSを書く
  5. スマートフォン対応

今回は構成とデザインを考えるプロセスをご紹介します。

構成とデザインを考える

サイトの構成を決める

必要なページを考えます。
トップページとお問い合わせフォームはどんなサイトにも必要ですよね。

猫カフェのサイトなので、他に利用案内、猫の紹介、カフェメニュー、アクセスのページを作ります。
サイトの構成はこんな感じになります。

ワイヤーフレームの作成

だいたいイメージできたらワイヤーフレームを作成します。
ワイヤーフレームというのは設計図のようなものです。
私はイラストを描くときにも使う「ClipStudio」というソフトウェアで手書きしました。
本当はもっときれいに作った方がいいと思う・・・

↓トップページと案内ページのワイヤーフレーム

横幅を980pxとして設計していきます。
横幅を大きくしすぎるとディスプレイによっては横スクロールバーが出てきてしまうので、主流の980pxがおすすめです。

画像や要素のサイズまで考えておくと、CSSが書きやすくなります。

雰囲気や色合いを決める

デザインを考えるときに、ターゲット層を明確にするとアイデアが浮かびやすいです。
例えば、今回は猫カフェのサイトなので猫カフェに来る客層を考えました。

  • 女性が多い
  • 高校生から大人までの幅広い年齢層
  • 癒されに来る

実際猫カフェは女性客が多いので、全体的にかわいい感じにしよう。
とはいっても男性客もいるので、あまりブリブリ過ぎないおしゃれな感じにしたい。
あとは猫カフェは癒されるイメージなので、色数を抑えて、茶系の色でまとめよう。

こんな感じに雰囲気をイメージしていきます。

まとめ

これで下準備はほぼできました(・ω ・ノノ゙パチパチ
どんなサイトにしようかな~って考えるの楽しいです。

次回は、サイトで使うロゴやバナーなどの画像を作る工程を紹介したいと思います!
ここまで読んでいただきありがとうございました。

ではまたー!

タイトルとURLをコピーしました