DogooBaco Loading

2016.11.27

美容室No.11様webサイト制作
〜第1回ディレクション編〜

web

こんにちは!ポケットモンスター サン・ムーンは皆さんプレイされていますか?私はムーンをしています。

ポケモンがCGで動いて、しかもなでたりゴミをとって上げたりできる機能に感動しています。むしろそれだけでおにぎり2つはいけます。

 

 

さて11月26日に、個人で制作をさせていただいておりました、埼玉県川越の美容室「No.11 (ナンバージュウイチ)」様のwebサイトをリリースいたしました!

そのときの制作の記録を簡単にでも、残しておきたいなと思い、今回から5回にわたって制作ブログを書いていきます!

今回は「ディレクション編」です!

 

 

目次

 

ディレクションとは?という話になってなってしまうのですが、ここでは上記のようなこととさせてください^^

通常のディレクションであれば、さらにスケジュールをひくところだと思うのですが、今回は特にリリースターゲットとする日は決めず、お客さまも私も空いた時間にゆっくりとやっていきましょう、ということで進めさせていただきました!

 

 

やりとり・お打ち合わせ

img_web-no11_1_02

 

通常のやりとりに関しては基本的にはメールでのやりとりをさせていただきました。

+実際にお話する必要がありそうな件や細かいお話が必要な際は、お打ち合わせをするお時間をいただきました!

バックログの利用も検討したのですが、お客さまが普段から長くPCの前にいる環境ではないというのがあったため、極力ご連絡でのストレスを軽減したいなと思い、お客さまが使い慣れていて、スマートフォンでも手軽に連絡事項が確認できるメールでのご連絡方法を取らせていただきました。

 

 

お打ち合わせは、事前にその日にお話したいことを私の方で「Evernote」でアジェンダを作成し、事前にアジェンダのノートのリンクを共有させていただきました。

お打ち合わせするほどでもないけど、メールだとちょっとわかりにくいかもしれないな〜と思ったことは、「Evernote」のノートに内容をまとめてノートを共有しました!

 

img_web-no11_1_03

 

実際のお打ち合わせでは以下のようなことを調整しました。

  • webサイト制作の全体の流れのご説明
  • レンタルサーバーの契約について
  • サイトURL・ドメインの決定
  • webサイト内でやりたいことのヒアリング・整理
  • webサイト内に持たせる機能決定
  • 制作をしたWFのご説明・FB(フィードバック)
  • お店の想いやコンセプトのヒアリング
  • デザインのご提案
  • デザインへのFB方法ご共有
  • 写真撮影

 

お店閉店後のお疲れの時間にこういったお時間をいただけたことに本当に感謝です><!

お打ち合わせ自体は計4日行いました。

 

 

調整事項の整理・タスク管理

img_web-no11_1_04

 

お打ち合わせで決定したこと、お話しをしたことについては、Evernoteのアジェンダをコピーして書き込んでいく形で議事録として整理をしました^^こちらも議事録としてお客さまにリンクを共有させていただきました!

 

また、細かい決定事項やToDo事項は、忘れないように「Trello」でタスク化をし、管理をしました。

 

img_web-no11_1_05

img_web-no11_1_06

 

こんな感じで、5つのステータスボードを作成し、細かいタスクをカード化し、それぞれ進捗があるごとにステータスボードを移動していきました^^

Trelloはお客さまとの共有はせず、自分のタスク管理用として使用をしていました。

最終的にはコーディング・WordPressの実装時に一番多く使用したツールでした!

アサインユーザーが入ったりそうでなかったりしているのは、「あ、これ全部自分タスクじゃん^^^^」と途中で気がつき、途中から設定しなくなったためです。

 

img_web-no11_1_07

 

各カードの中にチェックリストを作成できるのがとっても便利^^!

 

 

WF制作

img_web-no11_1_08

 

WF作成のツールはとっっっても悩みました…!今色んなプロトタイプツールが出ていて、それぞれ一長一短…!

以下のツールを検討しました。

 

まず「Prott」。こちらは会社のプロジェクトでも使用をしたり、個人的にも以前使用をしたことがあり使い勝手も気に入っていて使用を検討しました!

しかし、すでに1プロジェクト、個人で別プロジェクトで使用してしまっていたため無料で作れるプロジェクト枠がなくなっており…プランのアップグレードも考えたのですが、そこまで長い期間の使用は考えていなかったのと、「お金が…ない…^q^」ということで断念orz

 

次に今熱い「Adobe XD」!とても使ってみたい!!という気持ちがあったのですが、正直に言うと、この時ソフトを開いて「使い方がわからん…^q^」となり断念をしてしまいました…orz今思えば使っておけばよかったなーという後悔が大きいのですが、次のプロジェクトで使って行こうと思います…!

 

次が「JUSTINMIND」。ここまできてオフラインで使用できるいいプロトタイプツールはないかな〜という思いが出てきて見つけたサービス。

こちらは無料でかなりクオリティの高いプロトタイプ(デザインに匹敵するくらい)が作れるツールです!

そう、使ってみて途中で気が付きました。「PhotoShop(Illustrator)でいいのでは…^q^」

PhotoShopを持っていなくて、よりデザイン性のあるものが作りたい!という方は一度触ってみると良いかもしれません^^インターフェースもPhotoShopに似ているなと感じました。

 

最後に「Marvel」!最終的にはこちらに決定しました!

 

img_web-no11_1_09

 

下記決め手となった主な点です!

  • 無料でいくつでもプロジェクトを作成可能
  • プロジェクトを複数人に共有できる
  • 共有した画面に、プロジェクトに招待されたユーザーがコメントをすることができる
  • コメントは画面全体・画面内のコメントを入れたい箇所を指定など細かくできる(Prottに似ていますね!)
  • リンク設定の種類が豊富(ページ内アンカーリンク・別窓リンク・ヒストリーバック・スクロール固定…など)
  • リンク設定の複製を一気に指定したページにできる

特に、下から2番目の機能が個人的には嬉しかったです!意外とこの機能、他のツールだとなかったのですよね〜

 

img_web-no11_1_10

 

WF一覧画面はこんな感じ。Slackと連携することもできます!

 

そんな感じでWFの作成を画面上で行い、ページ間の遷移なども設定し、お客さまに共有をしてイメージを掴んでいただきました^^

 

 

以上!

最初のお打ち合わせから、デザイン着手までは約1.5ヶ月ほどの期間がかかりました。

平日仕事終わり+休日+平日ランチの間の30分程度

の時間を使ってこれくらいなので、実質1ヶ月以内には収まっているはず…?

 

 

ざっくりと書いたつもりが意外に長くなってしまいました^^;

次回は「デザイン編」を書いてみたいと思います!

 

 

次回以降予定記事

  • 第1回 ディレクション編 【今回はこちら!】
  • 第2回 デザイン編 ComingSoon
  • 第3回 写真撮影編 ComingSoon
  • 第4回 コーディング編 ComingSoon
  • 第5回 WordPress編 ComingSoon