No.030「サンエックス」のからくり

No.030 サンエックス- ワンピースの楽譜 | Webサイト100選

サイト概要
サンエックスの公式ウェブサイトです。サンエックスは、キャラクターデザインを通じて、世界中の人々に生活提案できる企業を目指しています。サンエックスキャラクターのグッズやイベント情報などを載せています。

No.030 サンエックス-ワンピースの楽譜 | Webサイト100選

ここが魅力！
・「壁紙プレゼント」では、いろんなキャラクターのPC、スマホ用の壁紙が無料でダウンロードできる！

No.030 サンエックス-ワンピースの楽譜 | Webサイト100選

・「イベントカレンダー」では、日付ごとにイベント情報をまとめられているため、確認しやすい！

No.030 サンエックス-イベントカレンダー-ワンピースの楽譜 | Webサイト100選

・「エンタメ一覧」では、キャラクターのアイコンと知りたいエンタメのカテゴリ（BOOK・音楽など）を選択するだけですぐに見つけられる！また、リンクが張ってあるため、すぐに購入ページに飛べる！

No.030 サンエックス-エンタメ一覧-ワンピースの楽譜 | Webサイト100選

構成
・FV、header、nav
【幅769px以上（PC）】

No.030 サンエックス-FV(769px以上)-ワンピースの楽譜 | Webサイト100選

【幅768px以下（スマホ）】

No.030 サンエックス-FV(768px以下)-ワンピースの楽譜 | Webサイト100選

→どの画面サイズ幅であってもハンバーガーメニューデザインである。ブランドのロゴマークがページの一番上かつ中心にあり、サイズが大きいため目立つ。カルーセルパネルデザインであり、キャラクターが複数いることもあってか、パネルの総数は14枚であり、多いと感じた。
カルーセルパネルの下には、全ページカテゴリのうち、一部のカテゴリをナビゲーションとしてアイコンで表示している。このナビゲーション一覧は、画面サイズ幅が769px以上で見た場合は、スクロールしていくと、元々headerにあったロゴマーク、検索アイコン、ハンバーガーメニューと合体して画面上にフェードインで固定表示される。（というclass名で作成している）

No.030 サンエックス-navi-change-header-ワンピースの楽譜 | Webサイト100選

・footer
【幅769px以上（PC）】

No.030 サンエックス-footer(769px以上)-ワンピースの楽譜 | Webサイト100選

【幅768px以下（スマホ）】

No.030 サンエックス-footer(768px以下)-ワンピースの楽譜 | Webサイト100選

→PC画面サイズ表示を基準として、left、center、rightと3つのグループに分けて作成している。
カテゴリ名の上にマウスをかざすともともと引かれていた下線が消える。テキストリンク（カテゴリ名）は、マウスをかざしてもカーソルが指マークに変わるだけだが、テキストの右側に記号アイコンを入れることで、ページを移動する、リンクが張られていることが分かるようになっている。SNSアイコンの色を全てメインカラーで統一している。

使用パーツ・アイコン

バナー

分析・考察
■ターゲット：若者、女性
[理由]文章に♪、☆などの記号があったり、パステルカラーデザインなど、可愛いと感じる要素が多い、また、アニメーションが多いから。

■特徴：
・トップページに戻るたびに「Now Loading」画面が出てくるのは若干ストレスに感じる可能性があると考える。
・「ENGLISH」は、レイアウトが異なるENGLISH用のページである。アニメーションはなく、シンプルなデザインである。

No.030 サンエックス-ENGLISH-ワンピースの楽譜 | Webサイト100選

・「ページトップへ戻る」ボタンは、矢印の周りの囲みのみが手書き風になっている。footerの直前の位置までスクロールされると、footerに移動し、footer内では右上に固定表示される。

No.030 サンエックス-ページトップへ戻るボタン-ワンピースの楽譜 | Webサイト100選

・SNSのみをまとめたドロワー（※1）を配置している。「SNS」のアイコンをクリックすることでナビゲーションが出現する。
※デザイン、アイコンサイズ的には目立っているわけではないため、見逃す可能性もあると考える。

No.030 サンエックス-ドロワー（開く前）-ワンピースの楽譜 | Webサイト100選

No.030 サンエックス-ドロワー（開いた後）-ワンピースの楽譜 | Webサイト100選

※1　画面外から「引き出して」表示するナビゲーション。

・文字サイズ：詳細ページの見出し（「イベントカレンダー」、「SNS公式アカウント一覧」）は38px。説明文は16px。footerの見出し（「サンエックスネットTOP」、「サンエックスネットショップ」）は20pxで、各カテゴリ名（「SAN-X NETトップページです。」、「サンエックスグッズのお買い物はこちらから」）は16px。

・フォントの種類は、全体的に「Rounded Mplus 1c」が使用されている。太めの丸ゴシック体が特徴のフォント。可愛いという印象を受ける。