株式会社佐藤渡辺 100周年記念サイト

全国から舗装工事業を請け負う株式会社佐藤渡辺様の、記念となる創業100周年特設Webサイトを制作。
株式会社スウィングマン様と連携し、アートディレクション／ロゴマーク＆Webデザイン／コーディング(実装)／社史パネル制作を担当させていただきました。

Webサイトはこちら
株式会社佐藤渡辺 100周年記念サイト
https://www.watanabesato.co.jp/100th/

ロゴマークデザイン

まず、100周年のロゴをデザイン。
分かりやすく「道路」をモチーフにしつつ、「インフィニティ（無限）マーク」を取り入れ、これまでの歴史から想起される「持続性」と、さらなる未来へ向けた「永続性」を表現しました。

Webデザイン＆コーディング

レスポンシブデザイン対応でパソコン・タブレット・スマホに最適化。
Figmaでデザインを作ってプロトタイプを確認をしていただきつつ、コーディング(HTML/CSS/jQuery)へ。

ページを開いたときのオープニング時には、特設サイトらしく、SVGアニメーションでロゴマークが描かれながら登場する演出を実装しました。

また、細かいところでは以下を実装して、ユーザビリティを向上させています。

• スクロールしていくと、上下左右からフワッと登場するヒストリー
• 天地が長いため固定ナビゲーションを設置し、ページ内スクロールで任意の場所に推移。スマホでの閲覧時はブロックごとにアコーディオンでたたみ、タップで展開する仕様に
• 印象付けたいラストメッセージは、ブラーがかった文字がクリアになって登場

Webサイトはこちら
株式会社佐藤渡辺 100周年記念サイト
https://www.watanabesato.co.jp/100th/

社史パネル制作

さらに、イベント会場で展示される8枚の社史パネル（1枚あたり841 x 1189mm）へと展開します。

Webのトンマナを維持したまま、Adobe Illustratorで再構築。
パネルを横断するような背景や、テキストレイアウトに少し変化を付け、文字サイズを確認するため原寸で出力しながら、CMYKの印刷用データとして再調整し入稿・印刷されました。

イベントも大盛況のうちに終了し、社長のインタビューとともにロゴマークが業界誌に掲載され、企業の株価は最高値を更新しました。

Art Direction, Logo & Web & Panel Design, Cording