サイト制作秘話シリーズ 第7弾
始めまして！
ブリッジコーポレーションでインターンシップとして勤務させていただいている篠田です。
大学では主にグラフィックデザインや映像表現、企画などを学んでおり、現在は卒業制作に向けて３DCGを使用した制作の勉強をしています！
会社では先輩方の力をお借りしながらWebサイトのデザインやコーディングに取り組んでいますが、まだまだ知識が不足していると実感する日々です。そこで今回は、そんな私と一緒にWebサイトの完成までに関わっている方々や業務の道のりを学んでいけたらと思います！
『サイト制作秘話』第7弾では、入社三か月のインターン生から見たサイト制作の裏側をお届けします！
・そもそも、Webサイト制作ってどんなことをしているの？
・依頼する側は、何をすればいいの？
・どれぐらいの期間で完成するの？
・サイトは作るけど、コンセプトとかどうしたらいいの？
サイト制作は、わからないことだらけですよね。
まさに今、サイト制作で悩まれている方。そして、これから依頼をされる方、ご安心ください。
この『サイト制作秘話』では、「ブリッジコーポレーションがどのように制作をしているか」をリアルにお伝えしていきます。
目次
1.本プロジェクトについて
2.ミーティング-コンセプト決め、企画の方向決め-
3.デザイン/イラスト
4.コーディング
5.システム構築
6.ディレクション
7.写真撮影
8.お客様からの声（株式会社OOZORA様）
本プロジェクトについて
お客様のご紹介
今回サイト制作をご依頼いただいたのは、株式会社OOZORA様。
京都で京町家の宿「京のおおぞら（https://machiya-oozora.com/）」や、京都のクラフトビールや日本酒の販売を行う「京のSAKESORA（https://kyoto-sakesora.beer/）」の運営などをされている企業です。
OOZORA様とは別案件でやりとりがあり、コロナ禍での事業再構築補助金をきっかけにご依頼いただくことになりました。ECサイトを中心とした新規事業の案件でしたが、事前に先方の方でやりたいこと・コンセプトなどを具体的に決めてくださっており、スムーズにプランニング・ご依頼を頂くことができました。
仕上がったデザインはこちら！
サイトの雰囲気も柔らかく、リラックスしながら閲覧できそうですね。「私のブレイクタイムは全国を旅する」というキャッチコピーの通り、家にいながらも旅を感じさせるデザインになっております！では、この素敵なサイトが出来上がるまでのストーリーを見ていきましょう。
案件について
カテゴリー：ECサイト・メディアサイト
サイト制作の目的：サブスクリプションの3コースを知ってもらい、利用してもらう。
ターゲット：20 半ばから 40 代のおいしいものにはちょっとこだわる一人暮らしをしている女性
制作期間：6か月
制作チームメンバー
クライアント：株式会社OOZORA
プランナー：古川 喜子
営業：植松 由惟
ディレクター：谷口 正樹
デザイナー：国吉 縁造、西川 武志、船岡 海斗、篠田 瑞生
コーダー：奥川 拓海
システムエンジニア：田中 知也、西本 智裕
写真撮影：前田 奈海
ミーティング-コンセプト決め、企画の方向決め-
今回は“食のサブスク”ということもあり、コンセプトや企画の方向を決めるミーティングでは、各自おすすめのお菓子やジュースを持ち寄りリラックスした雰囲気でアイデアを出しました。
活発なブレストにより、幅広く、様々な角度から意見を出すことがスムーズな進行につながることも多いです！
サービスコンセプト
旅行といえば、実際に足を運んで美味しいものを食べたり、地元の人と触れ合いでいろいろな
体験をしたりしませんか？
旅きらは、その経験を自宅にいながら、全国の「美味しいもの」と「情報」が届き、自分の好きな時にちょっと贅沢な「まるで旅行に行ってきたかのようなプチ旅行気分」を味わえるサービスです。
旅きらを通してヒトとモノにスポットライトを当て、サブスクで商品の認知も上がり、作り手さんとのお客様のWinWinな関係を築きます。
デザインコンセプト
おうちで旅行気分を味わいながら、実際の商品で一息付けるようなイメージを持たせる為、丸みや柔らかい色調で全体的に優しい印象に仕上げました。
女性的なイメージですが、あまりナチュラルになりすぎないようアクセントに彩度の高めの色を使用しています。
MV（メインビジュアル）ではお家の窓からユーザーのイメージを映します。
WF作成
どのコンテンツをどのような優先順位で組み立てていくか、どこで写真を使うか、どんな文言を入れるか、イラストのテイスト確認など、詳細を詰めていきます。
※WF（ワイヤーフレーム）：実際の制作に入る前に、サイトの仕様や構成を決めるものになります。設計図のようなものです。
デザイン/イラスト
ターゲットにマッチするデザインになること。どんな良いデザインでも消費者が本当に欲しいと思った商品、
デザインでないと手に取っていただけないと思います。
生活に馴染み、生活を想像できる、自分だったらどんなデザインが部屋にあったら嬉しいかどんなサイトなら
わくわくしながら自分時間を楽しめるかを考えながらデザインに落とし込みました。
-意識したポイント
クライアントとブランドやターゲットのイメージをすり合わせながら制作を進めたこと。
当たり前のことですが今回は携わっている制作メンバーも多かったので、全員で共通認識を持つことを一番に心掛けました。
-担当領域
情報設計、クリエイティブ全般のディレクションおよび制作
（デザイナー）
今回、商品をお届けする際の段ボールのデザインを４案納品してほしいとのオーダーを受けました。定期的に商品が届くサブスクサービスであることから、定期的にデザインを変えることで、届くときの期待感をより高めたい、というお客様のご依頼でした。
そのため、社内のデザイナー全員でそれぞれデザインを制作し、さまざまなアイデアでたくさんの案をご提案させていただきました。数回に分けてご提案させていただきましたが、お送りするたびに少しずつお客様側でも喜んでいただけている様子が伝わってきて、作り手として、とても嬉しかったです。
おかげさまでメンバー全員でのびのびと、自由にデザインをさせていただきました。各案丁寧にフィードバックいただいた先方には、本当に感謝しています
-意識したポイント
PC やスマホ上で見る web サイトと、実際に手元に届くパッケージとでは、目にする機会やカタチも全く異なります。ただ、どちらにおいても旅きらの世界観のもとで展開しているものです。そのため、別のもので見てもきちんと旅きらのものであることがユーザーに伝わるように心がけました。
本件は複数のデザイナーが同時に制作を進めており、関与者が多い分、世界観の統一が難しい環境ではありましたが、ロゴのフラットな印象をもとにイラストを展開したり、サイトでベースに使われているブラウンの色味を段ボールの印刷でも活かしたり、ロゴやサイトのディテールを丁寧に汲み取りながら作業を進めていきました。そのおかげで、旅きらの世界観を拡張していくためのツールとして、包装資材などをうまく活用することができたと感じています。
-担当領域
ロゴデザインおよび配送用包装資材のアートディレクションと制作
（デザイナー）
先方からの要望はターゲットは 20 半ばから 40 代の女性（OL）でした。
旅先でのご飯やお土産、お酒をあくまで自宅で楽しむ。アウトドアの雰囲気により過ぎないように。
かといって、家感を前面に推すのはロゴのみを見たときの印象に「旅」の雰囲気がまったく入ってこない、、、
難しい内容でした。
また、ターゲットを女性に全振りしているスタイルで男性要素はできるだけ省くようにとのことでした。
ロゴ制作は複数人で行いましたが皆で「やさしい気持ち」をこころがけ制作に挑みました。
-意識したポイント
上記の依頼があった時にはすでにサイトが TOPページ まで完成していた為、新しいもの（ロゴ）を考えるというよりかは、サイトの雰囲気とうまくマッチしているかつ先方からの要望があった女の子らしいかわいいロゴを意識しました。
-担当領域
パッケージデザインとロゴデザインです。
（デザイナー：国吉 縁造）
（国吉さんラフスケッチ）
自宅にいながら旅気分を味わえることがコンセプトでしたので、サイト内では落着きを感じさせる色や
コンテンツの丸みを意識したサイトデザインを作成されていたかと思います。私が携わった部分は小さい部分
でしたが、そのサイトの意図からぶれないように気を付けました。
-意識したポイント
デザイナーがクライアントの要望に沿った素晴らしいデザインを制作くださったので、そこから逸脱しない
イラストを心掛けました。また、配置するページ作成者と相談しつつ進行し、不足分などないように作成
いたしました。また、イラストの体裁を合わせる為に色合いやブラシ選びにもこだわりました。
-担当領域
イラスト制作、コーデイングを少し
（イラストレーター：西川 武志）
企画当初よりも制作段階でロゴ、パッケージ、撮影などを一貫して行うことで高付加価値のサイトが作り上げられたのでは？と思っています！
-担当領域
先方要望を受けたカート提案・サイトマップの整理などを行い、提案書の作成
（プランナー：古川 喜子）
完全新規の事業をゼロから携わらせていただいた案件になるのでとても思い入れがあります。
お客様の想いを直接お伺いし、この世になかったものが形になっている過程も間近で見れてこの仕事をしていて楽しいと思えることがたくさん詰まっていました。
半年後、3年後、、、どうなっていくのかもとてもワクワクします。
-担当領域
営業
お問合せをいただき、ヒアリングからご依頼に至るまで各部署を巻き込みご提案を行いました。
（営業：植松 由惟）
ロゴ
パッケージ
ボツ案
コーディング
旅行がしたくなるようなポップな雰囲気と、お家でまったりくつろげる雰囲気の両方が感じられるサイトにすべく、かわいいイラストにアニメーションを付けました。
「旅きら」の世界観が表現できていると思います！
こだわりを紹介するページでは、点線が各セクションを通過するようなイラストレーションの微調整にこだわりました。画像やテキストにかぶらないようにしつつ、自然な導線になるように調整を行っています。
技術的には大変でしたが、自分なりに考えたコードでうまくいったことが嬉しいポイントです。
-意識したポイント
記事の部分では読みやすいように余白や行間を調整し、素敵な「読み物」を通して多くの方に旅きらを楽しんでいただけるように気を配りました。
-担当領域
コーディング
（奥川 拓海）
システムエンジニア
先方の要望に120％に応えることことができたと思います。
完成したサイトには、とても思い入れがありますし、我が子のように思っています。
デザインがキャッチーでかわいいのはもちろんのこと、写真撮影のモデルさんもとてもかわいい方で、
今回制作したサイトのイメージにもとてもマッチしていました。
-意識したポイント
旅きらでは、CMSとしてWordPressを導入しています。
管理画面では、ブロックエディタ（Gutenberg）を採用しており、HTMLやCSSの知識がなくても、
文章や画像の位置調整・レイアウトの変更を簡単に行うことができます。
元々Gutenbergをお客様が使用していたため、後の使いやすさを考え同じものを採用しました。また、先方とのミーティングにも積極的に参加し、要望に耳を傾けることでお客様にとっての使用しやすさを追及しました。
-担当領域
PHPを用いたWordPressでの業務やCMSの実装
（システムエンジニア：田中 知也)
今回の旅きらのプロジェクトは、自分が初めてプロジェクトの最初から関わらせていただいた案件だったので、とても強い思い入れがあります。
また、旅きらの「全国こだわりグルメの定期便」は、毎月届くまで何が送られてくるかわからないという非常に面白いアイデアで、このような魅力的なサービスの立ち上げに関わることができてとても嬉しく思っております。
このような機会を与えてくださり株式会社OOZORAの皆様や社内の関係者の方々には心から感謝しております。
-意識したポイント
お菓子のサブスクリプションを購入する機能をサイトに実装するにあたり、今回のプロジェクトでは「楽楽リピート」という定期購入向けのECカートシステムを採用いたしました。私はその楽楽リピートの導入を担当させていただきました。
弊社で楽楽リピートを取り扱うのは初めてだったので、ノウハウがなかったのですが、西本に任せれば楽楽リピートまわりのことは大丈夫だろうと思ってもらえるよう、楽楽リピートについてまずは知ることから始めました。
そして社内の他のメンバーが楽楽リピートをスムーズに取り扱えるように、マニュアルを作成しながら実装していきました。
最終的にホームページに掲載する文言を決めるのはお客様なのですが、制作過程では弊社で考えたダミーテキストを使用します。もっともらしいダミーテキストを考えるのは意外と大変なのですが、今回私は流行りのChatGPTにダミーテキストを生成させて楽をしておりました笑
ChatGPTはテキストだけでなく、HTMLの出力も可能で、そのすごさを実感しました。
-担当領域
楽楽リピートの導入
（システムエンジニア：西本 智裕)
ディレクション
今回はクライアントのオーダーが非常に明確であったため、新規事業にもかかわらず具体的なサービスのイメージを共有したうえで案件に入ることができました。
ただ、サービスのイメージが明確であるがゆえに、それを体現することになるサービスロゴとロゴタイプの決定までには当初考えていた以上の長く、濃密な時間が必要でした。
それは、生みの苦しみと言っていいかもしれません。
そもそもブリッジではこれまでコーポレートサイトのリニューアルの案件が比較的多く、会社やサービスのブランディングの時点から案件に関与するということがそれほど多くはありませんでした。
自分にとっても会社にとっても大きなチャレンジであることはまちがいありませんでした。
まずは弊社TOPデザイナーに、アートディレクションという形で案件全体のデザイン面での品質管理をしてもらい、情報設計の段階からがっつりメインで手を動かしていただきました。
デザイナー視点で非常に高いクオリティのワイヤーフレームを作成できたことが、デザイン初校のクオリティを大きく引き上げる要因になったと考えています。
この初校デザインの完成度のおかげで、その後のブリッジのアウトプットに対する揺るぎない信頼を勝ち取れたことは非常にラッキーなことだったと思います。
うまくいく案件ではしばしば起こることなのですが、案件スタートの序盤に、我々のチームにもうひとつのラッキーがもたらされました。
いくつものリブランディングや、紙媒体のアートディレクションの実績のある優秀なデザイナーの加入です。
これをきっかけに、このあと前出のサービスロゴデザイン、商品パッケージデザイン、サンクスレターデザインなど、ブリッジがこれまで未経験だった領域にまで受注を広げることができました。
このあたりの実績は今後さらに多くの案件につながっていってくれると期待しています。
一番強く印象に残っているのは、スタジオとモデルを手配した写真撮影の際に、すべての撮影が終わった後、クライアントのみなさんとスタッフ全員で撮影に使用した全国の美味、そして美酒を心行くまで堪能したことでしょう。
我々はそのときクライアントと制作会社というそれぞれの役割や立場を飛び越えて、ひとつのサービスをいっしょに世に送り出す、非常に親密で心の通い合ったチームになったのです。
実はもうひとつ、この案件ではこれまでにないチャレンジをしています。
4案提案する予定だったパッケージデザインを、社内のデザイナー全員で1案ずつ作成しました。
クリエイティブの原点に立ち返るようなこの試みはとても刺激的で、それぞれタイプの異なる優れたデザインを生み出せたと満足しています。
いつも言っていることですが、本案件こそサイト制作がサービス開始のスタートラインになります。
「旅きら」がたくさんのユーザーに愛され、サブスクサービスとして今後大きく発展していってくれるように、まだまだたくさんのことを考えていきたいと思っています。
（ディレクター：谷口 正樹）
写真撮影
今回は、モデルさんとのロケ・スタジオ撮影、料理、商品撮りと、様々な要素を一日に凝縮した撮影でした。
ディレクションは全幅の信頼をおいている谷口Dでしたので、最初にお話をいただいたときから、不安は一切なくむしろ、また楽しい撮影になるだろうという高揚感を感じていました。
普段から人物撮影を中心に、それに派生した撮影を行っている私ですが、この日は、モデルのさくらさんの可愛さと美しさ、OOZORAさんのご用意くださった上質な食べ物と的確な撮影リクエスト、そして素晴らしい撮影環境に恵まれ、「撮れた！」と言う手応えを、いつも以上に強く感じられました。
厳選されたお料理は、その場で調理していただき、出来たてを撮影しています。コンセプトである「おうち時間で旅行気分」を、明るい自然光の中で表現しました。さくらさんの美味しそうな表情を、ぜひご覧ください！
撮影に関わった全ての皆さんのポジティブなエネルギーと、チームワークに大感謝です！
ありがとうございました。
（フォトグラファー：前田 奈海）
お客様からの声（株式会社OOZORA様）
旅きらに興味を持っていただき、購入していただいたお客様の「
最後に
Web制作ドキュメンタリー『サイト制作秘話』シリーズの第7弾、いかがでしたでしょうか？
実際にインタビューを通して話を聞くと、想像していたよりも多くの方が様々な形で制作に関わっていることを知ることができました。
私たちが目にするWebサイトの完成には、営業さんやプランナーさん、コーダーさんやシステムエンジニアさんなど、普段目にすることは少ないけれど、必要不可欠なお仕事をして下さっている方がたくさん関わっていることを感じて頂けたかと思います。
今回、私もミーティングへの参加やロゴ、パッケージの提案に参加させていただきました。
大学での制作との違いに戸惑うこともありましたが、先輩方の助けもあり、提案できる段階まで持っていくことが出来ました。また、次の工程であったり、サイトの公開後のことも考えながら制作を行うことの大切さも実感しており、今後へ繋がる経験になったと強く感じています。
制作して終わりではなく、その後への意識を忘れないデザイナーになれるよう努力したいと思います！
今回はインターン生の視点から、サイト制作の裏側をお届けしました！
サイト制作に関して、少しでもイメージを明確にする手助けになれば幸いです。
最後までご覧いただきありがとうございました！
