*

簡単にWebサイトモックアップをつくる方法


9472736176_10602b4f12

仕事としてWebサイトやE-commerceサイトの提案をされている方なら恐らくいつも直面する問題だと思いますが、今回はWebサイトのモックアップを簡単に作る方法です。

私の場合は、

第一段階でエクセルやパワーポイントを使ってイメージを作成し、クライアントと完成形を共有し、

第二段階でHTMLで機能なしのフレームをつくり、ここでまたイメージを共有、

それから中身の作成に入っていきます。

が、毎回毎回こんな綺麗にプロジェクトが進むわけではなく、当然 なおし が入るわけです。その一つの理由は、ブラウザで見る場合とエクセル/パワーポイントで見る場合ではやはり少し見た目に差がでるからです。

一度オンラインのモックアップ作成ツールを使ったことがありますが、重すぎて仕事になりませんでした。。(確かpaint projectという名前だったと思うのですが、今検索したらなくなっていました。違う名前だったかもしれません。。)

今となってはエクセルやパワーポイントを使う方法で慣れてしまったので、共有しているイメージの齟齬による戻り作業は必要な作業だ!と納得させていたのですが、そんなことはないですよね。

工数が増えれば費用がかかる。費用がかかれば次のプロジェクトにかける予算が減る。次のプロジェクトができなければ売り上げ増が見込めない。負のスパイラルに陥ります。

そんな状況を解決するサイトを発見しました。簡単にモックアップを作成できるサービスのリストです。

mock-up1

http://www.webcreatorbox.com/en/tutorials/dummy-contents/

サンプルの文言やタイトルを入れたりすることができます。私の場合は、コンポーネントを作ったら、”ここにコンテンツ” とか ”ここに説明文” とか説明をいれて凌いでいますが、これらのサービスをつかうと、実際に文字を入れてくれるので、文字量の増減により見た目がどうかわるかなどを明確に判断することができるというわけです。

mock-up2

http://www.webcreatorbox.com/en/tutorials/dummy-contents/

Fake User Avatarというサービスはフェイクのユーザー写真を使うことができます。トップページにFacebookのウォールをいれる人がいると思いますが、そんなときに使えます。

どんどん便利なツールがでてきますね。便利なツールをどんどん使わないと、どんどん加速する世間の開発にかかる時間の期待値に答えられなくなります。つくづくエンジニアは日々勉強・日々情報収集だと思いました。

Photo: All rights reserved by http://www.flickr.com/photos/100059155@N04/

Ads by Google

Ads by Google

関連記事

無料のSSL Let’s Encrypt をWindowsサーバに使ってみる

Googleがhttpsサイトを推奨するようになっている昨今、WebサイトのSSL対応を迫られて

記事を読む

『Google トレンド』急上昇ワードの新しい表示方法

Googleが無料で提供している『Googleトレンド 急上昇ワード』ですが、表示方法を変更する

記事を読む

2014年、デスクトップで閲覧するウェブサイトはこうなる。スマートフォン時代のサイトデザイン予測。

スマートフォン経由でインターネットを閲覧している人が日に日に多くなっているのはもはや周知の事実で

記事を読む

no image

《朗報》GoogleAnalytics アカウント復活方法

Webサイトを運営している方、お客様のWebサイトをメンテナンスしている方に朗報です。なにかの拍

記事を読む

no image

WUFOO ウーフー とは

私用で簡単なアンケートフォームを作る必要があり、簡単にフォームを作成できるサービスを発見しました。

記事を読む

no image

スマートフォンで横長のテーブルを扱う方法

table,table tr,table td,table th{border:1px solid

記事を読む

no image

LinkedInの新アプリ。メールに発信者のプロフィールを紐付け

LinkedInを使っている方に朗報+警笛です。> LinkedInとはなんぞや? Li

記事を読む

no image

2014年に流行るウェブデザイン5+1個

洋服がそうであるようにウェブデザインにも流行りがあります。今年はフラットデザインが猛威を振るいました

記事を読む

Webサイトでペナルティにならない引用文の設置の仕方を GoogleのMatt Cutts氏が解説

ご存知のとおり、他のサイトの文章をコピペするとGoogleやBing,Yahooなどの検索エンジ

記事を読む

Ads by Google

Ads by Google

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