デザインリニューアル変遷（随時更新）。

フォートラベルデザイン室（旧制作部）の横山義です。このページでは、リニューアルしたページ、または新規につくったページを貼っていきます。サイト共通のデザインコンセプトは「楽しい・簡単・すぐみつかる」です。

サイトトップ（リニューアル）

http://i.4travel.jp/

エリアページ（リニューアル）

http://i.4travel.jp/city/paris

フッターにナビ導線設置（新規）

ヘッダー（リニューアル）＆グローバルナビ導入（新規）

海外ホテル個別詳細ページ（リニューアル）

http://i.4travel.jp/shisetsu/10120358?dmos=os

海外ホテルエリア別一覧ページ（リニューアル）

http://i.4travel.jp/city/honolulu/hotel

海外ホテル個別詳細ページ（リニューアル）

http://4travel.jp/os_hotel_each-10120358.html

海外ホテルエリア別一覧ページ（リニューアル）

http://4travel.jp/os_hotel_list-city-honolulu.html

海外ツアーエリア別一覧ページ（リニューアル）

http://i.4travel.jp/tour/search?dmos=os&area_code1=HNL&area_type1=city

海外ツアー検索（リニューアル）

http://4travel.jp/os_tour.html

海外ツアーエリア別一覧ページ（リニューアル）

http://4travel.jp/os_tour_search/?d_mon=1&CITY_CD1=CI-HNL

海外格安航空券検索（リニューアル）

http://4travel.jp/os_airticket.html

国内格安航空券エリア別ページ（新規）

http://4travel.jp/dm_airticket_list-todofuken-hokkaido.html

国内格安航空券検索結果ページ（新規）

国内ホテル個別詳細ページ（リニューアル）

http://hotel4travel.jp/dm_hotel_each-10041564.html

フォートラベル GLOBAL WiFi（新規）

http://4travel.jp/wifi.html

フォートラベル GLOBAL WiFi同梱サービス概要冊子（新規）

観光スポットクチコミまとめ（新規）

http://spot4travel.jp/landmark/dm/10667842

デザイン室主導で実装にこぎつけた、サイト内回遊ナビゲーション。

フォートラベルデザイン室（旧制作部）の横山義です。今日は、デザイン室主導で実装にこぎつけたサイト内回遊を目的とした各ナビゲーションについて。

フォートラベルはサイトの構成上、ユーザーのクチコミや旅行記など、いわゆるロングテールが入口になる場合が多く、検索エンジンでやってくる「一見さん」が多くをしめています。

ですがこれまで、その「一見さん」にわかりやすいサイト内の回遊・誘導導線を提供できていないがために、直帰率や回遊性に頭を悩ませてきていました。さらに、ナビゲーションはページごとで要素やデザイン、表示位置が異なっていたり、そもそもナビが存在せず行き止まりだったり…と、とても不親切な構造になっていました。
 

この問題は入社当時から認識していて、ずっとやりたいと、デザインとして声をあげていましたが、「一見さん」を「リピーター・ヘビーユーザー」にしていくことには、誰もが同意するものの、これまで施策に対する効果が不透明なこともあり、作業優先度をあげることができないまま、今日まで至っていました。

で、もう、勝手にやっちゃうしかないんだろうな…、それをやるのはボクなんだろうな…、やって怒られる方がいいなｗ、という勝手な解釈で、デザインを先に作ってしまい、関係者を巻き込みｗ、大迷惑をかけながら、この度リリースまでたどりつけました。（つかれたｗ）

サイトが複雑なディレクトリ構造になっているので、いわゆるシンプルなグローバルナビゲーションにはたどりつけなかったのですが（特にPC）、それがある意味、フォートラベルっぽいナビなのかなあｗなどと思っています。この先の改修の第一歩というか土台を作れたのは良かったなあと。
 

ビジネスのKPIとしては、1UUあたりのPV増、旅行商材への誘導数増などありますが、もうひとつデザイン室としては、フォートラベルというサービスへの信頼やブランド定着につながるよう願っています。

現場デザイナーには、（たまには）こんなに強引にやってもいい場合もあるのだなｗという見本になったらいいかなと思います。

フッターにナビ導線設置（新規）　2016/11

ハンバーガーメニュー（リニューアル）　2016/11

ヘッダー＆グローバルナビ（リニューアル）　2016/12

4travel.hatenablog.jp

