読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

海外旅行の思い出を残していく写真ブログを作ったので、Webデザインについてまとめておく

デザイン

f:id:tsukuruiroiro:20150207151322j:plain

▶ TRAVELER

旅行の記録用にひとつ、Webサイトを作ってみた。

2年前に出た世界一周のことを、覚えているうちに形にして残しておきたかったのだ。それに「今までどこを旅行したか」ということも、すぐに振り返れるようにしたかった。海外旅行の分がだいたい書き終わったら、少しずつ国内旅行記も載せていこうと思う。

今回は、このWebサイトのデザインの話しを書いてみる。少しテクニカルな話しになるのでご注意。

 

トップページのPC表示

f:id:tsukuruiroiro:20150207163706p:plain

モバイル表示

f:id:tsukuruiroiro:20150207164027p:plain

 

まず基本情報から

  • 更新をラクにするためにWordPressを使用
  • デフォルトテーマ「Twenty Fourteen」をカスタマイズして作成
  • レスポンシブWebデザイン(画面サイズに合わせて可変)

 

なるべく写真を活かすWebデザインに

Webデザインは写真を活きるようなものにしたかった。文章ベースの旅行ブログはたくさんあるが、写真ベースのものはあまり多くないからだ。また、旅行の度に文章をたくさん書くのは面倒だし、旅行記ならその方が読んでいるほうにもおそらく伝わりやすい。

 

モノクロで余分な色を入れない

 写真を活かすためにテキストは全て黒かグレイにした。カラフルな写真が多く入っているので、モノクロにしてもデザインが味気なくなることはない。 少し分かりづらいが、シェアボタンもデザイン性を優先して黒にした。これについては、オリジナルを使うより少しシェア率が下がりそうだ。

f:id:tsukuruiroiro:20150209112801p:plain

 

アイキャッチ画像を記事上部に大きく表示

f:id:tsukuruiroiro:20150207171421j:plain

世界で2番目に綺麗な本屋「エル・アテネオ」 | TRAVELER

記事のタイトルの上部に画面幅最大として、「写真+場所名」を載せるようにした。実際の設定は、アイキャッチ画像を背景として読み込み、その上にタグ名を表示させるようにした。サイトのタイトルでなくタグ名としたのは、SEO的な理由から。タイトルはクリックしてもらえるよう「世界で2番目に綺麗な本屋…」というようにやや長文にしたかった。

 

フォント

フォントは細字をベースとした。日本語フォントはあまりカッコイイウェブ用のフォントがないので、アイキャッチ的な部分についてはなるべく英語を使うようにした。

英語のフォントは、主にグーグルWebフォントのQuicksandを使った。フォントの太さはlighterだ。ちなみに過去にはグーグルWebフォントのまとめ記事も書いたのでよかったらどうぞ:「ウェブページを一瞬でオシャレにするオススメのGoogle Web Fontsを厳選してみた - Literally

 

TOPページのグリッド表示

f:id:tsukuruiroiro:20150209104956p:plain

トップページのグリッド表示には「Essential Grid」というWordPressプラグイン(25ドル)を使った。このプラグインをインストールすることで、超簡単に、好きな場所にグリッド状に記事サムネイルを表示させることができる。設定はものすごく簡単で、グリッドのタイプを選び、読み込む記事のジャンルを選び、発行されたショートコードをトップページや固定ページ貼るだけ。こだわりだければ、細かいデザインやグリッドの表示のされ方等も調整できる。また、トップページでは無限スクロール(Infinite Scroll)に設定した。下に進むと自動で記事が読み込まれるというものだ。

このプラグインの問題点として考えられるのは「トップページ上にテキストがなくなり、ややSEOが弱くなってしまいそう」なこと。これについては少し様子を見たい。

 

今後

いくつか反省点はあるが、いちばんの目的は自分のために旅の記録を整理することだから

良しとしよう。とりあえず、海外の旅行記を整理するのに結構時間がかかりそうだが、ゆるーく続けていきたい。

▶ TRAVELER 雑食クリエイターの気ままな国内/海外旅行記