サイトをリニューアルしました。実は？サイトをリニューアルするつもりはなかったんですが、インターネットでマーケティングをする上でランディングページが作りたくて、色んなサービス、ツールを試しました。結論から言うと、自前でシステムを構築することになり、機能の検証のため、実験台としてサイトをリニューアルしました。 自前での構築を考える ランディングページ作成ツールを構築する上で、いくつかのルールを決めました。 1．HTML、CSSの知識が無い人でもWebページを作れること。（ノンコーディング）2．Web上で提供されているサービスよりも柔軟性と拡張性を持たせること。※利用出来る対象を初心者から中級者までを広く対象とする 今回奇しくもコロナ過の影響で、外出規制がかかり人と接することが出来ず、自粛期間がこのタイミングで訪れたことも大きかったです。ここまでカタチにするのに3ヶ月を要しましたがコロナ過の自粛期間がなければ構築することもなかったと思うと、複雑な気持ちです。以下の動画が、今回のページリニューアルで構築したページ作成ツールの様子です。 https://youtu.be/8CVq5YmHzlU ポイント 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...