コーポレートサイトが生まれ変わります③ 〜ワイヤーフレーム篇〜
お久しぶりです！広告事業部に所属している工藤です🙋♀️
ありがたいことに案件進行で忙しくしておりましたら、
いつの間にか時間が経ってしまいました…。
サイト公開も近づいてきており、焦って発信しております！(笑)
当初は、進捗レポートのつもりだったんですが、
更新が滞りすぎて、大きくかけ離れてきました。
実際はもうテストアップ段階で、公開に向けてのラストスパート中です！💦
▼初回記事はこちら
▼前回記事はこちら
今回も制作フローをおさらいしましょう。
＜制作フロー＞
1, ヒアリング
2, サイトマップ
3, ワイヤーフレーム制作
4, デザイン制作
5, 撮影
6, コーディング(実装)
7, デバック
8, 公開！
本日は「ワイヤーフレーム」についてご紹介していきます🙋♀️
UIはこの段階でほぼ固まりますし、
ここからデザインが始まっていると言っても過言ではありません。
ワイヤーフレームっていったい何？
デザインを作る前に、各ページの構成・レイアウトを決めるものです。
伝えたい情報の順番を決めるだけでなく、
・画像やボタンを置くかどうか
・文字量や文字の大きさは適切か
・ユーザー動線
などを検討していきます。
工藤的「良いワイヤーフレーム」と「悪いワイヤーフレーム」
私自身の経験談として、デザインフェーズに進めることを急いで
「ざっくりの流れはあってるし、いったん大丈夫かな〜。」
「テキストはあとで考えよ〜」と軽い気持ちで確定してしまうと、、、。
そのあとでデザインや実装での修正回数が重なり…痛い目にあいます😭
このフェーズでの1番のポイントは
「完成を想像できるくらいに解像度を高めること」と、考えています。
「テキストってこの文章量で大きな過不足はない？」
「ユーザーがどこをクリックすればよいか、わかりやすくなってる？」
「文字や画像のサイズは適切？読みにくくない？」
などなど、各要素を疑問を持ちながらチェックしていくことが重要です。
実際のやりとりを公開！
ここまでがワイヤーフレームの役割と心構えでした。
では、実際のやりとりを見ながら解説してきましょう！
▼大公開！これが初期ワイヤーフレーム！
綺麗にレイアウトされていて、とてもよかったのですが
何点か気になるところもあり、修正のお願いをしました🙇♀️
▼工藤の戻し（一部）
・パーパスの文字がPC 1画面におさまらないので、文字を小さくする
・セクションのタイトルはダイナミックに見せる目的で全て大文字に変更
・事業紹介は横に2つ並べない、縦に並べて大きく見せる
・2つの事業紹介より上に、全体像を説明するパートを加える
・事業名が英語だけではわかりにくいので、日本語を小さく入れる
・この後各ページに遷移するパートなので「view more」のボタンを入れる
・仮テキストを作成して、ワイヤーにはめてもらう
▼そして、こちらがFIX版のワイヤーフレーム！
見比べてもらえると、ビフォーアフターで結構変わっているかなと思います。テキストまわりの影響かもしれませんが、解像度も高くなっているのがわかりますでしょうか…？
ここまで決めてから、やっとデザインフェーズに移っていきます！
みなさんもワイヤー作るときの参考にしてみてください。
本日のまとめ
・ワイヤーフレームはほぼデザイン
・想像力がめちゃくちゃ大事
・遷移がある要素は、ユーザーがどこを押せば良いのかわかる構成にする
・テキストは仮でもいいから内容を一度入れてみる
本日はここまで✨
次回はデザイン制作&撮影について記事を書いていきます！
CIのネタバレ防止と、工藤の業務量の都合で、残りの記事はサイト公開後になるかもしれません🙇♀️
またお会いしましょう！
FOR YOUのお仕事事例はこちらから
お仕事のご相談お待ちしております。
▼問い合わせ先
株式会社FOR YOUでは
一緒に働く仲間を募集しています。
FOR YOUでは、下記ポジションを積極募集中です！
「なんか面白そう...」と思った方は
お気軽にお問い合わせフォームやTwitterよりDMをお送り下さい。
皆様のご応募、心よりお待ちしております。
Twitter：https://twitter.com/FORYOUInc
HP：https://foru.co.jp/