新米webディレクターのmei（@mei_1123ak）です。
私は、3ヶ月前に不動産業界からweb制作会社に転職して、現在ディレクターの業務を行っています。
転職する際、総合学園ヒューマンアカデミーに通いweb制作について勉強しました。
その卒業制作でwebサイトを制作したので、今回はどんなフローで作ったかご紹介します。
\こんな疑問が解決できる記事になっています/
- ヒューマンアカデミーweb講座に通うとどんなものが作れるようになるの？
- どんな流れでサイトを作った？
まず、実際に作成したのがこちらのサイトです。
自分で考えた架空のcaféのサイトを作りました。
制作期間は、どんなサイトを作るか考えるところも含めると1ヶ月半ほどかかりました。
ではどんな流れでwebサイトを制作したかざっくりフローご紹介します。
（caféのサイト制作という前提です）
Contents
step1.コンセプトやターゲット層を明確にする
いきなり制作に取り掛かるのではなく、まずはどんなcaféか具体的にイメージしていきます。
（今回は架空のcaféのサイトですが、実際はクライアントの事業について、ヒアリングしたり調べたりします）
結構この部分が大切！（だいぶ悩みました・・）
ここをきちんと明確にしておかないとサイトを作っている間に迷走してしまいます・・
ペルソナ設定
caféに来るお客さんがどんな人なのかを考えます。
今回私が考えたcaféのペルソナ（ターゲット層）はこちら。
ーペルソナー
- 30歳 働く女性 未婚
- 仕事が忙しいけれど、自分の時間を大切にしたい
- 仕事だけで1日を終わらせたくない
- 仕事以外のコミュニティを求めている
- 休日は、ショッピングやヨガを楽しむ
- 美容、健康を意識した食生活
caféのコンセプト
ちょっと変わったcaféを作りたかったので、丸の内のオフィス街にボタニカルショップ（お花よりも植物が多いイメージ）がcaféを手がけたという設定にしました。
（なかなか珍しいcafeかもしれません・・）
店内が植物で埋めつくされていて、実際にその植物も購入できる、奥に行くとテーブルがあり、食事やお茶ができる・・・そんなcafeがあったらいいなぁーという思いで考えました。
ーConceptー
「ビジネス街にある非日常空間」
落ち着いた自分の時間を過ごせる、植物に囲まれた癒しの空間
- モノの提供だけでなく、「空間や時間、日々の過ごし方を提案する」
- ワークショップ・イベントを通して人が集うハブになる
→caféの機能を超えたコミュニティの形成
cafeの機能だけでなく、ワークショップやイベントなどを定期的に開催して、
たとえば、仕事前の「朝活」として利用したり、仕事後によってもらう・・・
人が集まる場にしたいなぁと考えました。
caféを利用することで得られる効果
続いて、caféを利用することで、お客さんはどんな効果が得られるか？
なぜそのcaféを利用するのか？
ということを深掘りして考えていきます。
ーcafeを利用することで得られる効果ー
- 忙しい毎日の中で、落ち着いた自分の時間をもつ。自分をリセットする
- 仕事のリフレッシュ、気分転換
- ワークショップやイベントに参加することで、新しい発見や仕事以外の交流の輪が広がる
- 健康を意識した食事がとれる
➡︎自分らしく、毎日を丁寧に過ごす
だいぶイメージが固まってきました・・・！
step2.webサイトを作る目的を考える
次になんのためにサイトを作るか、目的を考えます。
実際にサイトを作る時はきっとなんらかお客さんが困っていることがあり、それを解決するために作ると思います。
困りごととは、たとえばこんなことです。
- 売上を上げたい
- 認知度を上げたい
- 集客力を上げたい
- 情報発信したい
- ブランド力を高めたい
今回は特に
- ブランディング
- 情報発信
この２つによりコアなファンを作ることを目的としました。
step3.どんなページを作りたいか？
いよいよページの構成を考えます。
どういうレイアウトが良いか全く検討がつかなかったので、自分の好きなサイトや作りたいイメージに近いサイトがどんな構成で作られているのかノートに書いてみました。
これらのサイトを参考にしました
そして自分のサイトはどうしようかなぁ・・と考えていきます。
最終的には変更したところもありますが、まずは思いついた案を色々と書いてみました。
これはほんの一部ですが、色々と試行錯誤しながら全ページレイアウトを考えました。
step4.カンプデザインでページのレイアウトを決める
次に、手書きで書いたレイアウトをもとにAdobeXDでデザインしていきます。
XDは無料で使えますし、illustratorやフォトショップよりも使い方がシンプルで簡単なので、初心者の方にもおすすめです。
私も今回初めて使いましたが、すぐに慣れました。
XDで作ったカンプデザインがこちら。
一気にサイトっぽくなりました・・・！
実際に写真を入れてみるとイメージが湧きます。
写真は無料でダウンロードできるものから取ってきています。
このあたりのサイトはわりと良い素材があるのでおすすめです。
step5.HTMLをかく
デザインが決まったところでいよいよ制作していきます。
ここまでデザインが決まっていると、制作の途中でデザインなどについて悩まなくてすみます。
HTMLのコードをadobeDWを使ってページごとに書いていきます。
この書き方は少し勉強しないといけないです。
ちなみにHTMLだけ書いた状態がこちら。
縦に並んだ状態で、まだレイアウトが整っていません！
step6.CSSでサイトをデザイン
HTMLが全ページできたら、CSSでレイアウトや文字の色などを指定していきます。
イメージ通りにならなくてCSSで結構手こずりました・・・
初めて作る場合は、わからないところを聞ける人がいる方が良いかもしれません！
CSSを書くとレイアウトが揃いサイトっぽくなります！
ここまで来ればほぼ完成状態・・・！
step7.jQueryで動きをつける
最後にjQueryで写真をスライドさせたり、スクロールするとふわっと現れるようにしたり・・・好きな動きをつければ完成！！
まとめ
私が初めて制作したwebサイトについてご紹介しました。
全くサイト制作について知識はありませんでしたが、6ヶ月間スクールに通うとこのくらいのレベルのサイトは作れるようになります。
CSSでなかなかイメージした配置にならなくて手こずりましたが、先生にたくさん質問したらわかるようになりました。
そして、自分の思い通りに動くとちょっと嬉しくなります！
完成したときはかなり達成感がありました・・・！
参考になれば嬉しいです。
