後期作品 Ver 2.xx世代


※各画像はクリックすると拡大します。

◆Ver 2.00 −大改良・フルモデルチェンジ デザインは第2世代へ−


 当サイトの旅日記のデザインを語る上では、2011年4月の「春の四国を駆け巡る3日間」は外せません。ここまで、Ver 1.xxのデザインで6本の旅日記を公開してきましたが、この第7作目で”フルモデルチェンジ”を果たしました。

 第2世代(Ver 2.xx)のデザインの最大の特徴は、”ブロックシステム(と勝手に命名)”です。第1世代(Ver 1.xx)では、左側に写真を配置し、右側に文章を書くというデザインを採用していましたが、これには、ありふれていて特徴がないうえに、変化もなく上から下へだらだらと進んでいくことで、そのときの流れが掴みにくいという問題がありました。

 ブロックシステムでは、「○○駅にいるとき」「●●号に乗っているとき」などの各場面における写真と文章を、各場面ごとに枠で囲い、それらを上から下へ連ねています。これにより、他のサイトにない独自のデザイン(私はこれに近いものをよそで見たことはない)を獲得するとともに、「ここからここまでは○○駅にいたときのこと」「ここからここまでは●●号に乗っていたときのこと」といったように、場面の始まりと終わりが明確になり、流れが掴みやすくなりました。

 各ブロックでは、上部にその場面名を記述し、中部に写真を配置し、下部に文章を書いています。写真(縮小版)は、横192pxという小さなものとし、1つのブロックにおける最大枚数は、横5枚・縦4枚の合計20枚です。各写真には、簡単なコメントを添えるとともに、番号を振ってあります。また、ブロックシステムを導入したVer 2.00以降は、縦長の写真も使用するようになったため、縮小版の大きさは、厳密には、横192pxというよりも「長辺192px」となりました。

 そして、その番号は、文章部分で登場する番号に対応しています。写真部分の番号と文章部分の番号を結びつけると、どの文章がどの写真に対する説明であるのかがすぐに分かります。ただ、このVer 2.00の時点では、「文章部分の番号をクリックすると、その番号の写真が拡大される」ということは、まだできませんでした。そのため、文章部分で番号を確認した後、上へスクロールし、対応するものをクリックして拡大する、という手間がかかりました。

 なお、「文章部分の番号をクリックすると〜」の件については、「春の四国を駆け巡る3日間」でも可能となるように改修を行いました。現在は、文章からの写真拡大が、全てのページで可能となっています。

 Ver 2.00のデザインは、次作となる「熱い暑い夏の紀伊半島を駆ける旅」でもそのまま使用されています。Ver 1.xxのころは、毎回毎回何らかの変更がありましたが、7作目と8作目は、共にVer 2.00のデザインを採用しました。「熱い暑い夏の紀伊半島を駆ける旅」も、公開当初は、文章部分の番号からの写真の拡大ができませんでしたが、こちらも、既に全ページにおいてできるように改修してあります。  

◆Ver 2.10 −本文からの写真の拡大に対応−
 9作目「東北応援パスで冬の雪国へ」は、見た目のデザインはVer 2.00と変わっていませんが、この旅日記から、文章中に挿入された番号からの写真の拡大に標準対応しました。つまり、文章中に挿入された写真番号をクリックすることで対応する写真の拡大版を開くことが、最初から可能となりました(以前は縮小版をクリックするしかなかった)。

 しかし、公開当初は、相変わらず「その場で拡大写真を表示するスクリプト」は導入されていなかったため、拡大写真を見ようとすると、ブラウザ(の表示)が拡大写真に遷移していました。そのため、拡大写真を表示する→戻る→拡大写真を表示する→戻る・・・という面倒な操作が必要で、かなり不便でした。  

