この記事では、SHElikes Webデザインコースにて私が実際に制作した卒業制作をご紹介します。
私の主人が経営する居酒屋個人店がオープンした、という仮定で
実際に主人へヒアリングし制作しています。
はじめて一からwebサイトを制作する方や、
私と同じようにwebデザイン初学者の方へ参考になれば嬉しいです！
尚、掲載している店名・住所・電話番号など全て架空のものです。
完成したホームページ
まず最初に完成品をお見せします。
サムネイル画像クリックで拡大表示します。
- モックアップ画像
- ホームページ全体
また、アニメーションを付けた様子を画面録画にて残しています。
こちらは以下のインスタグラムに載せているので
よければご覧ください。
制作手順
ここからは実際の制作手順にそってご紹介します。
１．ヒアリング、要件定義
実際に旦那さんに以下の各項目をヒアリングし、
どんなホームページにするか定義していきました。
| ヒアリング項目 | 内容 |
| 店名 | のみや えじり |
| 提供サービスなど | ウイスキー専門の居酒屋（個人店） |
| HP作成目的・背景 | ・新規出店のためHPが欲しい
・ウイスキーを通じて「お酒を飲む楽しさ」を感じて欲しい ・働く老若男女へ居心地の良い場所の提供がしたい |
| webサイトの種類 | 店舗HP |
| 狙う効果 | 店舗認知度向上 |
| 競合 | 居酒屋個人店 |
| ターゲット | 20代〜50代の働く男女 |
| デザインイメージ |
・居心地の良さを感じてもらうためウイスキーならではの高級感を出しすぎない ・カジュアル寄り ・でも子供っぽさがでないようにシックな感じでまとめる |
| 使用カラー |
黒、白、朱色 |
| スマホ対応 |
有り |
デザインイメージに関しては使用したい色や理想のHPイメージが特にないとのことだったので
狙う効果やターゲット層を考慮して、私のほうから提案しています。
２．競合、参考サイト調査
ヒアリングが終わったら、競合サイトの調査をしました。
同じジャンルのサイトはどんな雰囲気のサイトが多いのか、実際に検索しました。
今回は個人経営の居酒屋はもちろん、大手チェーン店のHPもチェックしました。
さらに、ゼロからデザインを作成するのは難しいので、
- 居酒屋
- ウイスキーのLP
を中心に参考になりそうなサイトを集めました。
主にピンタレストを使用して参考サイトをひたすらクリップして集めました。
こんなかんじ ↓
３．ワイヤーフレーム作成
競合サイト調査や参考サイトのクリップができたら
集めた参考サイトのいいな、と感じたところを取り入れつつ（当然ですが丸パクリはNG）
デザインに落とし込んでいきます。
今回はワイヤーフレームを手書きで作成しました。
それがこちら ↓
見にくくてすみません・・・；；
コーディングまでするのを見越して付けられるところはclass名を付けてます。
４．デザイン作成
今回はphotoshopを使用して作成しました。
画像はイラストAC、写真ACからお借りしています。
文章も今回は全て私が考えて適当な文言をいれてます。
ここのpsdデータが完成した段階で一度旦那さんに確認してもらいました。
今回は指摘や修正依頼もなかったので、このまま進めました。
５．コーディング
作成したpsdデータを元に、以下の手順でコーディングしていきました。
- PCデザインコーディング
- jQueryでアニメーション実装
- タブレット・スマホ対応
このHP制作当時はSassやBootstrapはまだ勉強する前だったので
HTMLとCSSのみで制作しました。
黒い透過の背景もCSSでコーディングしています。
ちなみにエディタはVScodeを使用しています。
ここまで出来てついに完成です……！！
卒業制作提出、フィードバック
完成したサイトを提出し、実際にいただいたフィードバックを簡単に以下にまとめます。
卒業制作点数 ８８点／１００点満点
８０点が合格ラインで、一発合格もらえると思っていなかったので嬉しかった……！
フィードバックコメント
よかったところ
- シックなデザインがお店のコンセプト・ターゲットに合っている
- jQueryでよりリッチな仕上がりに
- ところどころテキストの縦書き◎
- 余白の使い方◎
もう少し改善できるところ
- ヘッダーのメニューhover時の線を右横に付けて縦に伸びた方がより自然
- ヘッダーやハンバーガーメニューは固定するとより良い
- ハンバーガーメニューはメニューをクリックしたら閉じるように
- 電話番号はクリックで電話できるように（特にスマホ）
ここでは簡単にまとめたので冷たいコメントのようになっていますが
実際はもっと丁寧で暖かいコメントをいただきました……！
改善点についてはどれも私には思いつかなかった観点ばかりで
とても勉強になりました。
初めてのHP制作で見えてきた課題
レスポンシブ対応
一番苦労しました。
いざ取り組もうとすると、どこから手を付けていいかわからない……
デザインを作らずいきなりコーディングから入ってしまったこと、
頭の中でイメージすれば大丈夫だろう、という考えでいたのが間違いでした。
今回は省いてしまったのですが、
スマホデザインもデザイン作成の段階で作れば
もう少しスムーズに制作を進められるかな、と思います。
あとは単純にスマホデザインのwebのインプットが少ないと感じました。
普段PCよりスマホをメインで使っているはずですが、「webデザイン」という観点から
webサイトを見ていなかったのだなあと実感しています。
いつも見ているスマホも、意識的にデザインを見る必要があると感じました。
ユーザビリティへの意識
いただいたフィードバックの改善点のところで指摘されたヘッダー位置の固定。
正直わたしの頭に発想として有りませんでした。
こういうところもwebサイトのインプットから得られるものなので
動的なインプットをしていくことが今後は必要だな、と感じました。
ピンタレストを使用して静的なデザインのインプットは出来ても
動的なところは実際にページをみてみないとわからないので、
前項のレスポンシブ同様、意識的にインプットしていく必要があると感じました。
他のフィードバックにもある
ハンバーガーメニューの動きのところや、電話番号からワンクリックでお問い合わせできる
という点にも同様のことが言えるので
スマホからみたときのwebサイトを今後は積極的にインプットしたいと思います。
まとめ
いかがでしたでしょうか？
今回はわたしが制作したサイトについて、手順や反省点などをまとめてみました。
制作にかかった期間は約2ヶ月程です。
途中、モチベーションが下がり作業できない日が何日間か続いたりしましたが
最終的に完成できたことは大きな達成感が得られたと同時に、自信にも繋がりました。
web系初学者さん、はじめてwebを作成する方の参考になれば幸いです。
最後まで読んでいただきありがとうございました！
