塗り重ね、未来へつなぐ　ヒラタプランニングサイト制作秘話

2022-03-24

いまだにあたたか〜いペットボトルの500mlは本当に500ml入っているのか真相はいかに…と疑い続けてはや3ヶ月mokaです。

だんだんあたたかくなってきて、ようやく長い冬が終わり春を迎えようとしています。

春は部屋の模様替え、衣替え、シーツの新調、部屋の壁を塗り替えるなど（？）何かと一新したくなりますよね。

弊社で静岡県内の構造物の塗装や外壁の改修をはじめとした幅広い事業を展開されているヒラタプランニングさまのコーポレートサイトをリニューアルいたしました。
制作実績はこちらから。

本記事では、ヒラタプランニングさんの制作秘話として、デザインや実装のポイントなどご紹介していきたいと思います。

爽やかでスタイリッシュなWebサイトはこれからの季節にぴったり！きっと部屋の壁を塗り替えたくなるはずです。

あんどぷらすでは、制作したサイトを制作秘話として記事にしています。よろしければ他の制作秘話もご覧ください。

あんどぷらすの制作秘話

ヒラタプランニングのこと

静岡市清水区に本社を構えるヒラタプランニングさんは、塗装や外壁の修理などをはじめ、幅広い事業を展開しています。

株式会社ヒラタプランニング

クライアントを知る

なかなか関わりがない世界なので、どういったお仕事をしているのかを知るためにも実際に社屋へ伺いました。
伺ったのは代表のmmochiさん、制作チームのakiさん、chinaさん、おまけのmokaです。

はじめて伺った時は夏でしたねえ。爽やかです。

爽やかな御三方。

ヒラタプランニングさんの社屋

ご依頼のきっかけ

ヒラタプランニングさんのご依頼のきっかけはコーポレートサイト（自社サイト）が今の世の中に合っていない様に感じたことがきっかけでした。

イメージを一新させるとともに、会社の認知度も向上したら…と思い制作会社を探し始めたようです。

“そんな中であんどぷらすさんを見つけて、制作に対する想いや洗練されたデザインから「ぜひあんどぷらすさんにお願いしたい」と思いお問い合わせしました。”

打ち合わせ中、このようなお言葉をご担当者の方にいただきました。

きちんと私たちがどんなものを作っているのか、どんな想いで制作しているのかを知った上で「あんどぷらすが良い」と言ってくださるのはすごくすごく嬉しいです。ありがとうございます。

ヒラタプランニング代表の平田さん

制作メンバー

ディレクターのakiさん、デザイナーのchinaさん、フロントエンドエンジニアのyoseiくんが主要メンバーです。
サブ担当としてフロントエンドエンジニアのhonaちゃん。

塗り重ね、未来へつなぐ。

ヒラタプランニングさんへ伺い、お話を聞いた上で強みをピックアップしたところ

・人を大切にする

・誠実なところ

・公共工事の実績も豊富で技術力が高い（県内では公共工事を受託できる会社は10社ほどしかない、技術力や実績がないと受託できない）

など技術や実績はもちろんですが、人を想う気持ちや誠実さが何よりもヒラタプランニングさんの魅力だと感じました。

サイトコンセプトは「塗り重ね、未来へつなぐ」

破壊ではなく、再生へ

ここからは制作を担当した皆さんのお話しをもとにサイトのポイントをご紹介していきます。

ー早速ですが、サイトコンセプトにある「塗り重ね、未来へつなぐ」という言葉の中にはどんな想いが込められているのでしょうか。

デザイナー：china）塗装は建築のように１から建てたり、壊してつくるわけではなく、今あるものを下地に活かし、末長く未来へつないでいけるものだと思いました。

重ねる　塗装＝塗り重ねるもの　　
未来＝これまでの積み重ね　　
経験を重ねる＝会社としての成長
つなぐ＝破壊ではなく塗装で生まれ変わらせる

自分の家やライフスタイルを大切にする想いも、鋼構造物施設の暮らしを支える重要な役割も、建築者の想いも、風化から守り未来へつなぐという想いをコンセプトに込めました。

リニューアル後（TOPページ）

ーサイトTOPにある「Paint the future.」はこの「塗り重ね、未来へつなぐ」を英訳しているのですか？

デザイナー：china）Paint the future.＝未来を描くという英訳の意味ももちろんありますが、
社名英語表記の「HIRATA PAINT」の「PAINT」とも掛けていて、未来のヒラタプランニングを表すような言葉にもなっています。

ーリニューアルしたことで、以前のサイトからシンプルで洗練された印象を受けましたが、デザインのポイントを教えてください。

ディレクター：aki）以前のサイトは、塗装業のイメージが強く専門的な情報が多い印象でした。
ヒラタプランニングさんは創業時は塗装業から始めたものの、現在はさまざまな事業を展開されています。
そのため塗装業に固執せず、スタイリッシュな雰囲気にしたいとのご要望でした。

リニューアル前のサイト（TOPページ）

デザイナー：china）これまでのサイトは情報量の多さを見ると余白が少ないサイトでした。リニューアル後はパッと見た時の印象の変化を感じていただけるように、派手な装飾は入れずにシンプルに仕上げていますが、背景の固定斜め線で奥行きをもたせることで、サイトのなかにも空間を感じていただけるようにしています。

背景にうっすらと施された斜め線

斜め線に込められた意味

ー背景の斜め線はヒラタプランニングさんの基盤である塗装業の「塗る」工程を表しているように見えたのですが、他にも何か意味が込められているのでしょうか？

デザイナー：china）実は背景の固定斜め線の他に、スクロールしていくと新たな斜め線が現れます。
フッターまで読み進めていただくことで、ヒラタプランニングさんを知ると同時にコンセプトでもある「塗り重ねる」を表現しています。
これは社屋のロゴにあしらわれていた点からヒントを得てデザインしました。（下記画像参照）

訪問した際、社屋のロゴにあしらわれている点が目に留まった

斜め線ができるまで

ーこのサイトはデザインに合わせたゆるやかな動きも印象的ですが、どのように動きをつけていったのでしょうか？

フロントエンドエンジニア：yosei）デザイナーのchinaさんがデザインカンプに動きの指示を細かく書いてくださっていました。文字がマスクされるアニメーションやスクロールすると現れる斜め線など、細やかな動きを再現しています。
背景がフッターで重なる仕組みなど「塗り重ねる」というコンセプトのもと、スタイリッシュな中にも塗装業としてのアイデンティティーがさりげなく散りばめられたのではないかなと思います。

ー施工実績ページは、単にレイアウトを整えただけではなく、「公共」「企業」「一般」とタブ切り替えでカテゴリが絞り込めるような仕様になっているのですね。

ディレクター：aki）公共工事ができる会社は県内でも数えるほどしかいないなか、ヒラタプランニングさんは公共工事をはじめとした実績の豊富さ・技術力の高さが魅力のひとつでした。
その反面、これまでのサイトは公共・企業・一般全ての実績がひとまとめに表示されていたので伝わりづらいのがもったいないと感じていました。
リニューアルで実績ページの魅せ方を工夫したことで、より技術力の高さをアピールできるサイトになったのではないかなと思っています。