画面遷移を紙とペンとカッターとノリで実現中

画面遷移というのは「クリックすると、どのページに移動するか?」ということ。
Webサービスやアプリを作る上ではとても重要な事です。
2016-09-05 16.39.26

ユーザーが迷わずに移動することができるかということもここでチェックしなければなりません。またチームで作るときには共通の認識を持つということでも重要です。

それらを簡潔に実現するために「プロタイピング」ができるサービスがいくつかあります。パーツを組み合わせて画面構成そのものから作り出すことができるものもたくさんあります。

いくつかチェックしてみたのですが…。この画面を作るということ自体が億劫になってしまいました。操作になれる必要があるし、ガラッと変更させるのが難しいし。
つまりは「大体できている」というものをWeb上で表現するのに適していて、「あれこれ悩みながら作る」というのは適していないわけです。

じゃー、何もないところから画面設計していくのにもっとも優れているものは…。
「紙とペン」
これが一番ですね。完全にアナログですが。

書いて消して、書いて消して、ときには捨てて。
恐らくは「手を動かす」という点も脳を刺激しているのでは?と思ったりもします。
(タイピングも手は動かしていますけどね)

ここ数日間、書いて消す作業をひたすら繰り返してきました。
そしてようやく納得の行く画面構成が出来上がってきました。

次の作業は、画面全体から移動してく流れを作っていきます。
その作業のために「変化していく部分」を書いて、カッターで切ります。
それを「貼ってはがせるノリ」で仮止め。パチリと写真に収めます。

変化させる度に写真に収めることを繰り返して、たくさんの「画面」が作り出されていきます。
さてさて、最初はこれらを「画像の一部にリンクを貼る」ことができる「イメージマップ」を利用としたのですが、ちょいと面倒だったのでプロトタイピング作成WEBサービスの「Prott」を使うことにしました。
写真を取り込んで「ここをクリックしたら、この画面」を簡単に実現することができます。

対象とするものを「スマートフォン」「Web」など選べるのですが「Web」の場合は1280×800というサイズに固定をされています。
元になる画像がそれ異常大きい場合は、画像の1280×800の中央部分が表示されます。上下はスクロールで動けるのですが、左右には移動できません。
つまりは左右が大きいと「はみ出して操作できない」という状況になるのです。

私がテストした時にまさにこの状態、iPhoneで撮影した画像がでっかく拡大されて表示されてしまって困りました。
対応策としては「デバイス」の設定を「カスタマイズ」にして画像と同じサイズを指定するか、次の方法でRetinaサイズに対応させます。今回はこの方法で対応しました。

WebのプロジェクトをRetina対応画像(@2x)で表示する

写真が微妙にずれているの画面遷移する度にガコッとずれてしまいますが、なんとかできた。
「共有」することでURLだけでチームに診てもらうことができます。(パスワード設定可能)
これで動作イメージ簡単に伝わりますね。

ということでジワジワ進んでおります。

開発進捗

Posted by ライトニング 今村 吉宏


PAGE TOP