事例紹介 PANOF様

2022年5月、空間デザインやレンタルスタジオ事業を手がけるPANOF様のwebサイトリニューアルを担当させていただきました。
ワイヤーフレームからデザイン、コーディング、CMS（wordpress）の構築までmono.で行っております。

公開したサイト

▼以下URLより実際にご覧いただけます。
https://panof.jp/

Mission

ヒアリングの中から以下のような課題や想いを伺いました。

• 空間デザイン事業に関する情報も追加したい（リニューアル前のサイトではレンタルスタジオ事業のみ紹介されていました。）
• 元々wixでサイトを作っていたが、細部のデザイン調整がしづらい
• 3次元（空間）を主軸にした会社で質感を大事にしているので、そういったエッセンスを盛り込みたい
• 少しずつ会社の規模が拡大してきているので、しっかりとした会社として見せられるサイトにしてスタッフの方が自社に誇りを持てるサイトにしたい。
• デザインの会社なので、あまり言葉で説明しすぎず、実績でお客様から評価をしてもらえる見せ方にしたい。

また、会話や参考デザインを見てのディスカッションなどを通じて、シンプル・ミニマムの中に少し粋な工夫を感じられるサイトがPANOF様の世界観に合うものだと感じました。

Solution

お伺いしたお話から、全体の説明は最小限に、直感的に見ていただける工夫を随所に盛り込んだシンプルながら味のあるwebサイトを目指して設計・制作を進めていくことにしました。

特に工夫した点は、各事業TOPページのメイン実績の見せ方です。

話を進めていく中でこのページはシンプルでありながらもwebならではの面白さも仕掛けたいというところがPANOF様と私の共通認識となっており、いくつかのアイデアをご提案した中でこの案を採用いただきました。
眺めていると、初めは1実績につき1枚だった画像が分割して表示され、
他の画像も表示されるようになることでクリックしなくても中身が垣間見えるような仕組みとなっています。

見かけはとてもシンプルな中で、クリック前から中身を伝えられるという設計的な意図と、一枚だった画像が分割されるというちょっとした意外性を持たせることができたアイデアになったと思います。

また、全体のTOPページも一見シンプルに画像を並べているだけのように見えますがいくつかの工夫を加えております。

一つが一枚目の画像。
なるべく偶然性があった方が面白い表現になるのでは、というPANOF様からのお話を受け左右の組み合わせや順番はランダムにしているのですが、実は1つ目に表示される組み合わせだけはいくつかのあらかじめ指定したパターンの中から表示されるようにしているのです。

偶然の面白さを出したいというお考えには賛同しつつも、一方で全てを偶然にしてしまうと相性の良くない組み合わせが表示されてしまうリスクもありました。
特に、最初の組み合わせで相性の良くない組み合わせが表示されてしまうとサイト全体の印象を良くない意味で左右してしまうおそれがあります。

そこで、そういった懸念をお伝えした上で、第一印象となる1パターン目だけは組み合わせをあらかじめ指定した画像が表示される仕組みをご提案し、採用いただくことができました。

また、細かい部分ですが、
右側にマウスを乗せた時に少しだけ目立つ演出を入れて注意を引きながら2つの店舗名を表示させることで、
STUDIOは2店舗あること、ここには2つのリンクが存在することに気づける工夫をしています。

とはいえ気づかなくても問題はにように、大きい画像をクリックした場合は2つの店舗からどちらかを選ぶ画面が表示されるようにし、その選択ページを経由して各店舗ページへ飛べるようにもなっています。

操作性を考えるとなるべく遷移数を減らしたい一方で、右側だけ要素が多くなってしまうとバランスが悪くなりすっきり感が薄まってしまう、という懸念もあったのでこの形をご提案させていただきました。

Gallery Site

公開したサイトは、いくつかのデザインギャラリーサイト様でも取り上げていただくことができました。

Web Design Clip様
https://webdesignclip.com/panof-jp/

RESPONSIVE WEB DESIGN様
https://responsive-jp.com/12276.html

Good Web Design様
https://good-web-design.com/webdesign/panof

CMS DESIGN様
https://cmsdesign.jp/cms/wordpress/panof/