こんにちは。sagayuriです。
6月に前職を退社し、7月からSESとしてシステム開発会社さんでお世話になっています。
早いものでもう1ヶ月が経とうとしています。
今回は、ホームページ制作って実際どういうことをするのか、
一通りの勉強はして、そこから実務をこなすまでの過程をお話ししたいと思います。
ホームページを作る方法はわかっても、実際それ以外にも必要な作業はたくさんありました。
- HTML、CSSを一通り勉強した
- 実際のサイト模写も何となくできる
- ここから実務ができるようになるまでに何をしたらいいか分からない
上記のような方に参考になればいいなと思って、自分の実体験を元にお話ししていこうと思います。
自分が本当に実務で対応できる自信がない…
IllustratorやPhotoshop、HTML、CSSなど一通りのスキルは学んで、
サイトも模写くらいならできるようになってきた私ですが、
7月から入社が決まって、自分は現場でどこまで対応できるのか、有休期間中にできることはないか考えていました。
そんな時、前職で交流のあった独立しているデザイナーさんが、
「スポーツクラブのサイトリニューアルを手伝ってくれませんか？」と、
声をかけてくださったのです。
正直迷惑をかけてしまうのではとか、自分が作ったデザインやコーディングを直す方が大変では…？と考えたりもしましたが、私が実務でもある程度困らないように、この案件を乗り切れば実務でも大体大丈夫！という目安まで実践の中で学ぶ機会を作ってくれたのです…
もちろん報酬もいただけました！改めて、本当に言い方に巡り会えました！
今回やったことの主な流れ
今回の作業内容は以下のような流れです。
- デザイナーさんと事前打ち合わせ、お客様のヒアリングシートやリニューアルの目的、希望などの確認
- ヒアリングシートを元にワイヤーフレームを作成
- ワイヤーフレームからデザインを作成
- デザイン完成後、HTML、CSSを使ってコーディング(レスポンシブで)
- チラシのデザインも並行して作成
- 最後の方はデザイナーさんから指示された部分をスポットで作業(画像作成とか文章作成など)
基本的にお客様との打ち合わせやディレクションは行わず、
打ち合わせ内容を共有していただいて、作業の指示をいただいて作業して、確認してもらって…の繰り返しでした。
制作会社さんによっては各作業で担当が分かれてたりするのでしょうが、
私も最終的には1人でディレクションから全ての作業をこなしたい！という希望もあるので、難しかったですが幅広くやらせていただきました…！
１つ１つのステップについて、感想＋備忘録を。
デザイナーさんと事前打ち合わせ
まずは最初の打ち合わせです。
お客様と打ち合わせした内容を共有してもらったり、
サービスの概要を一通り説明してもらったり。
独自でヒアリングシートを作成されていて、
制作前に必ず記入してもらっているとのこと。
これはWeb制作をしている方皆様そうだと思います。
ここで気になったのは、ヒアリングシートの中でお客様の回答に矛盾されている部分があったこと。まだサイトのイメージやメインターゲットが絞りきれていないご様子。
ここを徐々に引き出すのがディレクションの腕の見せ所らしいです。
ワイヤーフレームを作成
はい。ここで最初にフリーズしました。
ワイヤーフレーム作ったことなかったので…
XDの勉強も兼ねて、XDを使おうというのは決めていたんですが、そもそもどうやって考えるのか？と…
教えてもらうこともできたけど、まずは自分なりに考えてみよう！ということで、
まずは競合のサイトを見まくりました。
その中で良いところ、悪いところをピックアップしたり、自分が今通っているキックボクシングを探している時に、こういう導線だったら見やすいな、とかこういう情報はここに欲しいな、など、多少の経験も参考にしてみました。
本当はペルソナを作って、とか細かい手順があるのですが、今回はターゲットも定まり切っておらず、要望もふわっとしていることもあり、完全に想像の中でユーザーイメージを考える感じになってしまいました。
後で思います。やっぱり、どんな人に利用してもらいたいのか、を絞り混んで作るのって大事だなと…
お客様の希望のページ数は８ページで、各ページの内容も大まかには決まっていましたが、
せっかくなので、こういうページもあった方がいいです、というご提案の意味も含めて追加のページもワイヤーに含ませていただきました。
ただ言われた通りに作るのではなく、こういうのがあった方がいいですよ、と提案するのも大事な役目です。もちろんお客様にとってもいいご提案ですし、ページ数が増えた方がこちらの売り上げも上がりますしね！
営業も兼ねてる感じなんだなーと思いました。
ワイヤーフレームからデザインを作成
はい、ここでまたフリーズします。
希望の色とか雰囲気などの要望がかなりふんわりとしていて、
こういう感じ、という参考サイトを何個かいただいたのですが、
何故かテイストがバラバラだったのです…
そして私は今までLPなど１ページのものは作ったことがありましたが、
複数ページのものは作ったことがありませんでした。
ここも希望のサイトや競合のサイトを参考にして、色の方向性を決めて、手探りでやってみる日が続きます…
ワイヤーフレームもデザインも、全然違う！って言われるのが怖くて、なるべくちゃんとしたものを出さなきゃって思いがち。
でもそんなことはなくて、とりあえず形がわかって方向性がわかるものをまず作ってみることが大事。
デザインも、どんなにすごいデザイナーさんだって何も修正なく一発OKなんで稀なはず。
ここは早めに出してアドバイスもらって修正かけてって、1人で作るというよりは他の人の意見も聞きつつブラッシュアップしていくのが大事だなと思いました。
コーディング作業
今回は最終的にWordPressを使用します。
オリジナルテーマの構築はできないので、それはデザイナーさんが行います。
その間に私はデザインを元にHTML、CSSを使ってコーデイング作業をすることになりました。
時間があればレスポンシブまでやってとのことでしたのでレスポンシブも！
ここでまた後悔ポイント、デザインの時点でスマホのデザインも作っておくんだった…
ヘッダーどうする？CTAエリアスマホの時どうする？ブレイクポイントは？？などここにきて問題がボロボロと出てくる
コーディイング作業自体は、デザインからコーディングする作業を経験していれば大きな問題なくできるかなと思いました。
チラシのデザインのラフ作成
リニューアルの販促用にチラシの制作も一緒にやるとのことで、こちらのデザインのラフの作成もしました！
参考イメージを元に作っていたのですが、サイトのデザインとチラシのデザイン同時進行でやっているとどうしてもサイトのデザインの方に意識が入ってしまって、チラシのデザインはあまりいいものができませんでした…
反省です…
デザイナーさんから支持された部分をスポットで作業
サーバーにデータを上げてからは、もうWordPressの構築とか組み込みは私にはさっぱりなので、デザイナーさんがここやって欲しい！というところの作業をしていくのみです。
作業としては、
・リニューアルオープンの挨拶文の作成
・価格表ページの画像の差し替え、各クラスの説明を仮の文章から正式な文章に差し替え
・クラスのスケジュール表をちょっとおしゃれな感じに作り替える
このような感じでした。
挨拶文の作成はライティングの練習にもなり楽しかったです！
参考になりそうな文章を探して、それをそのまま使うのではなく、自分なりに修正したり、文章を追加してオリジナリティのある文章を作り上げます。
これは直しなく一発OKでした！
クラスのスケジュール表も、そんなに凝ったものではないですが、前回のチラシのデザインのこともあったのでしっかり考えて出しました！
こちらも大きな修正なく完了。
最後のリリース作業はデザイナーさんに託します。
コーディングの修正や最終的なアップはデザイナーさんにお願いして、
とりあえずは私の作業はここまでとなりました。
今回最初から関わらせていただいて、
本当に、ただ作る技術を知っているというのは始まりに過ぎなくて、
そこにさらにどんな価値を提供できるか、お客様とのコミュニケーションもすごく大事だなと思いました。
営業や接客業をしていた私にとって、お客様とある程度コミュニケーションができるというのは強みだなと。
もちろんデザインもコーディングも足りないところがたくさんあって、
次もう1回やるなら今度はもっと上手くできるって思います。
この1件の出来事だけでも本当にたくさんの学びがあり、
自分自身成長できたと感じています。
とにかくまず手を動かしてみるということがどれだけ大事かが身に染みてわかりました。
この世界、手取り足取り教えてもらうなんてあり得ないのです。
そういうことも含めて勉強させてもらって、ある程度自信もついて、本当にいい経験ができました。
