仙台藩の架空サイト
※下層ページは家臣団情報のみ完成
制作の目的
デジタルハリウッドSTUDIO広島にて、卒業制作課題で制作。
「歴史に興味がない人に興味を持ってもらうため」、「歴史ファンにより歴史を楽しんでもらうため」に考えた企画。
コンセプト
「戦国時代にインターネットが存在し、Webサイトを制作するとどうなるのか」という、ifのコンセプト。「戦国大名(伊達政宗)のコーポレートサイト」といったところです。
主に歴史に興味がない人に向けて、歴史に関するおもしろいサイトを作ることで興味を持ってもらうため
、次のようなことを意識しました。
- ・話題性のあるコンセプト
- ・思わず笑ってしまう所がある
- 独特な雰囲気のハンバーガーボタンなど
- ・初心者が入りやすい初心者向け定番の時代、人物がテーマ
- 時代は戦国時代、人物は現代で有名かつ人気武将(伊達政宗)
- ※厳密には江戸時代(1616年頃をイメージ)
歴史ファンも楽しめるように…
- ・今までになかった新しい歴史コンテンツ
- ・ある程度歴史に精通しているとわかる「小ネタ」が、あちこちにある
- ※一般的に知られているものもあり
- 例
- ・お知らせ→1600年6月:関ヶ原の戦いへの参陣について
裏コンセプト
「本当のターゲット」は徳川家康公など、当時実際に仙台藩と関わっていた人々であり、伊達政宗及び仙台藩について知ってもらうためのWebサイト制作
になります。
そのため、当時存在していたかのような、よりリアルに近づけること
にこだわりました。
- ・日本語限定
- 記号、外国語を原則使用しない
- ・古語に変換
- 当社が当藩、社員が家臣など
- ・現代的なものが写っていない写真を使用
しかし
これはもしもの話であり、あくまでもフィクション。自己満足で制作しただけでは好ましくないと考え、現代で実装可能なものにする
ことを心がけました。
- ・読みにくくならない程度の日本語限定に
- 数字を漢字表記にはしないなど
- ・古語への変換はごく一部
- 名詞以外を変換すると読みにくくなるため
- ・(コンセプトはぶっ飛んでいるが)サイトまではぶっ飛ばないように
このサイト上においての「おもしろい」とは、ウケを狙って爆笑させるような、おもしろおかしいもの(実装しにくい)ではなく、真面目にやっているのに何かがおかしいような、「シュールな笑い」を作り出しているということ。- →「戦国大名のWebサイトを本気で作ってみた」ということ自体、シュール
- →ハンバーガーボタン:「候」
記号を日本語化した結果、こうなった。
情報設計
「当藩について(当社について)」、「事業内容」、「お知らせ」といった項目があり、現代的な会社のホームページのようにしています。
何をしている団体なのかわかりやすいように、全体的にシンプルで見やすいレイアウト
にしました。一目見ておおよそどのようなサイトかわかるように、伊達政宗の画像も載せています(MVにある銅像とフッターにあるイラスト)。
※とりあえず歴史関係のサイトで、伊達政宗の資料館?と思われるかと
電話番号について
当時に電話は存在せずネタもないため、「000-0000-0000」のようなてきとうな仮の番号でいいかもしれません。
しかし、例えば「022-1189-1000」としているか所がありますが、それは
- ・022:現代の仙台市の市外局番
- ・1189:伊達家(仙台藩)が誕生したとされる年
- ・1000:鉄砲の語呂合わせ
という一応意味があるものにしており、このように細かい部分まで作り込んでいます
。
※意味まではわからなくとも、「000-0000-0000」では手を抜いたという印象を与えてしまうため、そうならないように
デザイン
伊達政宗のイメージカラーの黒(漆黒)を基調とした、和風のかっここいい雰囲気のサイトを目指しました。
より和風っぽさを出すため…
(前述した日本語限定などに加えて)縦書きの見出し、刀の背景、霞がかかる山の背景、光るホバー、桜吹雪など、和風的な硬派なかっこよさを随所で表現
しています。
制作期間
- 企画、ワイヤーフレーム:4週間
- デザイン:2ヶ月
- コーディング:1ヶ月
使用ツール
Illustrator / Photoshop / XD / Visual Studio Code
使用言語
HTML / CSS(SCSS) / JavaScript