デザイン, ブログ, ライフ, , 開発

自作の「新幹線予約サービス」リニューアル

以前作った海外向けの新幹線の予約サービスを大幅に更新してみた。デザインを更新し、サイト内での支払いを可能にした。前バージョンでは実装の簡易さを優先してサイト内には料金支払い機能は設置していなかった。(メールでのpaypalインボイス送信)そのため注文をくれるユーザがいても結局支払いのアクションまではたどり着かなかった。めんどくさいし怪しいからまあ仕方がない。そこで今回の改善を追加してみたという経緯。

現状

SEOの対策なんて全くやってないので検索からの流入は期待できない。なのでgoogle adwordsで広告を打ってとりあえずの流入を得た。ところが数百人の訪問者を迎えても注文はゼロ。うーん これはそもそも需要がないということ?

2017-01-27 | Posted in デザイン, ブログ, ライフ, , 開発No Comments » 

 

日付選択のUIの調査

先日作った新幹線の予約アプリで日付選択のためにinputタグのtype=’date’を使っていたのだが、かなりの環境で表示されていないことがわかった。他の方法を考えることにした。シンプルなデザインでモバイルフレンドリなものを探す。ところで他のサービスはどんな手法を使ってるのだろうか。

airbnb


フォームがバラバラに分割されておらずシンプル。モバイルの場合はフォームを全画面モーダルで表示。あくまで入口はシンプルに見せたいらしい。この辺り、従来の旅行会社のサイトとはちょっと違う。日付の選択もモバイルに特化したモーダルタイプになっていて安心感がある。モバイルの場合は遷移を増やしてでもその時その時のUIにフォーカスさせることが効果的だと感じる。

skyescanner


ファーストビューでのフォームはちょっと複雑だが要素がはっきりしてて視認しやすい。日付選択もモバイルもやはりしっかりと全画面表示されている。

他にもモバイルに特化したものならこの辺りが参考になりそうだ。

探した結果

pickadate.jsが良さそうだ。デフォルトのデザインがシンプルでモバイルフレンドリ。

2016-09-23 | Posted in デザイン, ブログ, 開発No Comments » 

 

外国人旅行者向けに新幹線の予約サービスを作ってみた

外国人旅行者向けに新幹線の予約サービスを作ってみた。

きっかけ
子供が生まれて自由に使えるお金が減ってしまった。ということで小遣い稼ぎのプロジェクトを考えた。テーマは1人でも回せるマイクロビジネス。

アイデア
外国人旅行者向けに新幹線の予約サービスを作ることにした。調べてみると新幹線は旅行者にとってもはやただの移動手段ではないようだ。300km/hという高速移動の中で飛行機並みのサービスと富士山のような美しい景観を楽しめる最高のエンターテイメントなのだ。ところが一部の路線を除いて新幹線の座席予約は海外からは不可能だ。近年訪日旅行者は増える一方なのに。JRはクレイジーだ。そこで新幹線のチケットを代行で購入するサービスを作ることにした。

このアイデアのターゲットは家族や友人同士のグループによる短期滞在者たち。限られた予定の中で確実に安心して新幹線を楽しみたい人々。お金を払ってでもいいから一緒の席に座って、景色を楽しみつつ目的に向かうような。個人旅行者であればJapan Rail Passという安価な乗り放題チケットを使う傾向にあるため今回のアイデアには向かない。

プロセス
こういうのはとにかく未完成でもいいのでとにかく出してしまうに限る。自分のアイデアなんて99%は思い込みだと思うので、出した後のフィードバックが大事だ。ということで、取り扱い路線は東海道線のみ、支払いのやり取りんはメールを使った簡単な仕組みにした。

現状
リリースして2週間。まだまともな収入を受けることはできていない。そもそもサービスの良し悪し以前にターゲットにうまく露出できていない。Google Adwordsを使って日に20 ~ 30人くらいの訪問者はいるが、それほど精度の高い広告内容になっていないためコンバージョンには繋がらない。考えてみれば当たり前だが、作ることを楽しんでばかりの自分にとっては盲点だった。

ただ、問い合わせを受けたり、注文を受けたりってのはちょくちょくある。(入金まで辿りついていない) 問い合わせの内容や、国外からのフィードバックではどうやらメールベースでのやり取りに違和感があるようだ。(今はサイト上で列車をチェックできない。メールで送る手順になっている)
次はここを改善してみる。

2016-09-20 | Posted in デザイン, ブログ, 開発No Comments » 

 

ウルトラライト仕様のバックパックを自作した

