制作実績：水前寺成趣園 WEBサイト内にある園内マップページのレイアウト制作
ハナグミのけーくんです。
今回ご紹介するのは熊本を代表する日本庭園「水前寺成趣園」さまのWEBサイトリニューアルに伴う、園内MAPページのレイアウト制作です。
WEB版・モバイル版それぞれに対応したレスポンシブデザインで、来園前に園内の全体像をわかりやすく把握できるページを目指しました。観光地のサイトということもあり、初めて訪れる方にとって「直感的に見やすいこと」をテーマにレイアウトデザインを行いました。
左図が旧サイトの園内マップ。各名所が別のページにリンクしています。
園内を観覧中、スマホでも読みやすい構成にしたいと思いました。
現在の園内マップデザインはこちら
制作過程
実はWEBサイトのデザインは今回が初めての経験でした。
Adobe XDのデザインデータを引き継ぎ、情報量の多さに圧倒されました。
最初につまずいたのが「余白」の扱いです。印刷物では紙のサイズが決まっているので余白の感覚もつかみやすいのですが、WEBはデバイスや画面サイズによって見え方が変わります。「どこに・どれだけ余白を取れば正解なのか」が最初はまったくわからず、正直かなり手探りな状態でした。
そこでWEBデザインの基本ルール（グリッドシステム、余白の統一感、タッチ領域の確保など）を調べ直し、アドバイスをいただきながら少しずつ理解を深めていきました。
DTPで培った「読みやすさ」への感覚は活かしつつ、WEB特有のルールを上乗せしていくイメージで進めることで、ようやく方向性が定まっていきました。
調整を重ねながら、最終的にはWEB・モバイルともにすっきりと見やすいMAPページとして仕上げることができました。
WEBページはこちらから閲覧できますので是非ご覧ください。
感想
初めてのWEBデザインということで、最初は「DTPと何が違うんだろう？」という感覚でしたが、取り組んでみると「伝える」という本質はまったく同じだと気づきました。
違うのはメディアの特性と、それに合わせたルールだけ。
わからないことを素直に調べ、教えていただきながら完成できたこの経験は、自分の制作の幅を広げてくれた貴重な一歩になりました。
ハナプレでは、これからも関わった案件の紹介を行なっていきます！お楽しみに！