自社ウェブサービスのインハウスデザイナーはどうデザイン力を高めていけばいいのか？

フォートラベルデザイン室（旧制作部）の横山義です。今日は自社ウェブサービスのインハウスデザイナーはどうデザイン力を高めていけばいいのか？について。

ボクが現場デザイナーをやっていた頃は、デザインプロダクションに在籍し、競合コンペの日々を送っていました。採用されるひとつのデザイン枠を、社内デザイナー・他デザイン制作会社・広告代理店のデザイン部と競い、勝ったり負けたりを繰り返して、そういう「競う」という状況の中に身をおかせてもらってました。

勝ったときよりも負けたときの方が気づきは多くって、同じお題で、他者に圧倒的な力の差をみせつけられる…って経験は、その後のボク自身のデザインの引き出し・伸びしろを広く深くしてくれ、ボクが考えていた漠然とした限界点みたいなものを、何度も何度も壊してくれました。

採用デザインに対して、「チェッ」と思うか、「あぁ、この発想はスゴいなあ。このあしらいは美しいしオシャレだなあ」と思うかで、人が成長できるできないは変わってくると思いますが、そういう経験、ライバルの存在ってのは、人を手っ取り早く成長させてくれるものだと思うので、フォートラベルのデザイナーにもなるべく同じような経験を積ませてあげられたらなあ、と考えています。

ですが、フォートラベルのような、自社ウェブサービスのデザイナーは、基本、ひとつのデザイン枠を競う、あるいは、競合コンペに負けるということがありません。（少なくともフォートラベルでは）ほとんどの作業は効率的に配分され、ベターなデザインとスピーディーさ、その次の改修をふまえた設計思想などが求められます。

このスキル自体はもちろん、ウェブデザイナーにとって大切なスキルのひとつではあるのだけど、修正はあっても、いつかはデザインが採用されます。（ほとんどの場合）

なので制作したデザインが日の目を見ない、という経験をたくさんしているデザイナーとの成長スピードはどうしてもついてしまうだろうと思います。

もちろん、現場デザイナからあがってきたデザインに対して、「こうすると良くなるよ」という意味での教育はやるけれど、それはどこまでいっても、基本、そのデザイン案の枠の中でのブラッシュアップにすぎない場合がほとんどなので、根本的なデザインのスキルアップとは違う話なのかなあ、と思ったりします。

じゃあ、どうすればいいのか？というのは、よくわかりきらないのですが、これまで試し試しやってきている事があって…

ひとつは、リリースしたものを、全デザイナーの前でチェックし批評すること。「ココよくこう解決できたねえ、あるいは、ココこうしたらもっと伝わりやすかったかもね」という、作って終わりにしない、より良い方法は常にある（たぶん）、という模索の姿勢を持つということを体験させるということ。

さらに、その場でデザイナー内のデザインリーダーに、「ボクはココが気になっててコウしたらと思うけども、君はどう思うか？」と問いかけること。こうすることで、指摘者はあくまでボクのまま、なおかつリーダーはリーダーの仕事をしなければという作用が働くので、埋もれていた発言が出てくる場合がよくあります。で、ひとりが発言を始めることでディスカッションがうまれやすくなります。

もうひとつは、デザインをPCやスマホ原寸サイズに紙でプリントし、貼って並べて比較すること。（紙にすると見えてくるものあるよね、なぜかｗ）

これは、どんなデザインでもページの前後左右、遷移の前後左右（検索エンジンも前後かも）、必ず関係性でなりたっているので、奥行きを意識しようよ、ということ。えてしてデザイナは作るものだけに、フォーカスしがちなので。

もっと良い方法ってないかなあ、とよく考えているのですが、他社はどうやっているのかなあ…。ググってもサイト改善という指標ではあるのだけど、デザインのスキルという視点の記事はなかなかみつからないんですよね…。良いやり方をぜひ聞きたいものです。

クチコミサイトをイチから作るとしたら、どんなデザインがいいのだろう…の実験の話。

フォートラベル制作部（デザイン）の横山義です。今日は、クチコミサイトをイチから作るとしたら、どんなデザインがいいのだろう…の実験の話について。

デザイナーがデザインをリニューアルする場合、既存デザインをある程度踏襲するのは、ユーザーがいる以上間違っていることではないと思いますが、一方で、一旦既存のフォートラベルのデザインを離れて、なるべく素直にクチコミサイトを組み立てていった場合、どういうデザインが最も使いやすくしっくりくるのだろう…というデザイン実験をすることができました。

