バスフィッシング用ルアーの一種である「スピナーベイト」のプロモーションサイトを制作しました。デザイン、コーディング、コンテンツ企画など含めて、ぜんぶ自分で行いました。
https://shimotsumagari.github.io/spinner-bait/
今回は、このサイトをどんな目的、どんな意図で作ったかを書き記しておこうと思います。Web制作の学習をはじめたばかりの方、Progateを終えて次になにをすればいいか悩んでる方などの参考になれば幸いです。
目次
なぜこのサイトを作ったか
このサイトを作った理由は大きく3つありまして、以下のとおりです。
- 単純にスピナーベイトが好きだから
- ライブラリやCSSアニメーションを使った「動き」の実装の習熟のため
- モダンな開発環境の構築の学習と習熟のため
順に説明していきます。
【理由1】単純にスピナーベイトが好きだから
まず、いちばん大きな理由はスピナーベイトというルアーが好きだから、です。
僕が生まれてはじめてバスを釣ったハードプラグがスピナーベイトであり、数多あるバスフィッシング用ルアーのなかで最も好きなルアーです。スピナーベイトがどんなルアーかを知りたい方は、ぜひこちらのサイトを見てみてください。
「ワイヤーベイト」と呼ばれる、ワイヤーを折り曲げて作った形状に、およそ魚とは似ても似つかないフォルムが特徴的なこのルアー。
人間が見ると「こんなのに魚が食らいついてくるのか？」と疑問に思いますが、驚くことに、バスはこのルアーにちゃんと食いついてくるんです。
そのヘンテコな形と、それでもバスがちゃんと食ってくるという点、それからアクションが基本的に「ただリールを巻くだけ」というシンプルさがあり、僕はこのスピナーベイトが好きなのです。
以前、Moroさんという方が作った民芸品「赤べこ」のプロモーションサイトを見たときに、いつか自分も自分が好きなものを勝手にプロモーションするサイトを作ってみたいと思っていたので、ちょうどいいタイミングだと思い、作ってみた次第です。
【理由2】ライブラリやCSSアニメーションを使った「動き」の実装の習熟のため
これまで、当ブログでは、僕がWebのエンジニアリングの学習を進めていくなかで制作してきたサイトについて紹介してきました。
そのなかでWordPressを使ったサイトの実装や、静的なページのコーディングについては着々と数をこなし慣れてきてはいたのですが、サイト内で動きをつける実装はほとんどやってきませんでした。
今後のビジョンとして、表面的にすごくよく動くサイトの実装スキルはそんなに尖る必要はないと思っていますが、最低限のこと（よくあるサイトの動きを表現できるくらい）はできるようになりたいと思いました。
そこで、ボリューム的にはペライチでもいいので、「とにかく動くサイトを作ろう」と思い至り、よく動くサイトを作ってみました。実際にサイトを見てもらえれば分かると思いますが、過剰に動きます。
これはそれがベストなデザインだと考えているというよりは、単に「動かしてみたかったら、動かしている」というだけです。
動かす方法としては、動くサイトを作るのに一般的に用いられるJQueryなどのライブラリや、CSSアニメーションを活用しています。
このサイト制作を通して、
- キーフレームアニメーションの作り方、設定
- 各種ライブラリの実装（スライドや、ふわっと現れる表現など）
の理解がより深まったなと思います。
【理由3】モダンな開発環境の構築の学習と習熟のため
これまで作ってきたサイトでは、生のHTMLと生のCSS、生のjsファイルという、超レガシーな古き良き開発環境でしばらく書いていました。
しかし、フロントエンド周りのいろんな記事や本を読むと、今は開発環境がどんどん進化しており、それにより効率化もどんどん進んでいるということを知りました。
そこで、一気にとは言わずも、少しずつ開発環境をアップグレードしていきたいと思い、今回はタスクランナーのgulpを使って、以下のような環境で書いてみました。
- Sass自動コンパイル
- Pug自動コンパイル
- CSS及びJavaScriptは自動ミニファイ
- ファイル及びディレクトリの監視とタスク実行
- ビルド状況はBrowserSyncでライブプレビュー
特に、BrowserSyncは初めて使ってみたのですが、めっちゃ便利でした……。これまで、ファイルを更新したらわざわざ【⌘+R】でブラウザを更新して確認していたので、自動でリロードされるのが本当に便利だなと。
Pugは閉じタグ忘れがなくなるし、コンパイル後にHTMLが綺麗に整形されるのでなんとなく気持ちがいいです。今回はペライチだったでの、importやmixin、extendsあたりの機能は出番がなかったのですが、今後はこのあたりも使いこなせるようになりたい。
今回の環境構築によって、
- node.js、npm周りの理解度が上がった
- タスクランナー（gulp）がある程度使えるようになった
あたりがレベルアップしました。
……ただ、生のHTML／CSS／JSに比べるとだいぶ進歩したとはいえ、おそらく上記の環境は今より3〜4年くらい前の、2015年くらいの環境だと思います。
このあたりの進歩がめざましいのが、フロントエンド技術なのだと思うので、少しずつでも情報をキャッチアップして、早く今の標準的な環境を整えられるようになりたいです。
ゼロから学習すると、新鮮な驚きがたくさんある
ぱっと見、「ちょっと、いろいろ調べないと作り方が分からない」くらいのサイトを作っていると、分からないことを調べながら作る必要があります。すると、日々いろいろな学びが得られます。
そこで強く感じたのが、以下のツイートの内容です。
完全にゼロから学習していると、「これ、別にGitで管理する必要なくね？」→検索→「.gitignoreというのがあるよ」→「めっちゃ便利やん」、みたいな新鮮な驚きがたくさんある。
— シモツ (@shimotsu_) November 14, 2018
基本独学なので、解決策はググるか本を読むしかないのですが、それで解決策を知るたびに、「こうすればよかったのか…！」と毎回新鮮な驚き、発見があります。Gitで管理をしなくていいファイルを.gitignoreに追加すればいいことなんかは、まさにその典型。
そして、結局これの繰り返しなんだと思います。
次なる目標
夏からほぼ毎日何らかのコーディングをしてきて、小規模な静的なページのコーディングとちょっとした動きをつけるのはできるようになってきました。そこで、次はもう少し規模の大きなサイト（WordPressをAPI化して使ってみたい）を作ってみたいと思います。
その後は、これまでの個人制作、仕事での制作を含めたポートフォリオを作ります。
また、年明け以降をめどにJavaScriptのフレームワーク（Vue.js）の習得のために学習していこうと予定してます。
というわけで、引き続き学習のようすはブログで発信していきますので、ぜひチェックしてみてください。
コメントを残す