サイトをリニューアルしました。
前回は4年前開業した際につくったもので、改善を重ねつつ運営してきましたが、この夏すべて一新してみました。
デザインから実装まで、色々な構想があったので全て試してみました。
結果的にとてもシンプルで、中身としては以前のサイトとあまり変わらないものに落ち着きました。しかし確実に、今のわたしの等身大のサイトに生まれ変わったように思います。
制作にあたり、制作者として大先輩であるお二方にご相談させていただく機会がありました。何度もお時間いただきました。。！本当にありがとうございました。
的確な助言に感嘆しつつ、また、客観的な意見の重要性も改めて感じました。
ウェブサイトをつくることは、その事業や会社、人を知ること。そしてそれを表現すること。だから面白いんだよなあと、自身のサイトをつくる中で改めて感じた良い時間になりました。
実装について
今回、実装はWordPressのFSEで。
ノーコードとコーディングのハイブリッドな方法で構築したのですが、これってもしかして、非エンジニアにとって制作の幅が広がる構築方法なのでは！と思ったので、共有することにします。
大まかな流れ
- アプリケーションLocalを使用しローカル環境を構築
テーマファイルの更新（コーディング）がすぐに反映してくれるので、久しぶりに使ったけれど、やっぱりLocal優秀だな。
- オリジナルテーマ化
コアのテーマ“Twenty-Twenty-Five”をベースに、プラグイン“Create Block Theme”で複製してオリジナルテーマ化。
▶︎ ありがたポイント
オリジナルテーマの大枠がさくっとできちゃう！HTMLコーディング→WordPress化がスムーズにできない（FSEは全くできない）非エンジニアのわたしにとって神すぎるプラグイン。
- テンプレートは管理画面で作成
ここでもHTMLコーディング→WordPress化をブロックエディタで実装して省エネ！
▶︎ 実装ポイント
あくまでもHTMLを書くイメージで。使用するブロックは主に「段落」「グループ」「画像」など。管理画面でのスタイル設定はしません。
- スタイルはコーディングでごりごりと書く
テーマファイルの中に追記用のCSSファイルを格納し、functions.phpで読み込みます。
▶︎ 実装ポイント
テンプレートをシンプルなブロックでつくったのはこれが理由。CSSが書きやすいのと、管理しやすい。
管理画面でスタイル設定をすることはHTMLタグ内にスタイルを記述することと同意なので、だったらクラス名付与してCSSファイルで管理した方がスムーズだよね、ということです。
- その他JSファイルやPHPファイルの追加も自由自在
これで実現したのは以下。- メガメニュー
- 制作実績一覧のアイキャッチに動画を実装
- その他インタラクション
- テスト環境にアップロード
プラグイン“updraft plus”を使用して本番サーバー内のテスト環境にアップロード。 - 本番公開！
特にアイキャッチに動画を実装するのは手こずりました。たびたびChat GPTに協力してもらいつつ、理想のかたちに実装できてとても嬉しいです。。！
FSEによって、これまで自分で実装するにはハードルの高かった内容も、スムーズに再現できるようになったことを実感。完全なノーコードではありませんが、だからこそ、カスタマイズも自在にできるのがWordPressの良さですね。
気持ち新たに、サイトの更新もがんばります！