WEB活用の知識

KNOWLEDGE

ホームページの新規立ち上げやリニューアル時に参考になる情報、
集客に役立つサイト運営の方法など企業のウェブ担当者様向けの情報をお届けします。

【制作事例】画面サイズによってデザインが伸縮。作品の魅力を最大限に

札幌で水彩画家として活動している石垣渉さんのホームページ「石垣渉 -水彩画の世界-」のリニューアルを担当させて頂きました。

リニューアル前の石垣さんのホームページは9年前に制作されたこともあり、ホームページの横幅が750ピクセルという、とても幅のせまいデザインで作られていました。

これは当時、一般的に使われているノートパソコンなどでは画面の解像度があまり高くなかったために、そういったパソコンでも問題なく見れるようにデザインされたものでした。

丹精込めて描いた作品をそのままの状態で掲載するために

 

旧デザインではホームページのサイズに余裕が無かったためにギャラリーの作品一覧ページでは正方形に小さくトリミングされた状態で作品が掲載されていたのですが、石垣さんが水彩画を描く時には作品の縦横比もよく考えて制作されており、トリミングされた状態では作品の印象が大きく異なってしまうので、作品全体が見える状態で表示したいと考えました。

作品全体を見せるためにはある程度の画像の大きさを確保した状態でデザインする必要がありますが、最近のパソコンは解像度が高くなったとは言え、見やすい大きさで画像を並べると窮屈な感じになってしまいます。

そこで、作品カテゴリーのメニューは普段は画面の右端に隠れて邪魔にならないようにし、必要な時にスライドされて表示されるようにデザインしました。
作品カテゴリーを表示するボタンはスクロールしても画面上部に固定されて表示されるので、コンテンツ領域を確保しつつ、ユーザビリティも損なわないデザインになっています。

タブレットやスマートフォンはもちろん、見る人の環境に応じて最適化

PCはカテゴリーがスライド式で表示するようになっていますが、タブレットやスマートフォンの場合は画面が小さくなるので、コンテンツ領域を確保するために左側のグローバルメニューもスライド式で表示するようにしています。

また、PCの閲覧でも見る人の環境に合わせて変化するようになっており、ブラウザサイズに応じて一覧ページでは画像の列数が変化、作品ページではファーストビューのコンテンツ領域いっぱいに作品が表示されるように設計しています。

ファーストビュー内で最大限に表示することによって、スクロールしなくても作品全体を見ることができるので、作品上部のナビゲーションボタンで次々とページをめくる感覚で作品を鑑賞することができ、石垣さんの作品をストレス無く堪能できるようになっています。