◆Ver 2.10a −色遣いにおける試行−
 その次の10作目である「夏・縦断・NNG」は、ページの構成・骨格は、9作目で使われたVer 2.10と同一です。しかし、その色遣いに関しては、これまでの旅日記にはないものとなりました。

 1〜9作目では、文字の色は、黒色または白色でした。それは、無難でこそありましたが、デザイン的には、決して「攻めたもの」とは言えませんでした。そこで、「夏・縦断・NNG」では、「色遣いにおけるデザイン性の向上」を標榜し、緑色の背景に橙色の文字を使用して、史上初めて黒・白以外の文字色を採用しました。

 このとき、背景を緑色としたのは、夏の旅ということで、夏を思わせる、瑞々しく生い茂った木々をイメージさせたかったから。一方、それと組み合わせる文字の色を橙色としたのは、文字の色をどうしようかと考えていたときに、113系などで使われた湘南色が思い浮かんだからでした。

 黒・白以外の文字色を使用することで、色遣いにおける可能性を探った旅日記でしたが、「やっぱり黒・白以外では読みにくい」ということに気づき、これ以降の旅日記では、黒・白以外の文字色が使われることはありませんでした。

◆Ver 2.20 −場面名の画像化がデザインを豊かにする−
 12作目となる「帰ってきたぞ、再上陸!冬の東北2013」では(11作目は番外編)、ブロック上部の「場面名」が画像化されました。これまでは、「●●駅」や「○○線▲▲M △△号」といった「場面名」は、テキストによって記述されていましたが、そこを画像としました。これにより、ページ全体の印象は、よりグラフィカルで豊かになりました。

 その代わり・・・というわけではありませんが、写真の縮小版の下に挿入されていたコメントは、このVer 2.20からは入らなくなりました。最大でも1行・12文字程度しか挿入できないコメントでは、大した説明を加えることはできませんし、そもそも、写真に対する説明というのは、本文中にきちんと記述しているので・・・。

◆Ver 2.40 −その場での写真の拡大に標準対応−
 13作目「ニーマルイチサン・イザ!・九州」において、専用のJavaスクリプトを導入することにより、「その場での写真の拡大」に標準で対応しました。これにより、拡大写真を見るたびにブラウザの表示が切り替わってしまう問題を解消しました。そのスクリプトは、ページの遷移をすることなく拡大写真を表示することができ、また、それをクリックすることで拡大写真を閉じられるため、より簡単に、気軽に拡大写真を見られるようになりました。

 このスクリプトの便利さは、管理人である私自身もひしひしと感じていたので、これ以前の古い旅日記(拡大用写真が用意されているもののみ)にも遡って導入しました。
 ※2016年12月11日追記※ 本日、拡大用写真を長辺が1050pxの大きなものに置き換えました。

◆Ver 2.41 −改良点は僅かも、デザインにおける更なる試みに挑戦−


 ページの上部に表示されるタイトル画像は、4作目「初代N'EX・253系に別れを告げる」以来、ずっと800×300のものを伝統的に使用し続けてきましたが(6作目「冬の上越を訪ねる旅」のみ800×295)、この「THE HOKKAIDO」より、970×250という、より「薄く・長い」タイトル画像に改められました。

 そのため、バージョンとしては、0.01増えたのみですが、このVer 2.41は、どちらかというと、試験的要素の実験台として送り出したものです。ここで導入された試験的要素は2つあり、ひとつは、写真に対する説明を拡大写真内に統合すること、そしてもうひとつは、日付ごとに背景を変更する、ということです。

 前者については、これまでは、写真に対する説明というのは、全て本文中に文章として記述していましたが、それを拡大写真とともに表示するという試みです。これは、写真の説明は拡大写真内で、状況の大まかな説明は本文で、という分離を図ることで、本文の文章が縦方向にいたずらに長くなるのを防ぎたいという思いがあったためでした。

 しかし、拡大写真の画素数を多くすると、画面の解像度が低い端末では、拡大写真の下部に表示される文が切れてしまう場合があることが判明しました。それを防ぐべく、この旅日記では、拡大写真の大きさは、770×514(横長写真の場合)という小さなものとしました。
 ただ、「拡大して表示される写真がこんなにも小さいのでは、何のための拡大写真なのか分からん」。そんなわけで、拡大用写真の縮小化が要求されてしまうこの方式は、「THE HOKKAIDO」でのみ採用されるにとどまりました。

 一方、後者については、背景を日付ごとに全く違ったものに変えることで、日付の変化をより明確に感じてもらいたい、という狙いによる試みです。日付が変わるときは、一応、ページの上部に「●月○日」という表示を入れていますが、背景ががらりと変われば、それによって日付が変わったことを実感できるじゃないか、と考えました。
 また、例えば「1月1日は赤色、1月2日は青色、1月3日は緑色」といったような区分けをすることで、「ここからここまでは1日のこと」「ここからここまでは2日のこと」というような内容的な区切りを、背景の色の変更によって行うことができるだろう、という狙いもありました。

 しかしながら、「ある背景色に目が慣れたころに全く違う背景色に変わってしまうと、目の対応が追い付かず、目が疲れる」という事実に気が付いたため、この試みもまた、「THE HOKKAIDO」限りとなりました。また、各ブロック内における上部・場面名、中部・文章、下部・写真という変則的な並び順も、やはり本作限りのものでした。

 もし、これらの実験的要素が「良いもの」として判断され、以降の旅日記でも継続的に採用することとなれば、Ver 2.70くらいは与えても良かったかもしれませんが、いずれも不採用となったので、結果的に2.41となりました。

