金沢シェアハウスのホームページ制作日記 #3 ワイヤーフレーム制作

金沢シェアハウス1

金沢のシェアハウスのホームページ制作をリアルタイムで発信中

僕の地元である石川県金沢市に2021年5月にシェアハウス G-eight HOUSE がオープンします!
現在クラウドファンディングもしてますので、興味ある方はぜひご支援ください^^
(2021/04/24)現在80%達成でもう少しです!ぜひご協力お願いします・

(※全回はアーカイブからご覧いただけます)

#3 ワイヤーフレームを作成しよう

ワイヤーフレーム

本回はワイヤーフレームの作成です。前回に言語化した物をイメージとして具現する工程です。設計図から骨組みを作る感じですね。

具体的にはデザインツール figmaをつかって大体の構成を作っていきます。この工程で重要なのは
”デザインを作るときに要求事項に漏れがないか” を確認することです。せっかく前回に要求事項を決めたのにデザインに落とし込む際にそれを満たしていなかったら意味ないですよね。この作業はその抜け漏れを削る工程です。

全ページに対してこのワイヤーフレームが必要ですが、今回はトップページについてのワイヤー制作を綴っていきます。

要件定義からページ内のセクションを決める

セクションを決める

前回の要求事項を少し振り返ってみましょう。


ホームページの目的

入居者応募の増加、意欲ある若者や挑戦する若者の問い合わせ。

シェアハウス設立の目的
  • 学と体験をシェアする
  • 北陸の若者に”選択肢”を増やす場所を提供するため
  • 若者に北陸に来てもらうため
  • 地方と都会の情報格差を是正するため
シェアハウスのコンセプト

入居者応募の増加、意欲ある若者や挑戦する・知識や経験をシェアし、共に成長していけるCo-living施設

G-eight HOUSE ならではの特徴
  • 入居は面談を実施
  • 滞在期間は最短1ヶ月から可能
  • 定期的なイベントや勉強会を開催

これらの内容をトップページに落とし込むためのセクション分けをします。
僕は次のように分けました。

  1. 全体コンセプトセクション → 若者に北陸に来てもらい地方と都会の情報格差を無くす
  2. 画像スライダーセクション → 実際の屋内の雰囲気を知ってもらう
  3. シェアハウス自体のコンセプトセクション →金沢で、学と体験をシェアできる。
  4. ポイントセクション → 特徴を書く
  5. ニュースセクション → イベントなどを公開
  6. 連帯コミュニティーセクション → (別途、ヒアリングして必要と分かった)
  7. コンタクトセクション → お問い合わせページへ遷移してもらう。

これらを決めた後にfigmaでワイヤー作成していきした。

figmaを使ってワイヤー作成。

基本的に四角、丸、テキスト位のレベルで骨組みを作ります。実際の作っている最中の様子は省略しますが、実際に以下のような物ができました。

一応全体の画像も載せておきます。今回はfigmaの使い方は紹介しませんが直感的に非常に使いやすくしかも無料なので本当におすすめです。共有も簡単にできちゃいます。参考としてこのワイヤーフレームをクリックしてご覧いただけます。

なお、このツールをしっかり学んでみたい!という方はデイトラのデザインコースというのがおすすめです。

金沢Toppage

まとめ

大体このワイヤーを作るのに構成の案を考える時間も含め4,5時間かけています。”あぁこのレベルでいいのか!” と思うかもしれませんが、ここでも抜けもれが出ないかしっかり気をつけてくださいね!!
なお、本記事はサイトを作りながら書いてるので、最終的に出来上がるものは結構違う場合もあるかもしれません。その時は、このワイヤー制作に抜け漏れがあったと思ってください笑

それでは一旦、担当者様に連絡して記載項目に抜け漏れがないか、レビューをいただいてきます^^笑

クラウドファンディング募集中です!

最後になりますが、現在(4/24)クラウドファンディングで実際の物件のための費用としてクラウドファンディングを実施中です!残り20%で達成ですので皆さんご協力お願いします^^