新規Webサイトのリリースについて、その理由と使用プラグインを紹介

新規Webサイトのリリースについて、その理由と使用プラグインを紹介

みなさま、お元気でしょうか?
僕はというと、忙殺の日々の中、今年の目標の1つでもあった「新規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プラグインこちらの4つでした。

Contact Form 7

言わずもしれたフォーム作成を簡単にしてくれるプラグイン。フォームを作る上では欠かせないWordPressのプラグインです。

お問い合わせフォームプラグイン。シンプル、でも柔軟。
Akismet

こちらはスパム対策のプラグイン。WordPressをダウンロードした時に初期でダウンロードされているプラグインないうちの1つです。WordPressの弱点であるスパム対策を簡単にしてくれるプラグインです。

Akismet はコメントをチェックし、迷惑なコンテンツからあなたとサイトを守るために、グローバルなスパムデータベースに対して問合せフォームに連絡します。
EWWW Image Optimizer

このプラグインは、画像を圧縮するプラグインです。基本的に、Web制作で使用する画像はローカルで圧縮してから使用していますが、Webサイトのスピードを重視するためにも、こちらのプラグインを使用してさらに圧縮をかけております。

Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.
LiteSpeed Cache

このプラグインは、先日のWordCampでのセッションで知ったプラグインです。いわゆるキャッシュに関連するプラグインです。僕が使用しているMixHostが推奨しているプラグインで、MixHostと相性抜群の最高のキャッシュプラグインです。

ページの読み込み時間を短縮します。LiteSpeed Cache の高性能なページキャッシュを使用して、より高速なサイトを構築しましょう。簡単にセットアップできます。 使いや...

2018年のWordCampについてのレポートはこちら

WordCamp Osaka2018に参加してきました!今回はかなりビジネスに特化したセッションが多く、学びも多かったので、自分自身の思考の整理も兼ねてブログ書かせていただき...

MixHostについての記事はこちら

この仕事を始めてずっと何となく、さくらサーバーを使用していました。さくらサーバーは、ホスティングサービス業界では、日本一といっても良いぐらい最大手なんですが...

WordPressのサイトを作る上で、プラグインを4つしか使用していないというのは、かなり少ないほうでは無いでしょうか。(まぁ内容コンテンツが少ない小規模サイトっていのも、もちろんありますが)

新規Webサイトのリリースについて、その理由と使用プラグインを紹介

今回使用したjQueryプラグイン

今回使用したjQueryプラグインも備忘録をかねてまとめました。

FadeThis

要素がふわっとフェイドインしてくれる動きをつけることができるプラグインです。できることが限られている分、実装がめちゃくちゃ簡単。

配布サイト

参考サイト

スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。使い方がとってもシン...
Paroller.js

今回のWebサイトで必ず実装しようと考えていたのがパララックスです。これこそ普段の仕事ではあまり使う機会がなく、触れてこなかったのでこの機会に触ってみました。
このParoller.jsは縦方向のパララックスを実装するだけではなく、珍しい横方向のパララックスを実現します。
今回のサイトでは、英語のタイトル部分と重なるような形で日本語のリード文をパララックスで実装したり、実績の部分を横方向のパララックスを使用して実装しています。

配布サイト

paroller.js - Parallax scrolling jQuery plugin

参考サイト

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパ...
simpleTicker.js

こちらは簡単なニュースピッカーを実装するプラグインです。デザインも3つ選べます。新規サイトでは、メインビジュアルの下に、ニュースを表示させるというような用途で使用をしています。

配布サイト

jquery.simpleTicker.js - Simple ticker plugin using jQuery

参考サイト

シンプルな News Ticker を探していたところ、条件にピッタリ合ったプラグインを見つけたので紹介します。「Webサイト上の限られたスペースを有効活用できる」ことがウ...
fakeLoader.js

こちらはローディングのプラグインです。普段はあまり実装することがないのですが、今回のデザインが全てのコンテンツをスクロールできるようなデザイン(ランディングページ)になっているため、読み込み速度がやはりどうしても遅くなる傾向があります。ですので、今回はローディングを実装しようと考えていて、たどり着いたのがこちらのfakeLoader.jsでした。
種類も6種類あり、背景色も自由自在に帰れるためいろいろなWebサイトで使えそうなプラグインです。

配布サイト

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

参考サイト

## ローディング何使ってる?昨年末からWebアプリケーションを作成していて、ローデイングが必要になり、JQueryで実装していたのですがあまりしっくりこずに、悩んでい...
Full-Screen Pushing Navigation

こちらもクールでかっこいいフルスクリーンのスマホメニューを探していて見つけたプラグインです。ハンバーガーメニューを押した時のアニメーションがかっこよくこちらも汎用的にいろいろなWebサイトで実装ができそうなプラグインです。

配布サイト

参考サイト

ハンバーガーメニューをクリックすると横からフルスクリーンのナビゲーションが出てくるプラグインの使い方です。ハンバーガーメニューにマウスオーバーした時、クリッ...

今回のまとめ

どうしても日頃の案件だけでは、自分のスキル内で完結する仕組みができてしまっています。しかし、「自分のサイトを作る時間」を作ることで、時間的にも費用的にも、普段はできないようなができるため、通常のWebサイトを構築するより面白いことを発見する機会にもなります。新しくWeb自分のイトを作ることで得た知見は、通常のWebサイト構築に還元できるため、またどこかのタイミングで作れればいいなと改めて思いました。
引き続きLIVALESTをこれからもよろしくお願いいたします。



コメントは受け付けていません。