せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No.33  Mouseコンピューターのある生活

■概要

BTO(Build To Order)パソコンメーカーの、パソコンでどのようなことが出来るのか、生活がどう変わるのかを紹介する番組サイト。人気声優さんを起用し、パソコンを使った機能をさまざまなジャンルで紹介し購入に繋げる。

 

 

■ターゲット

・btoパソコンに興味がある人
・10〜20代(ゲームやイラスト・写真加工等のコンテンツ、若手タレントを起用することで、btoパソコンに興味を持ってもらいたい)
・声優のファン

 

 

■視点

パソコンのサイトは、クールでスタイリッシュな見せ方を意識したデザインが多いと感じているが、イメージキャラクターの女性の見せ方やあしらいによるサイトの雰囲気の作り方、商品購入へどのように繋げていくのかに着目する。

 

 

■FV

メインである商品のpcと女性が並ぶ写真がヒーローイメージで表示される。どんな機能があり、どういうことが出来るのかを知ってもらい興味を持ってもらうため、トップページにAboutへのリンクが配置されていてクリックに繋がりやすい。

 

 

■特徴

マウスコンピューターのイメージカラーである黄色と黒がベースとなっていて、太めの枠線やあしらいを所々に入れることで、ポップな印象になっている。スペシャルインタビューのページは、図形のあしらいをたくさん背景に配置していて、文章が多い分あしらいを入れることでアクセントになりポップな印象になる。

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

 

 

 

トップページのナビゲーションは、2行に分かれて表示されているが、下の白文字しかクリックが出来ないので、黄色の部分までクリックエリアとしてもいいのではないかと感じた。

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

 

 

 

スクロールすると丸いハンバーガーメニューにナビゲーションが格納される。大きめの丸だが、図形のあしらいやサイトの雰囲気にマッチしていて、トンマナが統一されている。クリックすると一瞬右側に引っ込んだように見せて左へ表示されるアニメーションが付けられていて、ちょっとした遊び心を感じる。

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

 

 

・STORY 今までの記録

グリッドデザインでこれまでの配信内容を紹介。太文字に太枠線とゴツゴツした印象になりそうだが、写真以外は黄色と黒だけで色を統一し、点線やテキスト内でフォントサイズを調整することで、圧迫感を感じずにサイトの雰囲気に馴染むデザインになっている。

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

 

 

■フォント

YakuHanJP

 

■配色

・テキスト:#ffe000,
・ベースカラー:#ffef07,  #000

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

 

 

 

 

 

Webサイト:Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

せろりのセオリー/ Webサイト100選 No.33 Mouseコンピューターのある生活

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén