【制作レポート2022】やじきた街歩きwebサイト＜設計から開設まで＞

2022年8月にwebサイト「弥次さん喜多さんと街歩き『東海道中膝栗毛』大阪編」（略称やじきた街歩き）を開設しました。その開設から約半年間の制作レポートです。

2018年からの活動の歩み（総合編）はこちらをご覧ください。↓

１．サイトのコンセプト設計

まず前提として。私はコンテンツ制作やライティング（執筆）の仕事・活動経験はそれなりにあるものの、デザインやサイト制作は素人です（雑誌や本の活字レイアウト経験は少々あり）。

かねてから活動してきたまち歩きプログラム「弥次さんと喜多さんと街歩き」のweb版を開設するにあたって、今回初めて独自ドメインを取得してWordPressでweb制作を行いました。

初代イメージ画像

2022年8月。まず最初に、当初思い描いていたサイトコンセプトをもとにバナーを作成しました。

タイトルは「弥次さん喜多さんと街歩き『東海道中膝栗毛』大阪編」

コンテンツの柱は大きく３つ

さらにコンテンツのこだわりポイントとして、バナーの中に弥次さん喜多さんの会話の吹き出しを入れて、背景を実際の風景写真にしています。

これは原作ストーリー（『東海道中膝栗毛』）をたどるコンテンツとして、原作の場面ごとに写真と会話でストーリーを展開していく次のようなイメージにもとづいています。

コンテンツのイメージ↓

（「あらすじで読む『東海道中膝栗毛』」より ）

しかし実際にサイトTOPにバナーを載せてみると、スマホ上ではきれいに見えるものの、パソコン上で幅をめいいっぱい広げてレイアウトすると粗っぽさが目立って微妙な感じに…。

また、このバナーを見ただけでは「web上の読み物なのか、街歩きイベントの告知なのか」というような、ここをクリックして何が体験できるのかがよく分からず、デザインを再考する必要があると思いました。

２代目イメージ画像

サイトに掲載するコンテンツが少しずつ揃いだした数ヵ月後に、２代目バナーを作成しました。

すでに2018年から取り組んできたこのコンテンツ最初の試みが、原作ストーリーを大阪の道の上にルートとして再現すること（すでに再現済み）です。サイト上のコンテンツも、それを土台にしています。

そのコンセプトを的確かつ視覚的に伝えるために、作品とリアルを紐づけたルートマップを前面に出したデザインにしました。

その上で、このコンセプトをweb上のコンテンツへと昇華させるにあたって、新たに次のコンセプトを打ち出しました。

リアル街歩きでおこなった「原作を道の上に再現」を土台に、web版ではそのルートをもとに原作ストーリーをたどる「街歩き＆読書体験」を新たなキャッチフレーズとして加えることにしたのがここでの大きなポイントです。

まだまだデザインに改善の余地はあるものの、ひとまずこれで先に進むことに。

２．サイトのTOPページ制作

バナーからコンテンツへ

次にこのバナーをサイトのTOPページに配置して、実際のコンテンツに進む導線をつくりました。

▼

「コンテンツを見る」をクリックすると、「弥次さん喜多さんと街歩き『東海道中膝栗毛』大阪編」の総合TOPページが開きます。

▼

作品の世界観に合わせて、弥次さんと喜多さんが吹き出しの会話でさらなるコンテンツページへと誘導していきます。

３．コンテンツ制作

当初からコンテンツの柱として思い描いていたのは、原作ストーリーをもとに弥次さん喜多さんと大阪を巡る「街歩き＆読書体験コンテンツ」です。しかし形にしたいイメージはあっても一気には制作できないので、段階を踏んでコンテンツを増やしていきました。

カテゴリーとサイトマップ

「総合TOPページ」を作成した上で、次にコンテンツを４つのカテゴリーに分類しました。

次に、今後サイトを展開していくにあたってハブになるだろう３つの主要記事を作成しました。

原作ダイジェスト（あらすじ）を読む

解説『東海道中膝栗毛』とは？

活動の歩み（総合）

約半年でサイトの最低限の体裁を整えたところで、2022年の制作はここまでです。

関連ページ