ふと思い立ってウルトラライト仕様のバックパックを自作した。理由は自分の物欲に対する反抗だ。最近流行のガレージブランドのバックパックなんかを見てるととてもカッコよくて物欲を掻き立てれられる。でもそれをそのまま買うのは人生の楽しみとしてちょっと違う気がする。

自作といってもボタンすら自分で塗ったことがない。さてどうすればよいのか。 色々探していたら世の中には様々な自作用テンプレートがオンラインで公開されていることに気づいた。中でもRay-Way Products ではテンプレートと素材をセットで購入でき、入門用としてはうってつけだ。これを使うことに決定。Ray-Way products ではバックパックの他にもタープやシュラフなどのキットも売っている。他にも欲しい素材はOMMで購入した。

2週間後、キットが届いたので制作開始。ミシンは妻の実家から借りてきた。そもそも使い方を知らないのでyoutubeでざっくりと学習した。便利な時代だ。それにしてもミシンってすごい。こんな複雑な作業をサクサクと進められる、、、世の中では3Dプリンターとかで騒いでるけどミシンこそパーソナルファブリケーションの先駆けだな。

完成。少しずつ進めてたら1ヶ月くらい経っていた。

感想

作業は想定よりも大変で時間がかかった。既製品が安くてきっちり作られてることを実感した。
休日の趣味にできればと思ったが時間を食いすぎる。続きは老後の楽しみに延長することにした。
素材や縫製の基本的な知識が身についた。今後アウトドア製品を購入するときの判断基準としてとても役立ちそう。
アウトドアギア自作の楽しみの本質は改良の積み重ねにありそう。作ったものを自分で使えて、不便を感じたところを改良して、、、

2015-12-26 | Posted in No Comments » 

 

UI検証 : プロダクトのランディングページ

自分はwebデザインの素人だ。とはいえ、今後はプロダクトのwebデザインに手をつける必要がありそうだ。なので最近のwebページのレイアウトをざっくりトレースしてみた。トップページのみ。

7f5ac2bee11666b789256577bf50651b


最近のwebプロダクトのランディングページは驚くほど画一化が進んでいる。少ない情報でざっくりサービス内容を伝えて、スクロールで詳細を見せるタイプだ。使い古された手法とはいえシンプルで作りやすく汎用性も高い。知っておくと役に立ちそう。とりあえず構成を調べて、それっぽいものを作ってみた

Big UI / Low Density / Long Page

このスタイルは「Big UI / Low Density / Long Page」といわれるらしい。大きなUIに粗密なレイアウト、そして長いスクロール。Pinterestで「web layout」とかで検索すると、参考になるものがたくさん出てくる。

プレゼンシートみたい

作っていて感じたのは、とにかくスピードと分かりやすさを重視したスタイルであるということ。プレゼンシートを作っているような感覚だ。元来スタートアップから発生したレイアウト手法らしいので、まあそういうことなんだろう。

内容

内容も大体お決まりのパターンがあるらしい。
<ヘッダにロゴとログインボタン>
<メインの写真とサービス名>
プロダクトのメッセージを一見して伝えるインパクトの強い写真が背景においてある。最近は動画を流しているものも多い。

<サインアップフォーム>
サインアップフォームはまず一番最初に目につく場所に置いてある。ただし、スクロールして全ての情報が閲覧された後に、もう一度配置してあるケースも多い。

<プロダクトの魅力や使い方>
とにかく簡単に理解してもらえるように工夫が凝らしてある。写真、イラスト、紙芝居風、3点に絞った表現など数秒で理解できるようになっている。

<対応プラットフォーム>
大抵デバイスの写真と一緒に表示してある。iOSデバイスなんかはAppleが公式のものを提供してる。

<メンバー紹介>
これよくあるけどなんだろう?野菜の「〜〜さんが作りました」みたいな感じかな。

<他ページへのリンク>
企業情報、採用、価格構成、開発者情報、ブログなどなど。

まとめ

・最近のwebデザインを把握するために、代表的スタイルをトレースしてみた。
・「Big UI / Low Density / Long Page」と呼ばれるこのスタイルは目的を明確にもっていた。
・素早く、簡単に、プロダクトの魅力を伝えるということ。つまりプレゼンと同じ。
・それ以外の要素は排除されており、とても合理的なスタイルだった。

2015-05-28 | Posted in デザイン, 開発No Comments » 

 

プロトタイプツールのHype 3が超便利

プロトタイプツールのHype3が超便利なの感想をメモ。

fb8de4767df5effa20b0398dbc265327

▪︎Tumult Hype3 とは

