WEBディレクター未経験の私がWEBサイト分析してみた～「わたしの舞台裏」編～

こんにちは、ふくだです。

ロジカルスタジオという大阪にあるWEB制作会社のWEBディレクターとして働いています。

現在とある案件で、スマホで見たら面白そうなインパクトのある参考サイトを探しています。

今回は、どんな流れで参考サイトを探し、WEBサイト分析しているのか、#わたしの舞台裏　をお見せしたいと思います！

1．どんなサイトを探そう？

今回は、とある秘密の案件（なんか怪しい言い方）の構成を、お客様にご提案することになっています。

できれば時間かけずに「いい感じのサイト作るんで、全部任せてください！」って言いたいところ。

でも、お客様が仮に「任せます！」と言ってくださっても、できたサイトデザインを見ると、出てくる出てくるご要望・ご意見・・・

心の中（いや、めっちゃ希望のサイトあるから、お任せちゃうやーーーーん！むしろ明確な希望デザイン持ってるやーーーーーん！）

お客様は、WEB制作会社の人間よりもWEBサイトをたくさん見ていない分、白紙の状態では希望が出てこないんですよね。

なので、具体的に「サイト構成はこんな感じで、デザインや動きはこんな感じ」って見せて、デザインの方向性を決めていくことが多いんです。

デザインを作ってから（時間をかけて作ってから）、希望のデザインじゃないから、やり直し！ってなると、時間もかかって（コストがかかって）、精神的にもきつい。。。

「いい感じのサイト」ってやみくもに探すと、良いサイトが多いので、楽しくてつい時間だけが経って、案件に繋がるサイトが集まっていない！！！って絶望感を覚えます。

なので、今回「スマホで見たら面白そうなインパクトのある参考サイト」に限定して、探したいと思います。

「スマホで見たら面白そうなインパクトのある参考サイト」ってざっくりすぎるし、山のようにたくさんあるので、もう少し分解すると、

・一目で「あっ！」と思わせるようなデザイン
・カテゴリー検索がある（もしくは、カテゴリー検索に応用できそう）
・ボタンの動きがおもしろい
・イラストがついている
・おもしろいけど、ごちゃついてなくて、わかりやすい

上記５つのポイントに該当するサイトをピックアップしたいと思います。

2．探すなら、まとめサイト！

ここまで探したいサイトが明確になれば、サイトの取捨選択ができ、必要な参考サイトが集められそうです。

Google先生に直接聞いてもいいのですが（訳：Google検索してもいいのですが）

今回は下記の参考サイトがまとまっているサイトにお世話になることにします。

sps collection
https://spscollection.com/

こんな感じで、スマホのファーストビュー（最初に画面いっぱいに映る部分）が並んでいて、直感的に探しやすいです。

3．選んだ参考サイト①：食生活アカデミー

食生活アカデミー
https://www.kewpie.com/academy/
Category：グルメ、飲食
Color：白 – White/赤 - Red

・イラストと文字で、カテゴリーが分かりやすく表示されている
・赤字だけど、目がチカチカしないのは、イラストが線画でカラー割合が低いから
・英語表記もありグローバル対応
・矢印があることで、下層ページがあることが明確
・角が少しまるく、まじめだけど、とっつきやすい
・あえて漢字を使わない箇所をつくり、壁を低くしているが、幼稚な印象にならないように配慮されている漢字の選定

こちらはPC画面。

このボタンにカーソルを当てると・・・

ボタン部分の色が反転し、イラストもクローズアップし、
さらに、ファーストビューもボタンごとに切り替わります。

「ボタンをホバーする＝このボタンにクローズアップ＝イラストもクローズアップ」という、動作と同じ意味合いをもったデザインになっていて、個人的にとっても好きです。

オススメ記事も、イラストとタイトルで一目でわかりやすい工夫。

そしてどんな内容が下層ページに書かれているかを簡単に一行で説明しているのも、先を読むかどうか判断する材料になり、ユーザー目線で作られた見やすいサイトだと言えると思います。

4．選んだ参考サイト②：リライル会計事務所

