webサービス卒業製作　その２　モックサイトについて

今日はG's Academyにてコスゲ大先生(@keinkosuge)にAdobeXDなるものを教わる。

いわゆるモックアップサイト(作りたいサイトの外見だけ再現してみる)を作る時に使うツールのようだ。

画像もドラッグして持ってこれるし、先に円形を作っておいて、そこに画像をドラッグすると自動でその円形に切り抜きもしてくれて、大変便利でした。

さらに”画像をクリックしたらこのページへ飛ぶ”というのも、画像の脇に表示されるツマミのようなものを目的のページにドラッグするだけ。iPhone用アプリを作る開発環境XCODEもこんな感じだったことを思い出しました。
試しに作ってみた結果はTwitterに載せました。

webサービス製作をする上でモックアップサイトを作る目的は、簡単に完成予想図を人と共有できること、UI,UXを事前に検証できることでしょうか。もしかしたらモックサイトを使って投資家にプレゼンする、なんて人もいるかもしれませんね。

自分の卒製では、とある既存のWebサイトを大いに参考にするため、「このサイトっぽいのを作ります」という企画書にしました(笑)なのでモックアップには今後もさほど時間をさきません、というかやらないかもしれません。

モックアップにかける時間はケースバイケース、という事にしておきましょう。

他のモックアップを作るツールはこちら。
・Sketch ・Photoshop ・Illustrator ・Affinity ・Figma等々
何が違うのか気になる場合は(Figma以外を)比較しているサイトをご覧ください。

さらに、なんと、モックアップからCodingせずともwebサイトができるというエンジニア殺しのサービスもあるようです。
⚠️　https://studio.design/ja　⚠️
果たして本当にうまく稼働するのか、気になるところです。

エンジニア転職志望である以上は、こういうサービスでうまく稼働しなかった時に修正できる技術者になりたいので、ひたすらCode書くのみです。

E.O.F