ブラウザ上でワイヤーフレーム制作をしてみた

こんにちは。安里です。
今回は、ブラウザ上でワイヤーフレーム制作ができる
MockFlowを使ってファイブスター公式サイトの
ワイヤーフレームを制作してみます。
簡単ではありますが、使い方も紹介しつつ
制作していこうと思います。
まずは下記のURLからMockFlowのサイトへ
MockFlow
https://mockflow.com/
青いボタンの「Get started for FREE」を押して 次へ進んでください。

今回は、Freeプランで制作します。一番左側のボタンをクリックして進みましょう。

MockFlowは、登録後に利用することができます。
氏名・メールアドレス・パスワードを入力して新規登録をしましょう。
 

新規登録が完了すると、上記のような画面になると思います。
+を押して早速ワイヤーフレーム制作に進みましょう。
 

「Choose UI type」の下に一覧でテンプレートが出てきます。
今回はWebのワイヤーフレームを制作するのでメニューバーから「Web」をクリックしてください。

今回は、「Hand drawn UI」をクリックして自由に制作していきます。

新規ページの左側に使えるツールが一覧で並んでいます。
テキスト、サークル、ボタン、アイコン、画像などワイヤーフレーム制作で必要なものを
ドラッグ&ドロップで好きなところへ配置してみてください。

途中までですが、ファイブスター公式サイトのワイヤーフレームを
制作することができました。
サンプルサイトとして制作したので余白やサイズは無視して制作しました。

いかがでしょうか。
ワイヤーフレーム制作は、手書きやエクセル・プレゼンテーションソフトなどを
使用して制作している方も多いと思います。
他にもワイヤーフレームツールは色々ありますが、
手軽に始められるMockFlowでウェブデザインについて学べると思います。
Freeプランでは1つのプロジェクトしか制作することができませんので、
気に入ったのであれば有料プランへ登録することをお勧めいたします。
 
 

関連記事

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

募集概要・エントリー

TOP