ももさいと運営ブログ

乃木坂46の大園桃子さん非公式ファンサイト「ももさいと」の運営ブログです。

乃木坂46の特設サイトで学ぶモダンなWebサイト作り

乃木坂46の4thアルバム「今が思い出になるまで」がついに発売されました!今回発売に際して、公式の特設サイトが開設されています。

www.nogizaka46.com

乃木坂ちゃんの公式Webサイトはちょっと古い感じ(苦笑)ですが、こちらの特設サイトはクオリティが高くて、とてもきれいです。少し画質を落としたgifアニメですが、次のような感じです。

乃木坂46 4thアルバム 今が思い出になるまで特設サイト
乃木坂46 4thアルバム 今が思い出になるまで特設サイト

モバイルでみても綺麗なデザインとなる、いわゆるレスポンシブウェブとなっています。

乃木坂46 4thアルバム 今が思い出になるまで特設サイト(モバイル)
乃木坂46 4thアルバム 今が思い出になるまで特設サイト(モバイル)

HTMLのソースをみると色々な技術を使っているようなので「調べて何かブログを書こうかな」とTwitterでつぶやいたところ、情報系の学生さんから「自分の趣味で知識を深められると思うと楽しみ」とコメントをいただいたので、紹介記事を書いてみます。

HTML、CSS、JavaScriptについて

Webサイトの開発技術についてゼロベースから解説するとキリがないので、HTML、CSS、JavaScriptはある程度知っていることを前提とします。全く知らない方に向けて平たく説明すると、HTMLはWebサイトのページを作成するための技術(マークアップ言語)、CSSはWebサイトのデザインを整える技術、JavaScriptはWebサイトに動きやロジックを持たせるための技術(プログラミング言語)です。

基礎的な書籍はたくさんありますが、個人的にはFirefoxを作っているMozillaが出している以下のドキュメントで十分だと思います。

developer.mozilla.org

HTMLのコードをみる方法

ツールが必要で大変なのでは?と思う方もいるかもしれませんが、Google ChromeやFirefox、Edge/IEなどのブラウザは開発者モードというスイッチがあり、誰でも簡単にHTMLをみることができます。F12キーを押すだけです。(スマホだとできず、PCのみです)

Google Chromeの開発者モード(F12)
Google Chromeの開発者モード(F12)

モバイル表示

スマホなどのモバイル表示を確認したい場合は以下で切り替えられます。

スマホ表示に切り替える
スマホ表示に切り替える

実際に切り替えるとこんな感じです。

モバイル表示
モバイル表示

モバイル端末の切り替え

端末の種類も選べるので、色々なプレビューがテストできます。就活先の会社のサイトがもしモバイル表示とかしてなかったら、ちょっと気にしたほうがいいかもしれませんね(ォィ

モバイル端末の種類
モバイル端末の種類

要素の選択

実際のページにある要素がHTMLのどこに定義されているのか、目で追うのは大変です。開発者モードで以下をクリックするとWebサイトの要素を選択して、そのHTMLタグをフォーカスしてくれるので、これで簡単にマッピングが取れます。

要素の選択とHTMLタグ
要素の選択とHTMLタグ

さて、これでHTMLを読む準備ができました。ちなみに、この開発者モードはCSSやJavaScriptもみれます。

「今が思い出になるまで」のサイトで使っているもの

一般的にCSSやJavaScriptの定義は通常、次のように定義して、ファイルを取り込みます。

<link rel="stylesheet" href="hoge.css">
<script src="hoge.js">

乃木坂ちゃんのサイトをみると、以下の定義でtypeを明示していました。

<link rel="stylesheet" type="text/css" media="screen" href="xxxx.css">
<script type="text/javascript" src="http://stats.g.doubleclick.net/dc.js"></script>

イマドキのHTML5ではtypeは書かずに定義できます。
(参考:head には何が入る? HTML のメタデータ - Web 開発を学ぶ | MDN

以上より、これらのファイル名をみることで、おおよそ、どんな技術・ライブラリを使ってみるのかみえるので、紹介します。(定義はタグの中にあります)

vivus.js

SVG画像にアニメーションを加えてくれるライブラリです。

vivus.js - svg animation

vivus.js
vivus.js

アクセスしたとき最初に出てくる「N46」のアニメーションで使っています。

N46
N46

slick

carouselと呼ばれる画像などを切り替えるためのライブラリです。

slick - the last carousel you'll ever need

こんな感じ。

slick
slick

以下の部分などで使っています。

slickを使っている部分
slickを使っている部分

Remodal

モーダルダイアログのライブラリです。

Remodal v1. The modal done right.

Remodal
Remodal

メニューで使ってます。

Remodal
Remodal

Webフォント

サイトのフォントはGoogleフォントの「Noto Sans JP」でした。

Google Fonts + Japanese • Google Fonts + 日本語

Noto Sans JP
Noto Sans JP

フォントは要素を選ぶと表示されます。

フォント確認
フォント確認

style.cssで定義されていました。

style.css
style.css

以上、「今が思い出になるまで」の特設サイトが利用している技術の紹介でした。便利なOSSライブラリを使ってモダンなWebサイトを作ってますね。

おまけ

最後に宣伝ですが、私が作った大園桃子さんのファンサイト「ももさいと」もモダンな技術を使って開発しました。特設サイトにはさすがに負けますが、心を込めて桃ちゃん風に可愛く仕上げたのでみてもらえると嬉しいです。

momosite.jp

ももさいとのページ(モバイル)
ももさいとのページ(モバイル)

ももさいとのページ
ももさいとのページ

少しですが、技術的なことを以下でまとめています。

blog.momosite.jp