作業  |  20240808 -スケッチ作成-

作業 | 20240808 -スケッチ作成-

JOURNAL

本日は、WEBサイトのリニューアル作業に伴う「ラフスケッチ」の作成を。

神奈川県藤沢市に拠点を置くレコード買取り専門店「鎌倉レコード」様より、サイトリニューアルのご依頼をいただき進行している、「作業 | 20240801 -整理整頓-」に続く作業です。

現在進行しているのは、WEBサイトの全体の枠組み(構成)の作成と、それをもとにしたラフスケッチの作成。

まずは、

  • ○ これまで整理した情報、言語化した要素を、どう構成してくかを練りに練る
  • ○ タテに長いWEBサイトの中に、文字や画像をどう配置していくかを検討し、ワイヤーフレームを作成
  • ○ 練った構成がひとつの流れ!?になってるかをチェック

という、ひたすら紙とえんぴつを使った作業をします。

ワイヤーフレームとは?

WEBサイトの骨組みとなる各要素を落とし込んだ、設計図みたいなもの。

ワイヤーフレームを作成することで、構成を視覚的に確認でき、また要素の漏れもなくすことができます。

ここでは特に、サイトを訪れたユーザーが、トップページからどう進んでいくか、どう進んでいってもらうか、というストーリーを意識して作業をします。今回のゴールは「問い合わせ」なので、どのストーリーに進んでも、最後にゴールに辿り着く構成になっているか、途中で行き止まることはないか、慎重にチェックしていきます。 

次に行うのは、ラフスケッチの作成。

絵が下手なので、苦手だし時間がかかるし、何度も書いては消してを繰り返さなきゃならないし…、と自分にとってはものすごく大変な作業です。

もしかしたらこの工程でパソコンソフトを用いるWEBデザイナーさんもいるかもしれません。「またそんな時間かかるやり方やってるの!?」と、言われるかもしれません…。

ですが、ワイヤーフレームを実際のイメージに近づける工程として、スケッチを書くと「思い描いた設計通りになっていない」と気付くことも多く、紙だと消したり書いたりが素早くできるので、ここまでほぼ頭の中で描いていた工程を実際に形にする段階での齟齬? ズレ? を修正していく、という非常に大切な作業です。

ちなみに、ここまで作業としては30%ぐらいが完了した段階。(富士登山で言うと、4号目くらい!?)
でも重要度? 達成度? でいうと、ここまでくれば60%くらいサイト完成に近づいているかと。

▶︎ 鎌倉レコード(現行サイト) https://kamakura-records.jp

下記ラフスケッチ。すごく丁寧に書いた最終案です。
本来はお見せできないくらいラフですので…。