スマホサイトのデザインに役立ったアプリ3選

AdobeXDで読み込んだPSDがスマホでスクロールできないよ~の解決策です。

つないだはいいけどサイズもおかしいしスクロールもできないし何これ?って思って何時間か試したらなんかできたまとめ。

っとそのまえに、スマホサイトのデザインに役立った重要なアプリ2つの話をさせてください。

1、上下に長いページをスクロールキャプチャできるスマホアプリ

無から有を生めるほどの大天才じゃないので、まずは競合他社のスマホサイトを分析するところからはじめました。

このとき、いちいちスクリーンショットをとっていると画像がすごい枚数になりますよね…

あとでPhotoshopで置いてみて画像の配置の雰囲気とかを試すためにも、できればぺらっと長い一枚の画像で出力できるアプリを希望

そんな、ネットゲームのチャットログみたいにスクリーンショットから縦長に全部切り貼りしてつなげるなんて作業もういや!笑

そこで、上下に長いページをスクロールキャプチャできるスマホアプリを探しました。

今回は、スクロールキャプチャに対応したアプリ5本を紹介する。サイトやアプリとの相性の差はかなりあるので、あらかじめひとつのアプリに絞るのではなく、利用のたびにそれぞれを試してみて、もっともよい成果が得られるものを使うことをおすすめする。

私はAndroidでして、「Web Screenshots for Android」に落ち着きました。

紹介されている「LongScreenshot」なども試したのですが、どうやらこれらは画像で書き出しができない。

一昔前のガラケーがもっていた、”画面メモ”みたいな使い方になってしまうようなのです。

このWeb Screenshots for Androidは画像で出力できるので、PCに送信してPhotoshopで開くことが可能です。

しかし!あまりに縦に長いサイトだと途中で切れてしまうことも。

それでも、画面メモのように、スマホの中でしか見れないものではなく、ペラっと長い一枚のスクリーンショットをPCへ渡せるというのは良いものです。

2、手書きのワイヤーフレームを触って動作を確認できるアプリ

POP by marvel」というアプリです。

AndroidもiPhoneもOK。

手書きのワイヤーフレームを画像で読み込み、その画像のどこを触ったらどのページへ飛ぶというような設定をすることができるアプリです。

自分の手書きのボタンを押すと次の手書きのページがでてくるなんてちょっとシュールですよね。でもわかりやすい。紙とペン派にはいいと思った。

 

余談ですが、このワイヤーフレームなどのインターフェースデザインについて、米英のデザイナーは…

  • Webデザイナーの64%が紙とペンでブレインストーミングをしており
  • インターフェースデザインはSketch34%、Photoshop29%であるものの、なんとHTML/CSSが15%も??

という調査結果がでております。

More than 4,000 designers responded to this survey of today’s best software for digital design. Powered by @Typeform and designed by @Hyperakt. Read the results here.

この件について、

それより意外だったのが、国外のスタートアップとかだと、結構デザインすっとばして、とりあえずHTMLのフレームワークで見た目もそれなりに作る所は多いんですが、全体の15%程度がその流れなのかなってのが、気になりました。

ここ最近に限った事ではありませんが、やはり良く聞かれるのは『海外のデザイナー達はどんなデザインツールを使っているか』というお話、ツー?

という声もあり、「国外のスタートアップ」では、「デザインすっとばして」「とりあえずHTMLのフレームワークで見た目もそれなりに作る」ことがあるらしい。

だるかったので私も次はワイヤーフレームをHTMLで作ろうかな……いやSketch……

3、PSDファイルの時点で実機プレビューできるソフト

本題のAdobeXDです。

PCでAdobeXDを起動した状態でUSB接続するとスマホで確認ができる。

これのおかげでどれだけ心が安らいだことか…(実際の画面でどうかというところが一番大事だからさ…)

しかし、AdobeXDではアートボードが複数ある状態で接続するとうまく見れなかったりします。

その解決策を1ヶ月前にFacebookに書いたので、こちらにも記録しておこうとおもいます~

AdobeXDでPSDファイルを表示するとスクロールできなかったりサイズがおかしかったりする件

Adobe XDでプレビューしようとすると

