こんにちは、LIGディレクターのパーヤンです。
受託業務でWEBサイトを制作するWEB事業部に所属しています。
今日は、クライアントさま向けに先日公開されたランディングページ『Startup GRIND TOKYO』の制作過程をご紹介します。各フェーズでどんな準備が必要かなども公開しちゃいますので、是非ご覧くださいませ。
- 「Startup GRIND」とは
- 2010年、アメリカ・シリコンバレーで創設された世界最大級の起業家コミュニティー。現在、100万人の起業家・投資家が参加しています。日本では唯一のGoogleによる起業支援Google for Entrepreneursの一員でもあります。
Googleが支援する起業家集団、なんだかワクワクしますね。
実際にできたサイトがこちらになります。
Startup GRIND TOKYO
手前味噌ですが、これまたワクワクしますね！
目次
- ▼他の制作エピソードもこちら紹介しています！
-
新規メディアサイト『ぎゅって』デザイン一発OKのワケは、読者の声集めたワークショップ
予約数が30%アップ！TOKYO CRUISEのサイトリニューアルが成功した理由
制作の流れ
では、ひとつのWEBサイト制作がどのような工程を経て、どのくらいの期間でできているのか、制作の流れを見ていきましょ〜。
お問い合わせ：４月19日（水）
Startup GRIND TOKYOを運営するTHE STARTUPS株式会社より、弊社のお問い合わせフォームにご連絡をいただきました。
- クライアント様の動き
- お問い合わせフォームの項目に従い入力
初回ヒアリング：４月26日（水）
翌20日に弊社よりお電話させていただき、お打ち合わせの日程を設定しました。
初回ヒアリングでは、お問い合わせいただいた情報を元に弊社から
- コンセプト
- ターゲット
- 目的
など質問させていただき、ざっくばらんに話していただきます。
全てが固まっている必要はありません。
- クライアント様の動き
- 企業やサービスの説明資料などの用意
お打ち合わせの中で、提案資料の作成においてこんな資料が欲しい、などお願いすることもあります。
御提案：5月1日（月）
御提案書、要件定義書、お見積を送付。
こちらの資料を元にご発注を決めていただく場合も、すり合わせのお打ち合わせをする場合もあります。対面での提案かメールでのやりとりなのかも、案件によってさまざまです。
本件では、10日ほどご確認とすり合わせの期間を経たあと、ご発注をいただき制作に入りました。
- クライアント様の動き
-
- 社内確認や稟議などの調整
- 不明点への質問
サイト表現の設定：5月17日（水）
今までいただいた情報やご提案書へのフィードバックを元に、制作メンバーでどのようなサイトにするか表現を話し合います。そして目指す方向の参考サイトやアート作品、動画作品などを準備し、表現の方向性をクライアントさまを交えて打ち合わせます。
本件では打ち合わせ時に、
- 広がりや成長を感じるイメージ動画とWEB表現
- 背景色は清潔感を感じる白色、差し色はロゴでも使用している赤色
が決定いたしました。
- クライアント様の動き
- イメージのすり合わせ
ワイヤーフレームの提出：5月18日（木）
表現設定と平行して、ページの構成要素などを記載したワイヤーフレームを制作し、提出しました。ワイヤーフレームは、サービス説明資料や現行サイトなどを元に再構成、リライトを行いながら作っていきます。コーポレートサイトなどページ数が多い場合は、ワイヤーフレームの前に要素リストを作ることもあります。
 |
ディレクター：パーヤン 資料を拝見して強く印象に残ったのは登壇者の豪華さです。よくもまぁ集めたなというビッグネームの数々。そのため、上部に登壇者紹介を置き、その後サービスの説明をするという構成にしました。 |
|---|
- クライアント様の動き
-
- 資料の提供
- 構成要素の確認
- テキストの調整
デザインの提出：5月26日（金）
確定したワイヤーフレームと表現設定を元に、デザインを制作します。デザイナーをはじめとした制作メンバーで、ああでもないこうでもないと頭を捻りながら形にしていきます。
今回は表現設定を元に、扉を開く表現にたどり着きました。
 |
デザイナー：トミー デザインはワンキャッチ・ワンビジュアルを意識しました。 「扉を開く」アニメーション → ズームインする東京の動画 → 各国でのイベント動画を一連の流れとして没入感のあるTOPアニメーションにしています。もう少し見てみよう。そんな気持ちが出てくれたら幸いです。 |
|---|
- クライアント様の動き
-
- 写真など素材提供
- デザインチェック
コーディングの提出：6月2日（金）
デザインがFIXすれば、いよいよ大詰めコーディングです。WEBサイトならではのインタラクションを実装していきます。
デザインから実際にサイトになると、より魅力的になるのが紙媒体にないWEBの面白さですね〜。
 |
フロントエンドエンジニア：ザワ Knockin’ on Heaven’s Doorを頭の中で反芻させ、世界の広がりを感じつつコーディングしました。「扉」というキーワードを元に、オープニングアニメーションやページにリズムを持たせたい箇所には扉を開ける表現を折り込みました。 |
|---|
- クライアント様の動き
-
- アニメーションのチェック
- 全体最終チェック
納品：6月7日（水）
お問い合わせをいただいた4月19日から1.5ヶ月が経ち、納品となりました。あとは公開を待つばかりになります。
本件ではクライアント様にもエンジニアがいらっしゃるため、お問い合わせフォームの組み込みと公開はクライアント様にご担当していただきました。
ソースコードを納品しクライアント様に公開していただくことも、弊社で公開作業を行うことも可能ですので、お気軽にご相談くださいませ。
- クライアント様の動き
- 検収
担当者様よりコメント
-
昔からLIGさんには会社自体にとても興味がありました。デザインだけでなくコンテンツの作り方などトータル的に「すごい」と感じており、一度お仕事をしてみたいと思っていたんです。
そんな折、私がStartup GRINDのWEBページ作成担当になり、真っ先に頼もうと思ったのがLIGさんです。
お問い合わせをしてから納品までの対応の早さは、私もクライアントを持つ立場としてとても勉強になりました。ページのクオリティも高く大満足です。
THE STARTUPS株式会社
高山西紀
以前より、LIGブログを知っていてくれたそうです。
ブログでつながり一緒にお仕事できるなんて、弊社にとってはありがたい限りです。
記事の最初でも紹介しましたが、あらためて、是非Startup GRIND TOKYOのサイトをご覧になってください！
Startup GRIND TOKYO
最後に
いかがでしたか？ この制作過程は一例で、作るサイトや状況によってさまざまに変化します。それぞれのクライアント様に合った方法で、ぴったりのWEBサイトを制作していく所存です。
LIGと一緒にWebサイトを作ってみたい、と思っていただけたら、是非こちらからお問い合わせくださいませ。
＼Web制作のお問い合わせフォームはこちら／
電話番号:03ｰ6240ｰ1253
もちろんLIGでは、WEBサイト制作以外にも、記事コンテンツなどさまざまなものを制作しております。Web制作以外もお気軽にお問い合わせください。
＼Web制作以外のお問い合わせフォームはこちら／
- ▼他の制作エピソードもこちら紹介しています！
-
新規メディアサイト『ぎゅって』デザイン一発OKのワケは、読者の声集めたワークショップ
予約数が30%アップ！TOKYO CRUISEのサイトリニューアルが成功した理由
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