◆Ver 2.45 −日付ごとに微妙に変わる背景を導入−


 その次の15作目、「晩夏・北の大地、風に吹かれて」では、「写真に対する説明の拡大写真内への統合」が不採用となったため、拡大写真から説明文が消え、再度”写真のみ”となりました。これにより、拡大写真の高画素化が可能だったはずなんですが・・・、どういうわけか(自分でもよく覚えていない)、拡大写真の大きさは、800×533(横長)と、長辺方向が30px大きくなったにとどまっています。もったいない。
 ※2016年11月29日追記※ 本日、拡大用写真を長辺が1050pxの大きなものに置き換えました。

 前作で試験的に導入した「日付ごとに背景を変更する」という要素は、「日付ごとに背景を微妙に変更する」という形で継承しました。この方式では、ごく一部の例外を除き、日付が変わったとしても、色の系統自体は変わりません。その模様が僅かに変化します。これにより、いくらか目に優しくなったかとは思います。

 ”僅かに”ということで、正直なところ、日付が1日変わった程度では、どこがどのように変わったのかは、目を凝らしてじっくりと見てみないと分からないレベルです。左に掲載した2つのキャプチャ画像は、上が1日目のもの、そして下が8日目のものですが、日付が7日も移っても、背景の変化は、大したものではありません。

 それゆえ、「背景の変化で日付の変化を気づかせる」という当初の目的は、ほぼ形骸化しています。気づかれるかどうかも怪しい程度の背景の変化に、いったいどのような効果があるのかは分かりませんが、まあ「やらないよりはやってみることだ」というところかと・・・。

 なお、ブロック内における各要素の並び順は、上部・場面名、中部・写真、下部・文章という、通常の並び順に戻りました。また、ひとつのブロックにおける「地図記号のJR線風の線」は、2本から3本に増やしました。

◆Ver 2.50 −縮小版を更に小さくし、より引き締まった印象へ−
 17作目となる「心燃え滾る西日本攻略大作戦」では、ブロック中部に配置される写真の縮小版の横(長辺)を、従来の192pxから140pxに縮小するという措置をとりました。

 従来の192pxでは、写真の縮小版は、横方向は5枚しか配置できませんでした。また、横が192pxという長さであることに伴い、縦もそれなりの長さとなるため(128px)、特に、ブロック中部への配置枚数が16枚以上になると(4行以上になると)、縮小版が並べられるブロック中部の縦方向の占有領域は、いたずらに広いものとなってしまいました。

 それゆえ、横が192pxの縮小版でブロック中部を構成すると、「枚数のわりに、占有する領域はやたらと広い」という結果がもたらされ、全体的に間延びしたような、締まりのない印象を与えてしまう傾向にありました。

 この問題を解消するため、本作では、縮小版の横(長辺)を140pxに縮小し、横方向の最大枚数を、5枚から7枚へ増やしました。これにより、ひとつのブロック中部における縮小版の最大枚数である20枚を配置した場合でも、その行数は4行から3行へ削減されました(7+7+6=3行)。

 このようにした結果、枚数に対しての占有領域はかなり削減され、無駄なく詰まったような、全体的に引き締まった印象を与えるデザインへの転換を実現することができました。

 なお、それ以外の改良としては、拡大用写真の大きさを、長辺が1000pxのものと大型化させました。

