ワイヤーフレーム制作

Bootstrapソフトウエア モビライズを使ったワイヤーフレーム制作について

ウェブ制作作業において、必須のワイヤーフレーム。
特にコンテンツ関係者が多数いる場合には、承認を得ていくためにワイヤーは必須の要素になってきます。

通常、コンテンツワイヤーフレームを作成するには、Adobeなどのデザインソフトを駆使するか、ワイヤーフレーム制作専用のWebサービスなどを利用する必要があります。
いずれも時間、コストのかかる作業となり、ウェブ制作全体の工数を大きく押し上げる要素となりえます。
ではこのワイヤーフレーム作成をモビライズでできるのか？方法について見ていきましょう。

改めてモビライズのメリット

無料Bootstrap CMSモビライズ最大のメリットは、豊富なブートストラップブロックにより一気にWebデザイン、Web開発のパートに着手できることです。

アイデアさえあれば、一気通貫でサイトの完成まで持っていけます。しかしながら個人やSMBのサイトならいざ知らず、コンテンツホルダーや利害関係者が多数いるとそうもいきません。

ワイヤーフレームもモビライズで作成し、時間とコストを抑える手法に取り組みましょう。

まずはページ制作に着手

LP制作を例にとり見ていきましょう。

ランディングページのワンカラムブロックもモビライズでは豊富に用意されています。
大枠の構成であれば1日もかからず、ゴールページまでの導線は制作できると思います。

リードコピーや見出し、テキストコピーはダミーで良いかと思います。
Bootstrapブロックをドラッグ＆ドロップでアイデアを自由配置できるのがモビライズの魅力ですね。

LPをコピーして保存

作成したランディングページは、サイトコピーしてオリジナルから複製保存しておきます。
コピーサイトを開いて、テキスト、画像を全てモノクロに置き換えます。
画像はアイコン”dummy”や”images”などのグレー表記でもいいでしょう。

全てモノクロで作成したら、Publishを行い、PCにローカル保存します。
保存したindex.htmlをローカルで開き、ページのスクロールキャプチャソフトでpng画像を保存します。

周囲の余分な余白をトリミング削除して、ワイヤーフレイム画像制作を完了させます。

使用例）ブラウザ：FireFox最新版 キャプチャソフト：Fire Shot

後先になるが、制作スピードは増す

出力できた画像は関係者へ共有します。

フィードバックがあり次第、モビライズソフト上で修正を行っていきます。フィードバックを待つ間、テキストライティングや画像の制作などを並行して行うことができます。

一般的なウェブ制作の手順、順序としては後先になりますが、このタイミングでワイヤーを提出することで、じっくりとコンテンツ検討、クリエイティブ制作の時間を作り出すことができますので、おすすめです。

ぜひみなさんもモビライズを用いたワイヤーフレーム制作に取り組んで見てください。