Homerun Office

KNOWLEDGE

デザイン企画前の最初のステップ。参考サイトの探し方のポイント教えます!

はじめまして!

ホームランオフィスと一緒にお仕事をさせていただいている制作パートナーのフージーズ(@fujikado_h)です!普段はテモンラボという屋号で個人で活動させていただいています。

デザイン、コーディング、WordPress構築、ディレクション、時には撮影まで・・・幅広く活動しております。どうぞよろしくお願いいたします。

今回は新たにウェブサイトの企画・立案の際にデザイナーがどのような観点でデザインと向き合い、そのための参考になるウェブサイトを探しているのか、実例を元に簡単に流れをご紹介できればと思います!

ウェブサイトのリニューアルや新規制作をご検討されているウェブ担当者の方、必見です!!

デザイナーはどのような視点で参考サイトを探すのだろうか?

ブランドサイトを新規制作することになり、ロックオン柳田からこのような依頼が…

柳田
柳田

なんかいい感じの参考例をいろいろ探しといてくれる?

承知しました!!

フージーズ
フージーズ

miro(オンラインのホワイトボードツール)を活用して
サイト全体のコンセプトをまとめていきます

デザインの大まかな方向性は柳田の方で固まっていたようなので、僕はひとまず実際に想定されるサイトの構成からコンテンツを重視して参考サイトを探してみました。基本的にはお互いにリモートでの作業になるので、オンラインホワイトボードツール『miro』で共有することにしました。

この時点では僕の意図は柳田に伝わっていなかったのです・・・

すると柳田からこのような返信が・・・

柳田
柳田

言わずもがなだったらごめんなさい!
参考サイトの僕の探し方というか、何が参考になるかなっていう、サイトの見方を伝えておきます!

柳田さん、めっちゃやさしい・・・!!

フージーズ
フージーズ

この時点では特に選定した意図を伝えていなかったので、柳田のアドバイスを参考にしつつ、画像のようにふせんをつけて「なぜ、このサイトがいいと思ったのか?」を伝えてみることにしました。

サイトには必ず「意図」が存在する。

すると、柳田の方でも新たに参考サイトが追加されており、ふせんが新たに追加されていました。この時に初めてお互いの意図の見える化ができ、サイト制作の方向性が見えてきた瞬間でした!

柳田も参戦してきた図

では、それぞれが参考サイトを探しているときにどのようなことを考えていたのでしょうか?

ロックオン柳田の場合

  • クライアントの事業を深く理解する
  • 参考サイトの事業がBtoBなのかBtoCなのか誰に向けたものかパッと確認する
  • ブランディング?サービス・紹介?顧客接点やどういった情報提供なのかを判断する
  • デザインは時代の潮流にマッチするか
  • ユーザーファーストであるか、また、運用しやすそうなUI、UXか
  • SEOを考慮できる構成になっているか

フージーズの場合

  • まずは参考サイトを基準にサイトの属性をしぼってリサーチする
  • サイトを見るターゲット層を想定する
  • シンプルで何度も訪れたくなる飽きのこない構成か
  • 操作感の良さ
  • ただカッコいいだけではなく、コンテンツとして成立しているか
  • アニメーションが過剰すぎていないか
  • トップページで毎回、何かしらの変化を感じ取れる構成か
  • 目的のコンテンツを探しやすいか
  • なにか「遊び心」を感じる要素が一つでもあるか

このようにデザイナーによって見る視点は変わってきます。
総合的にまとめていくとそれぞれが大切にしていることが見えてきます。

1. 操作性(UI:ユーザーインターフェース)と体験(UX:ユーザーエクスペリエンス)のデザイン

インパクトのあるキービジュアルやアニメーションは確かに目をひくものがありますが、ウェブサイトはただ、カッコいいだけでは見てもらえません。

よく「このホームページみたいにしてほしい」というリクエストをいただく事があります。ただ、企業様の業態などさまざまなケースが想定されるので、お客様のご意向を汲み取りつつ、最善のご提案ができるように心がけております。