・スクロールしない
・縦長の小さいサイズで表示される
・画面が真っ白になる

などの問題が発生する件について。

アートボードが複数あること、レイヤーが複数あることなどに起因するようなので、いっそ画像を統合してしまうと楽に表示できる。

しかし、統合→別名で保存→XDで開くを繰り返すため、最善の方法ではないです。

手順1:アートボード複製〜画像統合

1 アートボードを選択し、複製します。

2 複製したアートボードをスマートオブジェクト化します。

3 スマートオブジェクトのレイヤーのサムネイルをダブルクリックして、当該スマートオブジェクトだけを新規psbファイルを作ります。

4 この段階ではまだレイヤーやグループが存在するので、 グループの統合 で、レイヤーがレイヤー1枚だけになるようにします。

5 アートボードだった過去があると、デザインの上下左右に透明な余白ができるので、 イメージ>トリミング>透明ピクセル で、透明な部分を削除します。

6 イメージ>カンバスサイズ で、完成したときのサイズになっていることを確認します(たとえば750px)。なっていなければトリミングで合わせてください。

7 レイヤー>画像を統合 で、背景レイヤー1枚だけにします。

8 ファイル>別名で保存 で、photoshopファイル形式にします。

手順2:デスクトッププレビューまで

1 AdobeXDでpsdファイルを開きます(ファイルからも開けますが、finderから右クリックでアプリケーションから開くでもできます)。

2 左下のレイヤーアイコンを押します。カンバスにbackgroundだけが表示されている状態になっていると思います(photoshopでアートボードを複数所有した状態でxdで開いてしまうと、ここでカンバスではなくアートボードがでます。アートボードをダブルクリックするとカンバスがでます)

3 左のツールバーから アートボードツール を選択すると、サイドバーに表示するスマートフォンのサイズ選択が出てくるので、例えばiPhone6を選びます。すると、左のカンバスだったところが、アートボードになり、iphone6が表示されます。

4 左のツールバーから、 選択範囲ツール を選びます。

5 画像を動かして、青い枠線とデザインの左上を揃えます。(※実は整列ボタンがあるのでそこを押すとすぐ左上に揃います。)

6 右上のアイコンの、再生ボタンのようなもの(デスクトッププレビュー)を押します。

7 青い枠で選択している部分だけが表示されることを確認します(この時点では、スクロールもできないし、画面幅も合っていません)

手順3:Adobe XDできちんと表示する(デスクトッププレビュー)

1 右のサイドバーの横幅(W欄)を、iPhone6に合ったサイズに調整します。具体的には、W:750からW:375にします。

2 青い枠と横幅が一致しているのを確認して、デスクトッププレビューをします。すると、画面幅は一致しているはずです(まだスクロールはできない)

3 左のサイドメニューにでているiPhone6の左についている < を押して、アートボードを表示させます。

4 アートボードから iPhone6 を選択すると、画像が切り取られたように表示されます。

5 右のサイドバーの縦幅(H)をH:667とかになっていると思うので、ここを「横幅350のときの縦幅」をPhotoshopで調べて入力します。(たとえば4446px)

6 すると、ファーストビューとスクロール領域の間が、青い点線で表示されるはずです。

7 デスクトッププレビューを行うと、ついにスクロールができます!!!

手順4:スマホで表示する

1 スマホでAdobeXDのアプリをダウンロードし、インストールします。

2 PCでAdobeXDを開いている状態で、スマホとUSB接続します。

3 なんか接続オプションがいっぱいでた人は、AdobeXDで表示するように選択してください。(Androidの場合、充電とか色々選択肢が出るかもしれません)

4 AdobeXDで調整したデスクトッププレビューと同じものがスマホでも見れてスクロールもできるようになっています。

 

おわりに

結局、時期的にAdobeXDはスマホでのプレビューにしか使えなかったですが、

今はSketchと張り合うように伸びてきているようなので、次はモックアップとか試してみたいと思います。

あ、あの「どんなツールでWebデザインしているのか?(2015年版)」の調査結果が気になる方は是非この記事でご確認ください。

ここ最近に限った事ではありませんが、やはり良く聞かれるのは『海外のデザイナー達はどんなデザインツールを使っているか』というお話、ツー?