新規Webサイトのリリースについて、その理由と使用プラグインを紹介
みなさま、お元気でしょうか？
僕はというと、忙殺の日々の中、今年の目標の１つでもあった「新規Webサイト」のオープンをしました！
自サイトなので、いろんなことにチャレンジしてみて、たくさんスキルアップできたように思います。
せっかくなので、今回の新規Webサイトを作るにあたって、新規Webサイトをリリースした理由や使用したjQueryプラグインなどを備忘録として残します。
新規Webサイトをリリースした理由
価格帯の変動に合わせた調整
LIVALESTは、創業して約3年となりますが当初のホームページの価格に比べると価格は段階的に上がっています。それは、3年前の僕自身と比べて、知識またはホームページ・Webサイトを作る上でのスキルが格段に向上していることが要因です。
やはり当初のコンセプトとして制作費無料を掲げてましたが、自分の仕事が回らなくなってきたというのもひとつの要因です。これらの点からも、制作費無料というプランの部分だけを、独立させた自サイトを作るというのは去年から考えていました。
ターゲットを絞りたかった
1日500円、月額15,000円というコンセプトというのは、今でも良いものと考えていて、そこは変更を加えたくありませんでした。ですので、誰彼構わずこういったサービスを提供するというのではなく、大きな制作費を払うことが難しい個人事業主の方限定のサービスとさせていただきました。
また、今回の新サイトへ移行するにあたり、月に3名様までという制限も設けさせていただきました。
わかりにくさの排除
当サイトでは3つの制作プランを設けてましたが、1つだけ制作費無料というプランというのがありました。
これは初見の人からみるとわかりにくい価格設定だったのかなというのも1つの要因でした。価格を表示しているページというのは、Webサイトの中でも非常に重要なページになってくるので、極力「わかりにくさ」というのを排除したかったのです。
自分のスキルが上がったので、自由に作りたかった
Web制作をする人は基本的に、何かしらの制限がありながら制作していることが大多数です。例えば、それは「予算」という制限であったり、クライアントさんの考える「デザイン」と言う制限であったり、「時間的コスト」などの制限があります。（まぁ、それが普通なんですけどね）
逆に言えば、Web制作者が自由に何の制限もなく、Web制作できるという機会は、自分自身で何かを作るということ以外にないのです。これは僕にとって非常に楽しくもあり、スキル向上の上でもチャレンジングなものでした。
WordPressで、しかしプラグインは限定的に
現状でも、仕事の9割はWordPressを使用した、レスポンシブサイトと言うのが基本です。WordPressという仕組みは、非常にいろいろなことを簡単にしてくれます。例えば、テーマを自分で探してくるということで、ある程度形が整ったWebサイトらができたり、何が機能をつけるといったようなこともプラグインを導入することで簡単に実装できます。
ただし、WordPressにも弱点があります。それは普通のhtmlサイトに比べると、その読み込み速度と言うのは遅い傾向にあります。そういった弱点を補うためにも普段からWordPressプラグインを使うというのは自分が制作する上では、最終手段であり、まずはjQueryのプラグインでできることは、jQueryで実装しています。（もちろん、jQueryよりCSSファーストですが）
ちなみに、今回使用したWordPressプラグインこちらの４つでした。
Contact Form 7
言わずもしれたフォーム作成を簡単にしてくれるプラグイン。フォームを作る上では欠かせないWordPressのプラグインです。
Akismet
こちらはスパム対策のプラグイン。WordPressをダウンロードした時に初期でダウンロードされているプラグインないうちの1つです。WordPressの弱点であるスパム対策を簡単にしてくれるプラグインです。
EWWW Image Optimizer
このプラグインは、画像を圧縮するプラグインです。基本的に、Web制作で使用する画像はローカルで圧縮してから使用していますが、Webサイトのスピードを重視するためにも、こちらのプラグインを使用してさらに圧縮をかけております。
LiteSpeed Cache
このプラグインは、先日のWordCampでのセッションで知ったプラグインです。いわゆるキャッシュに関連するプラグインです。僕が使用しているMixHostが推奨しているプラグインで、MixHostと相性抜群の最高のキャッシュプラグインです。
2018年のWordCampについてのレポートはこちら
https://livalest.com/blog/wordcamp-osaka2018
MixHostについての記事はこちら
https://livalest.com/blog/https
WordPressのサイトを作る上で、プラグインを4つしか使用していないというのは、かなり少ないほうでは無いでしょうか。(まぁ内容コンテンツが少ない小規模サイトっていのも、もちろんありますが)
今回使用したjQueryプラグイン
今回使用したjQueryプラグインも備忘録をかねてまとめました。
FadeThis
要素がふわっとフェイドインしてくれる動きをつけることができるプラグインです。できることが限られている分、実装がめちゃくちゃ簡単。
Paroller.js
今回のWebサイトで必ず実装しようと考えていたのがパララックスです。これこそ普段の仕事ではあまり使う機会がなく、触れてこなかったのでこの機会に触ってみました。
このParoller.jsは縦方向のパララックスを実装するだけではなく、珍しい横方向のパララックスを実現します。
今回のサイトでは、英語のタイトル部分と重なるような形で日本語のリード文をパララックスで実装したり、実績の部分を横方向のパララックスを使用して実装しています。
simpleTicker.js
こちらは簡単なニュースピッカーを実装するプラグインです。デザインも3つ選べます。新規サイトでは、メインビジュアルの下に、ニュースを表示させるというような用途で使用をしています。
fakeLoader.js
こちらはローディングのプラグインです。普段はあまり実装することがないのですが、今回のデザインが全てのコンテンツをスクロールできるようなデザイン（ランディングページ）になっているため、読み込み速度がやはりどうしても遅くなる傾向があります。ですので、今回はローディングを実装しようと考えていて、たどり着いたのがこちらのfakeLoader.jsでした。
種類も6種類あり、背景色も自由自在に帰れるためいろいろなWebサイトで使えそうなプラグインです。
Full-Screen Pushing Navigation
こちらもクールでかっこいいフルスクリーンのスマホメニューを探していて見つけたプラグインです。ハンバーガーメニューを押した時のアニメーションがかっこよくこちらも汎用的にいろいろなWebサイトで実装ができそうなプラグインです。
今回のまとめ
どうしても日頃の案件だけでは、自分のスキル内で完結する仕組みができてしまっています。しかし、「自分のサイトを作る時間」を作ることで、時間的にも費用的にも、普段はできないようなができるため、通常のWebサイトを構築するより面白いことを発見する機会にもなります。新しくWeb自分のイトを作ることで得た知見は、通常のWebサイト構築に還元できるため、またどこかのタイミングで作れればいいなと改めて思いました。
引き続きLIVALESTをこれからもよろしくお願いいたします。
私は大阪でホームページ制作事業をしています。
もし、ご興味ありましたら、下記のリンクからお問い合わせください。
