フォートラベル デザインブログ

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

デザインする時の「思想・思考の流れ」を書き出してみました。

デザイン思想・思考

フォートラベルデザイン室(旧制作部)の横山義です。今日はデザインする時の「思想・思考の流れ」を書き出してみようと思います。

ググれば、ラフデザインが最終デザインになるまでのビジュアルの工程を見ることは出来たりしますが、デザインの思想・思考の流れ(変化も含めて)って、あんまり目にする機会が少ないかなあ?と。

まあそれは要件が詰まってないとデザインも開発もできない…って事かとも思いますが、要件からデザイナ(ボク)が手を動かしながら詰めていくとしたら?…という工程の可視化みたいなものが今回できればと。

その時どんなことを考え、何が問題だととらえ、どう解決に向かったか?どこまで思い出せるかわかりませんが、ボク自身の思想・思考の見える化の先に「何か」が見えたらいいなと…。

 

大体デザインをする時、次のような工程を踏んでいるかなと。

①タッチポイント(リニューアル該当ページ)の選択

②旧ページの「問題点把握」と「サービスの強み」の再認識

③競合リサーチ(旅行商材、クチコミサービス、オフライン)

④あるべき情報構造と旧ページのユーザー動向

⑤テクノロジーでのプラスα

⑥収益に直接関わるアイデアのひねり出し

⑦リリース

これらの各段階で、ラフスケッチ〜デザイン〜実装を行き来しながら、精度を高めています。

 

具体的な題材で、もう少し掘り下げてみます。題材は、誰かに依頼されたのではなく、ボクの頭の中から始まった

・エリアページ(都市階層)リニューアル

・フォートラベルトップリニューアル

とし、出来る限り当時考えていたことを思い出してみます。

 

ケーススタディ:エリアページ(都市階層)

f:id:yokoyama_y:20161221163458p:plain

①タッチポイント(リニューアル該当ページ)の選択

タッチポイントとは、ユーザーとの接点という意味です。エリアページの都市階層を選択したのは、実は単純で、みんな旅行に行く時にパリとかソウルとか、都市の粒度でガイドブックを買ったり情報収集をするのに「慣れてる」から。

②旧ページの「問題点把握」と「サービスの強み」の再認識

・旧ページは、遷移ボタンがリスト表示されているだけ

・旧ページ自体では、ひとつも旅行情報が得られない

大きくはこのふたつが大問題だろうと。なので

・世の中に旅行サイトはたくさんあるのだから

・フォートラベルを使うメリットを、明確に伝えてあげる必要がある

・ある程度の情報を提供しつつ、さらに情報を深くたどりたい…と思わせる必要がある

・楽しい旅行のテンションに合うデザインであるべきだろう(写真大きくとか)

・サービスの強みは、旅行者の旬(ガイドブックが1年前の情報に比べ)の生の声(クチコミ、旅行記)

③競合リサーチ(旅行商材、クチコミサービス、オフライン)

・旅行商材系〜トラベルコ、楽天トラベル、じゃらんなど

・クチコミ系〜トリップアドバイザーじゃらん@cosmeクックパッドなど

・オフライン系〜ガイドブック(地球の歩き方、ことりっぷ、るるぶ…)

の三方向からリサーチしつつ、以下を考慮。

・都市階層にあたるようなページあるいはクチコミ情報ページの情報構造やデザイン

・他のサイトに有り、フォートラベルに無い情報の中で、有益な情報の有無

・フォートラベルが持っている情報の中で(例えばPCページには掲載)、スマホサイトにも表示すべき情報の有無

④あるべき情報構造と旧ページのユーザー動向

新ページの情報構造としては、基本、ガイドブックの目次のような構成をふまえつつ、

・基本情報〜どんな都市なのか?

・旅行予算〜いくら位からいけるのか?

・キュレーション〜どんな町で、どんな遊び方ができるのか?

