BRIDGEブログ新シリーズ
Web制作ドキュメンタリー『サイト制作秘話』シリーズの記念すべき第一弾として、「北洞株式会社コーポレートサイト」リニューアルプロジェクトの裏側をお届けします！
・そもそも、サイト制作ってどんなことをしているの？
・依頼する側は、何をすればいいの？
・どれぐらいの期間で完成するの？
・サイトは作るけど、コンセプトとかどうしたらいいの？
サイト制作は、わからないことだらけですよね。
まさに今、サイト制作で悩まれている方。そして、これから依頼をされる方、ご安心ください。
この『サイト制作秘話』で、「ブリッジコーポレーションがどのように制作をしているか」をリアルにお伝えしていきます。
目次
1.本プロジェクトについて
2.ワークショップの開催-コンセプト決め、企画の方向性決め-
3.WF（ワイヤーフレーム）作成
4.デザイン
5.コーディング
6.プログラミング
7.写真撮影
8.お客様からの声（北洞株式会社 阿部様）
本プロジェクトについて
お客様のご紹介
今回サイト制作をご依頼いただいたのは、北洞株式会社。
京都で1939年に創業された、原糸販売や撚糸、各種繊維の染色加工を行っている歴史ある企業です。
仕上がったデザインはこちらです！
https://www.kitahora.com/
線画イラストで再現された京都の街が印象的な、かわいらしさもありつつ京都の優雅さや伝統、そして北洞株式会社で働くみなさんの優しい雰囲気を感じられるデザインになっております！
では、この素敵なサイトが出来上がったストーリーを見ていきましょう。
案件について
サイトカテゴリ：コーポレートサイト
サイト制作の目的：問い合わせの獲得
ターゲット：事業規模の大きな企業から、個人（例えばカーペットを作る人）まで→「目的に沿う糸」を提案してほしいと思っている人
制作期間：5か月
制作チームメンバー
クライアント：北洞株式会社
プロジェクトマネージャー：谷口 正樹
デザイナー、アートディレクター：酒井 宏輔
イラストレーター、ディレクター（一部）：西川 武志、渡邉 由紀菜、酒井 宏輔
フロントエンドエンジニア：宮﨑 彩耶加、奥川 拓海、西川 武志
バックエンドエンジニア：吉川 直輝、田中 知也
写真撮影：前田 奈海（フリーランス フォトグラファー）
ワークショップの開催-コンセプト決め、企画の方向性決め-
「コンセプト決め」
クライアントと制作メンバーが集まり、ホワイトボードを使いながら「サイトのコンセプト決め」から入りました。
実際のワークショップ風景
北洞がどういった会社なのかを改めて紐解きつつ、クライアントも制作メンバーもお互い意見を出していき、サイトの方向性が決まりました。
コンセプト
「糸と京都」
どのようなデザインにするか
・イラストを使って遊び心のある見た目にしたい。
・「北洞ってこんなこともしてるのか！」ということがターゲットに伝わるもの。
伝えたい印象
・歴史感、京都感といった伝統的な印象。※京都感は全面的でなくてよい。
・上記に加え、新幹線のシートなどにも北洞の糸が使われていることを伝えられるような、ちょっとした先進性。
フォント
・やわらかさを感じるようなフォントがご希望。
=>丸ゴシックがイメージに近そう。
=>見出しなどは日本語メインで押し出したい。ちょっとした英語なら使ってよし。
マスト要素
MV（メインビジュアル）：イラストを使った京都の地図
=>ある程度位置関係は、ずれてもよし。
=>キャッチコピーや文言は極力入れない。
WF作成
前回のワークショップで決めた内容を振り返り、WFに落とし込んでいきます。
※WF（ワイヤーフレーム）：実際の制作に入る前に、サイトの仕様や構成を決めるものになります。設計図のようなものです。
どのコンテンツをどのような優先順位で組み立てていくか、どこで写真を使うか、どんな文言を入れるか、イラストのテイスト確認など、詳細を詰めていきます。
実際のワイヤーフレーム
イラスト制作のためのラフ
クライアントともWFの内容や仕様について話し合いを重ねていき、お互いの認識合わせを慎重に行います。
ここまで来たら、次はいよいよ制作に入っていきます！
デザイン / イラスト
イラスト
「糸」が主役なので、イラストにも糸のエッセンスを入れたいというアイデアに基づき、線画・一筆書きというアプローチで制作を進めました。
線画イラストの線は、糸っぽくなるよう、ブラシから制作しております。こういう細かい演出が小粋なサイトを生み出します。
MVでのモチーフに関してはクライアントの要望があり、京都の景観を描くことで決まりました。
スケール感や遠近感に、違和感を感じさせないものに落とし込めるよう注意しました。
そのために、作業前に実際の街へ取材に行き、素材集めをしたのちに、写真素材を組み合わせて構成を練りました。
アニメーションに関しては、実際にコーディング実装をしながらスピード感を調整させていただきました。
また、アイテムごとのイラストでは、デザイナーと都度相談し、デザインとの乖離がないイラストになるよう心掛けました。
（イラストレーター：西川 武志）
デザイン
「遊び心」「京都感」「線画イラスト」「やわからさ」「糸」というキーワードを、いい塩梅でビジュアル化できるようなデザインを目指しました。
イラストが糸をモチーフにした線画テイストなので、無機質にならないよう、背景にベージュ色を採用し、あたたかみややわらかさに加え、京都の優雅さを演出しました。
また、糸のゆるやかさを表現すべく、写真を波形の図形でくりぬいています。
フォントも見出し部分などでは丸みを帯びたやわらかいもの、本文などでは普通のゴシック体を採用することで、バランスを取り、やわらかくなりすぎないようにしました。
ワークショップの開催や密な連携による効果もあり、大きなチェックバックなしでFixいたしました。みなさまに感謝です。
（デザイナー、アートディレクター：酒井 宏輔）
コーディング
北洞様の「糸の会社」らしさが伝わるように、スクロールに合わせて糸が伸び縮みするアニメーションを実装しました。
サイトの世界観を深める魅力的な演出になったかと思います。
（フロントエンドエンジニア：宮﨑 彩耶加、奥川 拓海）
プログラミング
「商品紹介」「つむぐ」「必殺糸事人」ページにCMSとして、WordPressを導入しています。
管理画面では、ブロックエディタ（Gutenberg）を採用しており、HTMLやCSSの知識がなくても、
文章や画像の位置調整・レイアウトの変更を簡単に行うことができます。
（バックエンドエンジニア：吉川 直輝）
プロジェクトマネジメント
今回、依頼時点ではビジュアル面でのイメージはほとんど固まっておらず、ある程度自由にこちらから提案できる状態でした。
そこでまずは糸をモチーフに手描きのイラストメインでサイトを構成するというビジョンをクライアントと共有する必要がありました。
そのため社内でもデザイン、イラストに強いメンバーを召集し、信頼できるクリエイティブなチーム編成で臨みました。
手描きのラフスケッチや、実際に動くプロトタイプなどをうまくつかい、デザインの方向性について早い段階でチームがまとまり、クライアントから100％に近い信任をいただけたことがよい結果を残せた要因だと思います。
また、計4回行った制作ワークショップに多忙な中、毎回必ず参加していただいたクライアント担当者の阿部さんが、しっかりと制作にコミットしていただいたおかげで、本来のリニューアルの目的からズレることなく、プロジェクトの目的を達成することができました。
チームメンバーがそれぞれの職能や役割を超えて互いにアイデアを出し合い、それを実作業にフィードバックしていくことでとてもユニークなサイトに仕上がったと思います。
本来のサイトとしての機能はもとより、ブリッジの制作実績としても活躍してくれるととてもうれしいです。
（プロジェクトマネージャー：谷口 正樹）
写真撮影
サイトのクオリティをさらに上げるべく、フリーランスフォトグラファーの前田 奈海さんに写真撮影をしていただきました。
写真は制作物のクオリティを大きく左右する大切なものです。
こちらが今回撮影したものの一部です。いかがでしょうか？
糸の繊細な表情、職人の真剣な表情、北洞株式会社で働く人のやわらかな表情を存分に引き出せるように、丸一日かけて撮影を行いました。
撮影をしていると、ごくたまに「本物に出会う」瞬間があります。
それは人や出来事との出会いから、自分の心が求めるものを他者が引き出し、具現として見せてくれる瞬間。
北洞様の撮影が、まさにそれでした。
京都にある工場を回った時のこと。大通りから小さな道へと進み、家々の中に突如として工場が現れます。中には、一見ではわからない外観の工場もありました。
「こんなところに！？」と少々面食らいながらも中へ入ると、敷地の中に大きな機械が敷き詰められ、年季の入ったたくさんの職人の方々が、熱気と共に糸を生み出していました。
その聖域に入り込んだ私は、もともと感情が顔に出やすいタイプの人間なので、誰が見ても「好きなものに出会ってただ夢中になってるヤツ」だったと思います。バランスを崩して機械に倒れこまないよう細心の注意を払いながら、夢中になって撮影しました。
どう撮りたいとか、細かいことをあれこれ考えるよりも、目の前に広がる光景を無我夢中で撮る！
すると一見寡黙で厳しい表情の中に情緒が見えてくるのです。街と一体となって伝統を生み出し続ける職人の方々と出会えた喜びを、どれほど写真に残せたのかわかりませんが、本物との出会いであったことは間違いありません。
その手、その眼差し、その背中から表出する歴史と継承、魂。その現場に立ち会い撮影した胸の高鳴りを、忘れることはないでしょう。
昨年の中でも特に幸福度の高い１日となりました。
そう感じられたのも、北洞の皆様との出会いと、谷口さん、酒井さんとの信頼関係あってこその成果だと思います。
本当にありがとうございました。
（フォトグラファー：前田奈海）
お客様からの声（北洞株式会社 阿部様）
～出会い～
「ネットを介した新しいビジネスをしよう！」弊社でこちらの企画が立ち上がり、早速検索をしたところ、一番に候補に挙がってきたのが、ブリッジコーポレーションさんでした。
最初は、社内でも空想論しかなく「こういうことがやりたい！」ということが明確に決まっていない状況にも関わらず、営業の山本さん、プランニングの古川さんが親身に相談に乗ってくださり、ビジネスプランの構築やコーポレートサイトを見てくださるお客様に、どのように訴えかけるかなど、事細かに協議し、現在のサイトが出来上がりました。
～サイト構築～
ビジネスプランが出来上がり、いざサイトを作っていこうとした際にも、弊社としてどの見せ方がいいのかわからない状況で様々な提案をして頂いたのが、ディレクターの谷口さんでした。
他社さんの具体例を見せて頂きながら、弊社が糸商であることを踏まえ、サイト全体を「柔らかいイメージで、なおかつ糸が目立つように」など、無理難題を聞いて頂き出来上がったのが、現在のサイトです。
「柔らかいイメージ」はオールイラストで、「糸商」というところはサイト全体が1本の糸からの繋がりを大切にするイメージで作って頂きました。
様々なギミックを取り入れることにより、お客様が見やすくかつ飽きの来ないTopデザインは他社HPでは見ることのできない、面白いサイトになっていると思います。
この点においては、デザイナーの酒井さん、西川さんにはだいぶ無理を聞いて頂きました。
おそらく大変面倒だったと思います。酒井さんの「製作が楽しいので寝る時間が全然ありません。」と仰っていたのが懐かしく思います。
～完成→コンサルティング～
完成してまだ日は浅いですが、本アップ後も綿密にやり取りをし、細かいブラッシュアップをして頂いております。
また、サイトへの閲覧者の流入の点においても、今後の話ではありますがプロ目線で様々な改善点を提示して頂けるそうなので期待大です。
「サイト完成が目的ではありません！これはスタートです。上手に運用してこそ真価が問われます。」と強く仰っておられた谷口さん。
そのお言葉を信じ、これからもお付き合いしていきたいと思います。
最後に
Web制作ドキュメンタリー『サイト制作秘話』シリーズの第一弾、いかがでしたでしょうか？？
弊社では、このようにWeb制作のスペシャリストが集結し、お客様と一緒に楽しみながら制作することを心掛けています。
今後も、反響次第ではこのブログシリーズを継続していきたいと考えております！
制作の裏側を知ると、サイトの見え方もまた違ってくると思います。
壮大なブログとなりましたが、最後までご覧いただきありがとうございました！
ではまた！