プロトタイピングツール。正確にはHTML5のアニメーションやサイトを簡単に作成できるツール。かなりシンプルで、ドキュメントを読まなくても大体の機能が使える。Appleのkeynoteくらいの感覚。大きな特徴はアニメーション用のタイムライン。AfterEffectと同じような感じで使える。

スクリーンショット 2015-05-24 22.45.53

▪︎できること

・アニメーション作成
・インタラクション設定
・Webとモバイルの両方に対応
・画面感遷移
・日本語対応済

▪︎できないこと

・条件に応じたアクションの設定(Javascriptを書けば可能っぽい)
・素早いワイヤフレーム(素材さえ用意しておけば可能だと思う)

▪︎アニメーション

testHype
タイムラインを使ってアニメーションを作成できる。キーフレームを追加して状態を設定する方法で、AfterEffectsに似ている。初めてでも5分くらいで以下のアニメーションができた。成果物はプレビューボタンで素早くブラウザ上で確認できる。
<製作サンプル>

▪︎アクション設定

select
クリック、タップ、ドラッグ、マウスオーバーなんかは使える。条件に応じたアクションの設定はよく分からない。Javascriptを自作して追加すればできるのかな。PixateなんかはGUI上でできるみたいだけど。サンプルくらいなものでも5分くらいで作成可能だった。<製作サンプル>

▪︎画面の移動

web_test
シーン(画面)間の移動も可能。単一画面の移動だけでなくサービス全体の構成も確認できそう。
<製作サンプル>

▪︎書き出し

スクリーンショット 2015-05-24 22.45.18
途中経過はブラウザを指定してプレビューできる。書き出しはHTML5やムービーの選択が可能。

▪︎プラットフォーム選択

スクリーンショット 2015-05-24 22.49.16
web、モバイル、tumblerやDribbble、バナーまで位色々なサイズを選択可能。

▪︎グレード

スタンダード価格は$49.99。プロ価格は$99.99。プロ仕様のメイン機能は「シンボル」。
要素タイムラインアニメーションの再利用が可能になる。シンボルひとつを編集すれば、そこに関連するすべての要素も同時に編集できるっぽい。シーンをまたいだ同じ要素の編集に便利。(曖昧)

しばらく試して使えるようなら続けていこう。

2015-05-24 | Posted in デザイン, 開発No Comments » 

 

UI考察:feedly

普段使っているRSSリーダアプリfeedlyのUIを検証してみた。普段はデスクトップアプリをメインに使っている。

6c1f5f7a61fd6e6c6d952399bc6bf116-2

 

基本構成

左のサイドメニューとメインコンテンツ部分の2カラム構成。サイドメニューはオンカーソルで開き、外すと勝手に閉じる。できるだけコンテンツを大きく見せておきたいからだろう。モバイルアプリと同じ感覚で使えるのはいいかもしれない。使用障壁が低い。カラーはよくある基本的な構成。グレーのベースカラーと少しだけのコーポレートカラーの組み合わせ。

よかったところ

・コンテンツがない状態で事例を提案してくるのはやっぱりありがたい。
・コンテンツの表示方法を3種の中からユーザに選ばせている。確かにこれもひとつの手段。

悪かったところ

・ウインドウがでかいのでカーソルの移動がめんどくさい。こういうのは操作できるモックで検証しないと気付かなさそう。
・アコーディオンは繊維アニメーションがないと一見して何がおきたのかわからない
・他のアプリに連携する際にわざわざブラウザが開くのはめちゃめちゃストレスがたまる。
・メニューのアイコンが不要
・サイドメニューの中に設定メニューも混ざっているが気づきにくい。
・こういう細かい点の積み重なりが大きく影響するんだろうな

その他情報

ここでマテリアルデザイン反映までのプロセスが説明してある。googleのデザイナーと密接にやり取りしながら仕上がっていく様子が面白い。印象的だったのは、コンテンツの提案として表示されてあるスターターキットの表示方法。かなりのこだわりをもって改善されたようだ。実際に使っていても没入感を感じた箇所だった。感情的(英: Emotional)没入的(英: Immersive)はとても大きなキーワード。

2015-05-12 | Posted in デザイン, 開発No Comments » 

 

今日オープンの蔦屋書店大阪に行った

大阪の駅ビルに蔦屋書店がオープンしたので立ち寄った。

FullSizeRender 4

本屋以外の割合が大きくて驚いた。同敷地内にカフェが数店舗、appleのジーニアスサービス、ビジネス用品販売など。本屋というよりはざっくり文化そのものを発信する場所のような印象を受ける。

FullSizeRender 7
FullSizeRender 12

カフェはかなり広く、電源もアリ。席数も多いため初日にも関わらず普通に使用できる。これは今後ぜひとも使いたい。

