サイトリニューアル

サイトをリニューアルしました。実は?サイトをリニューアルするつもりはなかったんですが、インターネットでマーケティングをする上でランディングページが作りたくて、色んなサービス、ツールを試しました。
結論から言うと、自前でシステムを構築することになり、機能の検証のため、実験台としてサイトをリニューアルしました。

自前での構築を考える

ランディングページ作成ツールを構築する上で、いくつかのルールを決めました。

1.HTML、CSSの知識が無い人でもWebページを作れること。(ノンコーディング)
2.Web上で提供されているサービスよりも柔軟性と拡張性を持たせること。
※利用出来る対象を初心者から中級者までを広く対象とする

今回奇しくもコロナ過の影響で、外出規制がかかり人と接することが出来ず、自粛期間がこのタイミングで訪れたことも大きかったです。ここまでカタチにするのに3ヶ月を要しましたがコロナ過の自粛期間がなければ構築することもなかったと思うと、複雑な気持ちです。
以下の動画が、今回のページリニューアルで構築したページ作成ツールの様子です。

ポイント

1.WordPressをベースにして構築。
2.ネット上で提供されているフレームワークやアニメーションライブラリなど、有能なものを組み込んだ。
3.HTMLやCSSを知らなくても良い感じのページがかんたんに作れるように構築した。
4.柔軟性と持続性を考え、後からの機能の追加やメンテナンスを容易にした。

このツールを構築することで、ボタンをクリック・数値を入力するだけで、HTMLやCSSで出来るデザインの大半が誰でも簡単に作成出来るようになりました。入力した数値はリアルタイムに反映され、画面で確認が出来ます。画像の編集、色相、彩度、明度などの変更、アニメーションの種類、表示時間、間隔などなど、ありとあらゆる設定がHTMLやCSSを知らなくても作成出来ます。

動画で説明しているウィジェットだと13個のレイヤーで構成されていて、それぞれ個別に表示位置やアニメーションの開始タイミングなどが設定されています。

また罫線や囲み枠、スニペットやテンプレートの登録と再利用が容易になり、呼び出して変更したり、レイヤーの追加、デスクトップやタブレット、モバイルなど端末ごとでの表示・非表示の切替や、それぞれの端末ごとでの表示内容や挙動の変更など、ホームページを作る上で必要なことはほとんど可能です。今回は協会のページということもあって、ストリクトにデザインしましたが、華やかなデザインが好まれる業種ではより親和性の高さを発揮すると思います。

たぶん一番恩恵を受けるのは、コーディングが出来ないデザイナーさんや、グラフィックデザイナー、イラストレーターさんではないかな?と思います。 ホームページを彩る素材と、レイアウトさえ考えることが出来れば、あとはあつまれ どうぶつの森のように、ぽちぽち操作するだけで簡単に作れるようになっています。

このページ作成ツールについて、当協会に加盟の協会員の方への無償提供から始め、フィードバックを反映させつつブラッシュアップさせていきたいと思います。

サイト構築の為に利用したツール

今回ご紹介するのは有名なサイトばかりなので、普段からページ制作に携わっていると知ってる人も多いかもしれませんが、製作環境を一新・見直す上でこんなページやサービスがあるんだ!?と驚きました。
初めて知ったと同時に、今回の構築においてとても役に立ったので、これからホームページを作る方への情報共有として簡単にまとめておきます。

TinyPNG

透明の要素が含まれるPNG画像を圧縮するのに利用しました。PNGを圧縮してくれるツールは色々あり、他のWebサービスや以前から使っていたWindowsのアプリとも比較しましたが、圧縮率と圧縮後の見た目の良さを比較した結果、TinyPNGが一番好みの画像を書き出してくれました。
サイト上でアニメーションをする上で、透明の要素を持ったPNGの存在は不可欠です。

ポイント

Webでの利用や、Photoshopのプラグイン、WordPressのプラグインなど色々用意されていて、WordPressのプラグインだと有料のプランに加入してもアップロード数が500を超えた月のみ有料(かつ従量制)なので、超えなければ費用も掛からず財布にも優しいです。

普通のホームページ運用だと1ヶ月500枚も画像をアップロードすることはあまりないのでオススメです。個人的にJPGの画質は個人的に好みではなかったので、PNGの圧縮のみ利用しています。

