定番っていいですよね。わずかな退屈さはありつつも、安心できます。
スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。
Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。
ちなみにこのパターン▼
その代表例、Evernoteのサイト▼
このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。
グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。
※あくまでイメージです
定番化して今もなお増え続けている理由はをちょっと考えてみました。
多分この辺じゃないかなーと
- A. 整然としているのでフラットデザインと相性がいい
- B. スクウェアな領域の積み重ねなので、レスポンシブWebデザインに対応しやすい
- C.「新しいなにかを提供しているよ！」という予定調和が成り立っている
特にCについてですが、前述のEvernoteなどの斬新なウェブサービスがこのレイアウトを採用したため、今や一撃で「新しいサービスが出たんだな」とウェブリテラシー高めのユーザーならわかる土壌があるように思います。
そして、サービス提供者側の多くも自身がネットユーザーとしてアーリーアダプターでしょうから、自分に響いてきたこのパターンを選択し、さらに増殖してゆく...という循環が成立しているのかもしれません。
また、A、Bのようなフラットデザイン＆スマホ対応（レスポンシヴ）といった要素も、この層にとっては「やってて当たり前。むしろ対応してないようなサービスはヤバい」レベルの話なので、ユーザー視点という意味でも外せないポイントでしょう。
というわけで僕が半ば趣味でブックマークしてきた大量の水戸黄門型サイトから、厳選した5サイトをご紹介します。
どのサイトも上記の要素を融合することで、定番化しつつも古臭くない「今のサイトですよ」という非言語的メッセージを発信しているように見え、興味深いです。
OneNote
https://www.onenote.com/Clipper/OneNote
マイクロソフトによるオンラインノート/ウェブクリップサービス。
メインビジュアル（以下、MV）内のキャッチコピーにデバイスフォントを多用するのも水戸黄門型の特徴で、特にこのサイトでは、サービスの特性を表すかのようにここをテキストだけで構成しています。
そのほかのエリアも装飾をギリギリまで排しているあたり、水戸黄門型と相性のいいフラットデザインを突き詰めている感がありますね。
Backlog
プロジェクト管理ツールとして、最近評判のBacklog。
MV内にさりげなく炎上マークがあしらわれており、このツールのお世話になるであろうWebディレクターたちをドキリとさせます。
この領域の広さを活かしてサービスのおおよそを語り、そのまま申込み導線へ引き込んでいるのも特徴です。
marketo
米国産マーケティング支援ツール。
MV自体にも3人物、なんと黄門様ポジションはあのヒラリー・クリントンをフィーチャーしているのが面白いです（スクリーンショットを取得した2014年4月現在）
しかしヒラリーさんって卑怯なくらいアイキャッチとして強いですね...日本で対抗できるのはデヴィ夫人くらいでしょうか。
なお、PC版で3つ並んでいる訴求ポイントは、スマホ用レイアウトにすると真ん中のみが表示されます。閲覧環境が変わることを想定すると、そういう割り切りは大事だと思います。
LINE6
革新的な製品を発表し続ける楽器メーカーLINE6の日本語サイト。多言語やレスポンシヴ対応のしやすさからか、こちらもMV内にごくシンプルなキャッチコピーをデバイスフォントで配しています。
また、MV直下の訴求ポイントを必要ならば4つに増やすのもアリだということが分かる好例でもあります。僕はこれを心の中で「風車の弥七追加バージョン」と名付けました。
ANIMOTO
オンライン動画作成サービス。他のサイトと比べると、MV部分とそれ以下の領域がややシームレスなデザインとなっています。
ややもすると直線的でシンプルゆえに男性的なイメージともなりがちな水戸黄門型サイトの中で、パステルカラーも相まって絶妙な柔和さの演出に成功しています。
さて、いかがでしたでしょうか。
ついエッジの効きすぎたサイトレイアウトにしてしまい「こいつぁうっかりだ！ ©」となる前に、こういった「定番」や「今」もうまく取り入れることがユーザー視点に立ったサイト戦略に繋がるかもしれません。
セミナー情報など（宣伝）
ディレクターズマニュアルの中の人、ナカムラがやってる日本ディレクション協会絡みのセミナー情報とか。割と直近で開催するのでよろしければぜひー。
0からのWebディレクション講座＠関西：設計編
5月開催の「制作・開発編」・6月の「運用編」に続くにもつながる大事な入り口「設計編」をお送りします。
| 日時 | 4月27日（日） 13:00～19:00（開場：12:30～） |
|---|---|
| 料金 | 3,000円（セミナー代＋ワークショップ＋ミートアップ） |
| 会場 | TAM Coworking（〒530-0053 大阪市北区末広町3-7） |
| 主催 | 日本ディレクション協会 |
Biz-dev Night 初夜「事業開発なめんな！」プロが吠え 若手おののく阿鼻叫喚の一夜
大企業の事業開発に携わってきたプロが感じる事業開発プロセスの課題や、トレンドがわかるらしい
| 日時 | 4月30日（水）19:00～23:00 |
|---|---|
| 料金 | いろいろ未定。多分無料とか安い感じ |
| 会場 | KDDIウェブコミュニケーションズ セミナールーム（千代田区麹町3-6 住友不動産麹町ビル3号 6F） |
| 主催 | 許 直人 |