ワイヤーフレームを作ろう

こんにちは。なりです。

急に寒くなってきました!!

そろそろ冬服の準備が必要ですね!

コートを出さないといけないです。

ワイヤーフレーム!!???

ワイヤーフレームとは

今日はカフェサイトのワイヤーフレーム作成について書いていきます。

まず、ワイヤーフレームって何!???

聞いたことない言葉です!!

調べた内容をまとめてみました…

一言で表すと、

「サイトの設計図」です。

設計図といってもレイアウトの設計図です。

先生曰く、だいたいモノトーンカラーで作ることが多いそうです。

白黒で作ることによって、

配置がおかしくないか、

その要素が本当に目立っているかが明確に分かるそうです。

そして、複数人で作業するときには、

ワイヤーフレームがあることによって、

チームに共通認識が生まれ、

作業がスムーズに進むそうです。

確かに、言葉で指示をもらうよりも、

図があった方が分かりやすいですよね!!

ワイヤーフレームを作るためのツール

ワイヤーフレームの概要が理解できたので、

実際に作りたいのですが…

どうやって作りましょう!??

無料作成ツールがいろいろあるみたいです!

先生から紹介いただいたものを書いておきます。

「cacoo」

複数人での共同編集や、

バージョン管理もしてくれるみたいです。

便利そうですね!

いつか使ってみたいです。

今回は先生指定の、

adobeの「illustrator」で作成しました。

illustratorでもよくワイヤーフレームを作るそうです。

illustratorの操作にも慣れておきたかったのでちょうど良かったです。

情報整理

作業に入る前に情報整理をしておきたいと思います。

情報整理の順番は以下の通りです。

  • ピックアップ

→ そのサイトに必要な情報を洗い出していきます。

  • グルーピング

→ ピックアップした情報をグループにまとめます。

  • ランキング

→ 情報のグループに優先順位をつけていきます。

この作業をしていきたいと思います。

ピックアップ

前回の記事で情報のピックアップを簡単に書いていましたが、

改めて記載していきます。

  • ナビゲーション
  • ロゴ
  • フルーツケーキ
  • メイン画像
  • フッター
  • お知らせ欄
  • 住所
  • 電話番号
  • 営業時間
  • 定休日
  • 季節のおすすめケーキ
  • SNS
  • ケーキメニュー
  • アクセス
  • お店について
  • イベント情報
  • 店舗の地図
  • カフェメニュー
  • お店の名前

こんな感じでいろいろ出ました。

まだまだありそうです…

競合サイトにある項目を調べて、

書くのもピックアップの有効な方法です。

リサーチにもなりますね。

グルーピング

ピックアップした項目をグループにまとめていきたいと思います。

  • 店舗情報

→ 住所、電話番号、定休日、営業時間、店舗の地図、アクセス、お店について

  • メニュー

→ ケーキメニュー、カフェメニュー

  • ナビゲーション

→ ロゴ、お店の名前

  • メイン画像

→ フルーツケーキ、季節のおすすめケーキ

  • 情報

→ お知らせ欄、イベント情報、SNS、季節のおすすめケーキ

グルーピングしました。

グループにしましたが、

ランキングや配置の過程で、

必要であればバラバラにしても良いそうです。

ランキング

今回は「トップページに載せる」ということを考えながらランキングをつけました。

  1. 店舗情報
  2. ナビゲーション
  3. メイン画像
  4. 情報
  5. メニュー

やはり観光客向けに作っているサイトなので、

店舗情報やナビゲーションの優先順位は高いです。

一方、メニューはトップページではなくメニューだけのページを作成して、

トップページからリンクを飛ばした方が良いように思いました。

結果

いろいろ考えた結果、以下の項目に決めました。

  • ナビゲーション

→ ロゴ

→ 別ページへのリンク(アクセス、お店について、メニュー、イベント情報)

  • メイン画像

→ フルーツケーキ(スライドショーにする)

→ お店について

  • メインコンテンツ

→ お知らせ欄

→ イベント情報(5周年記念のイベントのみ載せる)

→ 季節のおすすめケーキ

  • サブコンテンツ

→ 店舗情報(住所、電話番号、定休日、営業時間)

→ イベント情報(バナーにする)

→ SNS

  • フッター

優先順位を頭に入れて作業を行うことにより、

スムーズに進みました。

配置

いよいよillustratorを使って、

ワイヤーフレームにしていきたいと思います。

手書きでだいたい書いて作業した方がやりやすいです。

実際に作ったワイヤーフレームがこちらです。

PC版とタブレット版、スマホ版を作りました。

PC版の説明を上から順番にしていきます。

  • ヘッダー

→ ロゴとナビゲーション

  • メイン画像

→ スライドショーにする

  • メインコンテンツ

→ お知らせ欄

→ お知らせ欄の下には5周年記念イベントの告知画像

→ 季節のおすすめケーキ紹介(アイキャッチ画像と説明を入れる)

  • サブコンテンツ

→ バナー ×2

→ SNS

→ 店舗情報

  • フッター

優先順位が高いものを目立つ位置に配置しました。

これにてワイヤーフレーム完成です。

まだまだ足りないところや、

作ってみての反省もあると思うので、

それらも今後記事にしていきたいと思います。

では、長くなりましたが、

読んでいただき、ありがとうございました。

次回は、デザインカンプやコーディングのことを書いていきたいと思います。