リライル会計事務所
https://relyl.com/
Category：財務、金融
Color：灰 – Gray/黄 – Yellow

目が大きいイラストで、インパクトはあります！
特にPCでカーソルを動かした時の目の動きには、心の奥がモゾモゾするような感じ（どんな感じ）。・・・不思議な感覚に陥ります。

スマホでも目が勝手に動けば、おもしろそうだなと思いました。

くす玉を割った時に振ってくる紙吹雪がパラパラ降ってくる中で、「R」ちゃんが、ぴょこぴょこ動いてかわいいです。

svgで埋め込んでいるのでgifアニメを作って埋め込むので、そこまで高い技術は必要なく実装できそうですね。
問題は、このgifアニメを作ること・・・もっと言えば、このキャラクターを描ける腕が必要・・・

ロジカルスタジオには、私の似顔絵を描いてくれたように、イラストが描ける人がいるので、頼んでみようと思います！

5．選んだ参考サイト③：PIAZZA LIFE

PIAZZA LIFE
https://www.media.piazza-life.com/
Category：メディア、広告
Color：灰 – Gray/白 – White

画面下部のスライダー写真を、右にスライドさせると、、、

上のイラストも移動する仕掛け！
この動きもスムーズで、ついついスライドショーを無駄に動かしたくなります。
何か、応用できそうですね。

6．選んだ参考サイト④：LIFE LABEL

LIFE LABEL
https://lifelabel.jp/
Category：メディア、広告/建築、不動産
Color：ベージュ – Beige/白 – White/黄 – Yellow

町のイラストが、とっても楽しそうな雰囲気を醸し出しています！
（ちょっと感想が簡素になってきたのは、疲れてきた訳ではありませんよ。決して。）

カテゴリーのまとまりを一つの「町」として、マップ形式に表示すると、ユーザー側も楽しく検索できそうだなと感じました。

7．選んだ参考サイト⑤：ソニーミュージックグループ新卒採用2020

ソニーミュージックグループ新卒採用2020
https://saiyo.sme.co.jp/graduate/20/
Category：エンターテインメント
Color：多色 – Multiple Color

雑誌のコラムでよく見るようなイラストやアメコミ風のイラストがMVに使用されていて学生の遊び心をくすぐる仕様。

サイト訪問の旅に、約5種類のMVが楽しめるのも、面白い。何度もサイトを訪れる人へのおもてなし精神！

8．選んだ参考サイト⑥：ソニーミュージックグループ新卒採用2022

ソニーミュージックグループ新卒採用2022
https://saiyo.sme.co.jp/graduate/22/
Category：エンターテインメント
Color：多色 – Multiple Color

2Dでアメコミ風なイラストだが、パララックスという技法で、スクロールしていくと、イラストのある場所に近づいていく、、、

職種診断メーカーで、二択の質問に答えていけば、向いている職種を紹介してくれる画面遷移は、ボタンの回数が増えるが画面で行う選択は一つなので、億劫に感じない工夫。

毎年面白いサイトのソニーグループ。2023卒も期待！

9．選んだ参考サイトまとめ

食生活アカデミー
https://www.kewpie.com/academy/

リライル会計事務所
https://relyl.com/

PIAZZA LIFE
https://www.media.piazza-life.com/

LIFE LABEL
https://lifelabel.jp/

ソニーミュージックグループ新卒採用2020
https://saiyo.sme.co.jp/graduate/20/

ソニーミュージックグループ新卒採用2022
https://saiyo.sme.co.jp/graduate/22/

今回は6サイトですが、もう少しお客様に提案するには、数がほしいですね。

でも疲れたし、時間もきたので、今日はここまでとします。

参考サイト探しはキリがないので、時間を区切って探すことをオススメいたします。

いかがでしょうか？

サイト分析の裏側というより、参考サイト探しの裏側っぽいですね。

案件の参考サイトをしつつ、noteも書けたので、一石二鳥でよかったです！私は、お得大好き大阪人なもので！


調べたり、分析したり、文章書くのがスキな方は、
ぜひロジカルスタジオに！

ではまた次回お会いしましょう！