spot4travel.jp

デザインをつくるのに気をつけた点は

・ユーザーが知りたい順で情報が並んでいること

・どこに、なんの情報があるか？が一目瞭然なこと

・ユーザーの利用シーン（検索キーワードや検索場所）を想像しながらつくること

などなど。

検索流入の多くが、観光スポットトップや、紐づくクチコミ詳細ページを入口として入ってくるので、サイトの「途中」から入ってきたユーザーに、いかにサイトの構造をわかりやすく伝えてあげられることができるか…という点に注意を払いました。

さらに、フォートラベルで持っていなかった観光スポットの基本情報などをテキスト追加し、前後左右のクチコミ比較をしやすいレイアウトにし、クチコミ表示数も大幅増しました。

そして技術的チャレンジとして、お出かけ先でのモバイル検索を想定し、天気予報APIを使って、これから行くべきか？（スカイツリーなら雨で景色が見えないのに行くべきか？）の選択に役立つ情報を実装してみました。（これは珍しくエンジニアがのってきたｗ、すきなんですねえ、チャレンジが…）既存フォートラベルと比べて、あるいはトリップアドバイザーなどのクチコミサイトと比べてどうでしょうか？見やすいでしょうか？

迷ったのはPCページで1カラムの左右にクチコミを並列するデザインが見やすいのかどうか？でしたが、トリップアドバイザーなど外資クチコミサイトは、もともとが英文なので、改行文化が無い言語であるため、1カラムにつらつらーとテキストが羅列されているのが苦にならないのですが、日本語はやはり、ある程度の文字数で文章が改行される方が読みやすいかなあ…という判断で左右並列レイアウトにしました。

モバイルがこの先どこまで標準サイズが大きくなるのか？わかりませんが（手のひらの大きさは変わらないのでもう大きくはならないかな？）、iPhone6plusが標準サイズになるようなことがあれば、モバイルも左右に並列表記でいいかもしれません。

・クチコミサイトっぽくてイイ

・なんのサイトだかはっきりしてわかりやすい

など、好意的な反応も多く、検索順位も特に問題がないようなので、この実験をふまえて、本家フォートラベルのクチコミの表記なども、順次改良を加え、より見やすい、わかりやすい、簡単なサイトにしていきたいと思っています。

レイアウトをリアルタイムでデザイン検証できるiPhoneアプリ!? Adobe Preview。

フォートラベル制作部（デザイン）の横山義です。今日はデザインの検証に役立つiPhoneアプリについて。

世の中のトレンド通り、フォートラベルのデバイス別ユーザーもスマートフォンがPCを上回るようになっています。なおかつスマホユーザーは毎月右肩上がりなので、スマホファーストというよりも、もはや、スマホでサービス設計をして、PCに反映していく…というような状況になりつつあります。

そんなときにデザインの現場でとても役立つiPhoneアプリが

Adobe Preview

それまでメールやチャットでjpgやpngをiPhoneに送り、都度、文字サイズや余白・操作性を実機でタップしながらチェックしていたのですが、 このアプリのおかげで、Photoshopの画面を、そのままiPhoneで、リアルタイムに見ることができるようになりました。今ではもう、なくてはならないツールのひとつになっています。便利な世の中だー。

iPhoneにAdobe Previewアプリをインストールし、WindowsにiTunesをインストールし、apple IDでiTunesにログインすることで、iPhoneとWinが同期するようになりましたヨ。

ボクは紙のデザインからWebに来たので、どうしても全体の一覧性が気になりがちなのですけど、実機ビューしてみると「アー、意外とそこは気にならないもんだなｗ…じゃあこれでいいのかもしれない…」ということがしばしばあり、そうするといらぬ調整や修正も減り、結果、効率的に作業が進むなーと思うことが増えました。

最近、本を読んだり、周りの人と話をしていて、やっと素直に受け入れることができるようになってきたのですが、デザインもプログラミング言語同様に、ブラッシュアップしなくていい日はやってこないのでｗ、

デザイン作業自体の改修コストもふまえて、情報・デザイン・コード設計しなきゃなあ、とつくづく感じます。

ちなみにタイトルの、レイアウトをリアルタイムでデザイン…うんぬんの言い回しは、こちらから拝借しましたｗ。

u-site.jp