・人気ランキング〜観光、グルメ、ショッピング、交通

・クチコミや旅行記、Q&A

・地区別ページへの誘導導線〜凱旋門エリア、ルーヴルエリア…など

旧ページのユーザー動向も考慮し、最終形を整えていく。

⑤テクノロジーでのプラスα & ⑥収益に直接関わるアイデアのひねり出し

ホテル、航空券、ツアー、Wi-Fiなど旅行商材への導線ボタンには、最終的に最安値表示(¥19,800-)を表示することに。

・各旅行会社の料金を取得し、その中から最安値を表示

・営業部からの「もっと売りたいんだけど、フォートラベルでも旅行商材が買えるという認知が低い」の悩みも解決

⑦リリース

 

ケーススタディ:フォートラベルスマホトップ

f:id:yokoyama_y:20161220093826p:plain

①タッチポイント(リニューアル該当ページ)の選択

フォートラベルトップは本屋さんで言えば「ココは旅行関連の棚で様々な本が集まってますよ…」という必要があるだろうな…と選択。(ラインナップ&ブランディング

②旧ページの「問題点把握」と「サービスの強み」の再認識

・旧ページは、ボタンがリスト表示されているだけ

・旧ページ自体では、ひとつも旅行情報が得られない

大きくはこのふたつが大問題だろうと。なので

・サイトやブランド認知側面からも、広く浅く旅行を網羅していること

潜在的な需要から、旅行直前、旅行中、旅行後にいたるまで、どのシーンでもアクセスしてこれる窓口…、というようなことを心がける

③競合リサーチ(ポータルサイト、旅行商材、クチコミサービス、オフライン)

競合リサーチはもちろん、各業界のメディア系サービスもリサーチ対象に。またポータルサイトと呼ばれるヤフーや各ニュースサイトも網羅。そういう中で、

・あまりデザインのパターン的なバリエーションの新規性・特異性はいらないだろう

・それよりも、スマホなので、GPSによるアクセスエリアのターゲティングとか

・ログインユーザーのパーソナライズがキーになるかな?と

④あるべき情報構造と旧ページのユーザー動向

新ページの情報構造としては、基本、本屋さんの旅行関連の棚を意識しつつ、

・料金重視の旅行パンフのようなもの

・体験型の旅行プラン重視の雑誌のようなもの

・エリア別のガイドブック

などなど、ある意味雑多ながらも広く旅行でくくられているというような構造を目指す。これらを踏まえた上で、旧ページのユーザー動向も考慮し、最終形を整えていく。

⑤テクノロジーでのプラスα & ⑥収益に直接関わるアイデアのひねり出し

最上部スライダでは、ユーザー動向に合わせたパーソナライズを実施。例えばパリのCookieがある場合、スライダでは「パリ×ホテル」「パリ×Wi-Fi」というように、ユーザー履歴を元に、ユーザーが探している情報にアクセスしやすいようなリコメンドをしました。もちろん、旅行会社別の料金を取得し、その中から最安値を表示し、旅行商材が買える、の認知も同時に行う。

⑦リリース

 

言うまでもなく、全ての工程でラフスケッチやデザインを繰り返し、行ったり来たりしながら、デザインをブラッシュアップしていきました。おかげさまでどちらのケースも「上がりすぎだろっ!」って位の滞在時間増にw。

 

ところで、思想・思考の流れを見える化して何かが見えるかと思ったんですが…、新たな発見はなかったかなあw?ただよくわからないですけど、次の仕事の時の整理し体系化された資料にはなるなあと。そして、これがもっとたくさん集まってきたら、何かは見えるかもしれないなあ、という感じがしました。

広告を非表示にする

デブサミ2017に参加してきました。 #devsumi

デザイン思想・思考

フォートラベルデザイン室(旧制作部)の横山義です。今日は、番外篇として木曜日に出かけた「デブサミ2017」について、面白すぎたのでつれづれ書こうと思います。

f:id:yokoyama_y:20170218120959p:plain

Developers Summit 2017 エンジニアとして生きる、技術の先にある現実に踏み出す

デブサミなのにデザイナがそもそも楽しめるの?というと、結果とても楽しめましたw。サービス開発にたずさわっている人なら誰でもきっと面白いと思います。

 

デブサミは5会場同時にセッションが1時間位ずつ常時行われていて、興味のあるセッションを選ぶ形になっています。ボクが選んだのは…

10:00~ 確実に良くするUX/UI設計
11:05~ Yahoo!ブラウザーアプリのプロダクトマネージャーが考えていること
13:05~ VR・ロボット・通信技術を活用したテレイグジスタンスへの挑戦
15:15~ 行列ができるECサイトの悩み~ショッピングや決済の技術的問題と処方箋
16:20~ ヤフオク!の快適なカスタマー体験を支えるモバイルアプリのライブアップデート技術
17:25~ ザ・黒帯 ~ Yahoo! JAPANのエンジニアの働き方とキャリアを語る

以下、つらつら雑感を…


【16-B-1】 確実に良くするUX/UI設計

深津 貴之 (@fladdict) | Twitter

デブサミで聞いたセッションの中では最もデザインよりなセッション。まあ面白かったです。デザインの見える化というか言語化というか、たとえの巧みさであるとか、今特にウェブ業界のデザインを牽引している人だと思いますが、すごくわかりやすく、簡単・シンプルであり、潔いなと。デザイン翻訳者だなあ。

セッション後に少し話をさせてもらえたのですが、

・デザインで成功体験のない人たちとの関係性構築がとても大変だと思いますが

・例えば、既存ページの数値にすがる状況、そのコンテンツがいいのではなく、ボタンの順番がたまたま…みたいな状況があるとして

・どういうこと、話をしてますか?

と尋ねてみたのですが…

 

・なるべく偉い人と話すよう環境を整える

・本質とはずれるが、まずはホームランを何本かかっとばし、その上で

・ホームラン打った人がテストしたいっていってるけど…

みたいな事をしていると。2番目のホームランは大事なようで、セッションの中でも本来の着手順とは若干異なるとしても…みたいな話はしていました。

その他にも、デザイナも数字見れなきゃダメだよね…とか話をしてたのですが、まあこんなデザインセンスの固まりのような人が地道にやってるんだから、ボクのようなもんが怠っちゃダメだよなあw…と思ったりしました。面白くて参りましたね。

あ、後セッションで面白いと思ったのが、実装(コーディング)を先にある程度進めて、デザインは最後にする、と。理由はデザインは時間がかかるから…と。ほんとに最短距離でゴールに進むことを突き詰めてるというか、PDCA最適化というか、スゲえなw。

デブサミ「確実に良くするUI/UX設計」 #devsumi - Togetterまとめ

 

【16-A-2】 Yahoo!ブラウザーアプリのプロダクトマネージャーが考えていること

最近のボクのテーマでもある「勘に頼らない」という話は、そうだよなあと改めて思わされましたw。

 

お昼をはさんで(昼もいろんなセッションありますw)

 

【16-D-3】 VR・ロボット・通信技術を活用したテレイグジスタンスへの挑戦

Sho Nakanose (中ノ瀬 翔) (@sho0315) | Twitter

全然門外漢でしたが映像が多くて、瞬間移動できちゃう体験とかスゲエなと。中ノ瀬さんがとても楽しそうに話すのが和やかで良くて、ああこういう人に、人もお金も集まるよなw…などと。

映像冒頭の部屋の一番奥にあるロボットに、お面(VR端末)かぶった途端に乗り移れるというデモなんですが、スゴいよねw。

セッションの中で面白かったというか「ああ、コレがリアルなモノづくりの人の話だなあ」と思ったのが、

・膨大な情報の中で、普通、ひとが認識できないレベルの情報もたくさんあって、そういうのは処理するのやめた

・それよりもデータ転送のスピード重視、とにかくリアルタイム性

・どうやら、人がロボットとシンクロしきるには、触覚がすごく大事で、手触り感を突き詰めてる

などなど。

 

【16-A-5】 行列ができるECサイトの悩み~ショッピングや決済の技術的問題と処方箋

いい買い物の日のピーク時の負荷分散についての取り組みが面白かった。

・いい買い物の日1回目、駆け込み注文でヤフーウォレットダウン

・買い物を完了できない人多数

・いい買い物の日2回目に向けて、サーバー増強?どう負荷分散すれば?

・いい買い物の日企画元でもあるアリババで受けたアドバイスは…

・負荷分散なんていらない、買い物体験大事にしろ

・発想転換

・通常時「注文→決済→注文完了」だが、アクセス集中時のみ「注文→注文完了→決済」に

・買い物を完了できない人は、すごく減る

この発想転換スゲいなと。

 

その他にも

・偽装セール価格表示(セール時のみ通常価格の釣り上げ)防止に、過去8週間分の通常価格履歴取得し照合。釣り上げの場合、セール価格表示はできないような仕様にする

・新規ユーザーの購入未達対策に、同じ検索ワードのユーザーの購入履歴を応用しリコメンド

などなど、王者ヤフーたる所以がたくさんあり、とてもお勉強になりました。

 

【16-A-6】 ヤフオク!の快適なカスタマー体験を支えるモバイルアプリのライブアップデート技術

これまた門外漢なのでアレですが、申請が必要だったりするアプリ界隈でも、不具合などの修正には申請を回避できる策あるよ、って話でへええ、って。

iOSアプリの不具合を申請なしで修正しよう - Yahoo! JAPAN Tech Blog

コレですかねえ?

 

【16-A-7】 ザ・黒帯 ~ Yahoo! JAPANのエンジニアの働き方とキャリアを語る

ヤフーにはスペシャリスト的な役職?のような黒帯といわれるポジションがあって、エンジニア・デザイナの2%位黒帯がいると。黒帯4人のディスカッション、みんな個性的で面白かったw。

 

この日はもう、なんだか、学びが多すぎて脳が追いつかなくて…夜は悪酔いしましたよw。

【デブサミ2017】1日目A会場 Yahoo! JAPAN Tech Conference 2017 #devsumiA - Togetterまとめ

 

まあ、もうエンジニアとかデザイナとかくくってる場合じゃなくて、サービス開発者としてお互いの領域を行き来しながら仕事をしていかなきゃいけないのだなあと。
 

クックパッドもそうだったけど、エンジニア・デザイナの評価の仕組みづくりはやはりこの時代のIT企業共通の最重要事項なんだなあと改めて。

4travel.hatenablog.jp

広告を非表示にする

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

デザイン責任者の仕事 デザイナーマネジメントの仕事

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

 

サイトトップ(リニューアル)

http://i.4travel.jp/

最上部のスライダ部分は、閲覧履歴やユーザー属性をふまえてパーソナライズしながら旅行商材をリコメンドします。商材ボタンなど各階層トップへの誘導ボタン下では新着順でキュレーション記事を紹介しながら、フォートラベルが旅行メディアであることの認知訴求をします。f:id:yokoyama_y:20161220093826p:plain

海外都市階層エリアページ(リニューアル)

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

ユーザーの知りたい情報順にページ構造を再構築。旧ページでは、もう1タップしないと情報が取得できないディレクトリ構造だったものを見直しました。合わせてPCページにはあるけど、スマホページには無いコンテンツ、あるいはそもそも遷移先スマホページが存在しない…などのデバイス毎の情報差の問題も解消しています。

f:id:yokoyama_y:20161221163458p:plain

4travel.hatenablog.jp

フッターにナビ導線設置(新規)

サイトの特性から、最も大きいボリュームゾーンである「クチコミや旅行記のロングテールで入ってきた一見さん」への、更なる有用な情報提供(直帰率の減少)、サービス案内・ブランド認知を目的に、各ページフッターにナビ導線を設置しました。各ボタンの遷移先は、それぞれのページのエリア属性にひもづいた旅行商材や観光情報になります。

f:id:yokoyama_y:20161207212429p:plain

ヘッダー(リニューアル)&グローバルナビ導入(新規)

上記スマホフッター同様、PCページのサイト内回遊を目的に共通グローバルヘッダーを導入。サイト回遊と合わせてフォートラベルで旅行商材を買えるという、ビジネスの認知にも貢献するのが目的です。

f:id:yokoyama_y:20161207182802p:plain

 

ここまではデザイン室で先にデザインを作ってしまって「どう?いいでしょ?やるべきでしょ?やろうよ!」と強引に進めた案件ですw。詳しくはこちら。

4travel.hatenablog.jp

 

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

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

個別ホテル名で検索流入してきたスマホユーザーに対して、旅行会社別の部屋タイプ・料金比較を最安値順に1stビューから表示。合わせてホテルの特徴もページ内で把握できる情報構造にリニューアルしました。

f:id:yokoyama_y:20161222093636p:plain

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

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

海外エリア名☓ホテルなどで検索流入してきたスマホユーザーに対して、ホテルのクチコミランキング順に、部屋代の最安値を出している旅行会社とプラン表示をし、ホテル毎の料金相場を知った上でホテル比較をしていただき、旅行会社ページ、あるいはホテル詳細ページへ遷移する導線設計にリニューアルしました。

f:id:yokoyama_y:20161207185044p:plain

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

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

個別ホテル名で検索流入してきたPCユーザーは、スマホユーザーに比べ、大きな写真を見たいという需要が強いので、PCユーザー動向に合わせたページ構造にリニューアルしました。

f:id:yokoyama_y:20161207180017p:plain

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

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

海外エリア☓ホテルなどで検索流入してきたPCユーザーも、スマホユーザーに比べ、大きな写真を見たいという需要が強いので、PCユーザー動向に合わせたページ構造にリニューアルしました。

f:id:yokoyama_y:20161207180021p:plain

海外ツアーエリア別一覧ページ(リニューアル)

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

エリア決定済みのスマホユーザーは、このページで各プランを比較・検討し、決定まで行いたい傾向が強いので、一覧性を重視した情報構造にリニューアルしました。

f:id:yokoyama_y:20161207185137p:plain

海外ツアー検索(リニューアル)

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

PCグローバルヘッダーの恩恵を受け、海外ツアートップへの流入が伸びるため、これまで拾えていなかった「行き先をまだ決めていない潜在層」へリーチするツアートップページにリニューアルしまいた。エリア名以外にもテーマ性を持ったカテゴリをもうけ多様なニーズに対応することを目指しています。

f:id:yokoyama_y:20161220164159p:plain

海外ツアーエリア別一覧ページ(リニューアル)

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

海外ツアーを探しているPCユーザーは、絞り込み機能を使って、なるべく比較・検討するツアーそのものの数を絞り込みたいという傾向が強いので、絞り込み機能をメインにしたレイアウトにリニューアル。

f:id:yokoyama_y:20161207180221p:plain

海外格安航空券検索(リニューアル)

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

f:id:yokoyama_y:20161207180325p:plain

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

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

f:id:yokoyama_y:20161207210652p:plain

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

f:id:yokoyama_y:20161207191926p:plain

 

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

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

f:id:yokoyama_y:20161207204608p:plain

フォートラベル GLOBAL WiFi(新規)

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

f:id:yokoyama_y:20161207190258p:plain

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

f:id:yokoyama_y:20161207194017p:plain

観光スポットクチコミまとめ(新規)

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

f:id:yokoyama_y:20161207190527p:plain

4travel.hatenablog.jp

広告を非表示にする

Cookpad TechConf 2017に参加してきました。 #CookpadTechConf

デザイン思想・思考

フォートラベルデザイン室(旧制作部)の横山義です。今日は、番外篇として土曜日に出かけた“Cookpad TechConf 2017” について、面白すぎたのでつれづれ書こうと思います。

f:id:yokoyama_y:20170123113410j:plain

どう面白かったかというと、

・どのプレゼンもリアルな現場の問題点と、それをどう解決したのか、そうすることで、どうユーザーによい取組み・改善になっているのか?が述べられている

・ほとんどがエンジニアだというのにw、やさしい言葉で、しっかりモノが伝えられる

・しかもどのエンジニアにもユーザー本意のマインドがいつも根底にある

という感じ。今働いている人はもちろん、先代の人たち含めて、企業文化と言うかマインドをとても大事にしてきたことがひしひしと伝わってきました。もちろん採用もすごく大事にしてるからなせる技だと思いますが、組織力というか人間力が凄まじいなと感じました。

 

以下、プレゼン順に、プレゼン資料(Speaker Deck)と、印象に残ったスライドページと、ボクの雑感やツイート。(重いのでスライド貼りません、リンク先でどうぞ)

 

+ Cookpad Under a Microscope // Speaker Deck

f:id:yokoyama_y:20170122190708p:plain

やっぱこの仕組みを大切にして最適化し続けていること(ユーザーがすごく簡単にしたいことができる)がスゴい。サイト改善としてやらなきゃいけないことはわかっていてもビジネス的についつい後手後手になりがち。

 

+ Go Global - #CookpadTechconf 2017 // Speaker Deck

f:id:yokoyama_y:20170122192541p:plain

グローバル展開の現場でどんな問題が出てくるのか?経験しないと見えてこないこと盛りだくさんで楽しくて面白かった。特にこのスライドのブロッコリーのクリームスープだけなぜか2単語になる…ってのが笑ったw。

f:id:yokoyama_y:20170122193218p:plain

コレは全く同じに見えるんですけど、文字コードが違う…ってのも笑ったw。

 

+ Building infrastructure for our global service // Speaker Deck

f:id:yokoyama_y:20170122193705p:plain

ラマダンが来るとトラフィックが3倍になるってのが面白かった。(ラマダンって1日1食になるのでみんなレシピ検索超するらしいw)。それと、専門外なのでよくわからないのだけど、会場でフリーwifiに300人位がつないでいるのがちゃんと安定してるのスゴいってみんなが言ってた。 #cookpadtechconf hashtag on Twitter

 

+ Hiroaki WAKATSUKI - Cookpad TechConf 2017 // Speaker Deck

 

+ モバイルアプリのABテスト / CookpadTechConf2017 // Speaker Deck

f:id:yokoyama_y:20170122194656p:plain

アプリABの経験はないので、アプリならではの制約に(審査あるし頻繁にリリースできないとか誰もがアプデしてくれる訳ではない)なるほどお!と。webである程度テストしてからアプリに反映させるという経験則もなるほど。

 

+ チームでプロダクト開発するための取り組み/cookpadtechconf2017 // Speaker Deck

マネジメントのいいお話でしたが、そもそものポテンシャルが…と思っていたら、補足ブログあがってました。納得ですw

「チームでプロダクト開発するための取り組み」の補足 - maru source

 

+ より良い検索体験のための情報設計とプロトタイピング / cookpad_tech_conf2017_sudo // Speaker Deck

f:id:yokoyama_y:20170122204257p:plain

デザイナーの人だったこともあり、また先月同じようなことを散々鉛筆書きしていたこともありw、

f:id:yokoyama_y:20170123100516j:plain

ふむふむとか「わかるわ〜」とか、とても参考になるプレゼンでした。レイアウトやくくりデザインの試行錯誤なんかも面白かったなあ。プレゼン後質問したかったけど時間オーバーでしたw…。

 

+ 組織全体でGitHubを使うようになるまで / Everyone Can Use GitHub Issues // Speaker Deck

 

+ 快適なサービス開発を支える技術/Cookpad TechConf 2017 // Speaker Deck

 

+ Real World Machine Learning // Speaker Deck

f:id:yokoyama_y:20170122205509p:plain

画像解析を機械学習させるという技術を導入して3ヵ月後には、それを使ったコンテンツをリリースしちゃうアジャイルっぷりがスゴいなあ。なんだか興奮しちゃってwやたら反応しちゃいました。

 

+ 行動ログでプロダクトを改善するには/exploit user behavior for product // Speaker Deck

f:id:yokoyama_y:20170122210600p:plain

これまた先程のチャラ画でよく考えていた領域のことなので、とても参考になりました。よく考えられているし、こんな「&検索」でも最適な検索結果を返せるDBふまえて、cookpadスバラシイなとw。

 

+ Cookpad awakens // Speaker Deck

 

+ Spot Instances in Cookpad #CookpadTechConf 2017 // Speaker Deck

f:id:yokoyama_y:20170122211257p:plain

スポットインスタンス、スゲえw。

 

夜の部も写真だけ撮ってきましたw。

 

 

f:id:yokoyama_y:20170122213955p:plain

総じてcookpadはこの世の中を便利にしようと本気で思っていて、それはもはや使命だとすら思っているのが伝わってきて、ちょっとしびれました。(rubyだってossなんだからプラグイン作って自分たちもシェアしちゃうとか)これだけ質の高い団体は強いなあ。

 

そして、カンファレンスに参加しながら、この『フォートラベルデザインブログ』をなんで始めたかというと、 クックパッド開発者ブログ が大好きで羨ましかったからだったことを思い出しましたw。

 

発表資料と動画はココにまとまってます。とてもお勉強になりました。ありがとうございました。

techconf.cookpad.com

 

こちらも勉強になります。

togetter.com

広告を非表示にする

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

デザイン責任者の仕事

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

 

f:id:yokoyama_y:20161130093417p:plain

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

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

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

 

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

 

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

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

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

 

 

 

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

f:id:yokoyama_y:20161222094333p:plain

 

ハンバーガーメニュー(リニューアル) 2016/11

f:id:yokoyama_y:20161222094401p:plain

ヘッダー&グローバルナビ(リニューアル) 2016/12

f:id:yokoyama_y:20161222094413p:plain

4travel.hatenablog.jp

広告を非表示にする

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

デザイン責任者の仕事 デザイナーマネジメントの仕事

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

 

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

広告を非表示にする

ベトナム・ホーチミンで立ち上げたオフショアラボについて。

デザイナーマネジメントの仕事

フォートラベルデザイン室(旧制作部)の横山義です。今日は、ベトナムホーチミンに立ち上げた、オフショア開発ラボについて。

 

なぜベトナムなのか?

ベトナム政府が国策としてエンジニア育成に力を注いでいる

・英語圏では無いため、アメリカなどのオフショア受託開発地としては後発

・よって、賃金上昇も他国に比べればそこまでではない(採用中にもどんどん上がっているがw…)

・国民性が比較的日本に近い(勤勉w?)と言われている

 

チームの稼働が始まるまでの流れ

・オフショア開発受託会社と複数回のMTG(1ヶ月程度)

・この受託会社は日本法人と現地法人があり主要スタッフは日本人

・現地ラボのチーム編成や予算、立ち上げ日など決定

・現地で採用活動を開始、書類審査(1ヶ月~1ヶ月半程度)

・現地ラボ視察・面接(スキルテスト含む)実施

・ラボスタート(コミュニケーター、エンジニア、デザイナ)

 

仕事の進め方など

redmineとchatworksでやりとりをし、skypeMTGをほぼ毎日、データのやりとりはdropbox

・基本のコミュニケーションは、現地コミュニケーターへ日本語で話し、それを現地メンバーに通訳・翻訳してもらう

・その為、コミュニケーターのITスキルがとても重要、もちろん日本語スキルも

・チケットや指示書の作成も、敬語や丁寧語、話し言葉をなるべくやめて、短文で意図を明確にし、翻訳しやすいように、曲がって伝わらないように心がけている

・テキストベースでは直接、現地メンバとやりとりすることもある

・今は小さな単位で仕事をしているが、ゆくゆくはひとつのプロジェクト、ひとつのコンテンツを頼めるまでになるといいなと

 

・デザインのニュアンスやフィーリングはなかなかまだ伝わりづらい

・日本のデザインまとめサイトなどを見てもらったりしている

・一方HTMLコーディングスキルは高い(というか早い)

ベトナム国内ではレスポンシブが主流なのか?、デザイナは皆、面接時にそのスキルをアピールしていた

 ・月イチで現地ベトナム人メンバーと受託会社スタッフ(日本人)の面談があり、各人の状況が細かく報告される(勤労姿勢、モチベーション、不安、要望など)

 

採用が進まない時

・採用母数がそもそも集まらないのではなくミスマッチが多かった

・現地の募集要項(ベトナム語)を翻訳してもらい、原因を探した

・募集要項はチェックさせてといわないと、基本、オフショア開発受託会社が作る

・求めている人材の詳細に書きかえた(RailsエンジニアだがPHPも出来てほしいとか)

・サービス規模(日本でどれくらいの立ち位置にいるサービスか、ユニークユーザー数、サーバ台数とか)

・日本との関わり合い・やりがい(社内デザイナ・エンジニアのコードレビューが入るとか)

・彼ら彼女らのスキルアップにつながる労働環境だよ

 

その他、雑感など

・ネットワーク回線速度は日によって、不安定なときもある

・残業料金がとても高い(国策で労働者を守っている?たしか、平日の時間外が150%、土日は200%、土日の時間外は300%~)

・毎年10%位の昇給の必要がある

・売り手市場なので、オファーをしても、他社へ行ってしまうケース多数

・IT市場そのものがまだ日が浅く、3年程度の経験者(それも大学での講義やインターンなどを含む)がほとんど

・面接をドタキャンされる割合が高かった(2~3割、ベトナム固有の問題なのかはわからないけど…)

 

・他社オフショア開発受託会社へもヒアリングをしたが、ベトナム国内では、ホーチミンハノイ、ダナンの順でオフショアが盛ん。

・エンジニアのキャリアパスは、BSE(ブリッジエンジニア)を目指す

・あるいは、日本で数年仕事をした後、帰国して現地でオフショア受託会社を経営する…というパターンのよう

・そのため、仕事の内容に対しても、自分のスキルアップと同じベクトルではない仕事はノーと言ってくる感じを受ける。(リファクタリングはやりたくない、もっとデザインをやりたい、など)

・そういう場も提供してあげられるように努めるべきだなあと感じる。

・そのことで定着率やモチベーションをあげれば、ラボ全体の生産性アップにつながりwinwinになるだろう

 

・面接で「美味しいベトナム料理を教えて下さい」というと、だいたい笑ってくれるw

・コミュニケータに「ベトナム語は得意ですか?」と聞くと、同じく笑ってくれるw

・採用したメンバーは皆、やさしいしおおらかな人で好感がもてるw

 

ボクは採用から立ち上げまでを担当し、その後、現場のデザイナに日々の業務をパスしたのですが、担当者のディレクションスキルが向上する…という想定外の効用もでていて、なかなか面白いなあと感じています。引き続きサイトの改善をいっしょにしながらよりよいサービスにできればと。

広告を非表示にする