mono.blog

東京のwebデザインスタジオmono.のブログです。
webデザインのナレッジや事例、ツール紹介、ビジネスに関するコラム、時々写真などを掲載しています。

Category
Archive
Author
  • Yuji Ishibashi
    戦略設計やブランディング、デザイン表現を強みとしたWebデザイナー/ディレクター。数社の制作会社に勤めたのち、現在は"mono."の屋号でフリーのweb制作者として活動中。
Contact

事例紹介 PANOF様

2022.11.05

事例紹介

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

公開したサイト

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

Mission

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

また、会話や参考デザインを見てのディスカッションなどを通じて、シンプル・ミニマムの中に少し粋な工夫を感じられるサイトが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/

このブログは東京のwebデザインスタジオmono.が運営しています。
webサイト制作にあたりお見積やご相談などお気軽にお問い合わせくださいませ。

mono.の公式サイトへ お問い合わせはこちら

Recommend Books

その他の記事を見る

2023.02.05

デザイン

シンプルで美しい、テキストだけで構成されたデザインのポイント

シンプルって、いいですよね。デザインを始めた頃はコテコテに装飾された派手なデザインに憧れていたので…

2022.11.10

デザイン

一目で「素敵…!」と思うメインビジュアルは何が違うのか

メインビジュアル。 サイトの第一印象を左右する場所なので、デザイナーにとって最も腕の見せ所で…

2022.11.05

事例紹介

事例紹介 PANOF様

2022年5月、空間デザインやレンタルスタジオ事業を手がけるPANOF様のwebサイトリニューアル…

2022.11.04

写真

fuji sea of t​rees

写真シリーズ。富士の樹海に行ってきた時の写真です。雨の日の樹海最高でした。 一度やってみたか…

2022.11.04

ツール

デザイナー目線で見たノーコードツールSTUDIO

最近制作界隈で話題になっているノーコードツールSTUDIO。私も今後積極的に導入していこうと思いP…