FullSizeRender
apple製品のジーニアスバーのような場所。でもスタッフの胸には「カメラのキタムラ」のロゴ。どうやらキタムラは日本における正式な代理店らしい。

本だけでなく何かしら話題になっている新しいものに触れることができる、そして落ち着いて作業できるようなスペースもある。こういう空間はかなりありがたい。ここにいるだけで何かしらアイデアが出そうな気分になってくる。こういう気分は大事。家では絶対出ない。

2015-05-09 | Posted in デザイン, ライフNo Comments » 

 

UI考察:slack

 

slack-logo

9012924925582fdb851cd329b8ecda06

巷で大人気のチャットツール、slackのUIを舐めてみた。あまり詳細な部分は見れてない。

明快なレイアウトとコントラスト

・コンテンツ部分と操作部分を徹底的にはっきりと分けている。
・操作部分はコントラストを抑え、あくまでコンテンツ部分を浮かしている。
・文字群のまとまりがわかりやすい。
・タイトル表示が明快。リズム感が心地よい。
・ローコントラストとハイコンとラストの部分がはっきり分かれている。
・ただしハイコントラストの方がはるかに分量がすくない。重要な情報を絞ってこれでもか、と強調している。
・選択可能部分は選択前には薄すぎるくらいのローコントラスト。
・そのため選択後の反応が強く見え、とてもわかりやすい。

オフィスツールっぽくない雰囲気

・仕事を楽しく感じさせる色々な工夫がなされている。
・slackを使う自分の仕事はクールだ とさえ思わされるかもしれない。
・例えばカラーの組み合わせ。でもこれはデザイナーのテイストだと思う。
・例えば効果音。
・例えばフォント。調べるとgoogleのLatoフォントだった。アプリからサービスプロモーションのぺーじまで全てこのフォントで統一している。部分的に丸みがあるため主張せず、背景になじむのでツールアプリには向いているかもしれない。

細やかな機能

・コマンンド入力時に補完が出てきて感動。やはり補完は重要。
・メンションやスターつきのフィルタがメイン画面を表示したままで出るのは安心感がある。ただし開閉にはアニメーションがほしい。

その他情報

デザインの担当はmetalabという会社。インハウスではないのか。意外。ここでmetalabのAndrew Wilkinsonが開発秘話を語っている。かなり面白い。ざっくり以下のような内容。3点に集約されている。

It Looks Different

従来のエンタープライズ向けのツールから離れることを目指したことが語られてる。他のアプリのような暗いブルーではなく、紙吹雪のようなカラースキームにかわいいロゴ。これらのカラーはエンタープライズカラーではなく、ゲーム業界にヒントを得ているらしい。

It Feel Different

ユーザを楽しませるための細かいアニメーションのこだわりについて語られている。ロゴの回転やモーダルアニメーションなど。プロではないユーザはこういった細部に明確に気づくことはない。ただし小さなこだわりの集積を確実に感じると。

It Sounds Different

slackの中で使われるあらゆる言葉について語られている。アプリ内のアラートからツイートまで。ただ必要なことを伝えるだけでなく、ユーモアを踏まえた内容にこだわってるらしい。従来のツールが2001年宇宙の旅のHAL9000ならslackはInterStellerのTARSだと。

感想

細部のこだわりの集積であることが実感できた。その工夫は全てPlayfulというようなコンセプトに向かっていて明快。コンセプトは重要だ。ただこうしたコンセプトは生活圏の文化の影響が大きいと思う。彼らは楽しむのが本当にうまい。同じことをやろうと思っても絶対にできないと思う。よそはよそ、うちはうち。

2015-05-09 | Posted in デザイン, ライフ, 開発No Comments » 

 

情報ソースをまとめておく

情報のインプットは難しい。無計画にやると際限なく時間を使ってしまうし、やらなければ有益な情報を逃してしまう。なのであらかじめ習慣的に使う最低限の情報ソースをまとめておくことにした。日常的にこれらから情報をとりいれ、それ以上はできるだけ時間を使わない。定期的に見直して不要なものや足りないものは調整する。


最新情報

・デザイナー/エンジニアブログ:feedly
・デザイン系ニュース:feedly
・技術系ニュース:feedly
・一般ブログ:feedly
・producthunt:thenews
・desginernews:thenews
・hackernews:the news

コミュニティ/イベント

・イベント:Compass, dot.
・コミュニティ情報:Slack, StackExchange

基礎情報

・書籍
・固定良サイト:pocket

2015-05-06 | Posted in デザイン, ライフ, 開発No Comments »