「清水寺」特設サイトから学ぶデザイン術
こんにちは。
webデザイナーを目指し勉強中のryskです。
学習録第6弾です。
このブログでは、参考webサイトの目的を基準に、
【構成・配色】
【フォント】
【写真・画像】
【装飾】
【効果】
の点から見ていきたいと思います。
では早速始めていきたいと思います。
今回は清水寺の特設サイトです。
このサイトの目的は、
「言語や人種、文化などあらゆる垣根を超えた表現を元に、祈りに対する新たな解釈と視点を発信する」
となっていることからこのサイトはブランドサイトだと思います。
それではどうぞ。
【構成・配色】
まず目を引くのは、英語の多さです。
このサイトは日本語と英語の二カ国語が使われているのですが、TOPページでは日本語より英語の方が多く見受けられます。
文章も英文の下に日本語文が来ており、このサイトの目的である「言語や人種、文化などあらゆる垣根を超えた表現」が意識されていることがわかります。
全体の配色は、白に近いグレーを基調とし、落ち着いた雰囲気を与えています。
そして、写真は大きめに配置することでユーザーにインパクトを与え、視覚を通して清水寺の魅力や世界観が伝わってきます。
その上で、ユーザーの視線をスムーズに誘導し、ストレスなく情報を届けるために、タイトルや見出しは左側、写真や本文はそれらよりも右側に配置することでF字型に視線を誘導しています。
【フォント】
全体的にフォントサイズは小さめに設定することで、余白を生み出し、「ゆったりとした」「穏やか」「物静か」といったイメージをユーザーに与えています。
このサイトでは見出しとなる<h2>要素が17px、本文となる<p>要素が13pxでした。
字体は、TOP画像、グローバルナビゲーションにはゴシック体/サンセリフ体（P22Underground）が使用されています。
このサイトを一目見た時、TOP画像から「和」な感じは伝わってきたのですが、「古い」「厳格」といった印象はあまり抱かず、むしろ「モダン」「オシャレ」といった感情が湧き上がりました。
これは、キャッチコピーに使われている字体や、文字間隔、行送りをバランスよく広めにとることでそのような印象が生まれているのではないかと思います。
それ以外の文字には明朝体/セルフ体（Times/Times New Roman）が使用されており、見出しは大きさ、太さでコントラストをつけて目立つようにしてあります。
文章は左揃えにし、見出しは左側、文章は見出しよりも右側に配置することでユーザーの視線をF字型に誘導し、ストレスのない視線移動を可能にしています。
【写真・画像】
暗めのトーンに統一されていることで、清水寺の持つ世界観を表しているように感じます。
サイトを開くと美しいTOP画像が画面いっぱいに広がっており、被写体が大きく表示されているため、迫力のある画面が演出されています。
他の写真は四角版が使用されており、収まりが良く、安定感があるため、落ち着いた印象をユーザーに与えます。
また、写真は「三分割法構図」や「日の丸構図」といったレイアウトで撮影されており、ユーザーに安定感やストーリー性を感じさせます。
【装飾】
TOP画像にはいくつかの装飾が見受けられました。
まず最初に、画像が切り替わるタイミングを示しているプログレスバーです。
上から下へとラインが走っていき、タイミングを教えてくれます。
これは、jQueryの「slick」を使ったコーディングになっています。
次に短い線が並び、表示している画像の切り替えに応じて、線の色の薄さが変わっていくことで、ユーザーにページ数を伝えている装飾があります。
これはjQueryの「slick」でスライダーのドットをカスタマイズしていました。
最後に画面の切り替えに合わせて、リンク先も切り替わることで、正しいリンクへと導いています。
これ以外の装飾はほぼありません。
そうすることで、余白を作り出し、落ち着いた雰囲気の世界観を演出しています。
ボタンもシンプルな四角ボタンで、三角マークを入れることでユーザーに認識しやすいボタンになっています。
【効果】
TOP画像が波紋のように切り替わるエフェクトがとても印象的です。
どこか名残惜しさのあるこのエフェクトが見事にこのサイトの世界観とマッチしており、清水寺の持つ魅力を伝えています。
これはおそらくGIF形式で制作したものをはめ込んでいるものだと思います。
また、「project」のコンテンツで、写真の領域をホバーすると右から左へと黒マスクがかかり、文字が出てくる効果や、ボックスコンテンツをホバーするとサブタイトルがサイコロを転がしたように回転する効果などもありました。
どの効果も、動作時間は少し長めに設定し、動作の開始時と終了時の動きを緩やかにすることで、動きを出しながらもサイトの世界観にあった演出がなされています。
まとめ
清水寺の魅力や世界観を表現するため、余白を作り出すレイアウトや全体の配色で「落ち着いた」「穏やかな」「物静か」というイメージをユーザーにあたえるデザインになっています。
それだけではなく、字体や文字間隔、行送りの幅でお寺のイメージとは真逆な「モダン」「オシャレ」といった印象を自分が与えられたことに大きな衝撃がありました。
ただ、それだけでは少しつまらないサイトになってしまいそうですが、大きめの写真を使用することでインパクトを出したり、波紋が広がるように画像が切り替わるエフェクトを使っていたりと随所にユーザーを飽きさせないデザインが見られ、とても参考になります。
是非とも今回学んだデザインを意識して作品を作ってみたいと思います。