Ultimate CSS Gradient Generator

見た瞬間思ったのは、あれ?Photoshopのグラデーションツール?でした(笑)
HTML5+CSS3が普及してグラデーションによる表現が増えました
とはいえ、普通に数値入力で作るのは慣れも必要で気が滅入りますし、エディターでのサポート機能にも限界があります。

ポイント

グラデーションですが、自分で作ろうと思ってもなかなかきれいなグラデーションを考えるのは難しくて悩むことも。
そんな時は「photoshop gradients」でGoogle先生に聞いて見ると色んなグラデーションを発見出来るので、参考にして作ってみてください。

Animesta

keyframesを使ったアニメーションをWeb上で作成出来るサービス。アニメーションのタイプを選択し、再生時間、遅延時間、再生回数などを指定することで簡単にアニメーションパターンを作成が出来ます。
一般的なアニメーションよりちょっとおしゃれな感じのアニメーションが揃っています。

ポイント

色々触ったら右上にあるGenerateCodeでCSSとKeyFlamesが作成されるので、そのまま貼り付けるだけでホームページに使用できます。KeyFlamesを見るだけでも参考になりますよ。
コードを利用する際はBSDライセンスなので、著作権表記を削除しないように注意しましょう。

animcss

Animate.css

このJCSTAにも導入しました。標準で110種類以上のアニメーションパターンが登録されていて、アニメーション名をフックに要素に対して指定されたアニメーションを実行してくれます。

揺れまーす!

こんな感じです(笑)単純なアニメーションを実行させるにはオススメのCSSアニメーションライブラリです。

ポイント

Animation.cssはwow.jsやscrolla.jsなど、アニメーションを実行できるJavaScriptとの連携も多いので、サイトへの導入がしやすいです。
こんなにたくさんのアニメーションパターンを1から作るとなると途方もないですが、このような形で提供いただけるのはありがたいですね。クリエイターの方々には本当に頭が下がります。

ease

イージング関数チートシート

最近、「○○ チートシート」というキーワードで検索する癖がついてきたのですが、こちらもそのチートシートです。
アニメーションの動きに関わるイージング関数ですが、正直「easeInElastic」と言われても字面からどんな動きなのかを想像するのは困難です・・・・
そんなイージング関数の動きをグラフと実際のモーションを一覧表示から確認でき、アニメーションを作成する上で参考になるのは間違いありません!

ポイント

直線的な動きでは無機質で不自然な動きに見えるため、緩急を付けた動きにすることでで違和感を無くすことが出来ます。

cubic-bezier

イージング関数に続いて3次ベジェ曲線でイージングを設定できるcubic-bezierです。これもまた自身で数値入力して動きを予測することは大変困難です。そのcubic-bezierを視覚的に作成することが出来るのがこちらのサイト。
Photoshopのトーンカーブのようなビジュアルで調整すればリアルタイムに反映され、Preview & compareのとなりのGOをクリックすることで実際のアニメーションを確認することができ、納得のいく動きになればCOPYを押すだけでOK!

ポイント

イージングとはまた違う、緩急のついた動きをアニメーションに付与することが出来るので、オブジェクトに息を吹き込みたい方におすすめです!前述のAnimation.cssにも使えて表現の幅が広がります♪ 直線で画一的な動きは不自然さを感じますが、緩急のある動きはより自然に見えます。アニメーションさせる上でとても参考にさせていただきました。

今までアニメーションに着目していなかったこともあり、改めて見返してみると、アニメーションに関わる項目がほとんどでした。今回、ランディングページを生成するツールとして、WordPressをカスタマイズしましたが、HTMLやCSSがわからないスタッフでも、ドラッグ&ドロップやプルダウン、クリックなどでページが作成出来るようカスタマイズしました。

何よりあつまれどうぶつの森ではありませんが、ホームページがわからない一般の事務員の方でもこのサイトと同レベルのページがかんたんに作れるようになりました。他で見かけるデザインもほとんどがHTML・CSSを触らなくても作成可能です。

普通にコーディングをしていたら、1週間は掛かるような作業量も今では1~2日で作成出来ます。
構築に3ヶ月を要しましたが、その後の時間短縮を考えると十分に取り返せますし、何よりホームページの構築を検討している協会員に提供することも出来るので、一定の完成を見ることが出来て良かったと思います。