PR

Webサイト制作③ 架空のカフェ&ランドリー「GOICHI」

架空のカフェ&ランドリーGOICHI HTML/CSS

現在、大阪にある職業訓練校の「グラフィック・WEBデザイン修得科」というコースを受講しています。期間は4月25日から10月24日までの6カ月間。

今日は10月18日、残り期間は僅かとなっています。

Webポートフォリオサイトの制作が完了しているため、残りの授業では個人的に別の作業をする予定です。

今回は、昨日まで制作に取り組んでいたWebサイトについて紹介したいと思います。制作したのは、架空のカフェ&ランドリーのWebサイトです。

https://voukb4b9myqtqofibkrvta.on.drv.tw/www.cafe%26laundry_goichi.jp/

デザインシートの制作

いきなりコードを書いていくということはせず、デザインシートを使って、サイトの構想を練るところから始めました。以下は、僕自身が使ったデザインシートです。

軸だけ決めて、細かい設定等はコードを書きながら決めていきました。

デザインシートを使って以下の7つの項目を決めました。

  • サイト名
  • コンセプト
  • ターゲット
  • ユーザーシナリオ(ペルソナ)
  • ゴール(例:「お店の売上を1.2倍にする」)
  • サイトカラー
  • メタワード
  • キーワード 4つ
  • サイトマップ

10月に入ってからサイト制作ばかりしているせいなのか、デザインシート制作の要領を得てきたような感覚があります。以前は2日ほど時間を使っていたデザインシートの制作を、今回は2時間ほどで終えられました。

以下は、デザインカンプのようなものです。自分の頭の中が整理できる程度に簡略化しています。

(最終的に完成したサイトは、画像素材との兼ね合いを踏まえて当初のデザインから大幅に変更したものとなっています。)

コンセプトについて

サイトのコンセプトは

洗濯ついでにコーヒー一杯。日常の中にも一期一会。

というものにしました。

洗濯ついでにコーヒー一杯。日常の中にも一期一会。

現代では、高機能の家電が安価で使えたり、友達とのコミュニケーションがネットで完結したりということが当たり前のように起こっています。そのため、現代社会というものを「自分で行動を起こさないと人と出会うことができない社会」と捉えることができます。

マッチングアプリなどが流行る現象も、そういったことから説明できるのではないかと僕は考えていてます。そういった現代社会の中で「何が求められているのか?」ということを考えた結果、「日常生活の中で他人と顔見知りになれるような場所」がその答えなのではないかと思い、そこから具体化を進めてコンセプトを決めました。

もちろん、ディズニーランドのような非日常空間を楽しむことができるサービスも素晴らしいと思いますが、日常の中に「スパイス」を振りかけられるようなサービスというものが近所にあると面白いのではないかと思い、架空のカフェ&ランドリー「GOICHI」の構想を練り上げた次第です。

配色とフォント

配色決めは前回同様、Adobe Colorを使って行いました。

フォントはGoogleフォントのものを採用しています。

  1. font-family: ‘Kiwi Maru’, serif;
  2. font-family: ‘Cabin Sketch’, cursive;
  3. font-family: ‘Oswald’, sans-serif;
  4. font-family: ‘Smokum’, cursive;

メインのフォントをKiwi Maruにして、コンセプトに合うような柔らかい雰囲気のサイトに仕上げました。


以上、架空のカフェ&ランドリー「GOICHI」のWebサイトの紹介でした。

職業訓練も残り1週間足らずというところなので、就職活動と並行して、jQuery以外のjavaScriptも使えるように学習と制作を進めていきたいと思います。

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