事例7|ウェブサイト制作

新体道

http://www.shintaido.com

武道の「文化」「アート」的な側面を、空間の緊張感で表現したレイアウト

改善前の問題点

「新体道」は、従来の「武道」の枠にとらわれない、総合的な「体技」です。 創始者青木宏之氏によって、空手・合気柔術を元に創り上げられました。
稽古内容は、 瞑想を中心とした「一般科」、体操を中心とした「本科」、武道を中心とした「武道科」があります。 生徒の層は、科目ごとに若者から高齢者まで幅広く分布します。そして、新体道は武道的側面を持ちながらも、一般的な「武道」としてのイメージだけでは内容を正確に表現できないということが、代表者とのヒアリングでわかりました。
また、そうした多面性よるものか、これまでのウェブサイトは表現や内容に統一感がなく、新体道本来の「特色」がうまく表現されていませんでした。

改善前(TOPイメージと稽古紹介ページ)
「新体道」がどのような「体技」なのか、特徴がつかめるような表現がなく、写真は白黒とカラーが混ざっていたりと、統一感が感じられなかった。
adagioサイトイメージ
「特色」を表現するためのキービジュアルとコピー

代表者とのヒアリングを重ねていくなかで、「新体道」がめざすものを表現するには「文化」や「アート」を感じさせる表現が適しているという結論に至りました。
そこで、キービジュアルとして創始者青木宏之氏の「書」を使用することをご提案しました。青木氏は書家としても精力的に作品を製作しており、その作風は「新体道」が表現しているテーマを伝達するのに適したものでした。
さらに、簡単に説明しにくい「新体道」の特徴をうまく表現するためのキャッチコピーを制作しました。

  創始者青木宏之氏の「書」(上)とキャッチコピー(下)
「書」の作品は、「自由さ」と「力強さ」が特徴。
キャッチコピーは、代表者との綿密な打ち合わせによって決定。
細部にまで気を配った、「余白」を活かしたレイアウト

ウェブサイトのデザインは、これらのキービジュアルを中心に、「余白の緊張感」を感じさせる日本的な美の世界で表現することに決定。使用する色はほとんど「白」と「黒」だけで、ストイックさと文字本来の美しさを活かすための色彩表現としました。
基本的にレイアウトと文字表現のみのシンプルな表現のため、ひとつひとつ細かい部分まで妥協をしないページ作りを行い、従来のウェブサイトのレイアウトの概念にとらわれない、自由でありながら緊張感を感じさせるレイアウトを目指しました。

サンプルページ
細部にまで気を配った、「余白」を活かしたレイアウト
縦組みの文字は、すべて画像で作らなければならず、手間がかかるため、一般的なウェブレイアウトではあまり利用されない。表現としての必然性からあえて縦組みの文字を多用。
サンプルページ
稽古紹介ページ
あえて、写真をバラバラに配置することで枠組みにとらわれない「自由さ」を表現。ページ毎のレイアウトにバリエーションを持たせ、ワンパターンさを回避するいう狙いもある。
改善後TOPページ(左)と稽古紹介ページ(右)

「本科」「一般科」「武道科」という稽古内容は、言葉だけでは一般ユーザにイメージしにくいため、それぞれ「体」「心」「技」という漢字をアイコンとして併記することをご提案。「何を鍛えるのか」という観点で特徴を強調することで、3つの科のそれぞれの位置づけがわかりやすくなりました。

制作ノート
プログラマ

大半のページがそのページ独自のレイアウトで構成されているため、各パーツの配置を規定するスタイルシートは可能な限り部品の共有化を図っているものの、全体の作業量はウェブサイトの規模と比べても過大なものとなっています。
また、色彩がシンプルで誤魔化しが効かないため、例えば「横方向(外部)に数ピクセル分だけグラデーションによって段階的に描かれている影が、縦方向の背景の変化に応じて更に微細に明度が変化する」といった表現を自然に見せるために、創意工夫を凝らしています。この処理を行わないと、不自然な色の変化でユーザが違和感を覚えてしまいますが、きっちり処理したことで逆に誰も気付かない要素となってしまったので、ここに記載しておきます。

デザイナ

これまでの武道系のウェブサイトとは一線を画すために、いかに「文化」「アート」を感じさせるかに注力しました。雑誌のレイアウトのように、変化と緊張感、そして説得力のあるデザインを目指した意欲的なウェブサイトになったと思います。

サイトデータ
ナビゲーションタイプ

左袖ナビゲーション型

メインカラー

FFFFFF
CCCCCC
000000
FF0000

主なフォント

もじくみ明朝+筑紫見出し明朝

筑紫オールド明朝

游ゴシック体E