【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

cacooでのワイヤーフレーム作成が捗る無料ステンシル3つ

  • 2013.06.27
  • 2013.07.24
  • 技術
cacooでのワイヤーフレーム作成が捗る無料ステンシル3つ

こんにちは、ロックウェーブの岡本です。

みなさんはワイヤーフレームはどんなツールを利用して作成されていますでしょうか?

私は以前このサイトでも紹介された「cacoo」を利用しています。

以前の紹介記事→ディレクター必見!Cacooで作るワイヤーフレームがとても便利(https://www.aiship.jp/knowhow/archives/8594)

この「cacoo」、意外と使われていないのですが、「無料ステンシル」を活用することでかなり手軽にワイヤーフレームを作成することができます。

今回はcacooを使うならぜひダウンロードして欲しい「無料ステンシル」を3つご紹介いたします。

紹介の前に・・・

そもそもワイヤーフレームとは?

ワイヤーフレームとは、「ページ内の配置をまとめた、サイトの間取り図」です。

ペンで書く線(ワイヤー)で間取り図(フレーム)を作ることから、「ワイヤーフレーム」とよばれています。

このワイヤーフレームを作ることで、メインのコンテンツとサイドバーの間隔や幅、画像のサイズなどをデザイン前に決めていきます。

この作業を行うことで、グリッドデザインのような「まとまりのあるサイト」のデザインが作りやすくなります。

「ワイヤーフレーム」や「wireframe」で画像検索をすると、国内外様々な方の作成されたワイヤーフレームを見ることができます。

google画像検索「ワイヤーフレーム」

ワイヤーフレームの作成方法

google画像検索を見ていただくとわかると思うのですが、ワイヤーフレームの作成方法は様々なやり方があります。

最もシンプルで、多くの方がされているやり方は「手書きで作る」ことです。

A4~A3サイズのノートにペンで大まかなイメージをラフスケッチしていきます。

手書きである程度のイメージを作成することができれば、お客様に見せるためにデータ化していきます。

その際に使われるツールとして、よく用いられるのは以下の5種類です。

  • Excel
  • PowerPoint
  • Fireworks
  • Cacoo
  • Illustrator

この中で私がよく利用しているのは、Cacooです。

Cacooにはこの後紹介するような無料ステンシルが数多くあるため、手軽に作成することができるので個人的にオススメなツールです。

Cacooの便利な無料ステンシル3選

Site-it Stencil

まず紹介するのは、コンテンツの要素をステンシル化した「Site-it Stencil」です。

サムネイル一覧や、フォーム・リスト表記など9種類の要素をステンシル化しています。

このようにステンシルを3つ並べるだけで、ショッピングサイト風のワイヤーが作成できました。

グループ解除などを利用することで、サイト内コンテンツのワイヤー作成を手軽に実現できるのではないかと思います。

Site-it! Stencil:https://cacoo.com/store/items/10188

寸法線

2つ目は要素のサイズを指定する際に使う「寸法線」です。

デフォルトでも寸法線は入っているのですが、このステンシルを入れると更に便利になります。

なぜならこのステンシルには、デフォルトのものには無い形のものが入っているのです。

それがこちらになります。

「Header 2」と画像の部分を指している矢印が、寸法線で利用できるステンシルです。

このように幅のしていだけでなく、マークアップやスタイルなどの注釈にも利用できる便利なやつです。

寸法線:https://cacoo.com/store/items/10136

Yahoo Design Kit シリーズ

最後はcacooがリリースしている、「Yahoo Design Kit シリーズ」です。

「なぜ今まで入れなかったんだ」と後悔すること間違いなしの優れものです。

これはYahooが公式で配布しているDesign Kitをステンシル化したもので、バナー広告からグリッドまで幅広くカバーしているステンシルです。

グリッドは950px幅の2カラムまでがステンシルとして入っていますが、拡大縮小を利用すれば下のような変則的な3カラムデザインも作成できます。

長文のサンプル文章やスライダー・カレンダーが使えるようになると、ワイヤーフレーム作成がかなーり捗るようになります。

残念な点としてはグリッドの種類が6種類しかないことがありますが、それを差し引いても便利すぎるステンシルシリーズです。

Yahoo! Design Stencil Kit – グリッド:https://cacoo.com/store/items/10124

まとめ

いかがでしたでしょうか?

ダウンロード数を見ていると、意外とストアを活用されている方が少ないのかなという印象を受けます。

せっかく便利で無料なステンシルが配布されていますので、cacooをお使いの方はぜひストアにアクセスしてみてはいかがでしょうか。

cacoo Store(https://cacoo.com/store/)

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+