初めてのワイヤーフレーム！ヒーコLPの「設計図」お見せします
こんにちは、伊藤です。
先日noteで、ヒーコのLPサイトが公開しましたとご報告させていただいたのですが、今回は、制作過程の一部をこの記事で書いていこうと思います。
Web制作には欠かせないワイヤーフレーム。みなさんご存知でしょうか？
ディレクションを担当することになり、せっかくならワイヤーフレームの制作をやってみよう！と機会をいただいたのでチャレンジしました。私は今まで、グラフィックを中心に制作してきたのでワイヤーフレームは初挑戦です。
おそらく、ネットでよく見かけるワイヤーフレームとはかけ離れているかもしれませんが、そもそもWebページ全体のイメージを「見える化」するための設計図になることが重要なので、作り方は自由かなと思っています。
それでは、ヒーコではどんなワイヤーフレームを制作したのかを実際のデータも添えてお届けします！
web制作に欠かせないワイヤーフレーム
ワイターフレームは、デザインをする前にレイアウトの方向性やイメージを「見える化」するための設計図です！土台がしっかりできていないと、デザインの方向性が曖昧になったり、視線誘導がイメージできなかったり、伝えたいことが伝わらないサイトとなってしまうので、ワイヤーフレームの制作はとても大切のものだということを知りました。
先ずは手書きで大枠を作成
先ず、デザインツールで作業する前に手書きでラフを作成しました。
手書きの方が、頭の中が整理されてイメージが沸きやすくなるので情報量が多い案件の場合は、必ず手書きでラフスケッチを書くと決めています。精度はそこまで考えずに、ササッと何回も繰り返し描くことが大切だと思っています。
今回、デザインは外部のデザイナーさんへ全てお願いすることになっていたのでデザインの部分は考えずに進めました。
ワイヤーフレームのブラッシュアップ
次に、パソコンへ向かいます。ワイヤーフレームの制作ツールは色々とありますが、操作方法を学んでいる時間はなかったので、馴染みのイラストレーターで作っていきました。
「お客様に何を伝えたいのか」
「このサイトを読み進めた時、お客様にどんな感情になってほしいのか」
「結果どういう行動をとってもらいたいのか」
などの情報を盛り込んで、デザイナーさんへお送りしました！このワイヤーフレームを元に、こちらの要望を汲み取っていただき、素敵なLPサイトになりました。（伊藤さんありがとうございます！）私より遥かに経験のあるデザイナーの方だったので、たくさんの学びがありとても良い経験ができました。
お気に入りはこちら
デザインはお任せだったのですが、特にお気に入りの部分は、ファーストビューです。
お客様がサイトを見た時、そのまま読み進めるかを3秒で判断すると言われています。そのため、ファーストビューでしっかりインパクトを与えて、心を掴めることが大切になってくるので、ここは特にこだわりました。
写真のセレクトは弊社のお菓子担当みづき氏にもご協力いただきお客様の目を惹く写真をふんだんに盛り込んでおります！
LPサイトが公開されてからまだまだ日は浅いですが、たくさんの人に見ていただけたら嬉しいです。
◇ サイトはこちら（み・て・ね）
振り返り
振り返ってみて、ワイヤーフレームの大切さを再認識できました。そして、ボスからの数々のフィードバックを経験したのもこの時が始まりです。このぐらいいいだろう、なんてそんな甘ったれた気持ちは通用しません！笑
お客様の立場になって考えることが大切なんだということは、昔から理解していましたし意識しながら働いてきましたが、こんなにも必死に考えたのは初めてかもしれません。
3回目の投稿になりますが、記事を書き終える頃に毎回思うこと。我々のボスは私たちが成長できるように日々さまざまな角度から「学び」と「気づき」をくれてるなと。
今この環境にいれることに感謝をしつつ、これからも頑張っていきます。
本日も、最後までありがとうございました。
プロフィール
いとう ともな
デザイナー歴4年目の2021年5月にヒーコへ飛び込んだら世界が変わった人。デザイン経験を活かしながら、とにかくなんでもやってみる精神で様々な「学び」を吸収中。ボスの心を射止めたちび助という天使(犬)と暮らしています。
◇ ヒーコ のWebサイト