参考サイトの研究は、印刷&壁貼りが分かりやすい!

さてワイヤーフレームを作ってデザイナーさんに発注するにあたって考えなければいけないのが、サイトに掲載するコンテンツとデザインのテイスト。今回クライアントから「事業内容と合ったもので」との要望はあるが、デザインの方向性やコンテンツ内容に関してはお任せいただいている。

携わったことのない業界だということもあり、売れていそうな競合他社サイトに共通する掲載コンテンツやデザインを調査し、傾向を知ることから始めた。
さてここからが今回の本題。

複数の参考サイトを見ていると【あるコンテンツがAというサイトではページ上部に表示されているがBというサイトではページ中程に表示されている】という様なことは常にある。スクロールしてその部分だけを表示して見比べることは可能だが、それでは「ページ上でその位置にそのコンテンツを持ってきた制作者の意図」までは分からない。
また、参考サイトを複数見比べたいと思っても、マルチディスプレイを使ってせいぜい2サイト、3サイトが限界だ。そこで今回やったのが、「サイト全体をプリントアウトて壁に貼る」ということ。

アナログなやり方だが、これであれば5、6といった参考サイトの共通コンテンツとページ内での記載場所を俯瞰することが出来る。マーカーで色分けすれば、2つ以上のコンテンツの記載場所を把握することも可能だ。非常に有益だったので、サイト制作の際はルーチン作業として取り入れたいと思う。
一点、備忘録。
「壁貼り見比べ」を行うためにはサイトを見た目そのままプリントアウトしないといけないのだが、これが思いの外出来ない。A4の紙に超巨大に表示されたり、反対にスクリーンショットが1枚に収まり、ミクロサイズになってしまったり。試行錯誤があったが、たどり着いたのがGoogle Chromeの拡張機能「Fireshot」で「ページ全体をキャプチャ」し、そのまま印刷するという手順。注意点としては、Fireshot上で全て完結させること。

Fireshot.png

Fireshotのスクリーンショットを保存画面で「印刷」をせずに「画像として保存」をして、Windowsのフォトなり何なりで印刷しようとすると、失敗するので注意が必要だ。
「画面そのまま印刷」に関して参考にさせていただいたのがこちらのサイト。
https://blog.mudora.jp/?p=4761
ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です