shuhei goto architects
credit
Design +Coding +Front-end development +Back-end development +Direction: yoshihiro mizuta
Client: shuhei goto
-
-
-
トップページのWORKSのビジュアルは縦位置と横位置(つまりPCとスマホ)で異なる写真が表示される設計。
-
左上のロゴのこういう演出も昔は難しかった……。
description
後藤周平さんは、とってもヘンな人だ。
感情にあまり起伏がなく控えめだが、意見があれば率直に直接的にわたくしへ主張をする。その内容は、オブラートなどのような柔らかく曖昧なものに包まれてはおらず、言いたいことの趣旨だけが簡潔にまとまっている。的確で鋭く無駄がない。
その鋭さをたとえるならば、とある人をこの世から消し去りたいと思えば「死んでください」と、面と向かって言っちゃいそうな人なのである。(勝手な想像だが)
今時珍しいのではないか。一応サービス業でもあるのに。
ともあれ、しかしながら、実はわたくしも結構そっち側寄りの人間である(タテマエなんか言えないし、嘘が嫌いだ)ので、とても親近感を覚えていた。おもしろい。好きかもしれない。裸で(比喩)ぶつかり合おうではないか、と思った。
今回のウェブサイトは、その周平さんのポリシーと、それを踏襲した建築事務所のカラーを体現したようなものになった。無駄な装飾 / コンテンツは削ぎ落とし、見る側の行動フローも極力タップなどのアクションを少なくする構成。色彩もほぼ白・黒と、ベースのグレーに絞り、相対的に作品写真が目を惹く設計になっている。
モノトーンの色彩はある意味、平凡で特徴がないと受け取られるかもしれないが、密かに、ナビゲーションメニューの挙動や、ロゴ部分にも実は(あくまで機能的な)遊びが隠してあって、魂は細部に宿る、のポリシーを、わたくしはそれらに込めたつもりである。果たしてどれくらいの人が気付くだろうか。それに何より、周平さんの作品自体が素人目線でみても不思議で魅惑的なものばかりなので、作品を並べるだけで、高い水準のオリジナリティは確保されているとも思う。
そして、最大の特徴である、スマートフォン(以下、スマホ)対応の話をしよう。
通常、横長の写真をスマホで表示するには、横幅に合わせて縮小する。横長の写真を縦長のディスプレイにあわせて縮めるので、ディスプレイ全体としては3分の2程度が写真ではない無駄なエリアになる。あるいは、横長の写真の左右を削り(トリミング)中心部分だけを縦長に見せる、という手法もある。写真の面積を大きくしたい場合は後者を採用するが、左右を削っても価値の伝わる写真は少ない。
いずれにしても、スマホの縦長のディスプレイでは、高い確率でディスプレイスペースや写真の大部分を無駄にしてしまい、作品の魅力を100%伝えきれない。
そこで、その問題を解決するために、最も作品の魅力を伝えるエリア、トップページのメインビジュアルに限り、横位置用のヴィジュアル・縦位置用のヴィジュアル、の二つを用意してディスプレイのサイズによって表示し分ける、というアイデアを採用した。つまり、閲覧者は気付かないかもしれないが、メインヴィジュアルはデバイスに関わらず、その作品の魅力を最大限に発揮している状態を目にしていることになる。
例えば、紙媒体では、あらかじめデザインされた紙面のレイアウトに応じて、写真の構図は決められる。2ページ見開きでつかわれる写真は横長で、といった具合である。
それでは、ウェブサイトではどうだろう。
▼スマートフォンからのインターネット利用者、2015年冬にはPCを超える可能性
http://goo.gl/NRp3Mj
上記リンクのように、ざっくり言って、今やインターネットユーザーの半数はスマホ利用者と考えてよい(サイトの業種やターゲットにも寄るが)。
となれば、ウェブサイト用に写真を撮影する際には、レイアウトに合わせて縦位置・横位置の2種類写真を撮るということは必然であり、今後の写真撮影では当然の流れになっていくのではないか、とわたくしは考えたのだ。
というわけで、そんな特徴をもった周平さんのサイトである。
ぜひ、オフィスで仕事をしているフリをしながら、見てくれ。