◆Ver 2.51 −より高い完成度を持つデザインを目指し、微調整−
 DISCOVER どこかの旅日記におけるデザインの変遷を紹介するコーナーを製作した2016年6月の時点で最新の旅日記であるのが、19作目の「JR線(仮)全線乗車への道をなぞって」です。言い換えれば、この旅日記で採用しているデザインが、現時点における、最も完成度の高いデザインということになります。

 このVer 2.61のデザインには、これまでに試してきたいくつものデザインを振り返る中から得られた経験や反省が盛り込まれるとともに、過去に導入された様々な要素を引き継いでいますが、基本的な部分は、17作目で採用したVer 2.60のものと変わりありません。逆にいえば、Ver 2.60の時点で、デザイン的には、既に成熟しつつあったということです。そのため、Ver 2.61は、Ver 2.60にごく小規模な改良を施し、微調整しただけのものとなっています。

 まず、タイトル画像と場面名の画像の横が、970pxから980pxへと、10px拡大されました。これには、特に深い意味はありません。ただ単に「もう少し広げられるな」と思ったから実施しただけです。なお、これに伴い、場面名の画像の左右にあった”余白”がなくなり、その上下にある「地図記号のJR線風の線」と横幅が揃いました。

 次なる改良点は、ブロック中部に配置する写真の縮小版の最大枚数を、20枚から14枚へと制限したことです。その行数は、最大でも2行までとなり、3行となることはありえません。これにより、Ver 2.60で目指した「より引き締まった印象を与える」という方針が、より推進されることになりました。

 最後の改良は、拡大用写真の更なる大型化です。17作目で長辺800px→1000pxという大型化を施しましたが、今作では、それが1050pxとなりました。ほんの少しだけ大きくなりました。

◆−伝統 Ver 1.00のころから変わらぬこと−
 いくつもの変遷を重ねてきた旅日記のデザインですが、ひとつだけ、Ver 1.00のころから変わらないものがあります。それは、各ページ間の繋ぎ方です。

 DISCOVER どこかの旅日記では、それぞれのページの下部に、その旅日記に含まれる全てのページの番号にリンクを割り当てたものを配置しています。当サイトの旅日記では、番外編や特別篇を除き、全ての作品において、各ページ間のリンクには、「次へ」や「前へ」ではなく、「数字」を使用しています。

 この方式の特徴は、なんといっても、各ページ相互間の移動が素早くなることでしょう。「次へ」や「前へ」のボタンを採用した場合、例えば、1ページ目から9ページ目に移動したいと思ったら、ページの下部にある「次へ」のボタンを8回もクリックしなければなりません。しかし、この「数字」では、そのような煩わしいことをする必要はありません。1ページ目にある「9」をクリックすれば、それだけで9ページ目に直接飛ぶことができます。

 また、「数字」方式では、あらゆる移動が1回のクリックにより可能となります。前後のページへの移動のみならず、例えば、3ページ目から15ページ目へ進む、7ページ目から2ページ目へ戻る、といった、複数のページを一気に飛ばすような移動であっても、移動先のページ番号を1回クリックするだけで良いのです。

 「数字」方式は、初代の旅日記の時点で既に採用されていますが、現状、これよりも優れた「各ページ間の繋ぎ方」が見当たりません。よって、これに限っては、実は、Ver 1.00のころから伝統的に採用され続けています。


こうして眺めてみると、当サイトの旅日記のデザインには継続的な改良が加えられてきた、ということがお分かりいただけるかと思います。
DISCOVER どこかの旅日記に限らず、今後も、より見やすく、分かりやすく、かつ独自性のあるデザインを追求していきたいと考えています。

前のページへ(Ver 1.xx 第1世代のデザイン)



DISCOVER どこかのトップへ