Radioactive Crocs Club
Radioactive Crocs Club

2. トップページを見た時にその会社の事業がわかる構成(レイアウト)

トップページは会社の顔です。
コーポレートのメッセージや事業内容、さまざまな取り組みなどが見えてくるとユーザーに親近感を持ってもらうことができます。

次の「あたりまえ」をつくる。 – ジャストシステム

3. 読み物として成立しているかどうか

ユーザーが何度も訪れたくなるようなウェブサイトにするためにはコンテンツが重要です。

以前はコンテンツよりもページタイトルやディスクリプション(サイト検索時に表示される説明文)を強化することで検索順位を向上させる手法が主流でしたが、サーチエンジンの機能向上により今日ではコンテンツの中身をより重視されるようになりました。

Googleアルゴリズムの仕組みとは?これまでの変遷をふまえて解説
ー HubSpot 日本語公式ブログ

2013年頃より急速に普及した「オウンドメディア(自社メディア)」は現在でも有効な施策の一つです。オウンドメディアを活用することはファンを増やすことにつながり、自社の製品やサービスを広く知ってもらえるきっかけにつながります。

注目企業の事例から学ぼう!オウンドメディアの目的と活用法
ー 株式会社SEデザイン

デザイナーのフージーズが見るウェブサイトのポイント[JAF Mate Onlineの場合]

  • トップページが知りたいジャンルごとに整理されているので探しやすい
    →オウンドメディアにもっとも必要なのは検索がしやすいこと
    →カテゴリー 一覧から記事を見つけやすいかどうか
  • 紙面と連動しているのでウェブで興味を持ってもらえた人には冊子を買ってもらえるきっかけになる
    →結果的に企業のイメージアップにつながり、新たなファンを獲得することができます
JAF Mate Online(ジャフメイトオンライン)|JMO

実際にデザイナーのフージーズが使用している参考サイトのご紹介

MUUUUU.ORG

https://muuuuu.org/

一般的にスマートフォンが普及する前からあるデザインギャラリーサイトです。特にカテゴリー別の検索(業種、デザイン、タイプ別、カラー)の4つから1クリックで検索することが出来るのと、クオリティーの高い日本のウェブサイトも多数、掲載されているのでおすすめです!

Responsive Web Design JP

https://responsive-jp.com/

レスポンシブウェブデザインに特化したデザインギャラリーサイトです。機種別にPC、タブレット、スマートフォン、それぞれの見え方が掲載されているのでデザインの勉強にもなります。

straightline bookmark

http://bm.straightline.jp/

国内はもちろん、海外のウェブサイトも多数取り上げられているデザインギャラリーサイトです。「ただカッコいい」だけではない、コンテンツを重視したウェブサイトが多く掲載されている傾向があります。

Awwwards

https://www.awwwards.com/

CSS Winner

http://www.csswinner.com/

上記の2つは海外のデザインギャラリーサイトですがデザイン性が高く、動きのあるオシャレなウェブサイトが多数、掲載されています。フージーズの視点では主にUI/UX周りやトップページのビジュアルの見せ方などを参考にさせていただいております。

ウェブサイト制作のご相談は私たちホームランオフィスにおまかせください!

現在、ホームランオフィスでは『ウェブサイト制作 オンライン無料相談会』を実施中です!


まずはご担当者様のお悩みを聞かせてください!費用は無料です!
ホームランオフィスが御社の広報を戦略的に支援・バックアップのお手伝いをさせていただきます!!

この記事を読んで「そろそろホームページをリニューアルしたいな・・・」と思われたら、まずは私達とお話しませんか!?お待ちしております!!

ウェブサイト オンライン無料相談会

PICK UP

FEATURE

  • ウェブサイト オンライン無料相談会
  • DTP Transitとホームランオフィスによるオンライン朝礼!!
  • 高枕と出町柳田の音楽が大好きだ
  • 教えて鷹野さん!「Ask Me Anything」

KEYWORD