最終更新:2021/9/29

好きなWebサイトを分析

みなさん、こんにちは。

最近、肌寒くなってきましたね。そろそろ花粉の季節なので、ひどくならないと良いのですが…。

さて、今回は私の好きなWebサイトを色々自分なりに分析してみようと思います。デザインの参考にもなる気がするので、定期的にできたらなと思います。

趣味の延長線上みたいなところもあるのでご了承ください。

ツイステッドワンダーランド公式Webサイト

URL:https://twisted-wonderland.aniplex.co.jp/

まずは以前、私が好きなアプリゲームでも紹介した、ツイステッドワンダーランドというディズニーのゲームの公式Webサイトです。

最初、読み込むとローディング画面から、タイトルがふわっと表示され、ツイステのキャラクターの寮長と呼ばれる人たちが出てきます。とにかくイラストが良いですよね。

色は黒ベースに、黄土色が使われていて世界観をしっかり表現しています。

メニューのタイトルなどに使われているフォントは”democratica”というフォントで、Adobe Fontを使用されています。

キャラクターページでは、寮ごとに選択でき、選択するとその寮のキャラクターが出てきます。最初はモノクロですが、hoverすると色が付きます。キャラクターを選択すると自分で選択するスライドショーになっています。

個人的な感想としては、シンプルだけどちゃんとツイステの世界観を表現していて凄く良いなと思います。装飾などが細かいのでこだわっているなと思いました。

プログラムは苦手ですが、好きなキャラクターなどを紹介するのにこのサイトのようなスライドショーを作ってみたいなと思います。上手くできるかわからないですが…。

刀剣乱舞ミュージカル公式Webサイト

URL:https://musical-toukenranbu.jp/

続いては、いつも定期的に見ている、刀剣乱舞ミュージカルの公式サイトです。

デザインとしては、黒の背景に白文字というシンプルなデザインになっています。アクセントカラーで黄土色が使われています。

先程紹介したツイステのサイトと配色は似ています。

ちなみにミュージカルのロゴは、刀のつばの部分を表現しています。

最初の画面では、毎回新しい公演やDVDなどが発売されるとその画像がスライドショーになって表示されます。

毎回新作公演が始まると、このスライドショーの画像が変わるのもサイトを見る楽しみになっています。

メニューなどに使われているフォントは、”黎ミン”というフォントでモリサワフォントが使われています。

明朝体のフォントで、親しみやすい現代的なフォントになっています。

PC版だとメニューをhoverするとポップアップでカテゴリーが表示されます。

この公式サイトで、公演情報、グッズの購入、キャラクターの情報などミュージカルのことがこのWebサイトでできます。

ファンクラブに入ると、出演者の俳優さんがブログを更新するのでそれを見ることができたり、ファンクラブ限定の待受画像を保存できたりします。

結構頻繁に見ているのですが、とても情報など見やすいなと思います。

ただ、1つ私が思ったことは、刀剣乱舞は刀が主役です。なのでもう少し日本風のデザインでも良かったのではと思いました。ミュージカルのWebサイトはすごくオシャレでかっこいいです。これもこれで好きですが、もしメニューの文字なども日本語にして、和風感を少し出したらどんなサイトになってたのかは気になるところです。

英語にした理由の予想は、アジアツアーなどもミュージカルはやっています。なので海外のファンの人達にも見やすく、分かりやすいサイトにしたのかなと思いました。勝手な想像ですが…。

まとめ

今回は、私が普段見ているWebサイトを分析してみました。

2つとも使われている色が似ていました。(笑) 黒と黄土色は高級感を出したいときに使われる色でもあります。でも同じような色でもデザインは全く違います。

それぞれのWebサイトで使われているフォントも違うので、フォントだけでもサイトの雰囲気が変わるところもフォントの魅力ですね。

また、学校でも同じ課題を出しているけど人によって全然違うデザインができるところも個性があって面白いなと思います。

今後も自分が普段見ているWebサイトを分析してみようと思います。

好きなWebサイトだと見ているだけでも楽しいです。

それでは、また。