WebデザインをiPhoneで作った話。

もくもくデザイン部@札幌 #1

昨日、もくもくデザイン部@札幌 #1 に参加してきました 。
もくもく会なので、各々好きにデザイン作業をされてた中、自分は表題の通り、iPhoneでWebデザインをしてみました。

その時やったことの覚書。

何故iPhoneで作ったのか

理由はいくつかあって

  • パソコン持ち運ぶの重い
  • 特にやることもないので、新しい事をしてみたかった
  • 所持してるノートPCよりiPhoneXsの方が値段が高い
  • 性能足りてそうだし、iPhoneで何かできるかもしれない
  • iPhoneだけで出来る事をどんどん増やしたい

こんな感じの理由。

実際iPhoneXs、めっちゃ性能良いと思うんですよ。
ただ、それを使いこなせない自分が許せないので、色々試すには良い時間かもしれないと思って挑戦してみました。

こんなのつくりました

適当につくったもの

山路のぼってるー!

色々アタリで入れてるので、その辺適当。
iPhoneでここまでできちゃうのスゲーって単純に思う。カッチリしたデザインには向かないけどカンプレベルなら十分ですよね。

クライアントのホームページ作る際にディレクション側の人とかが、iPhoneやiPadとかで作れば

  • クライアントと話しながら仮のデザインが出来上がる
  • その場で仮撮影したものを入れ込んで見せれる(本撮影は別日に
  • 作ったデザインはPhotoshopやIllustrator等のデスクトップアプリへ送信できる

できることが増える上に、デザイナーとのやりとりをもっとシームレスにすることも可能かなと思う。

また、デザイナーは、伝言ゲーム状態のものを形にするだけなので、伝わらなかったり情報不足なことで修正が続き、結果的に時間をムダにする可能性もあるので、ディレクションの質を上げる事ができるんじゃないかなと思います。

どんな工程で作ったのか

大まかにこんな感じ

  1. 写真撮影
  2. 写真編集
  3. デザイン

写真撮影

iPhoneXsなので画質は問題なし。
なんか使えそうな素材が無いかなぁと、勉強会に着くまでの道すがら撮影してました。

ちょうどアサガオが咲いてたので、こいつを使うことに。

写真編集

使ったのはPhotoshop Express
iOSで使える、簡易写真編集アプリで、インスタみたいなオシャレエフェクトを搭載してます。

今回はアサガオの色のみカラーにしてみました。非常にオシャレですね。
ワンタッチ編集でここまで出来るのは最高。

デザイン

今回使ったのは Adobe Comp
大分前から存在してたアプリですが、未だ使った事が無かったので試しに使ってみました。

予想以上に便利で、細かい設定はできないものの大まかなラフデザインにはとても良い。

  • フォントを変更できる
  • 文字間調整可能
  • 描画ジェスチャーで、スピーディにオブジェクトを配置
  • レイヤー階層を作れる
  • レイヤーロックができる
  • コピー&ペーストできる
  • アートボードサイズを自由に設定できる
  • デスクトップアプリにコピー可能

等、結構いい感じの機能を持っていました。

ただ、ちょっとやりにくい面も確かにありました

  • 画面が小さいのでジェスチャーがめんどい
  • 画面を横に傾けてもアートボードはそのままなので、横長デザインの全体把握がしづらい
  • アウトラインを画像ファイルに出力する際の画質が荒い

細かい作業は、デスクトップアプリで作業して整えるのであれば、全然問題ないかなとも思います。

総評

旅先で思いついたアイディアをまとめるには、アリっちゃアリ。

最初からPCが使えるのであれば、圧倒的にAdobe XDの方に軍配が上がります。

AdobeXDとの大きな違いを感じたのは3つ

  • モバイルで編集ができるか否か(XDはPCでのみ編集可能、Compはモバイルアプリのみ
  • 制作速度の違い(XDにはショートカットキーがある点有利
  • PDF書き出し等に機能制限アリ(Comp

ただやはり、パソコンを持ち歩かなくてもiPhoneやiPadで作ることができるので、場所を選ばずアイディアを形にすることができるので、そういった意味では生活を豊かにする良いアプリなんじゃないかなと思います。

Adobeさんは、こういった表に出づらいアプリを数年で開発打ち切りにすることもあるので、残り続けるか、この立ち位置をAdobeXDが引き継いでくれることを願ってます。

この記事を書いた人

CORUN

「たぶん、できるんじゃないかな。」
それがコンセプトであり、なりたい自分の一人。
Webのお仕事やっております。